JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<div id="container"></div>

CSS

html,body{
    margin:0;
}
#container div{
    width:8px;
    height:8px;
    float:left;
    background:#000;
}

JavaScript

function randHex(){
    hexStr = 'def';
    return hexStr.substr(Math.floor(Math.random()*hexStr.length),1);
}

for(i=0; i<5000; i++){
    randColor = randHex();
    newColor = "#"+randColor+randColor+randColor;
    //newColor = "#"+randHex()+randHex()+randHex()+randHex()+randHex()+randHex();
    $newDiv = $('<div/>').css({backgroundColor:newColor}).data('bg',newColor);   
    $('#container').append($newDiv);
    randIndex = Math.round(Math.random()*50)
    i % randIndex === 0 ? flashSquare($newDiv) : '';
}

function randAnim(){
    return Math.random()*1000+300
}

function flashSquare($elem){
    var oldCol = $elem.data('bg');
    $elem.animate({backgroundColor:'#ccc'}, randAnim(), function(){
        $elem.animate({backgroundColor:oldCol}, randAnim(), function(){
            flashSquare($elem);   
        });   
    });
}