Repeat transition of dashed line with d3.js

const width = 300,
  height = 50;
const dashArray = [8, 5];
const dashArrayLength = d3.sum(dashArray);
let pathLength;
const svg = d3.select("svg")
  .attr("viewBox", [0, 0, width, height]);

svg.append('path')
  .attr('d', d3.line()([
    [100, height / 4],
    [200, height / 4]
  ]))
  .attr('stroke', 'black')
  .attr('fill', 'none')
  .attr("stroke-dasharray", function() {
    pathLength = this.getTotalLength();

    // Find how often `dashArrayLength` fits within `pathLength`
    const repeat = Math.ceil(pathLength / dashArrayLength);
    const array = (dashArray.join(" ") + " ").repeat(repeat);

    // Prepend pathLength to give it a complete empty space beforehand
    return "0 " + pathLength + " " + array;
  })
  .attr("stroke-dashoffset", "0")
  .transition()
  .on("start", function repeat() {
    d3.active(this)
      .transition()
      .duration(4000)
      .attr("stroke-dashoffset", -pathLength)
      .transition()
      .duration(1000)
      .attr("stroke-dashoffset", "0")
      .on("start", repeat);
  });

svg.append('path')
  .attr('d', d3.line()([
    [100, height / 2],
    [200, height / 2]
  ]))
  .attr('stroke', 'black')
  .attr('fill', 'none')
  .attr("stroke-dasharray", function() {
    pathLength = this.getTotalLength();

    // Prepend pathLength to give it a complete empty space beforehand
    return "0 " + pathLength;
  })
  .transition()
  .on("start", function repeat() {
    d3.active(this)
      .transition()
      .duration(4000)
      .attrTween("stroke-dasharray", function() {
        return function(t) {
          const tweenPathLength = pathLength * t;

          // Find how often `dashArrayLength` fits within `tweenPathLength`,
          // this time rounding down
          const repeat = Math.floor(tweenPathLength / dashArrayLength);
          const array = (dashArray.join(" ") + " ").repeat(repeat);

          // See how much space there is still left over to draw a final,
          // maybe partial, stripe
          const finalStripe = Math.min(
            tweenPathLength - repeat * dashArrayLength,
            dashArray[0]
          );

          // Finally, append a large empty space at the end
          return array + [finalStripe, pathLength];
        }
      })
      .transition()
      .duration(1000)
      .attr("stroke-dasharray", "0 " + pathLength)
      .on("start", repeat);
  });

svg.append("text")
  .attr("x", 30)
  .attr("y", height / 4)
  .attr("font-size", "0.4em")
  .text("Moving effect")

svg.append("text")
  .attr("x", 30)
  .attr("y", height / 2)
  .attr("font-size", "0.4em")
  .text("Growing effect")

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>