31. May 2015
In my further exploration of SVG filters, I came up with this rippling underwater effect.
The best effects with SVG filters are achieved by combining them, as I figured out during my exploration of the goo effect. This one is fairly simple - feTurbulence and feDisplacementMap together give this ripple effect that kind of makes it look like the text is submerged underwater. Which I think is pretty cool.
SVG filters have a lot of potential, and you can get a lot of really interesting effects out of playing around with them. I am far from done. Note though that there are compatibility issues with some of them (and with combinations of some of them).
The thing about SMIL
I originally made this animation with SMIL (Synchronized Multimedia Integration Language) which was an XML-based language for defining animations. However, since it was around this time intended deprecated by the Chromium team, and was anyhow never implemented in IE, I knew I had to look into alternatives.
Since the animation necessitates changing an attribute on a filter primitive, I knew that alternative had to be JS-based. And that is why when I did get around to redo the animation, it was with GSAP.
It is every bit as easy to do the animation that way, and instead of removing the original SMIL-tag, I just commented it out if somebody should want to compare syntax.