JSFiddle - React, Tailwind, and code Playground

HTML

Anim starts in 2s. 5s after anim start it reverts.
<div id="test" style="width:500px;height:1500px;margin:30px 0 0 30px;">
        <svg height="1500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">
            <rect x="20" y="20" id="c1" width="20" height="20" fill="none" stroke="gold">
                <set attributeName="transform" to="200,100,45" begin="2s" dur= "5s" fill = "remove" onbegin="onBeginHndlr(this)" onend="onEndHndlr(this)"></set>                
            </rect>
            <script>
                function onBeginHndlr(set){
                    set.targetElement.setAttribute("transform", "rotate(45,30,30)")
                }
                function onEndHndlr(set){
                    if(set.getAttribute('fill') == "remove")
                        set.targetElement.setAttribute("transform", "rotate(0,30,30)")                    
                }
            </script>
        </svg>
    </div>