JSFiddle - React, Tailwind, and code Playground

by xerxesnoble

HTML

<!-- USING SMIL -->
<svg width="500" height="250" viewBox="0 0 500 350">
  <path id="myPath1" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3  c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
    c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5"/>
    <path class="drawnPath389-icon" style="transform:translate(-24px,-24.25px) rotate(180deg) scale(1);transform-origin:50% 50%" d="M26.2,22.2l3.2-2.3c0.4-0.3,0.6-0.7,0.7-1.2c0-0.4-0.1-0.8-0.3-1.1c-0.6-0.8-1.6-0.9-2.4-0.4l-7,5.2 c-0.8,0.6-0.9,1.8-0.2,2.5l6.1,6.3c0.6,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-3-2.9l-2-2L26.2,22.2z" fill="white" stroke="black" stroke-width="3px">
 <animateMotion dur="4.220855712890625s" begin="0" fill="freeze" rotate="auto" repeatCount="indefinite"><mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#myPath1"></mpath></animateMotion>   
    </path>
</svg>

<!-- USING CSS -->
<svg width="500" height="250" viewBox="0 0 500 350">
  <path id="myPath2" fill="none" stroke="#000000" stroke-miterlimit="10" d="M91.4,104.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3  c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7
    c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5
    c1.9-2.1,3.7-5.5,6.5-6.5"/>
    
    <path class="drawnPath389-icon" style="transform:translate(-24px,-24.25px) rotate(180deg) scale(1);transform-origin:50% 50%" d="M26.2,22.2l3.2-2.3c0.4-0.3,0.6-0.7,0.7-1.2c0-0.4-0.1-0.8-0.3-1.1c-0.6-0.8-1.6-0.9-2.4-0.4l-7,5.2 c-0.8,0.6-0.9,1.8-0.2,2.5l6.1,6.3c0.6,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-3-2.9l-2-2L26.2,22.2z" fill="white" stroke="black" stroke-width="3px"></path>
</svg>