JSFiddle - React, Tailwind, and code Playground
by Humphry Huang
CSS
body{ height:100% ; background:#000; overflow:hidden; }
html{ height: 100%; }
div{ padding: 1px 3px 2px 0; border-top: 2px solid; display: inline-block; }
JavaScript
var NUM = 200,
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;
}
};
return function(needs) {
return obj.getRandomDigits(needs);
};
})(THRESHOLDNUM);
// creates enough divs
var divs = [];
for (i = 0; i < NUM; i++) {
var a = document.createElement("div");
a.style.borderColor = "rgb(" + rands(2) + "%," + rands(2) + "%," + rands(2) + "%)";
divs.push(a);
}
var frag = document.createDocumentFragment();
frag.appendChild(divs[0]);
for(i=1; i< divs.length; i ++ ) {
divs[i-1].appendChild(divs[i]) ;
}
document.body.appendChild(frag);
var lastNode = divs[NUM-1];
var repaint = function() {
lastNode.style.width = rands(2) + "px";
} ;
setInterval(function(){
repaint() ;
} , 16) ;
// (function run() {
// repaint() ;
// requestAnimationFrame(run);
// })();
// (function run() {
// repaint() ;
// setTimeout(run , 13);
// })();