JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<svg id="_3.support" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 227.6 267.3">

  <path class="bg" d="M175.9,201.7v21.7a5.7,5.7,0,0,1-9.8,4.1l-11.8-11.8a8.6,8.6,0,0,0-8.9-2.1A109.8,109.8,0,1,1,179.1,195,7.7,7.7,0,0,0,175.9,201.7Z" fill="#e5e5e5"/>

  <path d="M3.8,109.8a44,44,0,0,1,75-31l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,1,0,0-62.1l-23.1,23.1-8,8L80.7,138.9l-2,2a44,44,0,0,1-75-31.1Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-l"/>

  <path d="M215.9,109.4a44,44,0,0,0-75-30.6l-23.1,23.1-8,8L80.7,138.9l-2,2a43.9,43.9,0,1,1,0-62.1l24.1,24.1,6.9,6.9,29.1,29.1,2,2a43.9,43.9,0,0,0,75-31.5Z" fill="none" stroke="#010101" stroke-linecap="round" stroke-linejoin="round" id="loop-r"/>

  <circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#loop-l"/>
    </animateMotion>
  </circle>

  <circle class="loop-circle" cx="" cy="" r="6" fill="#97d2ad">
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#loop-r"/>
    </animateMotion>
  </circle>

</svg>