Stroke Dash Interpolation (and back)

forked from mbostock's block: Stroke Dash Interpolation

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}

</style>

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", "#ddd")
        .style("stroke-dasharray", "4 4")
		    .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")        
            .styleTween("stroke-dasharray", tweenDash)
            .transition()
              .style("fill", "slateblue")
            .styleTween("stroke-dasharray", tweenBack)
            .transition()
              .on("start", repeat);
          });

</script>

https://d3js.org/d3.v5.js