Building Web Applications with SVG - Cdn.oreilly.com

example 9: Using a Filter to Create pond ripples over an Image
This example shows some of the more advanced aspects of scripted animated gradients used in conjunction
with filters to distort an image. The animated version shows ripples (customizable by the user
using HTML input elements) moving across an image—much as ripples would disrupt the reflection of
an image in a pond.
Here’s how it’s done:
■■ Creating concentric circles The circles are created with script. A gradient can have different
color bands, called stops, defined within it. In this case, a series of concentric stops (orange
and green) is created through script and added to a gradient, which is then applied to an
ellipse under the image of a face.
■■ Animating concentric circles The radius (or offset) of each stop is then modified gradually
through subtle changes in a setTimeout loop defined in JavaScript. Interestingly, the script for
this example resides in the HTML rather than within the SVG, and the SVG DOM is accessed
from there.
■
■ Distorting the image Once the above two things have been done, the rest is rather easy.
A filter is created that brings in both the concentric circles and the face as layers, and then distortion
is applied through a filter effect known as , using the red channel
of the gradient to determine the degree of distortion associated with the image. Because
green doesn’t contain red but orange does, provides the differential
distortion in concentric bands.
16 Building Web Applications with SVG