Hello friends. 💜
It’s December already! That makes this our 6th viewbox – half a year of SVG newsletters! Thanks for coming along for the ride.
☕ If you’re enjoying this newsletter, you can buy us a coffee or contribute towards our newsletter costs.
💌 Let’s open up the box and see what’s inside…
This month we’re covering Cassie’s favourite thing – Masking!
Masking’s an incredibly useful technique in design and animation. It’s used to selectively show or hide parts of an image.
In SVG we have two ways to achieve this. Clipping and Masking.
💡 SVG tip
But what’s the difference between a <clipPath> and a <mask> and when should you reach for one over the other?
I like to see clipping as cutting out and masking as collage.
Masks use alpha values and support semi-transparency, allowing you to do gradient fades, whereas Clips use the underlying geometry of the shapes inside the <clipPath> element
Check the demo to see the differences of clip-path and mask
If you want to dig deeper into the differences between clipping and masking, make sure to check this dedicated article by Sarah Drasner on CSS-Tricks!
Read ‘Masking vs. Clipping: When to Use Each’
✏️ Article
Clipping is fun, but adding animation to your clipping effects is even better!
In this article Dennis Gaebel Jr shows us how to achieve a bunch of interesting effects with clips, masks and GreenSock.
Read ‘Animating Clipped Elements In SVG’
✨ Fun demos
Space dog – view demo
This adorable pen from Mariana shows off a great trick: using a GIF as a mask! In this demo, a black and white GIF of a dog is included in the mask element. Who knew animation could be that easy?
X-ray me – view demo
This demo by Noel Delgado is one of the all-time best demos of clipping! Move your mouse to reveal the x-ray effect.
SVG Paper Shredder – view demo
Another great one from the prolific fountain of joy that is Chris Gannon If you don’t already, give him a follow. He’s an amazing motion designer.
Liquid masking – view demo
Masking isn’t just for illustrative SVG, in this demo Cassie uses a mask and Greensock to reveal an image on scroll. You can watch the recording of it being coded up on Jason Lengstorf’s wonderful twitch channel
🏆 viewBox Challenge!
Each month we’ll give you a theme to kick-start your imagination. We’ll feature our favourite one in next month’s edition.
Last month’s challenge was a tricky one! Accessibility
Our favourite entry this month was the absolutely adorable altBud by George Francis.
Petition to add altBud to all browsers as a standard. ☑️
We’ve also gathered all previous entries in a single CodePen collection! Browse through them here.
🎨 This months theme is Clipping and Masking
Ideas…
-
Create a Where’s Wally? game with a draggable magnifying glass
-
Use gifs or images to create a digital ‘collage’
- Use a mask to progressively show or hide something – Like a plant growing or a train going into a tunnel.