Raphaël Icons done with MooTools ART

Raphaël Icons done with MooTools ART

HTML

<script src="http://nouincolor.com/pub/raphael_icons.js"></script>
<h1><a href="http://raphaeljs.com/icons/">Rapha&euml;l Icons</a> done with <strong><a href="http://github.com/kamicane/art/">MooTools ART</a></strong></h1>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />
<div id="icons-container"></div>

CSS

body {
    background: #D4D7DF url('http://img21.imageshack.us/img21/7868/mootoolifiedbg.png');
    font-family: Helvetica, Arial, serif;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
    color: #73799C;
}

h1 {
    margin: 25px 0 30px;
    font-size: 1.9em;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: #4A4D63;
}

a:hover {
    text-decoration: underline;
}

svg {
    margin: 5px;
}

JavaScript

// See "Manage Resources" tab for the JS file with SVG paths

var createIcon = function(icon, index){
    var art = new ART(36, 36);
    var group = new ART.Group;
    
    // cache the path
    var iconPath = new ART.Path(icon);
    
    // create the white shadow
    var iconShadow = new ART.Shape(iconPath);
    iconShadow.fill('#fff');
    iconShadow.translate(0, 1);
    
    // create an icon with the gradient
    var icon = new ART.Shape(iconPath);
    icon.fill('#484D61', '#63687E');
    
    group.grab(iconShadow, icon);    
    group.inject(art);
    group.scale(0);
    group.translate(2, 2);
    
    art.inject($('icons-container'));

    // add some extra funkyness
    var fx = new Fx({
        duration: 800,
        transition: 'back:out'
    });

    fx.set = function(i){
        group.scale(i);
        var size = icon.measure();
        var x = 2 - (size.width * i - size.width) / 2;
        group.translate(x,x);
    };
    
    (function(){
        this.start(0.1, 0.8);
    }).delay(30 * index, fx);
    
    group.listen({
        mouseover: function(){
            fx.start(0.8, 1.2);
        },
        
        mouseout: function(){
            fx.start(1.2, 0.8);
        }
    });
};

icons.each(function(icon, index){
    createIcon(icon, index);
});