Post by (@cmglee) on Sun, 08 Nov 20 21:01:18 +0000 View Full Post A powerful feature of SVG filters is displacement maps, which lets one image be "refracted" by another. Even better, they can be animated. Using the concept from http://redstapler.co/realistic-water-effect-svg-turbulence-filter and http://codepen.io/soju22/pen/OqPyrm , I created the following SMIL animation of an underwater scene: http://upload.wikimedia.org/wikipedia/commons/9/9b/Demo_animated_feTurbulence_feDisplacementMap_SMIL.svg Those on redstapler and codepen reverse the direction of the animation at the start and finish, and are a little distracting to an observant viewer. To fix it, I instead cycled the hue of the turbulence. As hue smoothly wraps around, these artifacts no longer appear, though the animation is shorter. The bitmap from http://commons.wikimedia.org/wiki/File:Great_barrier_reef.JPG by Wise Hok Wai Lum.