JSFiddle - React, Tailwind, and code Playground
CSS
body {
overflow:hidden;
}
div {
position:absolute;
}
JavaScript
var i = 0,
maxNodes = 2500,
node, nodes, frag, max, radius, margin, size, opacity;
/**
* 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');
// Random size, shape, and styling
radius = rand(2,20);
size = rand(5,25);
shadow = rand(2,7);
opacity = rand(1,20) * .1;
// Random color
node.style.backgroundColor = hex();
// Size it
node.style.width = size + 'px';
node.style.height = size + 'px';
// Position it
node.style.top = rand(0,500) + 'px';
node.style.left = rand(0,500) + 'px';
// Cross-browser shadow
node.style.boxShadow = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
node.style.MozBoxShadow = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
node.style.WebkitBoxShadow = shadow + 'px ' + shadow + 'px ' +shadow + 'px ' + ' rgba(0,0,0,' + opacity + ')';
// Cross browser rounded corners
node.style.borderRadius = radius + 'px';
node.style.MozBorderRadius = radius + 'px';
...