Clipping & Masking

[00:00:01]
>> Sarah Drasner: Morphing SVG paths is my favorite thing [LAUGH] in the whole world. So it feels a little like we start the day responsible stuff, and then towards the end, it just gets funner and funner, more fun, more fun, more fun. Clipping and masking, okay. So the last thing we're gonna do today is actually a really useful thing, because until you know how to clip and mask things, it's really hard to get realistic motion especially if you have things like arms and legs and things moving around.

[00:00:31]
Because there's a lot of times where you need to just show a piece of something and not the full thing in order to make something realistic. So let's talk about clipping and masking. So the difference between clipping and masking is really the way that you think about it.

[00:00:47]
So clipping is using the geometry of a shape to cut out another shape or an image so you can cut out like a picture or you can cut out another piece of an SVG even cut out a GIF and do GIF masking. So that uses the geometry so if I use this shape and take a rectangle and you know create a clip it wont take those strokes styles with it.

[00:01:16]
It will only take the geometry of that shape. But if I do a mask it's dealing with transparency so it's taking what's like darker and lighter it's taking all of the kind of pieces of it. So in this case dashes. So if I took a bitmap image it would be masking like you could probably see parts of an eye and the nose.

[00:01:42]
You could see all of those gradient as part of that too. I have a hard time remembering the difference between clipping and masking and how to use each. So I wrote an article about it. [LAUGH] Masking, partially, because CSS-tricks has good SEO. So I knew I would find it again.

[00:02:03]
Also, I felt like if I wrote an article I would keep it in my mind a little bit better and I would remember better and it did work. So if you wanna remember something and you can't remember it write an article because then not only can you remember it a little but better but you can also find it again.

[00:02:19]
So it's good for the community and also good for your brain. [LAUGH] So here we go, we could make animations that have clippings and masking in them. This is not a crazy, this isn't like a really good animation by any means. But it's more interesting than it would be because it's got this kind of circle.

[00:02:39]
So I'm just basically taking the entire SVG and animating parts of it, and then I took a circle and I'm, using a clip path to say just show me what's inside of this circle. And then you get kind of like a peering through the bushes kind of view of it.

[00:02:57]
Illustrator's good at a lot of things. It's not good at outputting clip paths. If you create a clip path in Illustrator, this is what you're gonna get. You're gonna get defs, and an ellipse inside of there. And then there's gonna be a use and then a clip path.

[00:03:13]
And used to animating things that are inside of a use tag always gets a little iffy, so if you're animating clip paths that are done this way, you're gonna be like, clip paths are hard to animate. It's actually that the use tag is really hard to animate. And then you get this.

[00:03:28]
This is really complicated and hard to understand. This isn't all that's necessary. So you might find that it might be easier to just, bring the path out from Illustrator if it's a complicated path, or draw it yourself by writing it. You don't even actually need defs. The defs I can consider like a staging area.

[00:03:51]
For an SVG, it's like, we're gonna use you later. So you don't even need this, it's just the clip path, and you apply the clip path somewhere. Much easier to understand. And then you don't have crazy use path, or use nonsense. SVG has a clip path, or CSS has a clip path property, It's not super well supported and sometimes this pen breaks like sometimes Chrome supports it better than other times.

[00:04:25]
But you can make shapes so this clippy Bennett feely, almost Bennett, feely, clippy. You have to say Bennet freely clippy or you get the wrong clippy. And you can do these clip bath makers and you can drag them around and that's cool and it updates and the code is down here and it will even open in a code pen for you if you want.

[00:04:51]
So you can play around with those clip paths here. I don't remember the support you can look at can I use for this but SVG support for clip paths is really really good. So this is last I checked it was like support in CSS is like I don't know.

[00:05:10]
[LAUGH] And support in SVG is like. Earlier than they supported SVG. Strangely, it's like Chrome 1, Firefox 1.5. So it's like way way back there. So SVG clipping is really well done. You can animate it. So here is a GitHub Octocat and he falls. And he blinks at you.

[00:05:35]
And then it's like that's all folks. And then you can replay. So basically you can use it to create like make the end of a scene as well. And remember this pen with the little arms and stuff. Those arms are done with the clip path. Because really they go into these circles here.

[00:05:57]
And you're showing pieces of the rectangle and then you're not showing. They go in past here. So basically this is above that shape. So it would be hard to make it so that I'm only showing bits of it. I can't put it behind, I can't put this behind this.

[00:06:18]
So there's a little circle here, it's clipping this longer piece of rectangle. I already showed you that. So it's this little bit here for both sides of the arm and it kind of goes out and comes back in. And you can even use GIFs to mask other shapes and this is like a SVG pattern and I'm loading a GIF in and I'm creating a mask out of that GIF.

[00:06:49]
So we're using the gradients and we're using the shadows inside of that GIF. So we don't even see different colors of it, we're just seeing the black and white of it to kind of expose other things. And the code for it is pretty simple.
>> Sarah Drasner: Create a pattern using a gradient, and I've got this pattern with the rekt and circle here.

[00:07:18]
And then I just apply one square where I'm filling it with the pattern and masking it with that GIF yeah. I learned this technique from Yoksel. She's really really great. You should check her out on code pen. Yoksel She does a lot of really amazing amazing pens. So this is kind of the tldr of that.

[00:07:45]
So the image is 100% height 100%. And then I xlink:href the asset there. So this is that reference pen by Yoksel. I just mentioned Yoksel. She shows in this pen, this is a movie of the pen, but she shows in this pen every way that you can work with SVG and CSS and clip path and masking and she also has a little support chart for each one of them.

[00:08:14]
That's really cool. And she shows you how to work with each one of them in code so it's a really great resource.