SVG animation opacity on loop

animation svg opacity
John Vaughan picture John Vaughan · Aug 6, 2012 · Viewed 25.6k times · Source

I would like to make an svg path's opacity to go from 0 to 100 back to 0 and to 100 on a continuous loop.

So far i can get it to animate from 0 to 100 but not back again,

Any ideas?

Thanks

Answer

Erik Dahlström picture Erik Dahlström · Aug 8, 2012

You can animate any number of values using the values attribute, like this:

<rect x="10" y="10" width="20" height="20">
    <animate attributeName="opacity"
             values="0;1;0" dur="1s"
             repeatCount="indefinite"/>
</rect>

That will animate from opacity 0 to opacity 1 (100%), and then back to 0 again, over the course of 1 second.

Related questions

SVG animation is not working on IE11

I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure. Here is the full example: JSFiddle sample SVG: <svg class="circular-loader" viewBox="25 25 50 50"> <circle class="…

Read More
How to draw a vector path progressively? (Raphael.js)

How to animate a vector path like it's being drawn, progressively? In other words, slowly show the path pixel by pixel. I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming …

Read More
How to loop SVG animation sequence?

I have sequence of animationTransform: <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/> If …

Read More