Learn D3.js

Polygons and polylines

Polygons (<polygon>) and polylines (<polyline>) render closed or open shapes using straight lines specified by a list of vertices passed in the points attribute. The only difference between them is that polygons close the shape. To close a polyline you need to repeat the initial coordinates. They also have a fill-rule attribute that controls the winding order, and determines if a hole will be drawn inside the shape when an outline crosses with itself.

The following code creates two polygons. The second one has a fill-rule that will reveal a hole:

<svg width="600" height="300">  <polygon        points="150,150 50,150 100,20 150,50 200,200 50,200 20,154 48,82 32,20"      fill="blue"/>  <polygon   points="450,150 350,150 400,20 450,50 ...