title: Animate an SVG gradient bar to appear like it's filling with the stop colors
body: <p>I have a bar with a gradient that I'm trying to animate like it's filling from no color to several colors in different stops, going from the left side to the right side. The end result should freeze the gradient colors.</p>
  
  <p>How do I do it with SMIL?</p>
  
  <p>Can I achieve this with css animation?</p>
  
  <p><a href="https://jsfiddle.net/vz5b1z6j/12/" rel="nofollow noreferrer">here's the code and a non working fiddle example:</a></p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg"  height="100%" viewBox="0 0 744.094 871.654"&gt;
    &lt;g 
      &lt;defs&gt;
        &lt;linearGradient id="myGrad" &gt;
          /* Are my offset correct? or should it rise from 0 to 100? */
          &lt;stop offset="25%" stop-color="yellow" /&gt;
          &lt;stop offset="25%" stopColor="green" /&gt;
          &lt;stop offset="25%" stopColor="blue" /&gt;
          &lt;stop offset="25%" stopColor="blue" /&gt;
          &lt;stop offset="25%" stopColor="red" /&gt;
          &lt;animate
            attributeName="stop-color"
            /* What should I animate here and how? */
            dur="4s"  /&gt;
        &lt;/linearGradient&gt;
      &lt;/defs&gt;
  &lt;path d="M740.096 599.704c-.027-8.88-7.245-16.055-16.123-16.028-8.88.03-16.055 7.248-16.028 16.127.014 4.4 1.8 8.377 4.668 11.272-8.59 28.308-21.002 55.294-37.011 80.391A328.59 328.59 0 0 1 635.908 742l-.266-.25a363.91 363.91 0 0 1-26.633 25.27 16.081 16.081 0 0 0-6.03-1.157c-8.877.027-16.054 7.246-16.025 16.125.002.803.08 1.583.198 2.35a347.143 347.143 0 0 1-6.908 4.942c-32.778 22.805-68.54 39.69-106.458 50.321a16.04 16.04 0 0 0-11.487-4.781c-7.366.022-13.545 5.004-15.425 11.768a382.23 382.23 0 0 1-64.675 5.518c-.74 0-1.483 0-2.226-.01a381.546 381.546 0 0 1-97.874-13.344c-1.671-7.411-8.299-12.947-16.216-12.925a16.533 16.533 0 0 0-10.72 3.992 387.615 387.615 0 0 1-55.212-25.694 387.43 387.43 0 0 1-70.985-51.554c.345-1.34.548-2.741.545-4.197-.031-9.154-7.475-16.551-16.63-16.527a16.874 16.874 0 0 0-3.306.344 347.345 347.345 0 0 1-35.2-46.19 346.111 346.111 0 0 1-37.443-79.483 16.52 16.52 0 0 0 4.7-11.606c-.03-9.154-7.473-16.554-16.629-16.527-9.157.028-16.556 7.476-16.527 16.63.024 7.932 5.62 14.537 13.065 16.146a362.193 362.193 0 0 0 39.28 83.476 363.588 363.588 0 0 0 36.575 48.045 16.476 16.476 0 0 0-1.042 5.794c.025 9.154 7.47 16.556 16.626 16.528a16.46 16.46 0 0 0 4.932-.76 403.53 403.53 0 0 0 74.128 53.867 403.134 403.134 0 0 0 57.52 26.77c1.203 8 8.095 14.133 16.424 14.109a16.53 16.53 0 0 0 11.606-4.8 397.583 397.583 0 0 0 14.54 3.959l.07-.279a397.86 397.86 0 0 0 87.68 10.298c.775.01 1.545.01 2.32.01a398.45 398.45 0 0 0 68.72-5.99 16.018 16.018 0 0 0 11.481 4.782c6.838-.024 12.648-4.317 14.953-10.342.514-.127 1.031-.243 1.545-.373l-.327-1.3c39.487-11.13 76.72-28.736 110.85-52.484a361.937 361.937 0 0 0 7.78-5.563 16.115 16.115 0 0 0 5.876 1.107c8.88-.032 16.055-7.25 16.026-16.13 0-.72-.068-1.424-.162-2.118 27.448-22.866 51.049-49.615 70.208-79.658a340.632 340.632 0 0 0 38.989-84.832c6.898-1.825 11.982-8.104 11.957-15.574"
          fill="url(#myGrad)" /&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>Updated fiddler thanks to the comment:</strong>
  <a href="https://jsfiddle.net/vz5b1z6j/17/" rel="nofollow noreferrer">SEE HERE</a></p>