JSFiddle - React, Tailwind, and code Playground

HTML

<h1>SVG Animation</h1>
<svg height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="150" height="100" fill="blue" />
    <circle r="100" cx="50" cy="50" fill="red" />
    <polygon points="0,0 50,50 100,0" fill="orange" />
</svg>

<p>
    <a href="http://9px.ir/note/vector-graphic/" target="_blank">Ream more...

CSS

h1{font:italic 1.25em Georgia}

JavaScript

var circle = $('svg circle'), radius = 50, svgInterval = setInterval(
function(){
    radius += 0.9;
    if ( radius > 100 ){
    		radius -=60;
        clearInterval(svgInterval);
        return;
    }
    circle.attr('r', radius);
}, 55);