JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="320px" height="320px" viewBox="0 0 320 320">

  <path class="stage1" id="stage1-1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M160,220.499c-11.284,0-20.432-9.147-20.432-20.432v-40.868"/>
  <path class="stage1" id="stage1-2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M180.432,159.199v40.868c0,11.284-9.147,20.432-20.432,20.432"/>

  <circle  r="8" fill="red">
    <animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
      <mpath xlink:href="#stage1-1"/>
    </animateMotion>
  </circle>
  <circle r="8" fill="red">
    <animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
      <mpath xlink:href="#stage1-2"/>
    </animateMotion>
  </circle>
</svg>