JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<div>
<svg id="root" width="300" height="300" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="a">
            <stop stop-color="#53B3E9" offset="0%"/>
            <stop stop-color="#3A71D8" offset="50.614%"/>
            <stop stop-color="#7F3AD8" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
            <stop stop-color="#53B3E9" offset="0%"/>
            <stop stop-color="#3A71D8" offset="50.614%"/>
            <stop stop-color="#7F3AD8" offset="100%"/>
        </linearGradient>
    </defs>
    <g fill="none" fill-rule="evenodd">
        <path d="M17 14a4 4 0 1 0 0 8 4 4 0 0 0 4-4" stroke="url(#a)" transform="rotate(-90 17 18)"/>
        <path d="M25 18a8 8 0 1 0-8 8m0-20C10.373" stroke="url(#b)"/>
        <path d="M10 27 m0-20C10.373 6 5 11.373 5 18s5.373 12 12 12 12-5.373 12-12" stroke="url(#b)"/>
        
        <path d="M1 18c0 8.837 7.163 16 16 16s16-7.163 16-16S25.837 2 17 2" stroke="url(#b)"/>
        <circle stroke="#53B0E9" cx="16.5" cy="2.5" r="1.5"/>
        <circle stroke="#3A71D8" cx="28.5" cy="17.5" r="1.5"/>
        <circle stroke="#4B63D8" cx="13.5" cy="17.5" r="1.5"/>
        <circle stroke="#7D3BD8" cx="17.5" cy="25.5" r="1.5"/>
    </g>
</svg>
</div>

JavaScript

var nodes = {
	patches: document.body.querySelectorAll('svg#root path'),
	circles: document.body.querySelectorAll('svg#root circle')
};
var animSpeed = 2;
var positions = {
	circles: [0, 0, 0, 0],
  patches: [-90, 0, 0, 0]
};

var animRotate = function(type, idx) {
	nodes[type][idx].setAttribute('transform', 'rotate(' + positions[type][idx] + ' 17 18)');
  positions[type][idx] += ((idx - 1) % 2) ? -animSpeed : animSpeed;
}

const animate = function() {
    for(var i = 0; i < 4; i++) {
    	animRotate('circles', i);
      if (nodes.patches[i]) animRotate('patches', i);
    }
    
    requestAnimationFrame(animate);
};

requestAnimationFrame(animate);