title: SVG water fill animation
body: <p>I am to get a wipe animation to look like water is filling up inside of a drop. It currently is a square with a wave animation over top of the drop logo. It does the wave animation correctly but I can't get it to stay inside the drop and also fill up.</p>
  
  <p>I'm getting closer but I still need the actual logo to be inside the circle at least.</p>
  
  <p>My progress:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
      &lt;title&gt;SVG Line Animation Demo&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style&gt;
  
      .st0{fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:5;}
      .st1{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:5;}
  
      #logo2 {
          width: 150px !important;
          height: 150px !important;
          position: relative;
          margin-top: -100px;
      }
  
      #banner {
          border-radius: 50%;
          width: 150px;
          height: 150px;
          background: #fff;
          overflow: hidden;
          backface-visibility: hidden;
          transform: translate3d(0, 0, 0);
          z-index: -1;
          margin-bottom: -50px;
      }
  
      #banner .fill {
          animation-name: fillAction;
          animation-iteration-count: 1;
          animation-timing-function: cubic-bezier(.2, .6, .8, .4);
          animation-duration: 4s;
          animation-fill-mode: forwards;
      }
  
      #banner #waveShape {
          animation-name: waveAction;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
          animation-duration: 0.5s;
          width:300px;
          height: 150px;
          fill: #04ACFF;
      }
  
      @keyframes fillAction {
          0% {
              transform: translate(0, 150px);
          }
          100% {
              transform: translate(0, -5px);
          }
      }
  
      @keyframes waveAction {
          0% {
              transform: translate(-150px, 0);
          }
          100% {
              transform: translate(0, 0);
          }
      }
  
  &lt;/style&gt;
  
  &lt;div&gt;
      &lt;div id="banner"&gt;
          &lt;div class="fill"&gt;
  
              &lt;svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve"&gt;
  
                  &lt;path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
      c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
      c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/&gt;
              &lt;/svg&gt;
           &lt;/div&gt;
      &lt;/div&gt;        
  
      &lt;svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve"&gt;
  
          &lt;path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
      C130.7,77.6,68.3,6.7,68.2,6.7z"/&gt;
          &lt;g&gt;&lt;path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
          c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
          H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z"/&gt;&lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>