Menu
I'd like to generate an SVG gradient that varies over time.
In this example code, I'd like to generate an ellipse whose gradient is red with a yellow stripe that travels from west to east over time (creating a shimmer effect):
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >
<animate
attributeName="offset"
from="0%"
to="100%"
repeatCount="indefinite"/>
</stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
This doesn't work yet, but I'm not sure whether it's because I'm doing it wrong, or it's not an effect I can achieve with SVG gradients.
455
SVG provides for two types of gradients: linear gradients and radial gradients. Once defined, gradients are then referenced using 'fill' or 'stroke' properties on a given graphics element to indicate that the given element shall be filled or stroked with the referenced gradient.
SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.
How it create SVG Animations: Select the Frame you want to animate and click on Enable SVG Export. Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity. Use the built-in live-preview to tweak your animations until you're happy with the result.
The linear-gradient function is applied to the background-image property. If, for example, on hover, you change the linear-gradient values, you can't apply a transition and animate the background (the change will be instantaneuos even if you apply a transition).
Here's an example that works on Firefox and Chrome:
The values attribute that is provided in the spec here is used in this example.
<linearGradient id="myG">
<stop offset="0" stop-color="#f15361">
</stop>
<stop offset=".25" stop-color="#fbaf4a">
<animate attributeName="offset" dur="5s" values="0;1;0"
repeatCount="indefinite" />
</stop>
<stop offset="1" stop-color="#f15361"/>
75
You just need a time period for the animation. Add dur="5s" for instance as an attribute of the animate element.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >
<animate
attributeName="offset"
from="0%"
to="100%"
dur="5s"
repeatCount="indefinite"/>
</stop>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
