JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

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

JavaScript

var canvas = document.getElementById('myCanvas');
var g = canvas.getContext('2d');

var requestAnimationFrame =
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(f) { setTimeout(f, 10); };

var start = new Date().getTime();

var timePerCircle = 2;
var x = 190, y = 140;

function draw() {
    requestAnimationFrame(draw);
    g.clearRect(0, 0, canvas.width, canvas.height);
    
    var t = (new Date().getTime() - start) / 1000;
    var circles = t / timePerCircle;
    var r = 30;
    
    do {
        g.beginPath();
        g.arc(x, y, r, 0, Math.PI * 2 * Math.min(circles, 1));
        g.stroke();
        r += 10;
        circles--;
    } while(circles > 0);
}

draw();