5 ms·
I was curious if this could be achieved without the need for JavaScript, and I see there is an SVG animate element that looks like it ought to do the trick. In
by j4_james 10y ago
I was curious if this could be achieved without the need for JavaScript, and I see there is an SVG animate element that looks like it ought to do the trick. In theory you should be able to get the turbulence seed to cycle from 0 to 500 by adding an animate child on the feTurbulence element like this:
<feTurbulence id="turb" baseFrequency="0.2" type="turbulence">
<animate attributeType="XML" attributeName="seed" from="0" to="500" dur="50s" repeatCount="indefinite"/>
</feTurbulence>
It's not quite the same as the JavaScript implementation, which makes the seed random, but I wouldn't have thought that was necessary in this scenario.
Anyway, while it seems to work OK for me in Firefox, it doesn't look quite right in Chrome, and it fails completely in IE and Edge. Not sure if I'm doing it wrong, or SVG animation is just not well supported yet, but this would be my preferred solution if it could be made to work reliably.
- Arnavion 10y agoThat is SMIL, and is on the way out. IE never implemented it, and Chrome wants to remove it (but hasn't yet). CSS animations are the replacement. https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati... https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B1-25%5D https://groups.google.com/a/chromium.org/forum/#!topic/blink...
- j4_james 10y agoThat's disappointing, because CSS wouldn't be a viable replacement in this case - it can't animate XML attributes like seed. Or is that something they plan to support one day?
- Arnavion 10y agohttps://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html#def_attributes https://dev.w3.org/SVG/proposals/css-animation/animation-pro...