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.
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
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!
Clipping is fun, but adding animation to your clipping effects is even better!
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?
This demo by Noel Delgado is one of the all-time best demos of clipping! Move your mouse to reveal the x-ray effect.
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.
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
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
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.
Create a Where’s Wally? game with a draggable magnifying glass
Use gifs or images to create a digital ‘collage’