0

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.

How do I do it with SMIL?

Can I achieve this with css animation?

here's the code and a non working fiddle example:

<svg xmlns="http://www.w3.org/2000/svg"  height="100%" viewBox="0 0 744.094 871.654">
  <g 
    <defs>
      <linearGradient id="myGrad" >
        /* Are my offset correct? or should it rise from 0 to 100? */
        <stop offset="25%" stop-color="yellow" />
        <stop offset="25%" stopColor="green" />
        <stop offset="25%" stopColor="blue" />
        <stop offset="25%" stopColor="blue" />
        <stop offset="25%" stopColor="red" />
        <animate
          attributeName="stop-color"
          /* What should I animate here and how? */
          dur="4s"  />
      </linearGradient>
    </defs>
<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)" />
  </g>
</svg>

Updated fiddler thanks to the comment: SEE HERE

S. Schenk
  • 1,960
  • 4
  • 25
  • 46
  • Draw the full bar. Apply a clipping mask to only show the part of the bar that's filled. Animate the mask's width. Done. – Niet the Dark Absol Feb 24 '18 at 17:53
  • Great idea I've added the clip but I'm not sure how to animate it so it'll show one part at a time, plus at the moment the fiddler gradient s not working properly though locally it works fidle. Please see the update above. – S. Schenk Feb 24 '18 at 18:13

2 Answers2

0

I'm not really sure what you want the animation to look like but here's one way to do it using SMIL...

Note that some of your stop colour properties are invalid as you've written them in camel case. I've corrected that below too.

<svg xmlns="http://www.w3.org/2000/svg"  height="100%" viewBox="0 550 744.094 871.654">
  <g> 
    <defs>
      <linearGradient id="myGrad" >
        <stop offset="0%" stop-color="yellow"/>
        <stop offset="0%" stop-color="green">
        <animate
          attributeName="offset"
          to="25%"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0%" stop-color="blue">
        <animate
          attributeName="offset"
          to="50%"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0%" stop-color="blue">
        <animate
          attributeName="offset"
          to="75%"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0%" stop-color="red">
        <animate
          attributeName="offset"
          to="100%"
          dur="4s" fill="freeze"/>
        </stop>
      </linearGradient>
    </defs>
<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)" />
  </g>
</svg>

Looks like Chrome has a bug where it doesn't animate offsets that are percentages. Here's a workaround for that...

<svg xmlns="http://www.w3.org/2000/svg"  height="100%" viewBox="0 550 744.094 871.654">
  <g> 
    <defs>
      <linearGradient id="myGrad" >
        <stop offset="0%" stop-color="yellow"/>
        <stop offset="0" stop-color="green">
        <animate
          attributeName="offset"
          to=".25"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0" stop-color="blue">
        <animate
          attributeName="offset"
          to=".5"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0" stop-color="blue">
        <animate
          attributeName="offset"
          to=".75"
          dur="4s" fill="freeze"/>
        </stop>
        <stop offset="0" stop-color="red">
        <animate
          attributeName="offset"
          to="1"
          dur="4s" fill="freeze"/>
        </stop>
      </linearGradient>
    </defs>
<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)" />
  </g>
</svg>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • nothing is happening of me ? is it normal ? [am in Chrome] – Temani Afif Feb 24 '18 at 19:00
  • Looks like Chrome has a bug, it fails to animate offsets that are percentages. I've added a workaround version. – Robert Longson Feb 24 '18 at 19:05
  • yes, i also added my answer :) i was used to animate value from 0 to 1 like i did previously here : https://stackoverflow.com/questions/48937532/how-to-animate-a-svg-figure-like-a-progress-bar-with-css/48937889#48937889 – Temani Afif Feb 24 '18 at 19:08
  • by the way those SMIL animation are a pain, you never know when they will work for sure :/ – Temani Afif Feb 24 '18 at 19:10
0

Maybe you want something like this:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 550 744.094 871.654">
    <defs>
      <linearGradient id="myGrad" >
        <stop offset="0" stop-color="yellow">
                <animate attributeName="offset" values="0" dur="2s" fill="freeze"  /> 
            </stop>
        <stop offset="0" stop-color="green" >
            <animate attributeName="offset" values="0;.2" dur="2s" fill="freeze"  /> 
        </stop>
        <stop offset="0" stop-color="blue" >
        <animate attributeName="offset" values="0;.5" dur="2s" fill="freeze"  /> 
        </stop>
        <stop offset="0" stop-color="red" >
            <animate attributeName="offset" values="0;1" dur="2s" fill="freeze"  /> 
        </stop>
        <stop offset="1" stop-color="transparent" />
        <animate />
      </linearGradient>
    </defs>
<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)" />
</svg>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415