 It's the awkward thing of like, you know, the format of the show is pretending the cameras aren't there and we're just having a chat. Oh, okay, so we don't have to do an intro? We don't have to. Okay. Do I do an intro? I don't know. Okay. We will, so what we'll do, you won't be able to see it because it's done in post, but your name will appear and do a Twitter handle. Oh, okay. So, around about, around about there. Like here. Yeah, yeah, yeah. Exactly. So I should. I don't have to explain who I am. No. Don't let me stop you, like go for it if you want. Okay. Can we start again? So it's one of your episodes again. It is. So it's going to be fun and animated and then the next episode will be boring old Jake talking about code again. So, but in the meantime, people can have fun. Hooray. And it looks like we're going to be talking about, ah, okay, SVG paths. SVG paths. So we're going to be demystifying SVG paths today. That's good because I have written SVG paths before and I feel like, yep, that's it. And then I close my eyes for five seconds and open them again. I'm like, I don't understand the word of this. I wrote it, but it's right only, right only syntax. So I think it's demystifying SVG paths a bit because just a bit, just like a bit more. It's good to set expectations. Setting expectations. Yep. Just because SVG paths are complicated because they're made to be read by computers and put together in graphics editors and to be as concise as possible. So they can be read and written by humans, but they can also be read and written by computers. And that's where like the disconnect comes, I think. And I'll often see SVG paths that are written by humans and you can read them to some degree. And then you see something that a graphics editor spit out and it gets really, really confusing. Yes. There would have been a spec discussion at some point where someone was saying the path should be done in XML with every instruction being a separate tag and then the other person arguing that it should be this concise thing that we have now. And I still, I think probably the right thing happened. Otherwise, you know, even the simplest thing is going to be like 100k. Huge. Yeah. And I have, I've had some SVG files in the past that have been huge already. So, um, so a question for you, Jake, have you ever hand coded an SVG? Yes, I have. On a scale of one to 10, how smug did you feel? Yeah, really. What I've got is on Squoosh, there's a little button for toggling a pixelated versus smooth when you zoom in. And the icon is a circle. And then when you click on it, it turns into a pixelated circle. And our icons are SVG and stuff. So the way I did it was you'd scale down a circle in Photoshop to find out where it would put all of the pixels. And then I did that as a path. And yeah, exactly. As you said afterwards, I was like, I think I might be the best programmer in the world. But again, I have looked at that code since I'm like, I've never touched that again. Absolutely not. I think that some people start off not quite sure how, how to hand code an SVG. And I always like to think about SVG as like an infinite piece of grid paper that you can just plot things onto. And then the viewbox is kind of letting you know how big that piece of grid paper is. This is like easy mode hand coding SVG, like little hamburger. I like it because like it kind of, there's a, there's a similarity between the markup and the lines. Yeah, I see. So then it's just the four corners of it. Hang on. What? Oh, okay. Okay. It's X and Y. Yeah. I had a breakdown for a second. Well, we're in easy mode. So if Jake's having a breakdown, we're off to a good start. We just had lunch and my brain hasn't woken up yet. All right. Yes. A line is XY and XY. Yeah. Okay. This is going to be a difficult episode. So there's a lot of that in SVG. There's X and Y coordinates. So the viewbox, you've got the X and Y coordinates of the starting point. And then you've got the width and height. And the lines you've got X and Y coordinates for the starting point. X and Y coordinates for the end points. Lots of X and Y coordinates in SVG land. Yes. But curves are a little bit more complicated because you start getting Bezier handles and a bit more maths and stuff involved. So for this episode, we're not going to go into maths because that's not my strong suit. We're going to look at it as if we were in a graphics editor. So thinking about it in terms of handles and pulling out handles to make curves. Yes. People have seen this sort of thing in Inkscape Illustrator sketch. I imagine that this is the kind of basic way of drawing wibbly lines. Yeah. Or as, yeah, Bezier curves are the correct name, I guess. Wibbly lines. But the output is wibbly lines. That's the best thing about past that you can draw kind of complex shapes. Why are they called Bezier curves? Because they're like a Samantha Bezier invented them. Samantha Bezier, sure. Yeah. Excellent. That's a verifiable fact. Wikipedia can reference this video. Definitely. So yeah, paths can be a little bit intimidating. Now this is quite a small path. Sometimes the things that you see coming out of graphics editors are just massive, very confusing. And some of the confusing bits are that you can have commas in paths. You can also get rid of the commas completely. And you can have spaces instead. Is there a case where you do one or the other, or is it just pick one, whichever you fancy? You can pick whichever one you fancy. So it can be a mix and mash of them. You can also do line breaks. So you can have the path on multiple different lines if you wanted to. Wait, what? Hang on. Sorry, I'm actually trying to read. So you've got like 3,010. Is that, well, how does it, because surely that's two different numbers, right? Yep, those are two different numbers. So you can also not have spaces. How does it work? So you can have spaces, you can not have spaces, and you can have commas. Oh, that's not 3,010. No. That's 30L0. Another thing that makes me sad is the fact that if you have two path commands that are the same one after another, you can drop the second path command. Okay. Yep. So it all gets a bit confusing, but it's worth getting to know SVG paths a little bit more because they're sneaking into CSS a lot more. This is my dog. I was going to say we have to do an introduction here. This is Brody, the best dog doing a little blep. And Brody is clipped with a clip path that is using path, the path function. Excellent. Which is still a little shaky browser-wise. I'm not certain exactly the browser support. I think it's, yeah, clip path is well supported, whether the path syntax is or not, I don't know. Path syntax, yeah. But I've definitely seen like animating across paths done, but again, yeah, I'm not sure of the full support. Yeah. So the path function, I think that was CSS shapes level two. We got added with the motion path module. So I think it's being like back added into other things. We're going to say that. We're going to go with that. And yeah. So you can also now morph between paths in CSS. So this is in Chrome. And you have to make sure that the paths have exactly the same number of points in order to do that. If they don't have the same number of points, you can use like a JavaScript animation library like green suck, morph, the SVG. Do you have any idea how that decides where it adds the points? Like how it decides where it's going to add the extra points? It rips through all the path data and does lots of maths and adds things, lots of maths that I don't understand. And then you don't have to worry about it. Brilliant. Yep. Excellent stuff. And we can also do animating things along paths. So this is offset path, the motion path module. That's the way I was talking about. Yeah. Super exciting. And again, that means that you can have these complex animations but just happening on the compositor. Yeah. And this is really exciting for animation because often computers, when you say, I want to move something between here and here or just go in straight line because that makes the most sense. Yep. But it's not necessarily going to feel the most natural. Like curved motions are really nice and natural. So you can use motion paths, just hidden motion paths animate things along more kind of natural trajectories. Very good. And again, for more browser support, you can use GSEP. Nice. So yeah, back to our really confusing path. We can format SVG paths like this, which I like a lot more if I'm writing out paths or trying to read them. Yeah, you said before that you have line breaks and they never fully processed that. Readable. This is nice. Yeah. Much nicer. So what we've got here is we've got the commands are all the letters. And then the numbers on the right-hand side are coordinates. Very nice. Yeah. And you can see that some of the commands have one set of coordinates and other ones have more coordinates and more complicated ones. Case matters. Yes. And the case matters of the case are absolute commands and lowercase are relative commands. And that means with absolute you're drawing to a particular point on the SVG canvas. So you're saying like go along 10 on the x-axis and 10 on the y-axis and draw a point there. Relative, you're drawing the point relative to the previous point. Yes. The thing that I love the most about relative commands when you get stuff out of a graphics editor often you get a mixture of absolute and relative which is a little bit confusing. Which ever shortest I guess. Yeah. But you can save out as all relative and the coolest thing about that is that then the first path coordinate if you change that you can move around where the SVG path is on the viewbox. So it allows you to kind of mess around with positioning a lot easier. I had not thought of that. Yeah, it becomes just a translate. Yeah, it becomes just a translate. And that's like one of the hardest things about mixed relative and absolute paths is that you can't easily move the SVG element around without adding transforms. Like you can't change the actual geometry and the positioning of it. So relative commands are where it's at. And then here we've got x and y coordinates. So I don't know whether... Did you ever have a little turtle fellow at school when you were younger the little robots that you move around? Yep. Oh, no, I didn't go to a school that could afford an actual robot. We had a dot on the screen, though. And it was like... It was about five pixels, but we were told it was a turtle. Okay, well, I had an actual robot. I had a little Roma. It was called Roma. It's a little white thing and it had little eyes on and you moved it forwards or left or right. And it had a pen down and a pen up function as well. So you could put it on a piece of paper and draw shapes on the paper. Yeah, I obviously went to a better infant school than Jake. Yeah. What infant school? Okay, so we're going to give you that experience now. Oh, thank you, okay. Yeah, I'm sorry that you missed out when you were small. So like the first command here we've got M1010 and that's saying move to 10 on the x-axis and 10 on the y-axis. So we're going to move our little turtle and then we're going to draw a line. This is an absolute line. So we're going to draw the line to 30. Yeah. 30. Oh, that's exciting. There we go. Thanks. And then we're going to do a relative line and we're going to do relative line 20 units down. Excellent. Yeah. So those are like basic line commands and we've got some other line commands that are like shorthand line commands. So H is horizontal line. Mm-hmm. So you can do a little horizontal line. What do you think of E is? I reckon it might be vertical. Yeah. Is that right? Yeah. Excellent. And it's relative again because it's lowercase. Yeah, relative again. Okay. Lowcase. Cool. Right, don't ask me any questions about that. So we're sticking just to cubic beziers for this because quadratic, there's too many points. It's too confusing. So we're just going to stick to like the two most basic curve commands. So this is just a curve and it's got three coordinates. The last one is the end value that we're going to. And then the first two are the bezier handle points. Right. So it's going to do that. Yeah. Is it? Yeah. Okay. You can see that they've got the bezier handles there. So you can imagine if you moved those bezier handle points the curve would change. Yep. And this is really cool for animation as well because once you know what individual path points are, if you wanted to animate a certain point of the path you could just interpolate that particular point. Very nice. In order to do that and that's nice and simple. So then this is smooth curve two and smooth curve two is really nice to pair with the curve command because you get an assumed bezier handle that reflects the last bezier handle from the curve. Exactly. Oh. So this is carrying on from the C one. Yeah. Carries on from the C one and because it reflects automatically the first bezier curve you get a really nice smooth continuation whereas it's actually quite hard to get smooth continuations if you don't have that you have to do more maths. I've always just done that manually in the past but doing exactly what you say there so I would have the first handle would be positive 20 from the position which is what it's going to that would be what it does automatically isn't it? Automatically. Yes. Very nice. So we do that. We've got that's our last little thing. It's very good. And our turtle's at our destination. I feel like I've been to a fancy infant school. That's the vibe I was going for. So yeah just another little bit of fun. I used there's a GSAP utility where you can create a motion path in the browser you can edit it. So if you're getting your head around curve like if you're getting a head around SVG path and you want to have a play around you can use this on code pen and you can just create an editable path in the browser. Interesting and it's not just it's changing the path entirely there because you can see that the one that's supposed to be reflected stops being reflected so it's actually changing the level command. Yeah. And you can save out the path as well. Very nice. It's just a little fun thing to play around with. Very good. Yeah. Do you feel like you understand SVG path a little bit more? Well there's the infant school thing which is certainly a plus but yes I do actually and it's I think probably because I have written SVG paths before I think probably the biggest takeaway which for me is writing them with line breaks which I know is such a small thing. Yeah. There's so much code I've got in my projects where I'm not doing that for no good reason. Yeah. That even just like that. Makes it nice and readable. Makes it so much more readable. We forgot last time to do introductions. Do you want to do introductions every time? Okay. Hi. This is H2V2 or 3 and I'm Jake Hartwell and sitting alongside me is Cassie Evans from Off of the Green Sock. Is that good? Yeah.