MoveArc

Raphael de SVG ! vol35

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: 0px;
    color:#fff;
    font-size:150%;
    position:absolute;
    text-align:center;
    top:40%;
    left:0%;
    width:100%;
    z-index:1;
    background:#000;
    opacity:0.5;
}
#result{
    font-size:60%;
    letter-spacing: 5px;
}
input{
    padding:3px;
}

JavaScript

var paper;

window.onload = function(){
    paper = Raphael(0,0,"100%","100%");
    var wwidth = $(window).width();
    var wheight = $(window).height();
    var colorarray = new Array(4);
    colorarray[0]="#333";
    colorarray[1]="#666";
    colorarray[2]="#ccc";
    colorarray[3]="#888";
    colorarray[4]="#000";
    for(i=3;i<10;i++){
        cindex = Math.floor(Math.random()*5);
        rad = 120 + Math.floor(Math.random()*220);
        p = paper.path(
            getArc(wwidth/2,wheight/2,i*25,rad)
        ).attr({
            "stroke-width":30,
            "stroke-linejoin":"bevel",
            opacity:1,
            stroke:colorarray[cindex],
        });
        if(i%2==0){
            p.animate({
                transform:"r320 "+wwidth/2+","+wheight/2
            },500000/i)
        }else{
            p.animate({
                transform:"r-320 "+wwidth/2+","+wheight/2
            },500000/i)    
        }
    }
};


function getArc(cx,cy,r,value) {
    var a =(90-value)*Math.PI/180,
    x = cx+r*Math.cos(a),
    y = cy-r*Math.sin(a),
    path;
    
    if(value==360){
        path=[["M",cx,cy-r],["A",r,r,0,1,1,cx-0.001,cy-r]];
    }else{
        path=[["M",cx,cy-r], ["A",r,r,0,+(value>180),1,x,y]];
    }
    return path;
}