Complex paths

More complex polylines and closed figures can be created with the <path> element and a sequence of commands L/l (“line-to”), H/h (“horizontal line-to”) and V/v (“vertical line-to”) in the attribute d.

Capital letters indicate that the following coordinate is to be interpreted as an absolute value within the shape, while small letters describe the coordinate relative to the preceding coordinate.

The x and y values are separated by a space or a comma. Separation before and after a letter is optional.

Diagonal line

<path d="M10 10 L90 90" stroke="#01b8aa" />

<path d="M10 10 l80 80" stroke="#01b8aa" />
../../../_images/line-diagonal.png

Horizontal line

<path d="M10 50 H90" stroke="#01b8aa" />

<path d="M10 50 h80" stroke="#01b8aa" />
../../../_images/line-horizontal.png

Verttical line

<path d="M50 10 V90" stroke="#01b8aa" />

<path d="M50 10 v80" stroke="#01b8aa" />
../../../_images/line-vertical.png

Combination

<path stroke="#00B7A9" d="M80,45v45H61.25V63.75h-22.5V90H20V45l30-30L80,45z" />
../../../_images/path.png

Note

For very complex paths, we recommend using an external program and then exporting your graphics as SVG, such as Adobe Illustrator, Affinity Designer or Inkscape.