JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.6/d3.js"></script>
<div style="width:500px; height:500px" >
  <div style="position:absolute; left:150px;">
    <svg id="path">
      <path id='line'></path>
    </svg>
  </div>
</div>

JavaScript

const line1 = 'M0,300V-100';
const line2 = 'M0,-300V-100';

const path = d3.select('#line')
	.attr('d', line1 + line2);
const pathLength = path.node().getTotalLength();
console.log('PATH LENGTH:', pathLength);


function _interpolateDashOffset () {;
  const interpolate = d3.interpolateNumber(pathLength, pathLength * 2);
  return () => time => {
    return interpolate(time);
  };
}


d3.select('#line')
  .attr('fill', 'none')
  .attr('stroke', 'black')
  .attr('stroke-width', 8)
  .attr('stroke-dasharray', `${pathLength} ${pathLength}`)
  .transition()
  .ease(d3.easeLinear)
  .duration(2000)
  .attrTween('stroke-dashoffset', _interpolateDashOffset())
  .on('end', () => {
    console.log('path animation ended');
});