JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas width=500 height=500 id=main></canvas>

CSS

body{
    margin: 0;
    overflow: hidden;
}

JavaScript

function rand(a, b, dist = x => x) {
	return dist(Math.random()) * (b - a) + a;
}

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

let w = canvas.width = window.innerWidth;
let h = canvas.height = window.innerHeight;


// add linear gradient
var grad = ctx.createLinearGradient(0, 0, 0, h);
grad.addColorStop(0, '#111122');
grad.addColorStop(1, '#111144');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);


ctx.fillStyle = '#fff';
for(let i=0; i<w*h*0.002; i++) {
	r = rand(0.25, 2, x=>x**2);
    ctx.globalAlpha = r < 1.8 ? 0.5 : (r - 1.8)/0.2;
	ctx.beginPath();
    ctx.arc(rand(0, w), rand(0, h), r, 0, Math.PI*2);
    ctx.fill();
}
ctx.globalAlpha = 1.0;


let dr = 100;
let r0 = 1;
let c = [w/2, h*0.25];
let rot = 0.2;
let dashStyle = [7, 10];
ctx.strokeStyle = '#fb28';
for(let i=r0; i<10; i++) {
	ctx.setLineDash(i % 2 ? dashStyle : []);
    ctx.beginPath();
    ctx.arc(...c, dr*i, 0, Math.PI*2);
    ctx.stroke();
}
let latLines = 16;
for(let i=0; i<latLines; i++) {
	ctx.setLineDash(i % 4 ? dashStyle : []);
	ctx.beginPath();
    let s = i % 4 == 0 ? 0 : r0;
    ctx.moveTo(
    	c[0] + s*dr*Math.cos(rot+i/latLines*Math.PI*2),
    	c[1] + s*dr*Math.sin(rot+i/latLines*Math.PI*2),
    );
    ctx.lineTo(
    	c[0] + dr*20*Math.cos(rot+i/latLines*Math.PI*2),
    	c[1] + dr*20*Math.sin(rot+i/latLines*Math.PI*2),
    );
    ctx.stroke();
}