Raphaelist (like 3 dimention)

Raphael de SVG !

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
</div>

CSS

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#fff;
    text-align:center;
}

.text{
    letter-spacing: 20px;
    color:#fff;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:40%;
    z-index:1;
}

JavaScript

var paper;
var rect;
var centerline;

window.onload = function () {        
    paper = Raphael(0,0,"100%","100%");
    centerline = $(window).width()/2;
    drawcircles(50);
};

function drawcircles(max){
    
    for(i=0;i<=max;i++){
        randx = Math.floor(Math.random()*($(window).width()+100))-50;
        randy = Math.floor(Math.random()*$(window).height());
        r = 2 +Math.abs(centerline-randx)/60*
            Math.abs(centerline-randx)/60;
        el = paper.circle(randx,randy,r)
            .attr({fill:Raphael.getColor(1),
                   stroke:"none",
                   opacity:0.5
                  });
        el.data("x",randx);
    }
};

$(window).mousemove(function(e){
paper.forEach(function (el) {
    round = 1 +Math.abs(centerline-el.getBBox().x)/60*
            Math.abs(centerline-el.getBBox().x)/60;
    el.attr({
        cx: el.data("x")+(centerline-e.clientX)/5,
        r:round    
            });
});
});