var wrapper = Snap(50, 50);
var s = wrapper.svg(0, 0, 300, 300, 0, 0, 50, 50);
var head = s.circle(25, 15, 6);
var headMask = s.circle(25,15,7.5);
var arm = s.polyline([34,25, 30.75,25, 26.25,36, 29.5,36]);
var body = s.group(
  s.path("M25,15 34,25 25,47 16,25"), 
  arm
);
var shouldersMask = s.group(
  s.rect(0,0,50,50).attr({fill:"#fff"}), 
  headMask.attr({fill:"#000"})
);
body.attr({mask: shouldersMask});

$(document).ready(function() {
  $('.svgContainer').append(s.node);
  
  $('.svgContainer').on('mouseover', function() {
    head.stop().animate({cy:7.5}, 350, mina.backin).animate({r:6}, 350, mina.easeout);
    headMask.stop().animate({cy:7.5}, 350, mina.backin).animate({r:7}, 350, mina.easeout);
    arm.stop().animate({points: [34,25, 30.75,25, 37.5,9.5, 40.75,9.5]}, 350, mina.backin);
  });
  
  $('.svgContainer').on('mouseout', function() {
    head.stop().animate({cy:15, r:6}, 450, mina.easeout);
    headMask.stop().animate({cy:15, r:7.5}, 450, mina.easeout);
    arm.stop().animate({points: [34,25, 30.75,25, 26.25,36, 29.5,36]}, 450, mina.easeout);
  });
});