JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="200" height="200"></canvas>

CSS

canvas {
    border: 1px solid #d3d3d3;
}

JavaScript

var pos = 0;
var pinc = 0.25
var prev = 0;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function loop(timestamp) {
    var delta = (timestamp - prev) / 1000;
    prev = timestamp;

    ctx.clearRect(0, 0, c.width, c.height);
    for (var x = 0; x < 10; 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(100, 100, r, et * Math.PI, st * Math.PI);
        ctx.stroke();

        pos = (pos + pinc) % 200;
    }
    pinc = 7 * delta * ((100 - (Math.abs(100 - pos))) / 100);
    if (pinc < 0.01) {
        pinc = 0.01;
    }

    window.requestAnimationFrame(loop);
}

loop(0);