Using paths

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 polyline and polygon? While those are also multipoint SVG primitives, they're really pretty much identical to path.

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:

• M, meaning moveto
• L, meaning lineto
• Z, meaning closepath

To create a path, we might write something like the following:

Create a new folder in lib/ called chapter3/ and put an index.js in it. In lib/main.js, change the following line:

import './chapter2/index';

Change it to read:

import './chapter3/index';

Then, create a new function...