JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<canvas id='bg'></canvas>

CSS

canvas{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

JavaScript

const canvas = document.getElementById('bg');
const ctx = canvas.getContext('2d');

const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

ctx.fillStyle = '#001';
ctx.fillRect(0, 0, width, height);

const colors = ['#224', '#656', '#858', '#aab', '#dcf', '#ffd'];
const widths = [1.5,    2.5,    3,      2,      2,    3];

for(let pass = 0; pass < colors.length; pass++) {
    ctx.strokeStyle = colors[pass];
    ctx.lineWidth = widths[pass];
    ctx.lineCap = 'round';
    ctx.beginPath();
    for(let i=0; i < width * height * 0.0015; i++) {
        let x = Math.random() * 2 - 1;
        let y = Math.random() * 2 - 1;
        
        y = Math.abs(1-Math.pow(Math.cos(y*Math.PI*0.5), 0.4 + 0.4 * pass / 5)) * Math.sign(y);
        y += 0.3 * (Math.random() - 0.5);
        
        y -= x*0.2;
        
        x = (x * 0.5 + 10.5) % 1;
        y = (y * 0.5 + 10.5) % 1;
        ctx.moveTo(x*width, y*height);
        ctx.lineTo(x*width + 0.1, y*height);
    }
    ctx.stroke();
}