title: Fill Font-awesome icon with CSS only
body: <p>I want to add animation to my Font-awesome Heart icon, i want to have a wave effect on hover and click.</p>
  <p>And it should be empty otherwise not black, like the <code>far fa-heart</code>.
  But i don't know how, and i've been on this for hours</p>
  <p>I have this for now</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-css lang-css prettyprint-override"><code>.plop{
        height: 200px;
    }
  
  #wrap{
      height: 25px;
      width: 25px;
      overflow: hidden;
      border:0px;
  }
    
  #banner {
          height: 25px;
          width: 25px;
      }
      
  .fill {
          animation-name: fillAction;
          animation-iteration-count: 1;
          animation-timing-function: cubic-bezier(.2, .6, .8, .4);
          animation-duration: 3s;
          animation-fill-mode: forwards;
          mix-blend-mode:screen;
      }
      
  #waveShape{
          animation-name: waveAction;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
          animation-duration: 2s;
          width: 25px;
          height: 25px;
          fill: #04ACFF;
      }
  
  #wrap i{
      position: absolute;
      font-size:25px; 
      background:#fff;
      }
  
    @keyframes fillAction {
      0% {
        transform: translate(0, 25px);
      }
      100% {
        transform: translate(0, -25px);
      }
    }
    @keyframes waveAction {
      0% {
        transform: translate(-45px, 0);
      }
      100% {
        transform: translate(0, 0);
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://kit.fontawesome.com/8ac5de0510.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;section class="plop"&gt;
      &lt;div id="wrap"&gt;
                  &lt;i class="fas fa-heart" id="banner"&gt;&lt;/i&gt;
          &lt;div class="fill"&gt;
          &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" viewBox="0 0 50 50" xml:space="preserve"&gt;
                &lt;path id="waveShape" d="M 300 300 V 2.5 c 0 0 0 -0.5 -1 0.5 c 0.1 2.6 
                -28 6 -40.5 -2.4 c -3.5 -1.6 -40.6 2.4 -40.6 2.4 c -12.3 1.1 -23.9 5 
                -31.9 6 c -2 -0.1 -27.1 2.4 -32 -1.9 c 0 0 -33.1 -7.7 -40.1 -5.7 c -18.1 
                10.4 -40.8 2.4 -40.8 2.4 c -7.3 -1 -19.1 -2.8 -32.1 5.2 c -7 4 -20 -1 
                -32.2 -1.9 c 0 0 -3.1 -0.3 -8.1 -0.7 V 300 H 300 z"/&gt;
              &lt;/svg&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/Zlastaneur/x24konag/" rel="nofollow noreferrer">https://jsfiddle.net/Zlastaneur/x24konag/</a></p>