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.
Here’s how it’s done:<br />
■■ The basic shapes We begin <strong>with</strong> two triangles, having different orientations and gradient<br />
fills. Some opacity in the gradients is used to allow the background to be seen.<br />
■■ Duplication using script In this case, script is used to build a triangular tiling through<br />
cloning of the initial triangles. The center of each triangle is then filled <strong>with</strong> another triangular<br />
shape filled <strong>with</strong> random colors (from a very select range of possibilities).<br />
■■ Finishing effects An underlying gradient is applied and slowly animated to give an almost<br />
subliminal sense of “atmosphere.” For browsers that support SMIL animation, some of these<br />
effects, including rotation, are animated.<br />
example 13: A <strong>Web</strong> Application for Drawing Graphs (Networks)<br />
This particular application has been built and rebuilt by its authors in many different languages (cT,<br />
HyperTalk, Java, VML, and now <strong>SVG</strong> <strong>with</strong> JavaScript) over the past 25 years. It has proven invaluable<br />
for the teaching of discrete mathematics to undergraduate students. Basically, using a few thousand<br />
lines of JavaScript, it builds a click-and-drag GUI interface to allow the creation, editing, replication,<br />
storage, and retrieval of finite graphs. Like many emerging web applications, the <strong>SVG</strong> here is sort of<br />
secondary, <strong>with</strong> JavaScript and event handling consuming the predominant effort. <strong>SVG</strong> can be used<br />
to play a crucial role in the increasingly important realm of web applications.<br />
CHAPTER 1 <strong>SVG</strong> Basics 19