JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="400" height="400" />

JavaScript

var v= document.getElementById('c');
var c= v.getContext('2d');
var w= v.width, w2= w/2;
var num= 20, M2= Math.PI*2, da= M2/num;
draw();
var bw= 10;
var time= 0;
function draw()
{
    v.width= w;
    c.beginPath();
    c.fillStyle= 'black';
    circle(w2,w2,w2);
    c.lineWidth= 1.5;
    c.strokeStyle= c.fillStyle= 'white';
    var a= 0;

    for (var i=0; i< num; i++){
        x=w2+Math.cos(a)*Math.sin(time+i*Math.PI/num)*(w2-bw);
        y=w2+Math.sin(a)*Math.sin(time+i*Math.PI/num)*(w2-bw);
        circle(x,y,bw);
        
        c.moveTo(w2,w2);
        c.lineTo(x,y);
        c.stroke();
        
        a+= da/2;
    }
    
    time+=0.03;
   requestAnimationFrame(draw);
}

function circle(x,y,r)
{
    c.beginPath();
    c.arc(x, y, r, 0, M2);
    c.fill();
    
}