JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas { border: 1px solid; }

JavaScript

var center = {x : 100, y: 100};        // центр окружности
var innerRadius = 80;                  // внутренний радиус дуги
var outerRadius = 90;                  // внешний радиус дуги
var angle = 0;                         // начальный угол (по умолчанию "от 12 часов")
var duration = 5000;                   // длительность в миллисекундах
var fps = 50;                          // FPS

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var step = Math.PI * 2 * 1000 / fps / duration;

function test() {
    if (angle < Math.PI * 2) {
        for (var i = 0; i < step; i += .005) {
            var x = Math.cos(angle + i), y = Math.sin(angle + i);
            context.beginPath();
            context.moveTo(center.x + innerRadius * x, center.y + innerRadius * y);
            context.lineTo(center.x + outerRadius * x, center.y + outerRadius * y);
            context.stroke();
        }
        angle += step;
    }
    else clearInterval(timer);
}

var timer = window.setInterval(test, 1000 / fps);