JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="500" version="1.1" id="svg"><path d="m 480,200 c 100,0 0,250 100,200 100,-50 0,-250 100,-300 100,-50 350,100 100,200 -250,100 -350,100 -600,0 -250,-100 0,-250 100,-200 100,50 0,250 100,300 100,50 0,-200 100,-200" id="wiggle" class="weirdPath"/> </svg>

CSS

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

circle {
  fill: steelblue;
  stroke: #fff;
  stroke-width: 3px;
}

JavaScript

var svg = d3.select("svg");

              var path = svg.select("path#wiggle");
              var startPoints = pathStartPoint(path);

              var marker = []
              startPoints.forEach(function(el,ind){
                marker[ind] = svg.append("circle")
                                .attr("r",7)
                                .attr("transform", "translate(" + el + ")")

                //transitionAll(marker[ind]);                

              });
              
              
              function pathStartPoint(path) {
                var l = path.node().getTotalLength();

                var arrPoints = [];
                var d = path.attr("d");
                var dsplitted = d.split(" ");
                var slug = Math.floor(l/5);
                console.log(dsplitted);
                for(var intIndex=1;intIndex<6;intIndex++){
                    var p = path.node().getPointAtLength(intIndex*slug);
                    arrPoints.push([p.x,p.y]);
                }
                return arrPoints;
              }
              
              
              
              function transitionAll(marker){
                console.log(marker);
                marker.transition()
                         .duration(7500)
                         .attrTween("transform", translateAlong(path.node()))
                        // .each("end", transitionAll(marker));// infinite loop*/
              }
              
              function translateAlong(path) {
                var l = path.getTotalLength();
                return function(i) {
                  return function(t) {
                    var p = path.getPointAtLength(t * l);
                    return "translate(" + p.x + "," + p.y + ")";//Move marker
                  }
                }
              }