Building Web Applications with SVG - Cdn.oreilly.com

Here’s how it’s done:
■■ The sky The sky consists of two rectangles. One, the background, is simply filled with
a linear gradient consisting of colors that move from brighter shades of sky blue to gray,
from bottom to top. The second rectangle provides a snow globe effect. The foreground
and smog, due to the overpopulation of communities along the front range, are simulated
through the color transitions in the foothills and the overlay of gray stemming from the
background and foreground.
■■ The snow globe effect This is produced using a radial gradient of varying transparency in
the foreground. With SVG gradients, you vary not only the colors as they change gradually
from one to another, but also their relative opacity.
■■ The balloon The balloon is entirely handled through JavaScript. A series of almost parallel
Bézier curves is created with start points and endpoints that coincide. The control points differ
and change over time. The entire group (a element in SVG) then has its horizontal and
vertical positions varied through a timed loop that refreshes the screen every 10 milliseconds.
■
■ The drawing of the mountains There are four layers of mountains, each filled with a linear
gradient that changes from yellow-brownish in the plains and foothills to the blue-white
of the snowcapped peaks of the Continental Divide. The hint of green in the second range
behind the foothills is meant to suggest the presence of the forests there. The heights of the
peaks are randomly determined, with an array of random xy-coordinates being first generated
and then sorted by their x-values. Then they are divided into triplets so that the peaks can be
connected by a series of curves, each having the previous endpoint and the next separated by
points in a cubic Bézier curve.
CHAPTER 1 SVG Basics 7