Building Web Applications with SVG - Cdn.oreilly.com

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