<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="612" height="792" viewBox="0, 0, 612, 792">
  <defs>
    <clipPath id="Clip_1">
      <path d="M181,460.269 L244.667,487.309 L244.667,699.763 L181,699.763 L181,460.269 z"/>
    </clipPath>
    <clipPath id="Clip_2">
      <path d="M154.26,57.171 L580.144,171.287 L466.029,597.171 L40.144,483.056 L154.26,57.171 z"/>
    </clipPath>
  </defs>
  <g id="Layer_1">
    <path d="M89.69,106.717 L530.598,106.717 L530.598,547.625 L89.69,547.625 L89.69,106.717 z" fill="#FFFFFF" id="square"/>
    <g clip-path="url(#Clip_1)" id="tail-mask">
      <path d="M184.343,446.602 L239.343,446.602 L239.343,617.658 L184.343,652.513 L184.343,446.602 z" fill="#FFFFFF" id="tail"/>
    </g>
    <g clip-path="url(#Clip_2)" id="pee-mask">
      <path d="M212.334,538.854 C212.334,538.854 211.855,331.045 211.855,327.693 C211.855,272.558 255.773,227.861 309.948,227.861 C364.124,227.861 408.042,272.558 408.042,327.693 C408.042,382.829 364.124,427.526 309.948,427.526 C309.948,427.526 211.793,436.962 211.793,332.991" fill-opacity="0" stroke="#3399CC" stroke-width="55" id="pee"/>
    </g>
    <path d="M211.301,370.947 C196.113,370.947 183.801,358.635 183.801,343.447 C183.801,328.259 196.113,315.947 211.301,315.947 C226.489,315.947 238.801,328.259 238.801,343.447 C238.801,358.635 226.489,370.947 211.301,370.947 z" fill="#3399CC" id="circle"/>
  </g>
</svg>

body{
  margin: 0;
  padding: 0;
  background-color: #39c; 
}
svg{
  display: block;
  margin: 0 auto;
  max-width: 300px;
  max-height: 300px;
  top: 0; 
}

#pee{
  visibility: hidden;
}

#tail{
  visibility: hidden; 
}

$('document').ready(function(){
  var tween = new TimelineMax({
    repeat:-1
  }); 
  
  tween
    .to("#tail", 0, {y:"-=140"})
    .to('#square', 0.8, {rotation:15, transformOrigin:"50% 50%", ease: Elastic.easeOut})
    .fromTo("#circle", 0.8, {scale:0, transformOrigin:"50% 50%"}, {scale:1, delay:-0.3, ease:Elastic.easeOut})
    .set("#pee", {visibility:"visible"})
    .set("#tail", {visibility:"visible"})
    .from("#pee", 1.6, {drawSVG:"100% 100%", ease:Back.easeOut})
    .to("#tail", 0.7, {y:"+=140", ease: Bounce.easeOut, delay:-1.1})

    .to("#tail", 1, {y:"-=140", ease: Elastic.easeIn})

    .from("#pee", 1, {drawSVG:"100% 0%", ease:Power2.easeOut})
    .to("#circle", 1, {scale:0, ease:Elastic.easeOut})
    .to('#square', 0.5, {rotation:90, transformOrigin:"50% 50%", ease: Power4.easeOut,delay:-0.1})
      ;

});