JSFiddle - React, Tailwind, and code Playground

by adem

HTML

<canvas id="circle">Your browser doesn't support the canvas element.</canvas>

CSS

html {
    background: #f9f9f9;
}

JavaScript

var ctx = document.getElementById('circle').getContext('2d')
  , i = 0
  , x = 100
  , y = x;

var interval = setInterval(function() {
    ctx.clearRect(0,0,500,500);
    ctx.beginPath();
    ctx.arc(x,y,50,0,2*Math.PI*(-Math.pow(.99-i,2)),false);
    ctx.lineTo(x,y);
    ctx.fillStyle = '#333';
    ctx.fill();
    if (parseInt(i)===1) {
        clearInterval(interval);
    }
    i += 0.01;
}, 20);