JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" style="border: 10px solid red" width="500px" height="400px"></canvas>

JavaScript

function draw(radius) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 190,
        y = 140;
    var start_angle = 1.5 * Math.PI; //to start from north
    var end_angle = 1.5 * Math.PI; //to start from north and end at north
    var increase_end_angle = 0; //to increase/animate the arc  in to circle.
    setInterval(function () {
        console.log('hit');
        context.save();
        //context.clearRect(0, 0, 500, 400);
        context.beginPath();

        increase_end_angle = increase_end_angle + 11 / 500;
        dynamic_end_angle = end_angle + increase_end_angle;
        context.arc(x, y, radius, start_angle, dynamic_end_angle, false);

        context.lineWidth = 6;
        context.lineCap = "round";
        context.stroke();
        context.restore();
        if (dynamic_end_angle > 3.5 * Math.PI) { //condition for if circle completion
            increase_end_angle = 0;
            draw(radius + 10); //draw from same origin.
        }
    }, 3);
}
window.onload = draw(30);