JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<body >
    <canvas width="500" height="500" id="canvas"></canvas>
    <div id="cont"></div>
</body>

CSS

canvas{
    background: #081d25
}

JavaScript

var circles = [53, 85, 113, 145, 242];
		
var createLayout = function(ctx)
{
    for (var i = 0; i < circles.length; i++) {
        var r = circles[i];
        ctx.beginPath();
        ctx.arc(250, 250, r, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.lineWidth = i == 4 ? 1 : 0.3;
        ctx.strokeStyle = '#8ce9ef';
        ctx.stroke();
    }
    
    for(var i = 0; i < 8; i++){
        var r = circles[4], a = (Math.PI * i / 4) - Math.PI / 8;
        ctx.beginPath();
        ctx.moveTo(250,250);
        ctx.lineTo((r * Math.cos(a)) + 250, (r * Math.sin(a)) + 250);
        ctx.lineWidth = 0.3;
        ctx.strokeStyle = '#8ce9ef';
        ctx.stroke();
        ctx.closePath();
    }
};
			
var radar = function (method)
{
    var FRAMES_PER_CYCLE = 20, FRAMERATE = 20, RINGS = 6;
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext("2d");
    var canvassize = (canvas.width < canvas.height) ? canvas.width : canvas.height;
    var ringsize = canvassize / (2 * RINGS + 1);
    var radiusmax = ringsize / 2 + ringsize + (RINGS - 1) * ringsize;
    var animationframe = 0;
    


    function animateRadarFrame()
    {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        createLayout(ctx);
        var radius, alpha;
        for (var ringno = 0; ringno < RINGS; ringno++)
        {
            radius = ringsize / 2 + (animationframe / FRAMES_PER_CYCLE) * ringsize + ringno * ringsize;
            alpha = (radiusmax - radius) / radiusmax;
            ctx.beginPath();
            ctx.fillStyle = "rgba(92,178,112," + alpha + ")";
            ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
            ctx.fill();
        }

        ctx.beginPath();
        ctx.fillStyle = "rgb(100,194,122)";
        ctx.arc(canvas.width / 2, canvas.height / 2, ringsize / 2, 0, 2 * Math.PI, false);
        ctx.fill();

        animationframe = (animationframe >= (FRAMES_PER_CYCLE - 1)) ?  0 :  animationframe +...