SVG Shape Solution

[00:00:00]
>> I hoped that exercise went well. Sorry again for the confusion about the translation. And but we have some really great, amazing pedals that have come through both in the chat and in the classroom. And so for us to go forward with I wanted to use the one that vijay, I hope I'm pronouncing the name correctly, but vijay, sent along.

[00:00:26]
And it's this really cool looking like flower or like it looks kind of like a fire. And I thought that just looks so cool. So, we're going to go ahead and use that. And I saw also that a picture had multiple different pedals, which is really cool. So in that case, what you can do is you've gone above and beyond.

[00:00:50]
And what you can do is I actually have this workshop utility functions notebook that's kind of like the secret glue behind all of my notebooks. And if you only just go here and just click on that, or you can also access it from this kind of like drop down is called workshop utility functions.

[00:01:12]
Just go in there and find the cell that's called pedal parts. And then just paste in your other pedals in here also. For anyone that wants to drop in a bunch of your own custom pads, and I have up to four options and that you can kinda just like pasting here.

[00:01:34]
And you'll see that propagating through the rest of the notebooks, yeah, so you can just put your petal passing here. But for us, let's go forward with this and firepath it's really cool looking, and I think I'm just gonna really quickly kind of decipher what's going on. Let's walk through really quickly what's going on with this flower pedal in retrospect.

[00:02:11]
I don't know why I chose such a complicated one to walk through but let's try and walk through and hopefully correct quickly together. So I see a few different set of commands going on. So I'm just kind of putting them into different rows so that it's easier for me to see.

[00:02:34]
So many curves. Good job Vj. So let's see what's going on. We have zero 085 I think we're starting out here, we have a line going to negative 20. So that must be here. Then we have a curve. So this must be this curve. And it ends at negative 3040.

[00:02:57]
So that looks right. And then we have another line that goes down coming here. So I'm now looking at this negative 2060. And then another curve. This is a great looking curve cuz now you have an anchor point. So you start here. And then you have an anchor point going this direction and the second anchor point going down in this direction and that's how you're getting kind of that, little gentle sine wave.

[00:03:24]
And then I see, so you copy and paste it. So then we went back down here and then we did this curve again on the other side so you married it. And actually just as a test let's make sure that the fill works great. Ooh, the fill looks great too.

[00:03:49]
Brilliant, this is so exciting. We're going to keep moving forward in the notebooks with this fire pedal, and in my notebooks but hopefully in your notebooks you'll be able to see your own pedal path. Being rendered as flowers as we go along. And as a kind of some SVG debugging, and these are probably the two most common bugs I ran across when I first was starting.

[00:04:21]
And it's that if you don't see your shape rendering on the screen, the two reasons might be that, you didn't set the width and height on your SVG. So that defaults to 300 pixels wide and 100 pixels tall. And and so you didn't set the width and height explicitly.

[00:04:42]
And your shapes are being drawn outside of that viewport and that's why you don't see it. That's the first Bug that I've come across many times and been frustrated by. And the second one is that for the shapes, you didn't set your necessary attributes. So that's your width and height on your rectangles.

[00:05:04]
That's your radius on your circles. And for the path, it's your define attribute. So those are the two common ways that I see bugs happening and then like confusion. And so watch out for those and actually I just thought of a third one, which is for any paths or lines.

[00:05:28]
If your shape doesn't kind of like automatically, making a shape that can be filled and that won't show up because by default paths, and all shapes are filled black and then stroke none. And so if you only have a path or a line, that won't show up either you have to be able to close your path or something like that to be able to see the fill.

[00:05:57]
So watch out for this.