RaphaelArt

by mmarcon

HTML

<div id="r">
    
</div>

CSS

#r {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    box-shadow: 0 0 30px #eee;
}

JavaScript

var doIt = function (raph) {
    var r, c, counter = 50,
        i, j, x = 150,
        y = 150,
        rad = 30,
        steps, angle, color;

    r = raph;
    r.clear();
    for (i = counter; i > 0; i--) {
        steps = i * 4;
        color = Math.round(0xffffff * Math.random()).toString(16);
        for (j = 0; j < steps; j++) {
            angle = 2 * Math.PI / steps;
            c = r.circle(x + Math.sin(angle * j) * rad * i, y + Math.cos(angle * j) * rad * i, rad);
            c.attr({
                'stroke-width': 0,
                fill: '#' + color
            });
        }
    }
    c = r.circle(x, y, rad);
    c.attr({
        'stroke-width': 0,
        fill: '#' + Math.round(0xffffff * Math.random()).toString(16)
    });
};

var r = Raphael('r', 300, 300), count = 0;

setInterval (function(){ if (count++ >= 10) return; doIt(r)}, 500);