Paths

On This Page

• Introduction
• Defining Paths and Straight Lines
• Horizontal and Vertical
• Closing a Path
• Multiple MoveTo Codes
• Uses for Paths
• Paths/Straight Line Code Table

Introduction

Paths are incredibly powerful tools in our drawing arsenal, but they definitely take a lot of practice and spatial understanding to get them rendered just right.

Paths are defined with a specific syntax using coordinates and single letter codes to define how the points are connected and how they are drawn. The more complex the path, the better it is to write each new point on its own line so you can keep track of every part of the shape. Indenting with a tab isn't required, but helps with general readability both visually and with a screen reader.

Defining a Path and Straight Lines

The Path object has a data attribute, written as d, which accepts all of the data we feed it to draw the line. It's best to think of the path object as giving instructions to a pen placed on a piece of paper. As you add more data into the d element between the quotes, it will make the pen move about the paper and draw the shape.

We start off with the letter M followed by an x, y coordinate. The M stands for "Move To" and means it is defining the point where you are moving your pen to on the paper before you start drawing, essentially placing your pen down on that starting point and getting ready for the next drawing motion.

You have a variety of options to draw straight lines between points. Throughout all of this, it's important to understand that if a letter is capitalized, it means the coordinates are absolute, while a lowercase letter means the following units are relative to the previous instruction.

In our above example, we've placed the pen at the upper-left corner of the canvas by writing "M 0, 0" and we are now ready to draw. To draw a straight line out to the point 30, 40 on the canvas, we would write it as this:

<path d="M 0, 0
	L 30, 40" stroke="blue" stroke-width="4"/>

The capital L means that the 30, 40 is an absolute point on the canvas where we want to move our pen, drawing a line from 0, 0 to 30, 40. The letter L stands for "Line To" as in "draw a Line To this point."

Note that we've already added the stroke and stroke-width attributes to the path so it can be rendered visibly. The stroke is blue and is 4 units wide.

From this point, perhaps we want to draw a straight line angling up and to the right from where we stopped. If we want the resulting second line to be half the length of the previous line and match the angle to create sort of a reverse checkmark shape, we could use the relative lowercase l character like this:

<path d="M 0, 0
	L 30, 40
	l 15, -20" stroke="blue" stroke-width="4"/>

This lowercase l will draw a line to a point that is 15 units to the right of the previous point, and 20 units up from the previous point. Note the negative value for the Y value to make the next point be higher up relative to the previous point. You could also define this with absolute terms by writing it with an uppercase L as "L 45, 20."

Horizontal and Vertical

Instead of using X and Y values, if you just wanted to create perfectly straight horizontal or vertical lines, you can use the H and V letter codes in the path.

The uppercase H and V codes will use absolute units to make horizontal and vertical lines respectively, while lowercase h and v codes will use relative values to draw based on the previous point. The following path code will create a set of stairs going from the canvas origin and moving down and to the right into the canvas:

<path d="M 0, 0
	H 20
	V 20
	H 40
	V 40
	H 60
	V 60
	H 80
	V 80" stroke="blue" stroke-width="4"/>

Each step of the staircase is 20 units wide and 20 units high. Alternatively, and especially if you don't want to have to use math when calculating the absolute values of where you want the points to go, you can use the lowercase h and v codes to keep it all relative.

The following code will produce the exact same shape, this time without having to add 20 each time to the H and V values:

<path d="M 0, 0
	h 20
	v 20
	h 20
	v 20
	h 20
	v 20
	h 20
	v 20" stroke="blue" stroke-width="4"/>

You'd have to keep track of how many h and v entries you have, but if you have odd repeated numerical values for where you want your horizontal and vertical lines to end up and you know the amount you want of their length, you can switch to a lowercase relative code.

Relative lowercase and absolute uppercase codes can be intermixed with no issues whatsoever, just be sure to keep track of where you are moving your pen with each code entry so you don't lose spatial track of how the path is being formed.

Closing a Path

After finishing our path, if we want to quickly draw a line from the last point in the path to the first MoveTo point, we add the letter Z to the path data before the closing double-quote.

Let's simplify the stair case a bit as if drawing a stairwell icon for a tactile map, and give it an outline and an oldLace filled. Follow along with this code:

<path d="M 0, 0
	h 20
	v 20
	h 20
	v 20
	h 20
	v 20
	h 20
	v 20
	H 0 Z" stroke="black" stroke-width="4" fill="oldLace"/>

Starting off again at 0, 0, we use 4 sets of relative horizontal and vertical path codes to make 4 progressive steps downwards and to the right, 20 units wide and 20 units tall.

Note how the last line is formed. We used an absolute capital H to draw a horizontal line all the way back to 0 on the x axis, and then added a capital Z before closing the path data quotes.

A capital or lowercase Z at the end of the data will close the path, drawing a final line to connect the beginning and end points. This ensures that any strokes connect and join properly and that all of the shape will be filled properly with a fill color if that is the intention.

Multiple MoveTo Codes

A path element doesn't only have to contain one M code. You can place as many paths as you'd like within one path element by using multiple M codes.

All path codes and data written after an M code belongs to that particular MoveTo point until another M is used. This is exactly like placing a pen on a piece of paper and drawing a line, lifting the pen and moving it to another part of the paper, and then drawing again from there.

<rect x="10" y="10" width="100" height="100" stroke="black" stroke-width="2" fill="none"/>
<path d="M 10, 10
	L 110, 110
	M 10, 110
	L 110, 10" stroke="black" stroke-width="2" fill="none"/>

Here's a sample of building a square icon with an X inside of it, or each corner of the square connected by a diagonal line. This icon is commonly used to point out where Elevators are on a tactile map.

A 100x100 square is drawn first using the <rect> element, with the x and y starting coordinates at 10. The rect only has a black 2 unit stroke and no fill.

The <path> element contains two MoveTo codes. The first starts at the top-left of the square and uses a LineTo code to draw down to the lower-right corner.

The second MoveTo code "moves" the pen over to the lower-left corner of the square without drawing a line. It then uses a LineTo code to draw up to the upper-right corner of the square.

Again, the path element is using a 2 unit black stroke and a fill of "none" so there is no infill color.

Multiple MoveTos like this can help keep more complex paths within just one element without having to write out multiple path elements one after the other. Just be sure to keep track of which codes belong to which MoveTo points as you add more within the data attribute.

Uses for Paths

Now that we know how to write out paths, us and essentially direct a digital pen across our virtual canvas, are any ideas of how you can use this element popping up?

• More complex financial and scientific charts and graphs.
• Maps and routes
• Drawing a city skyline.
• Motion/speed lines for cartoons.
• Handling multiple org chart square and circle connections within just one element.
• Building robust circuit diagrams and PC board traces.
• Containing interior design layouts for rooms or halls within one element.
• Building an iconography set for user interfaces or print design.

Path Straight Line Code Table