JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="buttonClick()">Click me</button>
<svg preserveAspectRatio="xMidYMid meet" width="auto" height="auto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" style="background-color: #0010ff3b;">
<path d="M6.25 100 L6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4" stroke='black' strokeDasharray="5, 5" fill='transparent'></path>
  
  <circle id="circle" r="5" cx="0" cy="0" stroke="black" stroke-width="3" fill="red" >
    <animateMotion id="motion1" begin="indefinite" dur="1s" fill="freeze" path="M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25">
    </animateMotion>
  </circle>  
</svg>

JavaScript

var currentIndex = 0;

const pathArray = [
	"M6.25 100 L6.25 100 L6.25 66.75 Q6.25 56.25 25 56.25", 
  "M25 56.25 L26.25 56.25 Q31.25 56.25 31.25 50 L31.25 12.5 Q31.25 6.25 36.25 6.25", 
  "M36.25 6.25 L62.75 6.25 Q68.75 6.25 68.75 12.5",
  "M68.75 12.5 L68.75 37.75 Q68.75 43.75 74.75 43.75 L88.75 43.75", 
  "M88.75 43.75 Q93.75 43.75 93.75 37.75 L93.75 4"];

function buttonClick() {
	const motion1 = document.getElementById("motion1");
  motion1.setAttribute("path", pathArray[currentIndex]);
  motion1.beginElement();
  currentIndex++;
}