Building Web Applications with SVG - Cdn.oreilly.com

■■ Animating the illustration The initial petal of the flower (which is later replicated) has
three separate animations applied to it. The first gradually changes its orientation from 0 to
360 degrees over a period of 7 seconds. The next 2 animations vary the x value of the centroid
and the radius in the y direction over, respectively, 8 seconds and 3 seconds. Because 3, 7, and
8 are relatively prime, the entire animation will repeat every 168 seconds (3 × 7 × 8 = 168).
Because the animation is applied to a petal that is then reused 24 times, each of the 25 petals
inherits the same animation, with the rotation and repositioning being applied relative to each
differing initial position. One more circle at the center of the composition has its own color
animated to add a pleasant bit of chromatic variety.
example 4: Use of Gradients and patterns
This example, visible at http://srufaculty.sru.edu/david.dailey/svg/grid2.svg, consists of just 19 lines of
markup (not counting its animations) and no JavaScript. It demonstrates that some rather intriguing
results can be concocted by juxtaposing some quite simple SVG elements.
After you have grown accustomed to SVG, animations of this sort will be remarkably easy to create
and experiment with on your own.
10 Building Web Applications with SVG