JSFiddle - React, Tailwind, and code Playground

by tap0ri

HTML

<div id="mydiv"></div>

JavaScript

window.setTimeout(function()
{
    var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg');
    var circle = document.createElementNS('http://www.w3.org/2000/svg','circle');
    circle.setAttribute("cx", "10");
    circle.setAttribute("cy", "10");
    circle.setAttribute("r", "10");
    circle.setAttribute("fill", "blue");
    var ani = document.createElementNS("http://www.w3.org/2000/svg","animateTransform");
    ani.setAttribute("attributeName", "transform");
    ani.setAttribute("attributeType", "xml");
    ani.setAttribute("type", "translate" );
    ani.setAttribute("from", "10");
    ani.setAttribute("to", "100");
    ani.setAttribute("begin", "0s");
    ani.setAttribute("dur", "2s");
    ani.setAttribute("fill", "freeze");
    circle.appendChild(ani);
    svgnode.appendChild(circle);
    document.getElementById('mydiv').appendChild(svgnode);
    
}, 300);