JSFiddle - React, Tailwind, and code Playground

by anvaka

HTML

<svg id='scene' xmlns='http://www.w3.org/2000/svg'>
</svg>

JavaScript

var x = 10; var dx = 1;
var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
c.setAttributeNS(null, 'cy', 10);
c.setAttributeNS(null, 'r', 10);
document.getElementById('scene').appendChild(c);

var updatePos = (function (circle) {
    var pos = circle.cx.baseVal;
    return function (newValue) {
        pos.value = newValue;
    }
})(c);

render();

function render() {
    requestAnimationFrame(render);
    x += dx;
    if (x < 0 || x > 300) { dx *= -1; x += dx; }
    updatePos(x);
}