title: SVG animation on scroll?
body: <p>I have a small svg:</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;svg xmlns="http://www.w3.org/2000/svg" width="164.969" height="195"&gt;
          &lt;path d="M164.979 28.97a3.675 3.675 0 0 1-6.19 2.66 90.127 90.127 0 1 0-.99 132.64 3.685 3.685 0 0 1 4.95 5.46 97.5 97.5 0 1 1 1.07-143.48 3.656 3.656 0 0 1 1.16 2.72z" fill="url(#linear-gradient)" fill-rule="evenodd"&gt;&lt;/path&gt;
          &lt;linearGradient id="linear-gradient"&gt;
              &lt;stop offset="0%" stop-color="#e87975"&gt;&lt;/stop&gt;
              &lt;stop offset="100%" stop-color="#f3c7a1"&gt;&lt;/stop&gt;
          &lt;/linearGradient&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I wonder if it possible to somehow fill the white background with linear gradient on scroll from top start to bottom end? Unfortunately I found only drawing examples on intentet and my small expericence in jQuery doesn't give me a chance to do it by myself. Thank you!</p>