JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<svg>
<defs>
    <path id="thepath" fill="none" stroke="#000000" d="M25,0 L200,200" />
</defs>
<rect x="25" y="0" width="50" height="100" fill="slategrey">
      <animateTransform id="one"
                        attributeType="xml"
                        attributeName="transform"
                        type="rotate"
                        from="0 50 50"
                        to="360 50 50"
                        dur="1s"
                        repeatCount="indefinite" 
                        end ="onemove.end"   
    />

    <animateMotion id="onemove" dur="3s" fill="freeze">
        <mpath xlink:href="#thepath"/>
    </animateMotion>
</rect>
</svg>