JSFiddle - React, Tailwind, and code Playground
by Humphry Huang
CSS
body { position:relative; height:100% ; background:#000; overflow:hidden; }
html { height: 100%; }
div { width : 4px; height : 4px; border-radius : 100%; position : absolute; }
JavaScript
var NUM = 500,
THRESHOLDNUM = 60;
// returns any random digits you need
// gets a reasonable random() calling frequency
var rands = (function(i) {
var obj = {
getRandomDigit: function() {
if (!(this.rands && this.rands.length > 0)) {
this.rands = Math.random().toString().substr(2).split("");
}
return this.rands.shift();
},
getRandomDigits: function(requireNumbers) {
var str = "",
n = requireNumbers;
while (n > 0) {
str += this.getRandomDigit();
n--;
}
return str;
}
};
var cur = 0;
var str = obj.getRandomDigits(i);
return function(needs) {
cur += needs;
if (cur > i) {
// str = null ;
str = obj.getRandomDigits(i);
cur = needs;
}
return str.substr(cur - needs, needs);
};
})(THRESHOLDNUM);
// requestAnimationFrame shim
var vandors = ["ms","moz","webkit","o"];
var i = vandors.length;
while (--i > -1 && !_reqAnimFrame) {
var _reqAnimFrame = window[vandors[i] + "RequestAnimationFrame"];
var _cancelAnimFrame = window[vandors[i] + "CancelAnimationFrame"] || window[vandors[i] + "CancelRequestAnimationFrame"];
}
// creates enough divs
var htmls = [];
for (i = 0; i < NUM; i++) {
var a = document.createElement("div");
a.style.backgroundColor = "rgb(" + rands(2) + "%," + rands(2) + "%," + rands(2) + "%)";
htmls.push(a.outerHTML);
}
document.body.innerHTML = htmls.join("");
var allnodes =...