div.bg-dark.vh-100.d-flex.justify-content-center.align-items-center
  svg(width="300" height="300" viewBox="0 0 100 100")
    path(fill="#ffffff" d="M 50 80 Q 58.514571353076 79.727774788672 65 75.980762113533 Q 71.963203435596 71.963203435596 75.980762113533 65 Q 79.727774788672 58.514571353076 80 50 Q 79.727774788672 41.485428646924 75.980762113533 35 Q 71.963203435596 28.036796564404 65 24.019237886467 Q 58.514571353076 20.272225211328 50 20 Q 41.485428646924 20.272225211328 35 24.019237886467 Q 28.036796564404 28.036796564404 24.019237886467 35 Q 20.272225211328 41.485428646924 20 50 Q 20.272225211328 58.514571353076 24.019237886467 65 Q 28.036796564404 71.963203435596 35 75.980762113533 Q 41.485428646924 79.727774788672 50 80 Z")#btn-splat
    path(fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M 44 55 C 45 65 54 65 55 55")
    circle(cx="38" cy="43" r="3" stroke-width="0" fill="#000000")#circle-hack

#btn-splat
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.8))
#circle-hack
  filter: drop-shadow(22px 0 0 #000000)

$('#btn-splat').on('mousedown', () => {
  TweenLite.to('#btn-splat', 0.3, {attr: {d: 'M 56 86 Q 55.514571353076 76.727774788672 61 71.980762113533 Q 62.963203435596 62.963203435596 76.980762113533 66 Q 84.727774788672 63.514571353076 86 56 Q 71.727774788672 33.485428646924 69.980762113533 29 Q 68.963203435596 25.036796564404 64 23.019237886467 Q 61.514571353076 23.272225211328 57 27 Q 37.485428646924 16.272225211328 29 18.019237886467 Q 22.036796564404 22.036796564404 29.019237886467 40 Q 11.272225211328 32.485428646924 14 44 Q 11.272225211328 49.514571353076 21.019237886467 62 Q 27.036796564404 70.963203435596 26 66.980762113533 Q 49.485428646924 87.727774788672 50 80 Z'}, duration: 0.5, ease: Bounce.easeOut});
}).on('mouseup', () => {
  TweenLite.to('#btn-splat', 0.3, {attr: {d: 'M 50 80 Q 58.514571353076 79.727774788672 65 75.980762113533 Q 71.963203435596 71.963203435596 75.980762113533 65 Q 79.727774788672 58.514571353076 80 50 Q 79.727774788672 41.485428646924 75.980762113533 35 Q 71.963203435596 28.036796564404 65 24.019237886467 Q 58.514571353076 20.272225211328 50 20 Q 41.485428646924 20.272225211328 35 24.019237886467 Q 28.036796564404 28.036796564404 24.019237886467 35 Q 20.272225211328 41.485428646924 20 50 Q 20.272225211328 58.514571353076 24.019237886467 65 Q 28.036796564404 71.963203435596 35 75.980762113533 Q 41.485428646924 79.727774788672 50 80 Z'}, duration: 0.5, ease: Bounce.easeOut});
});