JSFiddle - React, Tailwind, and code Playground

by Philip Kahn

HTML

<body>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</body>

JavaScript

var pos = 0;
var pinc = .25

drawit = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, c.width, c.height);
    for (var x = 0; x < Math.min(c.width,c.height)/20; x++) {
        var r = x * 10 + 4;
        var st = ((pos * (x + 1)) % 200) / 100;
        var et = (st + 1) % 2;

        ctx.beginPath();
        ctx.lineWidth = 8;
        ctx.arc(c.width/2, c.height/2, r, et * Math.PI, st * Math.PI);
        ctx.stroke();
        //console.log(r + " " + pos + " " +st + " " + et);
        pos = (pos + pinc) % 200;
    }
    pinc = .002 * ((100 - (Math.abs(100 - pos))) / 100);
    if (pinc < .002) pinc = .002;

    //console.log(pos + " " + pinc);   
	window.requestAnimationFrame(drawit);
}

window.requestAnimationFrame(drawit);