D3 Examples - Stroke Dash Interpolation (and spazzy back)

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
​
  path {
    fill: none;
    stroke: #111;
    stroke-width: 3px;
  }
​
</style>
​
  <script src="https://d3js.org/d3.v5.js"></script>
  <script>
​
    var points = [
      [480, 200],
      [580, 400],
      [680, 100],
      [780, 300],
      [180, 300],
      [280, 100],
      [380, 400]
    ];
​
    var line = d3.line().curve(d3.curveCatmullRomClosed.alpha(0.2))
​
    var svg = d3.select("body").append("svg")
        .datum(points)
        .attr("width", 960)
        .attr("height", 500);
        
    svg.append("path")
        .style("stroke-dasharray", "4 8 16 8")
            .style("stroke-linecap", "round")
        .attr("d", line);
    
    svg.append("path")
        .attr("d", line)
        .transition()
          .duration(3500)
          .on("start", function repeat() {
            d3.active(this)
              .style("fill", "tomato")
                .style("stroke","darkslateblue")
              .styleTween("stroke-dasharray", tweenDash)
            .transition()
              .style("stroke-dasharray", "4 8 16 8")
              .style("fill", "slateblue")
                .style("stroke","tomato")       
            .transition()
                .delay(1000)
                .on("start", repeat);
          });
 
    function tweenDash() {
      var l = this.getTotalLength(),
          i = d3.interpolateString("0," + l, l + "," + l);
      return function(t) { return i(t); };
    }
    
</script>
​
    