Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:2.8 hours
Snap 1
  • Overview
  • Transcript

2.1 Creating Basic Shapes

Hello and welcome back to animating with Snap.svg. In this lesson I wanna jump in and get our feet wet with the Snap.svg library as we create a couple of basic shapes. And we've already seen a quick example of how to do this in the last lesson. But in this lesson we're gonna talk about it a little more in-depth. So what I'm gonna start out doing is I'm gonna grab our site01 folder, and I'm just gonna copy it and paste it. And I'm gonna rename it site02 so we don't save over anything we've already done. And then I'm gonna grab the site02 folder and drag it down to the Brackets folder. So our index01.html file is the one we ended with in the last lesson, and we already have some basic scripts here. So we can get rid of the index.html file here. So I'm gonna right-click on that and hit delete. And then I'm gonna rename index01 to simply index.html. So now our index.html page has our script tag in it that includes svg file, our Snap.svg file, as well as a script element with some actual Snap code in it. So I'm gonna move this script tag here, the script element. I'm gonna move it at the end of our body so that we don't have to include this window on load. You can do it either way, it doesn't matter. And even if you put it at the end, you can still include the window.onload to be safe, but you don't really need it necessarily. So I'm going to save this file quickly and just take a look in the browser to make sure that it looks okay. So let's jump back in to Finder. We'll go into site02, double click on index.html and there we go. Everything looks fine, sort of. You'll notice we've got our circle here but it's kind of cut off at the bottom. And I'm in Chrome right now. If I were to right-click on this and click on Inspect Element, we could get our web developer tools down here. And you'll see that our circle has a cx attribute and it's set to 150 a cy attribute which is set to 150. Those are coordinates. And then a radius which is this r attribute equal to 100. And the circle was created using JavaScript code as you can see it renders as HTML, but it's created with JavaScript code. The svg itself, as you can see, takes up a little more space. When we hover that, you can see this light blue box around it. And that light blue box starts in almost the upper left corner of our screen but our circle is down and to the right a little bit. And that's what this cx and cy are, those are the coordinates. So the cx is our horizontal coordinate. So it's 150 pixels from the left side of the screen. And it's also 150 pixels from the top of the screen or from the top of the containing element. And then the radius of the circle is 100 pixels. So when we hover over that circle you can see the blue box that contains it extends down past the bottom of this area right here where it's cut off. So that circle is there it's just being cut off by the containing svg element. You'll see our svg element has a width and height of 300 by 150. Which is not large enough to contain our circle if we move it down to 150 150, give it a radius of 100. If we give it a radius of 100, that means it has a width and a height of 200 pixels each. So let's jump back into our code and take a look at how the circle is made. So the first thing we need is we need to call on the Snap framework, create a new snap object, if you will. And we do that using this Snap method here. And inside that Snap method, we could do one of two things. We can either point to an item that already exists using CSS syntax. For example here, we want to point to an ID of svg so we type #svg and that points to this element here, which again, has an ID equal to svg. Another way we could do this is we could create a Snap element with a given width and height. So let's say we want a Snap element that's 200 pixels wide by 200 pixels tall. We would include those dimensions there. If we were to save that, well first of all, let's get rid of our svg element just to show you that it's not attaching it to that svg element, it's just creating it on the fly. We'll save our index page, jump back to our browser and refresh. And now you can see that it's still creating a circle, it's still being cut off but we'll see why in just a second. So we've given it the right width and height. If our circle has a radius of 100 then the width and height are both gonna be 200, excuse me. But you'll notice our x and y coordinates, which are these first two parameters here, are both set to 150. So when you're creating a circle, you're gonna refer to the Snap object you created. So the Snap object we created here is stored inside a variable called s. You can call it whatever you want to. You can call it mySnapObject if you want to, that's a little bit verbose. But if you did that, you would need to give the same name down here when you're referring to it. I like to keep it simple so I'm gonna follow the convention and stick with s. And we can refer to the Snap object at any point by calling it s. So now we're creating another variable called bigCircle and we're setting that equal to s.circle. And again, this code here was taken directly from the Snap.svg website. Again, this right here is just a variable so you can call it whatever you want to. I'm just creating a circle, so I'm just gonna call it circle. And then we're setting it equal to s.circle. And this circle method accepts three parameters. The first two parameters, as we've already hinted at, are the x and y coordinates of our circle. And it's important to point out that those coordinates point to the center of the circle. Not the top left corner of the circle, but the center of the circle. So the center of the circle is gonna be 150 pixels from the left and 150 pixels from the top. And then the third item here is the radius of the circle. So the full width of the circle is gonna be twice what that radius is, so it's gonna be 200 pixels wide. So you might think if we want the circle to show up entirely within the Snap object we created, that we need to set our width and height to 0. But that's not quite right. And let's go ahead and test that and see why. Let's save that. Jump back to our file and refresh. And now you can see that the center of our circle is now in the top left corner. And you may have already guessed this because of my explanation of these two coordinates. These coordinates again represent the center of the circle. So if we want that circle to be in the center of this object here then we need to cut both of these items in half. So we're gonna set it at a x y coordinate of 100, 100. So again, the first two are your x y coordinates, and your third is your radius. So if we save it now, jump back into our page and refresh. Now we can see the entire circle. So now that we know how to create a circle, let's create a rectangle. So I'm going to make our Snap item a little bit wider. I'm gonna give it a width of 400 and a height of 200. We'll leave the height alone. And now I'm going to create a rectangle. So I'm gonna create a variable, we'll call it rect for rectangle, and we're going to do something similar to what we've already done. We're gonna point to our Snap object by typing s. And this time instead of .circle we're gonna say .rect, or rect for rectangle. And we need some items here and you can see the code hints that pop up here. We need an x and y coordinate and then we need a width and height. So our x and y coordinates here are gonna be a little bit different than what we saw for our circle. For our circle, the x and y coordinate pointed to the center of that circle. For a rectangle the x and y coordinates are going to point to the top left corner of that rectangle. So the x coordinate, again, is your horizontal coordinate. And I wanna move this over so that it's not on top of our circle. And our circle is at the far left edge of the screen or at the far left edge of that svg object we created. And it's 200 pixels wide. So if we set our rectangle at an x coordinate of 200 pixels, it will put the left edge of that rectangle right up against the right edge of that circle. So we're gonna put it at an x y coordinate of 200, 0 because I'm gonna put it right up at the top of our svg object and 0 is gonna be at the top, not at the bottom. So it's gonna be 0 and as you move down, that y coordinate is gonna go up. So we've got it at a y coordinate of 0, which puts it at the top of our svg object. And then we need a width and a height. So I'm gonna give it a width and height of 200 pixels each, and that will give us a perfect square. Let's see how that looks. Let's save our file, jump back onto our page and refresh. And now you can see we have two distinct shapes right next to each other and both of them are contained within the same svg object. If we look at our generated html code here, we have our svg. And if we expand it out, you can see that we have a circle here and a rectangle right next to it. And they're both contained within the same svg object. And those are the basics of creating simple shapes using the Snap.svg library. In the next lesson we're gonna talk about how we can style those shapes and transform those shapes a little bit. So thank you for watching, and I'll see you then.

Back to the top