JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <path stroke="#000000" stroke-width="5" d="M 0 0 L 100 50" id="path">    
    </path>
    <circle fill="#0000FF"cx="10" cy="50" r="10" id="circle">
    </circle>
</svg>

CSS

path, circle {
      transition: all 1s;
      -webkit-transition: all 1s;
}

JavaScript

var type = true;

setInterval(function() {
    $("#path").attr('d', type ? "M 0 0 L 50 100" : "M 0 0 L 100 50");
    $("#circle").attr('cx', type ? "40" : "10");
    type = !type;
}, 1000);