JSFiddle - React, Tailwind, and code Playground

by Cody Rank

HTML

<svg id="theSvg" xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='300' height='300'>
</svg>

CSS

svg {
    border: 1px solid black;
}

JavaScript

svgEl = $(document.createElementNS('http://www.w3.org/2000/svg', 'circle'));
svgEl.attr({fill: '#2380c2', cx:'20', cy:'20', r:'10'}).appendTo('#theSvg');

animateEl = $(document.createElementNS('http://www.w3.org/2000/svg', 'animate'));
animateEl.attr({from:"10", to:"20", dur:"3s"}).appendTo('circle');
$animateEl = $("animate")[0];
$animateEl.setAttribute("attributeName", "r");
$animateEl.setAttribute("repeatCount", "indefinite");