JSFiddle - React, Tailwind, and code Playground

by subzey

HTML

<canvas id=a width=500 height=500></canvas>

JavaScript

var c = a.getContext('2d');
function _ellipseArc(
    cx, cy,
    rx, ry,
    xAxisRotation,
    startAngle, endAngle,
    counterclockwise
){
    c.save();
    c.translate(cx, cy);
    c.rotate(xAxisRotation);
    c.scale(1, ry/rx);
    c.arc(0, 0, rx, startAngle, endAngle, !!counterclockwise);
    c.restore();
}

var startTime = Date.now();

function draw(){
    a.width |= 0;
    var timeOffset = startTime - Date.now();
    c.lineWidth = 10;
    c.beginPath();
    _ellipseArc(
        250, 250,
        200, 200 * Math.cos(timeOffset / 1500),
        timeOffset / 1300,
        0, 2*Math.PI
    );
    c.closePath();
    c.strokeStyle = '#888';
    c.stroke();

    c.beginPath();
    _ellipseArc(
        250, 250,
        200, 200 * Math.cos(timeOffset / 1500),
        timeOffset / 1300,
        timeOffset / 300, timeOffset / 300 + .5
    );
    c.strokeStyle = 'yellow';
    c.stroke();
    
    requestAnimationFrame(draw);
}

draw();