Drawing Lines (M, L, H, V, Z Commands)

[00:00] We’re going to move our pen to 10 by 10, and we’re going to start creating our first line here. We’re going to use the uppercase L command, which is the line command that accepts absolute positions. It accepts an X and a Y coordinate. That’s all you need to create a line. So we’re going to create a line from this point to our new point, which is going to be 100 on the X, and will remain at 10 on the Y. We’ve got a straight line there. I’m going to go ahead and follow that up with another line. It’s going to go to 100 on the X and 100 on the Y. Another line is going to go from, or sorry, it’s going to go to 10 on the X, 100 on the Y. And then we can just go back to our starting point, and we’ve got a square. We can also skip this last one and just use the Z command or the close path command, which will create a straight line from our current point back to the first point of the path.

[00:56] Now we’re using the uppercase L, which again means the absolute position. So if we change our starting position, things are going to start to get a little weird. But we can go ahead and take a look at the relative position version of this. So we’re starting from the same starting point. We’re going to use the lowercase L. Again, that’s going to be relative position. So to get to 100 by 10, from 10 by 10, we’re going to add 90 and 0. So there’s our straight line. We’re going to do another one where we don’t want to change the X, but we want to add 90 to the Y. Then we’re going to go left. So we’re going to say negative 90 on the X and no change on the Y. And then we’ll just close that with our Z.

[01:45] And now the beauty of this is, let me uncomment this guy really quick. We can move this guy on the X to wherever we want. We can move it on the Y to wherever we want. So there is actually a quicker way to do this. Whoops. We’re going to create another path. We’re going to set up our same. Actually, we’re going to move. Let’s see. We’ll start at 10 and we’ll move 110 down on the Y. What we’re going to use is the H. Again, this is going to be the capital or the absolute version of the horizontal command. And we’re going to move to 100 on the X. So the horizontal command only takes an X coordinate since the horizontal command only operates on the X axis. We’re going to follow that up with a capital V command. And we’re going to do the same thing there. We’re just going to move down to 100. Whoops. Sorry. We’re already started at 110. So let’s just move down to 200. Then our next H is going to go back to 10. And then we’re just going to close that off with the Z command. So a much shorter version of making this. However, if we want to move this guy, we’re going to run into the same problem because we have the absolute positioning. So let’s take a quick look at the relative version of these guys.

[03:02] I’m going to just kill this and we will move 110 over on the X axis. And we’re going to use the lowercase h. And again, this is going to be relatively positioned to the preceding point. So what we want to do here is move over 90, right? Save that. So this is our new square over here on the right. Then we want to vertically move 90. Then we want to horizontally move negative 90. Then we want to close the path. And again, we could move this to wherever we like. And the shape will remain. Okay.