My face with a Photoshop cutout filter applied to it

KATRINEMARIE.ME

Welcome. Click on an image below to read about the given project.

Back to homepage

Underwater Text

31. May 2015

See the Pen Underwater SVG Text by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

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.

Back to homepage