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(){
            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
                    draw(radius+10);//draw from same origin.
               }
        },66);
    }
    window.onload=draw(30);