var df = document.createDocumentFragment();

var container = document.getElementById('container');

for (var i = 0; i < 900; i++) {

    var x = i % 30;

    var y = ~~ (i / 30);

    var elm = document.createElement('div');

    elm.className = 'box';

    elm.style.top = (y * 10) + 'px';

    elm.style.left = (x * 10) + 'px';

    elm.style.backgroundColor = color(x%y+y%x);

    df.appendChild(elm);

}

container.appendChild(df);

var cycle = 0;

var children = container.children;

run();

​

function run() {

    requestAnimationFrame(run);

    for (var i = 0, l = children.length; i < l; i++) {

        var top = parseFloat(children[i].style.top);

        var left = parseFloat(children[i].style.left);

        children[i].style.top = top + Math.cos(cycle + (i % 30)) + 'px';

        children[i].style.left = left + Math.sin(cycle + ~~ (i / 30)) + 'px';

        cycle += 1e-4;

    }

}

function color(i) {

    var r = Math.floor( Math.sin(i) * 127 + 128 );

    var g = Math.floor( Math.sin(i + 2) * 127 + 128 );

    var b = Math.floor( Math.sin(i + 3) * 127 + 128 );

    return 'rgb(' + r + ', ' + g + ',' + b + ')';

}