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.
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
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’
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’
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
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.
Create a Where’s Wally? game with a draggable magnifying glass
Use gifs or images to create a digital ‘collage’