<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446.5 412.2">
<style type="text/css">
  .st0{opacity:0.5;fill:#FECE65;}
  .st1{fill:none;stroke:#484C7C;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}
  .st2{fill:#010202;}
  .st3{fill:#ffffff;}
  .st4{opacity:0.76;}
  .st5{fill:#F7FCFF;}
  .st6{fill:none;stroke:#484C7C;stroke-width:8;stroke-miterlimit:10;}
  .st7{fill:url(#SVGID_1_);}
  .st8{fill:#1D71B8;}
  .st9{fill:#E6007E;}
  .st10{fill:url(#SVGID_2_);}
  .st11{opacity:0.2;fill:#404C6A;}
  .st12{opacity:0.36;fill:#FFFFFF;}
  .st13 {fill: #FECB00;}
</style>
<defs>
  <mask id="liquid-mask">
        <path fill="#ffffff" id="front-1" d="M142.1,269.7c13.3-7.1,24.4-1.7,31.8,1.3c15.1,6,39.1,19.3,57.8,30.2c17.3,10.1,38.7,11.5,57.8,5.9
        c12.1-3.6,19.5-14.2,21.6-15.7c1.3-0.9,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,135.7,279.1,142.1,269.7z";/><path fill="#ffffff" id="front-2" d="M135.7,279.1c5.9,12.6,8.7,15,13.4,17.9c7.1,4.5,27.5,7.6,50.8,3.3c34-6.2,67.3-22.8,87.7-20.8
        c16.3,1.6,17.7,3.3,23.5,11.8c3.1,4.6,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,129.2,288.6,135.7,279.1z";/>
</path>
        <g id ="bubble-group" >
            <circle class="st2" cx="170.9" cy="383.8" r="7.2"/>
            <circle class="st2" cx="200.6" cy="380.4" r="2.2"/>
            <circle class="st2" cx="232.6" cy="385.9" r="9.3"/>
            <circle class="st2" cx="263.8" cy="383.8" r="3.3"/>
            <circle class="st2" cx="248.9" cy="380.4" r="2.2"/>
            <circle class="st2" cx="149.1" cy="381.3" r="4.7"/>
            <circle class="st2" cx="187.7" cy="396.2" r="5.2"/>
            <circle class="st2" cx="278.8" cy="382.7" r="4.4"/>
            <circle class="st2" cx="300.5" cy="382.7" r="4.4"/>
            <circle class="st2" cx="218.4" cy="403.9" r="5.3"/>
            <circle class="st2" cx="259.3" cy="405.3" r="3.9"/>
            <circle class="st2" cx="132.8" cy="384.6" r="6.3"/>
            <circle class="st2" cx="162.1" cy="403.9" r="5.3"/>
            <circle class="st2" cx="209.8" cy="391.2" r="4.1"/>
            <circle class="st2" cx="282.4" cy="404.2" r="8"/>
            <circle class="st2" cx="315.5" cy="379.3" r="1.1"/>
            <circle class="st2" cx="155.3" cy="392.4" r="1.5"/>
            <circle class="st2" cx="251.8" cy="393.2" r="0.8"/>
          
        </g>  </mask>
</defs>
<path class="st0" d="M67.3,369.6C28.2,330.4,3.9,276.3,3.9,216.5C3.9,96.9,100.9,0,220.4,0s216.5,96.9,216.5,216.5
  c0,58.6-23.2,111.7-61,150.7"/>
<line class="st1" x1="4" y1="369.6" x2="442.5" y2="369.6"/>

<g id="steam-bubbles" class="st3">
    <circle class="steam-bubble" cx="212.8" cy="100.8" r="19.8"/>
    <circle class="steam-bubble" cx="237.7" cy="100.8" r="24.6"/>
    <circle class="steam-bubble" cx="192.9" cy="100.8" r="20.2"/>
    <circle class="steam-bubble" cx="226.9" cy="85.1" r="24.2"/>
    <circle class="steam-bubble" cx="203.5" cy="71.4" r="19.8"/>
    <circle class="steam-bubble" cx="246.8" cy="76.2" r="10.8"/>
    <circle class="steam-bubble" cx="183" cy="83.4" r="12.1"/>
 </g>
<g>
  <g>
    <g class="st4">
      <g>
        <path class="st5" d="M243.8,138.5c0,7.2,0,32,2,39c11,38.9,88.1,147,88.5,147.8c9.8,18.8-3.9,41.7-25.4,41.7H129.1
          c-21.2,0-34.8-22.2-25.8-40.8c0.5-1.1,78.7-109.7,88.9-148.7c1.8-7,1-39,1-39H243.8z"/>
        <path class="st6" d="M243.8,138.5c0,7.2,0,32,2,39c11,38.9,88.1,147,88.5,147.8c9.8,18.8-3.9,41.7-25.4,41.7H129.1
          c-21.2,0-34.8-22.2-25.8-40.8c0.5-1.1,78.7-109.7,88.9-148.7c1.8-7,1-39,1-39H243.8z"/>
      </g>
      <path class="st5" d="M242.4,138.1h-50.5c-6,0-11-4.9-11-11v-11.8c0-6.1,5-11,11-11h50.5c6.1,0,11,4.9,11,11v11.8
        C253.4,133.2,248.4,138.1,242.4,138.1z"/>
    </g>
    <g id="backLiquid">
      <g>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="221.8502" y1="365.0522" x2="221.8502" y2="262.6526">
          <stop  offset="0" style="stop-color:#FFEF26"/>
          <stop  offset="5.948725e-02" style="stop-color:#FFE000"/>
          <stop  offset="0.1303" style="stop-color:#FFD300"/>
          <stop  offset="0.2032" style="stop-color:#FECB00"/>
          <stop  offset="0.2809" style="stop-color:#FDC800"/>
          <stop  offset="0.6685" style="stop-color:#F18F34"/>
          <stop  offset="0.8876" style="stop-color:#E95F32"/>
          <stop  offset="1" style="stop-color:#E61575"/>
        </linearGradient>

<path id="back-1" class="st7" d="M133.7,282.1c5.9,12.6,10.7,16,15.4,18.9c7.1,4.5,28.5,5.6,51.8,1.3c34-6.2,66.3-29.8,86.7-27.8
        c16.3,1.6,17.7,8.3,23.5,16.8c3.1,4.6,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,127.2,291.6,133.7,282.1z;"/>
        <path class="st7" id="back-2" d="M142.1,269.7c16.9,3.5,24.4,5.7,31.8,8.3c15.4,5.3,37.3,16.4,57.8,23.2c20.2,6.7,37,7.4,56.1,1.7
        c12.1-3.6,21.2-10.1,23.3-11.5c1.3-0.9,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,135.7,279.1,142.1,269.7z"/>
      </g>
    </g>
    <g id="front-liquid-copy"><path id="front-3" class="st13" d="M142.1,269.7c13.3-7.1,24.4-1.7,31.8,1.3c15.1,6,39.1,19.3,57.8,30.2c17.3,10.1,38.7,11.5,57.8,5.9
        c12.1-3.6,19.5-14.2,21.6-15.7c1.3-0.9,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,135.7,279.1,142.1,269.7z"/><path id="front-4" class="st10" d="M135.7,279.1c5.9,12.6,8.7,15,13.4,17.9c7.1,4.5,27.5,7.6,50.8,3.3c34-6.2,67.3-22.8,87.7-20.8
        c16.3,1.6,17.7,3.3,23.5,11.8c3.1,4.6,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,129.2,288.6,135.7,279.1z";/>
    </g> 
    <g  id="masked-liquid" mask="url(#liquid-mask)">
      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="219.0096" y1="266.1981" x2="219.0096" y2="367.0309">
        <stop  offset="0" style="stop-color:#FFEF26"/>
        <stop  offset="5.948725e-02" style="stop-color:#FFE000"/>
        <stop  offset="0.1303" style="stop-color:#FFD300"/>
        <stop  offset="0.2032" style="stop-color:#FECB00"/>
        <stop  offset="0.2809" style="stop-color:#FDC800"/>
        <stop  offset="0.6685" style="stop-color:#F18F34"/>
        <stop  offset="0.8876" style="stop-color:#E95F32"/>
        <stop  offset="1" style="stop-color:#E61575"/>
      </linearGradient>
            <path id="front-5" class="st10" d="M142.1,269.7c13.3-7.1,24.4-1.7,31.8,1.3c15.1,6,39.1,19.3,57.8,30.2c17.3,10.1,38.7,11.5,57.8,5.9
        c12.1-3.6,19.5-14.2,21.6-15.7c1.3-0.9,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,135.7,279.1,142.1,269.7z";/><path id="front-6" class="st10" d="M135.7,279.1c5.9,12.6,8.7,15,13.4,17.9c7.1,4.5,27.5,7.6,50.8,3.3c34-6.2,67.3-22.8,87.7-20.8
        c16.3,1.6,17.7,3.3,23.5,11.8c3.1,4.6,22.5,32.8,22.5,32.8c11,19.1-2.8,42.9-24.8,42.9H129.1c-22,0-35.8-23.8-24.8-42.9
        C104.4,324.2,129.2,288.6,135.7,279.1z";/>
    </g>
    <g>
      <g>
        <path class="st5" d="M235.8,146.5c0.3,26,1.7,31.3,2.3,33.1c8.9,31.9,58.9,106.2,87.8,147.6c0.7,1,1.2,1.7,1.5,2.1
          c3.1,6.3,2.8,13.7-0.9,19.7c-3.8,6.2-10.3,9.9-17.6,9.9H129.1c-7.2,0-13.6-3.5-17.4-9.6c-3.7-5.9-4.2-13.1-1.4-19.3
          c0.4-0.6,1.3-1.9,2.3-3.3c35.5-50.7,79.5-117.5,87.4-147.3c1.5-5.7,1.5-22.1,1.4-33H235.8 M110.5,329.6L110.5,329.6L110.5,329.6
           M243.8,138.5h-50.5c0,0,0.9,32-1,39C182,216.4,103.9,325,103.3,326.2c-9,18.7,4.6,40.8,25.8,40.8h179.7
          c21.5,0,35.2-22.8,25.4-41.7c-0.5-1-77.6-109.1-88.5-147.8C243.8,170.5,243.8,145.8,243.8,138.5L243.8,138.5z"/>
        <path class="st6" d="M243.8,138.5c0,7.2,0,32,2,39c10.9,38.8,88,146.9,88.5,147.8c9.8,18.8-3.9,41.7-25.4,41.7H129.1
          c-21.2,0-34.8-22.2-25.8-40.8c0.5-1.1,78.7-109.7,88.9-148.7c1.8-7,1-39,1-39H243.8z"/>
      </g>
      <path class="st6" d="M242.4,138.1h-50.5c-6,0-11-4.9-11-11v-11.8c0-6.1,5-11,11-11h50.5c6.1,0,11,4.9,11,11v11.8
        C253.4,133.2,248.4,138.1,242.4,138.1z"/>
    </g>
  </g>
  <rect x="197.2" y="142.4" class="st11" width="42.9" height="4.7"/>
  <path class="st12" d="M216.2,216.8c-3.2-0.9-9.3-0.7-12.3-0.1c-4.2,0.8-8.6,6.4-11.9,11.1c-7.7,10.8-51.8,76.8-55.1,88.7
    c-1.6,5.8,5.2,13.7,11.3,13.7h42c6.1,0,11.1-7.1,13.2-13.2c0,0,18.4-64.4,21.4-87.4C225.7,223.5,223.3,218.8,216.2,216.8z"/>
  <path class="st3" d="M209.8,133.8h-8.7c-1.6,0-2.9-1.3-2.9-2.9v-19.1c0-1.6,1.3-2.9,2.9-2.9h8.7c1.6,0,2.9,1.3,2.9,2.9v19.1C212.7,132.5,211.4,133.8,209.8,133.8z"/>
</g>
</svg>

</div>

body {
  margin: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.container {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
  width:400px;
}

#front-2, #front-4, #front-6, #back-2 {
  visibility: hidden;
}

TweenMax.set("svg", {visibility:"visible"})

TweenMax.staggerTo('#bubble-group circle', 4, {
  attr: {
    cy: 200
  },
  ease:Power2.easeIn,
  repeat: -1
}, 0.6)

var speed = 3.5;
var tlFront1 = new TimelineMax({repeat:-1});
tlFront1.to("#front-1", speed, {morphSVG:"#front-2", ease: Power0.easeNone})
  .to("#front-1", speed, {morphSVG:"#front-1", ease: Power0.easeNone});

var tlFront2 = new TimelineMax({repeat:-1});
tlFront2.to("#front-3", speed, {morphSVG:"#front-4", ease: Power0.easeNone})
  .to("#front-3", speed, {morphSVG:"#front-3", ease: Power0.easeNone});

var tlFront3 = new TimelineMax({repeat:-1});
tlFront3.to("#front-5", speed, {morphSVG:"#front-6", ease: Power0.easeNone})
  .to("#front-5", speed, {morphSVG:"#front-5", ease: Power0.easeNone});

var tlBack = new TimelineMax({repeat:-1});
tlBack.to("#back-1", speed, {morphSVG:"#back-2", ease: Power0.easeNone})
  .to("#back-1", speed, {morphSVG:"#back-1", ease: Power0.easeNone});

var bubbles = document.getElementsByClassName("steam-bubble");
var tlSteam = new TimelineMax({ repeat: -1 });
function animateBubbles() {
  for (var i = 0; i < bubbles.length; i++) {
    var b = bubbles[i];
    var tl = new TimelineMax({ repeat: -1 });
    tl
      .to(b, 1, {
        attr: {
          r: "+=7"
        },
        ease: Linear.easeNone
      })
      .to(b, 1, {
        attr: {
          r: "-=7"
        },
        ease: Linear.easeNone
      });
    tlSteam.add(tl, i/2);
  }
}
animateBubbles();