JSFiddle - React, Tailwind, and code Playground

by Sean Cannon

CSS

body {
    overflow:hidden;
}
div {
    position:absolute;
}

JavaScript

var i         = 0,
    maxNodes  = 5000,
    baseColor = hex(),
    node, nodes, frag, max, radius, margin, size, opacity;
 
function luminance(hex, lum) {
    var rgb = "#", c, i;
    
	// validate hex string
	hex = String(hex).replace(/[^0-9a-f]/gi, '');
	if (hex.length < 6) {
		hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
	}
	lum = lum || 0;
    
	// convert to decimal and change luminosity
	for (i = 0; i < 3; i++) {
		c = parseInt(hex.substr(i*2,2), 16);
		c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
		rgb += ('00' + c).substr(c.length);
	}
	return rgb;
}

/**
 * Generate a random hex color code. 
 * Thanks to Paul Irish for posting this (16777215 == ffffff in decimal)
 * http://www.paulirish.com/2009/random-hex-color-code-snippets/
 * 
 * @returns {String} Our hex color code
 */
function hex() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16).toUpperCase();
}
 
/** 
 * Returns a random number within a range.
 * @param   {Int} min
 * @param   {Int} max
 * @returns {Int} Our random number
 */
function rand (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
// Create a DOM node that isn't part of the DOM tree. 
// https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment
frag = document.createDocumentFragment();
 
// Append a bunch of empty divs to the document fragment
for (; i < maxNodes; i++) {
    node = document.createElement('div');
    frag.appendChild(node);
}
 
// Append the fragment to the body
document.body.appendChild(frag);

nodes = document.getElementsByTagName('div');
for (i = 0; i < maxNodes; i++) {
    // Random size, shape, and styling
    radius  = rand(2,20);
    size    = rand(5,25);
    shadow  = rand(2,7);
    opacity = rand(1,20) * .1;
    
    // Random shade/hue
    nodes[i].style.backgroundColor    = luminance(baseColor, Math.random() - .2);
 
    // Size it
    nodes[i].style.width              = size + 'px';
    nodes[i].style.height...