Old school D3 from simpler times

All examples By author By category About

kafunk

Full window Github gist

Stroke Dash Interpolation (and spazzy back)

forked from mbostock's block: Stroke Dash Interpolation

forked from kafunk's block: Stroke Dash Interpolation (and back)

<!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>

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