<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139 159">
  <path class="glass" fill="none" stroke="#fff" d="M84.2 110.5l-1.5 2.4H56.1l-2.3-4.5c-3.3-6.3-5.9-12.9-7.8-19.8l-2.1-7.7V40.2h51.3v40.7l-2.4 9.5c-1.8 7.1-4.7 13.9-8.6 20.1z"/>
  
  <path id="ondas" fill="none" stroke="#fff" d="M44.1,65.8c0,0,10.7-3.5,21.7,0c11,3.5,20.9,0,20.9,0s4.8-1.9,9.1,0.1"/>
  
  
  
  <path class="ice-top" fill="none" stroke="#fff" d="M54.2 87.5l-1.8-2.6c-1.8-2.6-1.1-6.2 1.5-8l2.6-1.8c2.6-1.8 6.2-1.1 8 1.5l1.8 2.6c1.8 2.6 1.1 6.2-1.5 8L62.2 89c-2.6 1.9-6.2 1.2-8-1.5z"/>
  <path class="ice-bottom" fill="none" stroke="#fff" d="M67.8 107.5l-1.8-2.6c-1.8-2.6-1.1-6.2 1.5-8l2.6-1.8c2.6-1.8 6.2-1.1 8 1.5l1.8 2.6c1.8 2.6 1.1 6.2-1.5 8l-2.6 1.8c-2.6 1.8-6.2 1.1-8-1.5z"/>
  
  <circle class="bubble" fill="#fff" cx="74.7" cy="110.9" r="1.7"/>
  <circle class="bubble-2" fill="#fff" cx="80.9" cy="110.9" r="1.3"/>
  <circle class="bubble-3" fill="#fff" cx="82.8" cy="110.9" r="1.3"/>
  <circle class="bubble-4" fill="#fff" cx="78.4" cy="110.9" r="1.2"/>
  <circle class="bubble-5" fill="#fff" cx="70.2" cy="110.9" r="1.2"/>
  <circle class="bubble-6" fill="#fff" cx="57.5" cy="110.9" r="1"/>
  <circle class="bubble-7" fill="#fff" cx="60.7" cy="110.9" r="1.3"/>
  <circle class="bubble-5" fill="#fff" cx="60.7" cy="110.9" r="1.6"/>
</svg>

/*#ondas{
  transition: all;
  
  animation-name: ondas;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
@keyframes ondas{
  50%{
   transform: skew(0.2deg , -0.5deg) translateY(-2px);
  }
}*/











body{
  background: #5b2a83;
}
.bubble{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  opacity: 0;
}
.bubble-2{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: .3s;
  opacity: 0;
}
.bubble-3{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-delay: .9s;
  opacity: 0;
}
.bubble-4{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 3.5s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  opacity: 0;
}
.bubble-5{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 3.2s;
  animation-iteration-count: infinite;
  animation-delay: .2s;
  opacity: 0;
}
.bubble-6{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  animation-delay: .1s;
  opacity: 0;
}
.bubble-7{
  transition: all;
  transform-origin: 50% 50%;
  animation-name: bubble;
  animation-duration: 2.2s;
  animation-iteration-count: infinite;
  animation-delay: .9s;
  opacity: 0;
}
.ice-top{
  transition: all 0.5s ease 0s !important;
  transform-origin: 50% 50%;
  animation-name: ice;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.ice-bottom{
  animation: ice-2 2s linear infinite;
}
@-webkit-keyframes ice-2 {
    from { -webkit-transform: rotate(0deg) translateX(0.5px) rotate(0deg); }
    to   { -webkit-transform: rotate(360deg) translateX(0.5px) rotate(-360deg); }
}
@keyframes ice {
  0%{
    transform: translate(0px,0px);
  }
  50%{
    transform: translate(0px,-3px) rotate(50deg);
  }
  100%{
    transform: translate(0px,0px);
  }
}
@keyframes bubble{
  50%{
    opacity : .4;
  }
  100%{
    cy : 69;
  }
}

/*var tl = new TimelineMax({repeat:-1});

tl.to("#ondas", 2, {morphSVG:"M43.9 65.4s2 8 7.3 3.8 7-3.8 7-3.8-.8 7 5.3 3.8 6.1-3.8 6.1-3.8.1 9 6.4 3.8 6.8-3.8 6.8-3.8.8 7 4.3 3.8 8.3-3.8 8.3-3.8"})
.to("#ondas", 2, {morphSVG:"M43.9 65.4s2 3.8 7.3 3.8 7-3.8 7-3.8-.8 3.8 5.3 3.8 6.1-3.8 6.1-3.8.1 3.8 6.4 3.8 6.8-3.8 6.8-3.8.8 3.8 4.3 3.8 8.3-3.8 8.3-3.8"});*/

svg = document.getElementById('Capa_1');
s = Snap(svg);

var path = Snap.select('#ondas');

animatePath();

function animatePath(){
  path.animate({ d: "M44.1,65.9c0,0,10.7,3.5,21.7-0.1s20.9-0.1,20.9-0.1s4.8,1.9,9.1-0.2"}, 2000, mina.linear, resetPath);
}

function resetPath(){
	path.animate({ d: "M44.1,65.8c0,0,10.7-3.5,21.7,0c11,3.5,20.9,0,20.9,0s4.8-1.9,9.1,0.1" }, 2000, mina.linear, animatePath);
}