humaan

//SVG Paths
var paths = {
    head : 'M10.204,17.703c0,3.872,3.093,4.925,3.093,8.899c0,2.227-0.546,3.488-0.546,3.488s0.465,1.414,3.028,2.569c2.634,1.187,4.247,0.931,4.247,0.931c0.745-1.504,1.33-4.265,3.58-4.896c2.25-0.631,2.646-0.465,4.405-0.541c0.803-0.034,0.916-0.459,0.992-0.833c0.076-0.373,0.862-4.221,0.862-4.221s1.044-0.291,1.295-0.368c0.251-0.077,0.333-0.273,0.334-0.525c0.001-0.252-0.063-0.454-0.472-0.772c-1.092-0.849-1.711-2.328-1.711-3.735c0-1.032,0.553-2.282-0.473-4.376c-1.589-3.242-5.006-5.452-8.804-5.452C14.582,7.872,10.204,12.303,10.204,17.703z',
    blob : 'M3.063,14.305C1.375,19.25,1.439,23.866,2.5,26.375s4,5.75,4,5.75s3.125,4,5.625,5.5s7,2,7,2l4.75-0.75l2.375-0.5l3.75-1.25 l2.375-1.625l2.875-3.625l2.837-4.949c0,0,1.163-2.242,1.788-4.492s0.421-3.527-0.323-6.434s-2.666-5.851-4.802-8.125 S24.298,1,20.5,1C15.047,1,4.75,9.36,3.063,14.305z',
    ring : 'M20.5,3.254c9.51,0,17.246,7.737,17.246,17.246S30.01,37.746,20.5,37.746c-9.509,0-17.246-7.737-17.246-17.246 S10.991,3.254,20.5,3.254 M20.5,0C9.178,0,0,

humaan

//Create a circle shape on the canvas & use it to mask the head
parts.circle_mask = paper.circle(20.5, 20.5, 20.5).attr({
    fill : '#fff'
});
parts.head.attr({ mask : parts.circle_mask });

humaan

$('#logo').hover(function(){
    //Hover in
    parts.head.animate({
        path : paths.blob
    }, 800, mina.elastic );
}, function(){
    //Hover out
    parts.head.animate({
        path : paths.head
    }, 800, mina.elastic );

humaan

//Initialize an SVG node & add it to the DOM
var svg = $('<svg xmlns="http://www.w3.org/2000/svg" >').css({ 
    width: '41px', 
    height: '41px' 
});
$('#logo').append( svg );
 
// Initialize the Snap svg canvas using the svg DOM node (not the jquery object)
var paper = Snap( svg[0] );