JSFiddle - React, Tailwind, and code Playground

by mohayonao

HTML

<canvas id="canvas"></canvas>

CSS

* { margin: 0; padding; 0; }
html, body { height: 100%; }
#canvas { width: 100%; height: 100%; background: #000; }

JavaScript

var canvas = document.getElementById("canvas");

canvas.width = canvas.clientWidth || window.innerWidth;
canvas.height = canvas.clientHeight || window.innerHeight;

var context = canvas.getContext("2d");
var radius = Math.min(canvas.width, canvas.height) * 0.4;

drawGrid(context);
drawRipple(context, radius, radius * 0.65);

function drawRipple(context, radius1, radius2) {
    var x = canvas.width * 0.5;
    var y = canvas.height * 0.5;
    
    context.save();
    context.fillStyle = "rgba(192, 224, 255, 0.75)";
    
    context.beginPath();
    context.arc(x, y, radius2, 0, Math.PI * 2, false);
    context.arc(x, y, radius1, 0, Math.PI * 2, true);
    context.fill();
    
    context.restore();
}

function drawGrid(context) {
    context.save();
    context.strokeStyle = "#666";
    
    for (var i = 1; i < 10; i++) {
        var x = (i / 10) * canvas.width;
        var y = (i / 10) * canvas.height;
        
        context.beginPath();
        context.moveTo(x, 0);
        context.lineTo(x, canvas.height);
        context.stroke();
      
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(canvas.width, y);
        context.stroke();
    }
    
    context.restore();
}