SVG filters are awesome and can do all kinds of crazy stuff. The turbelence one, <feTurbulence>, is particularly cool.

The demo on MDN shows how gnarly it can blast out a circle:

It's a filter that really looks like movement but it doesn't actually move. I was playing with a demo that used a turbulence filter the other day that was applied to the entire screen, and noticed as I resized the browser window that the elements under that filter were kind of waving. Because, I suppose, the filter was applying to different areas of the element.

I figured we could exploit that idea a little by animating padding and translate, keeping the elements in the same place but ultimately moving the filter. Check it:

Uncomment the last few lines of CSS to sneak a peak into the animation that is happening to make it work.


1,373 2 22