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.

Tag your CodePens with viewBoxChallenge and @ us on Twitter with #viewBoxChallenge