flow

Raphael de SVG ! vol01

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<!--[if IE 9]>
<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js "></script>
<![endif]-->


<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:.5" />
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:.5" />
    
<div id="canvas">
    <div class="text">
    test do it !!
    </div>
</div>

CSS

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

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

.text{
    color:#09C;
    font-size:150%;
    width:60%;
    height:60%;
    position:absolute;
    left:20%;
    top:20%;
    z-index:1;
}

JavaScript

var paper;
    var totalwidth;
    var totalheight;
    var refreshseq=0;

    function draw() {  
        totalwidth = $(window).width();
        totalheight = $(window).height();
        
        paper.setViewBox(0,0,totalwidth,totalheight);
        drawcurve(1,8000,'#AEF',
            createpath(10,50,30),createpath(-10,50,-50));
        drawcurve(1,6000,'#CEF',
            createpath(20,20,-30),createpath(-20,-50,50));
        drawcurve(3,10000,'#AEF',
            createpath(10,30,-20),createpath(-10,-30,30));
        drawcurve(2,12000,'#CEF',
            createpath(20,80,-30),createpath(-20,-50,50));        

    };

    function createpath(eydif,xdif,ydif){

        var result;
        var basey = totalheight/2;
        var basex = totalheight/2;
        var startX = "0";
        var endX = String(totalwidth);
        var startY = String(basey - eydif);
        var endY = String(basey + eydif);
        
        var line1X = String(basex-xdif);
        var line2X = String(basex-xdif);
        var line1Y = String(basey-ydif);
        var line2Y = String(basey+ydif);
        
        var path = "M"+startX + "," + startY + 
            " C" + line1X + "," + line1Y +
            " " + line2X + "," + line2Y +
            " " + endX + "," + endY;
        
        return path;
        
    };

    function drawcurve(bw,time,color,beforepath,afterpath) {
        var refresh = refreshseq;
        var count=0;
        var el = paper.path(beforepath)
            .attr({fill: "none",
                   stroke: color,
                   "stroke-width": bw})
            ,elattrs = [{path: afterpath}],n = 1;
        el.animate(elattrs[+(n = !n)], time,"<>",callback);
        
        function callback(){
            el.remove();
            if(refresh!=refreshseq){
                return;
            }
            count++;
            if(count%2==1){
                el = paper.path(afterpath)
                    .attr({fill: "none",
                           stroke:...