Edit in JSFiddle

var paper;
var centerx = $(window).width()/2;
var centery = $(window).height()/2;
var carray = new Array();
var k=0;
var j=0;


window.onload = function () {        
    paper = Raphael(0,0,"100%","100%");
    
    carray[0]="rgba(0,190,255,0.2)";
    carray[1]="rgba(0,194,255,0.2)";
    carray[2]="rgba(0,198,255,0.2)";
    carray[3]="rgba(0,202,255,0.2)";
    carray[4]="rgba(10,206,255,0.2)";
    carray[5]="rgba(10,210,255,0.3)";
    carray[6]="rgba(10,214,255,0.3)";
    carray[7]="rgba(20,218,255,0.3)";
    carray[8]="rgba(20,222,255,0.3)";
    carray[9]="rgba(20,226,255,0.3)";
    carray[10]="rgba(20,230,255,0.3)";
    carray[11]="rgba(30,234,255,0.4)";
    carray[12]="rgba(30,238,255,0.4)";
    carray[13]="rgba(30,242,255,0.4)";
    carray[14]="rgba(40,246,255,0.4)";
    carray[15]="rgba(40,250,255,0.4)";
    carray[16]="rgba(40,254,255,0.3)";
    carray[17]="rgba(20,230,255,0.3)";
    carray[18]="rgba(10,210,255,0.2)";
    carray[19]="rgba(0,190,255,0.2)";
    
    
    for(var i=0;i<20;i++){
        color = carray[i];
        el = paper.circle(centerx,centery,i*5)
            .attr({
                "stroke-width":"15",
                "stroke":color
            });
        el.data("color",color);
    }
};

$(window).click(function(e){
    var i=0;
    paper.forEach(function (el) {
        
        el.animate({
            cx: e.pageX,
            cy: e.pageY
        },i*150,"elastic",ColorBack);
        
        i++;
    });
});

function ColorBack(){
    this.animate({
        "stroke":this.data("color")
    },1000);
}

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

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

#canvas 
{
    height:99%;
    background:#000;
    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;
}