Draw an SVG Shape by Hand Practice

[00:00:00]
>> So we have an exercise, which is to kind of try and get ourselves more familiarized with these SVG paths. And so, I wanted to have us create a smiley face together, [LAUGH] so I'm going to actually bring up my iPad so that you can see what I'm drawing.

[00:00:26]
And then, you can shell out the xy coordinates of what you think Needs to happen to draw a smiley face, let me actually bring up my iPad. And it will, of course, to me and, And there we go, okay, so let's do this together, so what kind of smiley face should we draw?

[00:01:12]
[LAUGH] Should we just draw a, Pretty simple one like this or actually, I think what do you guys think of this? [LAUGH] Give me like nods or like thumbs ups, a smile for encouragement, thank you. [LAUGH] And okay, let's try drawing this one, [SOUND] if you wanna get really fancy, I wonder how you would draw a heart shape, if anyone figures out the SVG path for these heart shapes.

[00:01:51]
For the sake of this exercise, let's just draw kind of this one. So I'm not gonna draw the circle around it, but let's draw just the eyes and the mouth together, okay. So I have it currently in a coordinate system, 100 pixels by 100 pixels, And so, let's say this is 50 pixels, so let's draw the first eye, let's say this is also 50 pixels.

[00:02:34]
So what does that eye look like, let's shell it out, and so I think that means that we might want to move to, what does this point look like?
>> About 25?
>> Ooh, thank you, so x position at 25 and then a y position, what does that look like?

[00:03:00]
>> 25 maybe also?
>> 25 maybe also, okay, and we're just gonna draw a straight line down to here, so that is a line two. And so, it should have the same x coordinate, but then what should we do for the y then since we we said this is 25 by 25.

[00:03:21]
So, this one should be, should we give it-
>> [INAUDIBLE]
>> What did you say?
>> Five or ten, depending on how far you wanna go.
>> Okay, so let's make it go down by 10 pixels and let's call this 35. All right, let us put that in, 25 and if you're following along, and please put it in the notebook yourself also.

[00:03:58]
And I personally just think it's kind of fun just like seeing the notebook work. [LAUGH] And 35, wait, okay, so that's because, hold on, Sorry, so if you saw that, if you're following along in the notebook, will you delete this line that says transforms. So I don't think we need that, so just delete that line and if you haven't touched the notebook yet, I'm gonna publish that change.

[00:04:42]
So then just reload and you'll be able to see it. And then, let us then draw, This other side so that one, we shall have the same, Y coordinate, and actually, this is very interesting because what we're going to do next is in the same path string, we're going to say, okay, draw that line down, pick up the pen and move it to this new place and where our second eye is going to be.

[00:05:27]
So we're going to say move it to, so if we want it to be, I guess symmetrical, we will want it at 75. So we say move it to 75, 25, line two and then we just said 75, 35. So, let's confirm that that looks as we wanted to, so we say move to 75, 25 and then draw a line straight down to 75, 35.

[00:06:11]
See what happens, and to execute the cell, the shortcut is shift, enter, and then you can execute the cell. And then, we have these two cute little dots of eyes, [LAUGH] and so it's working exactly as we were hoping to. So now we just need to put in that little smile, so let's put in that smile together.

[00:06:34]
So for that smile, we need to have a curve too, So again, we actually need to pick up our pen again and then move it to this new position. So let's do this, but first figure out what that new position should be. So, let's figure out the xy for that, if you want to shout out some positions for where you think this should be.

[00:07:03]
Can you see that, let me use a different color, so let me know where you think this position should be.
>> 75, 30, 75, 15?
>> 75, wait, hold on 75, 15 actually I think, do you mean x is 15 and y is 75?
>> Yes,
>> Cool, thank you, so you were saying 15, you said 15, right, and 75?

[00:07:37]
Okay, so we'll have this be, let me use a different color actually, let me use the same colors as I used in our examples. So you said 15, 75 and then let's write out our curve two, and actually let us fill in the very end first. So let us do this one first, so if we want that to be perfectly symmetrical because this one is 15, 75 that means, bear with me, as I do really bad math on the spot, 100 minus 15 is 85.

[00:08:23]
Please correct me on this, [LAUGH] that sounds right, right? So, we're going to end up by 85, 75 and then let's draw some anchor points. So do we say just for the sake of cuz I say, yeah, okay, so let's draw some anchor points. Let's draw one down here, and then let's draw one down here, so I think that's about where we need it for the curve to go where it is, yeah.

[00:09:10]
What do you think that looks? [LAUGH]
>> Does that need to be symmetrical between your curves or does that matter?
>> It doesn't actually really matter, I mean, it really depends on what kind of smile you want. I guess right now, we're going for a symmetrical smile, but if you want an asymmetrical smile, that's fine, too.

[00:09:34]
That's perfectly fine, we can do that, should we do that? Okay, give me the coordinates for the blue that you want, the blue anchor point, oops. Okay.
>> 20, 100.
>> 20, 100, thank you, David, all right, and then our non-symmetric purple anchor, coordinate control point. Where should we have that since it's non-symmetric, anyone that wants [LAUGH] to volunteer the smile?

[00:10:19]
>> 85, 90.
>> Cool, 85, 90, let's see what happens. All right, let's enter this in and see what happens. All right, so then we have M15, 75, C20, 100, 85, 90, 85, 75, ooh, look at that. [APPLAUSE] That's our asymmetric smiley face. [LAUGH] I think you look pleased, but some of you are in shadows so I can't quite tell.

[00:11:09]
[LAUGH] But yeah, there it is, yeah, these are our three lines, and depending on where, well, how we play around with the numbers, like if we do that, then we get a little slanted smiley face. Because we pulled the anchor point all the way to all the way to like the zero, so we basically placed the anchor point at this corner.

[00:11:34]
And if we do the same thing to the other anchor point and if we pull it all the way to the other 100 corner and then we'll see this. If we instead, you know what would be fun, is if we pull the anchor point up so instead of coming down to this corner, what if we pull this anchor point up.

[00:12:01]
So then let's try like a 40 or something, And now we don't have a smiley face anymore, we have a little squiggly. So yeah, this is why I think the path, SVG path, is so powerful, and this is why I especially think that the curve to the command is so powerful, because you can probably imagine if we like, and with the curve to, we can draw and you kind of curve shape.

[00:12:32]
And then if you just start to chain these commands together, then you really can kind of make any shape you want. And if you were to, for example, create a custom shape in Illustrator and then export it, then you can potentially. Sometimes, they export it a little bit weird but you can potentially read through this path string that they'll give you.

[00:12:57]
And then, you might be able to kind of decipher what's going on and that'd be really cool.