JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>
 <circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" onmouseover="changeImage(this)" >
 </circle>
</svg>
<script>
    function changeImage(circle) {
        while (circle.firstChild) {
            circle.removeChild(circle.firstChild);
        }
     circle.setAttributeNS(null, "fill", "blue");
        var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
        animate.setAttributeNS(null, "attributeName", "r");
        animate.setAttributeNS(null, "values", "20;0;20");
        animate.setAttributeNS(null, "dur", "6s");
        animate.setAttributeNS(null, "repeatCount", "indefinite");
        circle.appendChild(animate);
}
</script>