flow

Raphael de SVG ! vol01

by nekosmash

HTML

<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;
    padding-top:180px
}

.text{
    color:#09C;
    font-size:150%;
}

JavaScript

window.onload = function () {
    
    var paper = Raphael(0, 0, "100%", "100%");
    paper.setViewBox(0,0,200,500,true);
    
    (function() {
        drawcurve(1,5000,'#AEF',
                  "M0,140 C150,200 350,100 500,160",
                  "M0,160 C150,100 350,200 500,140");
        drawcurve(1,4000,'#BEF',
                  "M0,130 C250,200 250,100 500,150",
                  "M0,150 C250,100 250,200 500,130");
        drawcurve(1,6000,'#AEF',
                  "M0,150 C150,180 300,130 500,170",
                  "M0,170 C150,130 250,180 500,150");
        drawcurve(1,8000,'#AEF',
                  "M0,150 C300,130 200,180 500,170",
                  "M0,170 C300,180 200,130 500,150");
        drawcurve(1,7000,'#CEF',
                  "M0,170 C200,130 300,180 500,150",
                  "M0,150 C200,180 300,130 500,170"); 
        drawcurve(1,4000,'#BDF',
                  "M0,160 C200,130 300,180 500,130",
                  "M0,130 C200,180 300,130 500,160");         
    })();
    
    function drawcurve(bw,time,color,beforepath,afterpath) {
        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();
            count++;
            if(count%2==1){
                el = paper.path(afterpath)
                    .attr({fill: "none",
                           stroke: color,
                           "stroke-width": bw})
                    ,elattrs = [{path: beforepath}],n = 1;
            }else{
                el = paper.path(beforepath)
                    .attr({fill: "none",
                           stroke: color,
                           "stroke-width": bw})
                    ,elattrs = [{path: afterpath}],n = 1;            
            }
           ...