In Chapter 2, A Primer on DOM, SVG, and CSS, we created a few sundry shapes with a maximum of four points. Although those will get you pretty far drawing basic charts, for complex shapes we'll need to draw paths. Path elements define outlines of shapes that can be filled, stroked, and so on. They are generalizations of all other shapes and can be used to draw nearly anything.
Wait: what about
polygon? While those are also multipoint SVG primitives, they're really pretty much identical to
Most of the path's magic stems from the
d attribute; it uses a mini language (in programming terms, a domain-specific language, or DSL) of three basic commands:
To create a path, we might write something like the following:
Create a new folder in
chapter3/ and put an
index.js in it. In
lib/main.js, change the following line:
Change it to read:
Then, create a new function...