<svg x="0px" y="0px" width="176px" height="212px" viewBox="0 0 176 212" enable-background="new 0 0 176 212" id="pin" >
 
  <ellipse id="hole" fill="#575756" cx="88" cy="205" rx="80" ry="6"/>
  <g clip-path="url(#masker)" >  
    <g id="marker" >  
           <linearGradient id="gradient1" gradientUnits="userSpaceOnUse" x1="247" y1="-315" x2="247" y2="-108" gradientTransform="matrix(1 0 0 -1 -197 -108)">
              <stop  offset="0" style="stop-color:#B21B24"/>
              <stop  offset="1" style="stop-color:#E62A33"/>
          </linearGradient>
          <path transform="translate(1,0)" fill="url(#gradient1)" d="M87.552,0v206c0,0-75.333-82.667-75.333-132S51.219,0,87.552,0z"/>
          <path fill="#E62A33" d="M87.552,0v206c0,0,75.333-82.667,75.333-132S123.885,0,87.552,0z"/>

            <linearGradient id="gradient2" gradientUnits="userSpaceOnUse" x1="-504" y1="117" x2="-550" y2="197" gradientTransform="matrix(-0.8678 -0.4969 -0.4969 0.8678 -292 -322)">
                <stop  offset="0" style="stop-color:#B21B24"/>
                <stop  offset="1" style="stop-color:#E8434D"/>
           </linearGradient>
           <circle fill="url(#gradient2)" cx="88" cy="76" r="46"/>
         <g>
      <path fill="#FFFFFF" d="M119.052,89.975c-7.866,5.291-14.795,5.145-17.938-6.829c-6.17,12.707-9.004,15.582-15.453-3.597
            c-9.012,19.12-10.77,17.037-14.215,4.53c-0.563-2.045-4.66-16.919-5.129-18.49c-0.659-2.203-1.982-2.744-2.488-1.041
            c-0.854,2.873-1.375,7.938-1.375,7.938l-2.188-0.242C60.1,53.806,71.06,48.2,74.116,59.818c0.231,0.877,5.721,21.812,5.721,21.812
            s4.729-11.767,5.791-14.358c1.721-4.203,4.692-3.859,6.435,1.387c2.58,7.767,4.482,13.332,4.482,13.332s2.318-4.04,2.835-4.854
            c3.999-6.306,8.322-4.18,9.833,0.448c2.389,7.319,4.624,13.131,9.041,9.029L119.052,89.975z"/>
      </g>
    </g>
  </g>
  
 <defs>
  <clipPath id="masker" >
      <path display="inline" fill="#C0C0C0" d="M154.894-7.679c31.438,71.738,32.875,210.027,32.875,212.429
    c0,3.452-44.272,6.25-98.885,6.25C34.272,211-10,208.202-10,204.75c0-2.385,1.115-140.92,32.168-212.803L154.894-7.679z"/>
    </clipPath>
  </defs>
</svg>

body{
  width:100%;
  height:100%;
  background: #171717;  
  padding: 50px;
}

$(document).click(function(){

  var svg = Snap.select('#pin');
  var hole = svg.select('#hole');
  var marker = svg.select('#marker');  
  
  marker.attr({ transform: 't0 220'});
  hole.attr({rx:0,ry:0});
  
  hole.animate({rx: 80, ry: 6}, 500, mina.easeout, function(){
    marker.animate({ transform: 't0 0'}, 500, mina.easein, function(){
      marker.animate({transform: 's-1 1'}, 250, mina.easein, function(){
        marker.animate({transform: 's1 1'}, 250, mina.easeout)
      });
    });
  });
});