flow

Raphael de SVG ! vol01

by nekosmash

HTML

<script type="text/javascript" src="http://dl.dropbox.com/u/63305355/raphael-min.js"></script>
<div id="canvas">
    <div class="text">
    GRADIENT
    </div>
</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 rect1;
    var rect2;

    window.onload = function () {
    
        paper = Raphael(0,0,"100%","100%");
        draw();
        
    };

    window.onresize = function () {
        paper.clear();
        draw();    
    }
        
        function draw(){
                rect1 = paper.rect(0,0,
                    $(window).width(),
                    $(window).height()
                         ).attr({fill:"45-#f00-#808"
                                 ,stroke:"none"
                                 ,opacity:1
                                });
                rect2 = paper.rect(0,0,
                    $(window).width(),
                    $(window).height()
                         ).attr({fill:"95-#300-#f0f"
                                 ,stroke:"none"
                                 ,"opacity":0
                                });  
        }