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