SOURCE

var factorTables = [
    [0, 0, 0],
    [0, 0, 1],
    [0, 1, 0],
    [1, 0, 0],
    [1, 0, 1],
    [1, 1, 0],
    [1, 1, 1]
];
var factorIndex = 0;
var newPart = false;
var rgb = [0, 0, 0];

function loop() {
    var factors;
    factors = factorTables[factorIndex];
    if (rgb[0] == factors[0] * 255 &&
        rgb[1] == factors[1] * 255 &&
        rgb[2] == factors[2] * 255) {
        factorIndex++;
        if (factorIndex > 6) {
            return;
        }
        factors = factorTables[factorIndex];
        rgb[0] = 0;
        rgb[1] = 0;
        rgb[2] = 0;
        newPart = true;
    }

    for (var c = 0; c < rgb.length; c++) {
        if (factors[c]) {
            rgb[c] += 8;
            if (rgb[c] > 0xff) {
                rgb[c] = 0xff;
            }
        }
    }

    draw();
    //requestAnimationFrame(loop);
    loop();
}
requestAnimationFrame(loop);


function draw() {
    var rgbExp = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
    var card = document.createElement('div');
    card.className = 'card';
    if (newPart) {
        card.style.clear = 'left';
        newPart = false;
    }
    card.style.background = rgbExp;
    card.onmouseover = function() {
        //document.body.style.background = card.style.background;
    };
    card.onmouseout = function() {
        //document.body.style.background = '';
    }
    document.body.appendChild(card);
    //document.body.innerText = rgbExp;
    //document.body.style.background = rgbExp;
}

html, body {
    width: 100%;
    height: 100%;
    transition: all 0.1s ease;
}

.card {
    width: 30px;
    height: 30px;
    float: left;
    transition: all 0.2s ease;
}

.card:hover {
    box-shadow: 0px 0px 4px 3px rgba(0,0,0,0.1);
    z-index: 2;
    border-radius: 100%;
}