<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
/** {
box-sizing: border-box;
}*/
body {
background-color: #242424;
}
#container {
height: 300px;
width: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
}
.box {
display: inline-block;
height: 9px;
width: 9px;
position: absolute;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
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 + ')';
}
</script>
</body>
</html>