JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="main"></canvas>

CSS

canvas#main {
    border : 1px #d0d0d0 solid;
    width:250px;
    height:250px;
}

JavaScript

var config = {
    "canvas_width": 250,
    "canvas_height": 250,
    "center": {
        "x": 150,
        "y": 150
    },
    "width": 100,
	"fps": 60,
    "loop_length": 2750,
};

var drawArc = function (dig, context, conf) {
    var alpha = 0.2;
    var delta = 0.45;
    var mod_delta = Math.PI * 2 * 0.7;
    var loop_ratio = 2;
    var rotate_degree = 0.5;
    
    var start_d = dig * loop_ratio + alpha * (
        Math.sin(Math.PI * 2 * dig) + 1);
    var end_d = dig * loop_ratio + alpha * (
        Math.sin(Math.PI * 2 * dig + mod_delta) + 1) + delta;

    context.clearRect(0, 0, 500, 500);
    context.beginPath();
    context.arc(conf.center.x, conf.center.y, conf.width,
    Math.PI * 2 * (start_d - rotate_degree),
    Math.PI * 2 * (end_d - rotate_degree), true);
    context.stroke();
};

var startAnimation = function (conf) {
    var canvas = document.querySelector("canvas#main");
    var ctx = canvas.getContext("2d");

    ctx.scale(1, 0.5); // why?
    ctx.lineWidth = 10;
    ctx.strokeStyle = "#666666";

    var i = 0;
    var start_t = new Date().getTime();

    var doAnimate = function () {
        var d = (new Date().getTime() - start_t) / conf.loop_length;
        d = d % 1;
        drawArc(d, ctx, conf);

        setTimeout(function () {
            requestAnimationFrame(doAnimate);
        }, (1000 / config.fps) / 5);
    };

    doAnimate();
};

startAnimation(config);