Lines

Now that we know all about cursors, let's start drawing stuff.

We've seen a bit of line commands in the last section, but we'll cover them in full here. As you might expect, the line commands let you draw straight lines.

The most generic of them is the L command, which draws a line to a specific (x, y) coordinate:

1. M5.05.0
2. L15.010.0

Just like how the m command moves the cursor relative to its current position, the lowercase l command draws a line relative to the current cursor position:

1. M5.05.0
2. l15.010.0

Vertical and Horizontal Lines

You can draw lines in specific directions using the H and V commands. H draws a horizontal line while V draws a vertical line:

1. M13.05.0
2. h-6.0
3. V15.0
4. H13.0
5. M7.010.0
6. h4.0

H and V also have lowercase versions, which use relative coordinates instead (just like the l command we just saw).

This will be the last time I explicitly mention the lowercase relative version of the commands. For the rest of this guide, assume that all commands have a relative variant!

The Close Path Command

The last type of line command is the close path command Z. This command draws a straight line from the current cursor position to the start of the path.

This means instead of explicitly using a line command to close a shape, you can accomplish the same thing by using Z:

1. M10.05.0
2. l-5.010.0
3. h10.0
4. Z

Funny enough, Z does have a relative lowercase version, but since it doesn't take any arguments, it's not functionally different from the uppercase version.

One cool thing about Z is that it will "close" your path, even if the cursor is already back at the start of the path. Consider this heart shape for example:

1. M 11.995 7.23319
2. C 10.5455 5.60999 8.12832 5.17335 6.31215 6.65972
3. C 4.4959 8.14609 4.2403 10.6312 5.66654 12.3892
4. L 11.995 18.25
5. L 18.3235 12.3892
6. C 19.7498 10.6312 19.5253 8.13046 17.6779 6.65972
7. C 15.8305 5.18899 13.4446 5.60999 11.995 7.23319

Notice that the heart begins and ends at the same point (highlighted above). This means there's no need for the Z command, right?

This heart just has one small problem. If we zoom in to the middle of the heart, we find this awkward corner where the start and end curves meet.

We can make this point look smoother by adding the Z command to the end of the path:

While using Z here doesn't add any new lines, it does tell the browser that the path is "closed", allowing it to draw the path correctly.

Practice

Trace over this house using all of the commands we've seen so far (including the cursor commands from the last section):