JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<svg>
    <defs>
        <radialGradient id="MyGradient">
            <stop offset="10%" stop-color="gold" />
            <stop offset="95%" stop-color="green" />
        </radialGradient>
    </defs>
    <ellipse id='ellipseshape' cx="0" cy="0" ry='10' rx="10" http://jsfiddle.net/Darbicus/ZEe8U/1/#run fill="url(#MyGradient)" stroke="black" stroke-width="1">
        <animateMotion id='boxpath'  path="M100,200 S100,100 250,100 S250,200 100,200z" dur="3s" repeatCount="indefinite" rotate="auto" fill='blue'></animateMotion>
    </ellipse>
</svg>

JavaScript

var path = document.getElementById('boxpath');
    document.onclick = function (e) {
        var p = path.getAttribute('path'),
            d = path.getAttribute('dur'),
            l = p.split(' '),
            L = l[l.length - 1];
        //l.reverse().splice(0, 1);
        p = l.splice(0).reverse().join(' ');

        console.dir(path.__proto__);
        path.setAttribute('path', p + " " + ((l.reverse()[0].indexOf('S') === -1) ? 'S':"") + e.pageX + "," + e.pageY + " " + L ).trim());
        path.setAttribute('dur', (parseInt(d, 10) + 1) + "s");
    }
    var el = document.getElementById('ellipseshape');
    window.requestAnimationFrame(changer);

    function changer() {
        var w = el.getAttribute('rx'),
            h = el.getAttribute('ry');
        el.setAttribute('rx', Math.abs(parseFloat(w) + Math.random() - .5));
        el.setAttribute('ry', Math.abs(parseFloat(h) + Math.random() - .5));
        window.requestAnimationFrame(changer);
    }