Animated subpath

Animating a portion of a larger path with a four-part stroke-dasharray pattern.

forked from veltman's block: Animated subpath

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <style>

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

.bg {
      stroke: #ccc;
      stroke-width: 4px;
    }

</style>
</head>
<body>
<svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="960" height="500">
  <path class="bg" d="M487.1,238.8c91,93,135,175.2,229.9,175.2s171.2-76.3,171.2-171.2S811.9,70.5,717,71.5c-94.9,1-130.1,70.5-216.3,167.3
	C413.7,325,347.2,414,252.2,414S81,337.7,81,242.8S157.3,71.5,252.2,71.5S411.7,162.5,487.1,238.8z"/>
</svg>

var snake = d3.select("svg").append("path").attr("d", d3.select(".bg").attr("d")),
    path = snake.node(),
    totalLength = path.getTotalLength(),
    snakeLength = totalLength * 0.25,
    gap = totalLength - snakeLength,
    duration = 3200;

d3.timer(function(t){

var pos = t % duration / duration,
      dash;

if (pos < gap / totalLength) {
    dash = "0," + (pos * totalLength) + "," + snakeLength +  "," + totalLength;
  } else {
    dash = (totalLength * (pos - (gap / totalLength))) + "," + gap + "," + ((1 - pos) * totalLength) +  "," + totalLength;
  }

snake.attr("stroke-dasharray", dash);

});

</script>

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