Shapes and layouts

Shape generator functions return data strings for the <path> SVG element, which can be used to draw straight lines, Bezier curves, symbols, and arcs. Shapes are described in SVG by a path language expressed as a compact string containing letters and numbers. The letters represent commands, such as M: moveTo, L: lineTo, A: arc, and C: cubic Bezier curve. In complex shapes, a path data string can be very long.

Two examples of path data strings drawing arbitrary shapes are shown here (spaces are optional and are usually not present in generated code):

M50,20 L200,200 V140 h70 Z
M100,200 C100,100 250,100 250,200 S400,300 400,200

Path data strings are used in the d (data) attribute of <path> elements, as in the following SVG code:

<svg width="800" height="300">
     <path d="M50,20L200,200V140h70Z"
           fill...