JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="150" height="150"></canvas>
<span id="display"></span>

JavaScript

window.setInterval(function(){draw()},10);

var i = 0.01;
var Color = "Black";
var x = 75;                // x coordinate
var y = 75;                // y coordinate
var radius = 20;                    // Arc radius
var startAngle = 90;                     // Starting point on circle
var anticlockwise = false; // clockwise or anticlockwise

function draw() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    
    ctx.beginPath();
    var endAngle = i; // End point on circleMath.PI + (Math.PI * 5) /
    
    if (Math.floor(endAngle) > 6.0) {
        i = 0.01;
        endAngle = i;
        startAngle = 0;
        if (Color == "Black") {
            Color = "White";
            ctx.lineWidth = 4;
        } else {
            Color = "Black";
            ctx.lineWidth = 1;
        }
    }
    
    ctx.strokeStyle = Color;
    //ctx.globalCompositeOperation = 'source-over'
    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    ctx.stroke();
    
    startAngle = endAngle - 0.1;
    
    i = i + 0.05;
    //document.getElementById('display').innerHTML =
    // Math.floor(endAngle) + " " + Color;
}