JSFiddle - React, Tailwind, and code Playground

JavaScript

var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)

var path = svg.append("path")
      .attr("d", "M20,20C400,20,20,400,400,400")
      .attr("fill", "none")
      .attr("stroke", "black");

var pathEl = path.node();

var pathLength = pathEl.getTotalLength();
console.log('path length: ', pathLength);

var pathPoint = pathEl.getPointAtLength(pathLength*0.8);
console.log('path point: ', pathPoint);

var point = svg.append("svg:circle")
        .style("fill", "red")
        .attr("r", 5)
        .attr("cx", pathPoint.x)
        .attr("cy", pathPoint.y);