JSFiddle - React, Tailwind, and code Playground

by adem

HTML

<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
<canvas id="diagram" width="1000px" height="1000px">Your Browser doesn't support canvas.</canvas>

CSS

html {
    background: #6A7B87;
}

JavaScript

var ctx = document.getElementById('diagram').getContext('2d');

var x = 200
  , y = 150
  , radius = 75
  , beginCircle = 1.5*Math.PI
  , endCircle = beginCircle
  , i = .1;

setInterval(function() {
    ctx.clearRect(0,0,1000,1000);
    ctx.beginPath();
    ctx.arc(x, y, radius, beginCircle, endCircle, false);
    ctx.lineTo(x,y);
    ctx.fillStyle = "#f9f9f9";
    ctx.fill();
    if (i > 0)
        i -=.001;
    else
        i = 0;
    endCircle += i;
}, 10);