JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
  <line x1="5" x2="40" y1="20" y2="20" />
  <circle r="6" cx="165" cy="20" />
  <line x1="5" x2="40" y1="40" y2="40" />
  <circle r="6" cx="165" cy="40" />
  <line x1="5" x2="40" y1="60" y2="60" />
  <circle r="6" cx="165" cy="60" />
  <line x1="5" x2="40" y1="80" y2="80" />
  <circle r="6" cx="165" cy="80" />
  <line x1="5" x2="40" y1="100" y2="100" />
  <circle r="6" cx="165" cy="100" />
</svg>

CSS

line {
  stroke: #333;
  stroke-width: 4px;
  stroke-linecap: round;
}

circle {
  opacity: 0;
  stroke: black;
  fill: none;
  stroke-width: 4px;
}

JavaScript

var lines = d3.selectAll('line');
var circles = d3.selectAll('circle');

function go(i) {
  circles.transition()
    .delay(1000)
    .duration(400)
    .style('opacity', function(_, i2) {
      return i == i2 ? 1 : 0;
    });

  lines
    .transition()
    .delay(500)
    .duration(1000)
    .attr('x2', function(_, i2) {
      return i == i2 ? 150 : 40;
    })
    .on('end', function() {
      go(i + 2 >= lines.nodes().length ? 0 : i + 2);
    });
}

go(0);