// 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);
});
jsFiddle
