JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='render' width='256' height='256'></canvas>

CSS

#render {
    border: 1px solid #000;
}

JavaScript

var canvas = document.getElementById('render');
var ctx = canvas.getContext('2d');

// step of 15 degrees in radians
var step = 5 / (180 / Math.PI);

var render = function() {
    step = (Math.sin(Date.now() / 1000) * 5 + 6) / (180 / Math.PI);
    step = (Math.PI * 2) / (Math.floor((Math.PI * 2) / step) - (Math.floor((Math.PI * 2) / step) % 2));
        
	ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    for(var i = 0; i < Math.floor(Math.PI * 2 / step); i += 2) {
        var a = i * step;
        ctx.beginPath();
        ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 8, a, a + step, false);
        ctx.stroke();
    }
};

setInterval(render, 1000 / 60);