JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg height="300px" width="500px">
    <circle id="mycirc" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" transform="translate(40 40)"/>
</svg>

JavaScript

var snapelem = Snap("svg");
circ = snapelem.select("#mycirc");

var bounce = function (elem, scale, duration, trans) {
    trans.totalMatrix.scale(1);

    elem.attr({
        transform: trans
    });

    elem.animate({
        transform: "s" + scale + "," + scale + trans
    }, duration * 0.33, mina.easeout, function () {
        elem.animate({
            transform: trans
        }, duration * 0.67, mina.easein);
    });
};

var count = 0;

var trans = circ.attr("transform");
setInterval(bounce, 200,circ, 0.8, 500, trans);