title: How to add animated gradient to an svg path?
body: <p>I have a heart svg path like so:</p>
  
  <pre><code>&lt;svg viewBox="0 0 100 100"&gt;
  &lt;path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And I'd like to add a gradient effect on it and move the gradient from left to right, as if the heart is shimmering.</p>
  
  <p>However, <code>path</code> doesn't accept a <code>background</code> property and if I use <code>fill</code>, it doesn't accept gradient as a value. It also doesn't have a <code>background-position</code> property (so that I can move the <code>background-position</code> from left to right by using <code>@keyframes</code>).</p>
  
  <p>Is there a way to achieve this?</p>