Platonic Shapes

[00:00:00]
>> Sarah Drasner: So let's do an overview of the SVG DOM so that when you look inside an SVG DOM you're not like, what is going on here? Actually, once I start to break down what's in the SVG DOM, you're gonna be like, that's not that bad, that's pretty good.

[00:00:15]
So cool, let's look at some platonic shapes. So if we've got a square, a circle, a star, and some lines, we've got this SVG beneath it, and let's break this down just a little bit. So when we're looking at the SVG, you can really imagine, and again, if you were in the course yesterday, this is an analogy I used then, too.

[00:00:36]
SVG is kind of like looking at a piece of graph paper that's infinite in all directions. And you can place things anywhere on that piece of graph paper, you're finding things on x and y coordinates. It's a little like, have you ever played Battleship, who's played Battleship when they were a kid, most people?

[00:00:54]
It's like, A2, and then, I sunk your battleship, it's kinda the same idea, you're plotting cx, cy, radius, circle. So you have this piece of graph paper, and you also have this thing called the viewBox. And that viewBox is a little window where you're looking at that piece of graph paper.

[00:01:14]
So you could feasibly draw something out here, and not even see it because you're looking into that piece of graph paper using the viewBox. We're gonna animate the viewBox later today and do some cool stuff with that, too. So let's take a look at these shapes again, differently, let's imagine them on that piece of graph paper.

[00:01:37]
So if we have the SVG here, there are a couple of redundant things, like this x and this y. Since they start at 0 0, those are the defaults, we actually don't need them. The width and height, as you saw earlier, it's fine to have on there. But if we took them off, then the SVG would scale, right, it would go in all directions.

[00:01:58]
So that piece of graph paper, those squares of the graph paper can get bigger and smaller. But all of the things are still plotted on those coordinates, no matter if it gets bigger or smaller or what. So here we have the width and height, you can keep that on the SVG, or you can remove it if you want to expand to its container.

[00:02:17]
And then we have a viewBox, that viewBox has a few different values. And here's a pattern that you're gonna notice. A lot of things in SVG, and even just in the DOM, will start with this idea of x coordinate, y coordinate, width, height. That's what a lot of getBoundingClientRect, if you've ever tried to work with something really particular in the DOM.

[00:02:42]
That's even for non-SVG things, getBBox will return things like x, y, width, height, viewBoxes will do x, y, width, height. And so will rectangles inside an SVG DOM, x, y, width, and height. So that's what these numbers represent, 0 and 0, it's just starting from the corner, that's the default, right?

[00:03:03]
And then 450 and 100, it's basically the same thing as saying width is 450, height is 100. All right, now you can kind of understand the pattern that we'd make for a rectangle, so the rectangle starts x at 10, y at 5. This piece of graph paper is just an abstraction, it's not really plotted to that graph paper.

[00:03:24]
x at 10, y at 5, the fill is white, the stroke is black, and width and height is 90. And so then we draw a full rectangle, well, that's a square. But if I wanted to make this a rectangle and make it longer, I would just change the width to 180.

[00:03:42]
And then it becomes twice as long, pretty simple, you got it? Cool, all right, circles are my favorite because they're even just three attributes. How cool is that, just three attributes and you can draw a circle. You're basically drawing the points to the middle of the circle. So unlike the rectangle starting here, we're actually plotting the middle of the circle.

[00:04:05]
So we're gonna say cx, cy, and a radius, and then we draw a circle, which is really cool. Because if you're working with D3 or something like that, you can change the size of the circle and not compensate for how big or small it's getting. If you're making scatter plot kind of things, you can keep manipulating that radius.

[00:04:26]
And they're still gonna stay consistently in those spots, right, so that's pretty cool. Polygons have this kind of array of values thing, so we start with x, y, x, y, x, y, x, y. So we're going from here, to here, to here, to here, to here. And it will always kind of assume that you're wrapping around to the last thing.

[00:04:47]
When it says polygon, it's gonna say, okay, whatever this is is the penultimate or second to last thing. And then we wrap around to the first and we close it off and we make a shape. So it doesn't necessarily have to be a star. If I changed one of these coordinates to something else, it would move, and then the star would be like [SOUND].

[00:05:08]
And that would be fine, but it's fairly easy to make those kind of polygon units from just an array of values. We have two lines here, and part of the reason why we have two lines is that I wanted to show you that even if it's straight or a diagonal it's the same.

[00:05:25]
It's the same amount of attributes, we have x1 and y1, x2 and y2. So we're starting from x1 here, we go to x2 here, and then y1, y2, and it draws a line. So it's pretty much the same pattern again and again. Where we're finding x and y coordinates, finding x and y coordinates, and we're drawing between them.