JSFiddle - React, Tailwind, and code Playground

by Sean Furrh

HTML

<div>
  <svg width="200" height="200">
    <circle cx="50" cy="50" r="20" fill="blue" stroke="white">
      <animate attributeType="XML" attributeName="cx" from="50" to="120"
        dur="10s" onend="getNewCoords(this)"/>
       
    </circle>
  </svg>
</div>

JavaScript

function getNewCoords(anim){

	var x = Math.random() * 50;
  var y = Math.random() * 50;
  
  $(anim).attr("cx",x).attr("cy",y);
  

}