Curved lines with the SVG path

What if we need to draw with curved lines? Now, we will be able to draw all possible polygons, but we lack the possibility of drawing more complex shapes (such as curves and polynomial functions). Fortunately, the SVG standard provides a very flexible element for this called the path element. With this element, one can draw the most flexible curves and shapes as well as all the previous common shapes.

The path element takes a d attribute to define the exact shape of the path. The shape can be defined with special commands (such as drawing straight line, drawing smooth curve, and so on) and point coordinates.

Let us first look at the preceding example; we want to draw the same star-shaped polygon, but this time with ...

Get Data Visualization with D3 and AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.