SVG Masking Examples — Paths, Gradients, And Patterns - Vanseo Design |
| SVG Masking Examples — Paths, Gradients, And Patterns Posted: 14 Jun 2016 05:30 AM PDT You can use any shape, path, or text to create an SVG mask. You can combine any or all of them as the masking content. You can also create some interesting masks using gradient or pattern fills.
As I did for clipping paths, I've tried to keep the examples so far in the masking part of this series simple by using the same rectangular mask on top of the same circular graphic as much as possible. As was the case with clipping paths , you can do more with masks than I've shown to this point. I thought I'd walk you through some different examples today and next week showing some other options for the mask content and the elements being masked. Hopefully it will give you some ideas for how you might use masks in your work. Paths as MasksFirst here's what is probably a familiar looking green circle for anyone who's been following this series. I promise we'll mask it with more than a single and simple rectangle today. To prove that you can create masks with things other than rectangles, I'll create one using a path I borrowed from the clipping path examples post. The path is inside a mask element to which I've given an id as well as values for x, y, width, and height. Notice that these values are all between 0 and 1, because the default maskUnits is objectBoundingBox. The linear path also gets a fill of #555.
The result is a circle that's clipped outside of the path and inside the path is masked with a medium gray fill of #555, resulting in a lighter value than the original. The blue outline (not shown in the code) shows the mask boundary. Take note that you can use a mask as a clipping path if you use a solid fill color of white (#fff) which allows 100% of the pixels being masked to show while clipping everything outside the boundary of the mask. Multiple Shapes as MasksLike clipping paths, you can use multiple SVG elements as the content inside the mask. In this next example I used four rectangles and placed them so each covers a different quadrant of the circle. I'm using the same SVG shape four times, but you could certainly mix rectangles and circles and polygons and paths as the elements used as the mask content.
Here's the result of applying the multi-shape mask. Notice I gave each rectangle a different fill so each quadrant of the circle is a slightly different shade I've also shown each rectangle without a fill, but with a stroke so you can see the outline of each rectangle in the mask. Gradient MasksBy now you can probably tell the fill is the most interesting part of the mask. The boundaries of the mask act like a clipping path, but the fill determines how much of the graphic below shows through. Solid colors as mask fills aren't all that exciting as all they do is change the color or value of the original graphic. Fortunately you aren't limited to solid color fills. In this example I use a gradient as the fill. Notice that I defined the linear gradient first and used the id of the gradient as the fill for the mask content. The mask itself then gets an id which is referenced by the circle.
Here's the result. The gradient moves from 25% opaque on the left to fully opaque on the right. The change makes the circle appear as though it's a 3-dimensional sphere as opposed to a 2-dimensional circle. Once again note the pattern. The SVG graphic (the circle) references the mask (#gradient-mask) and the mask content references the gradient (#gradient) for its fill. Also notice that the mask content is another unexciting rectangle, but because the fill is more interesting, the mask, even a rectangular one, is more interesting. Pattern MasksYou can also create a pattern and use the pattern as the fill for the mask content. The difference between this example and the previous one is that I changed the gradient to a pattern of repeating circles. Otherwise it's the same.
Here's the result, which you can see is the same circle with a pattern for a mask. The pattern fill color changes the value of the original green circle. And of course you can combine patterns and gradients, which I did here by borrowing the linear gradient from the example in the previous section and using it as the fill on the pattern.
Here's the result of giving the pattern a gradient fill. Closing ThoughtsHopefully you agree that masks become more interesting when the mask is more than a simple shape with single solid color fill. You can get create with the shape of your mask by building them with paths or combining multiple elements as the mask content. More interesting, I think, is when you get creative with the fill and use gradients, patterns or both as the mask fill. I offered two clipping path example posts. Guess what I have planned for the masking? Next week I want to show you a few more examples that make use of text and images as the mask content and allow you to create even more effects. Download a free sample from my book Design Fundamentals. Join me as I share my creative process and journey as a writer.      This posting includes an audio/video/photo media file: Download Now |
| You are subscribed to email updates from Vanseo Design. To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States | |