Single path dasharray

Trying to improve the performance of drawing out a bunch of SVG lines by combining them all into a single path element and interpolating one very long stroke-dasharray pattern.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    stroke-width: 1px;
    stroke: #222;
    fill: none;
  }
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
var svg = d3.select("svg"),
    width = 960,
    height = 600;

d3.json("https://d3js.org/us-10m.v1.json", function(err, topo){

var lines = topojson.mesh(topo, topo.objects.states).coordinates;

svg.selectAll("path")
      .remove();

var path = svg.append("path")
      .attr("d", "M" + d3.merge(lines).join("L"));

var start = d3.merge(lengths.map(function(l, i){
      return [0, l.length + l.gap];
    }));

var end = d3.merge(lengths.map(function(l, i){
      return [l.length, l.gap];
    }));

var interpolator = d3.interpolateArray(start, end);

timer = d3.timer(function(t){
      var progress = 2 * Math.min(t % 5000 / 5000, 1 - t % 5000 / 5000);
      path.attr("stroke-dasharray", function(d){
          return interpolator(progress);
        });
    });

});

function distanceBetween(a, b) {
  var dx = a[0] - b[0],
      dy = a[1] - b[1];

return Math.sqrt(dx * dx + dy * dy);
}

</script>

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v2.min.js