Hello friends. 💜

---

We both decided to skip January's edition and catch up on some rest. Whew... 2020 amirite? What a ride. Hope you're all doing well and keeping yourself and your loved ones safe.

We'll be kicking off this year with a very meta edition of viewBox.
The viewBox edition.

viewBox isn't just the name of our newsletter, it's also an SVG attribute, and a very important one at that. The viewBox puts the scalable in SVG (scalable vector graphics) by defining the aspect ratio and coordinate system.

---

☕ 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...

---

✏️ Article

This gorgeous interactive explainer by Amelia Wattenburger is an excellent resource to help you wrap your head around how SVG scaling works. Play with the 'telescope' values and see how the star scales.

Read 'Scaling SVG elements'

---

💡 SVG tip

It seems counterintuitive, but you can make your SVG ignore the aspect ratio specified in the viewBox by setting the preserveAspectRatio value to none.

By setting the value to none your SVG will behave like a raster image in an image tag. You'll be able to stretch or squish it to fill the specified width or height.

Check the demo to learn more about preserveAspectRatio

---

✨ Fun demos

Happy new year! -- view demo

But wait. The viewBox gets even cooler. You can animate the values to zoom or pan an SVG - just like a camera! This demo from our Louis is a brilliant example - he even wrote an explainer article that you can read on codepen

Animated flow chart -- view demo

I can't believe this is the first demo we've featured from Sarah Drasner! This demo shows a really creative use for viewBox panning - animated flowcharts!

Mystery hunt -- view demo

Cassie's pen combines masking and viewBox animation to zoom. See if you can find the fingerprints. 👀

Orion's Galaxy -- view demo

This pen by the ever-illustrious Jhey was inspired by our first ever viewBox prompt - 'Galaxy' - so we're thrilled to get it in this edition. It's a brilliant example of both viewBox animation and what Greensock is capable of!

---

🏆 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 super fun one! Masking

There were so many good entires, but this absolute banger by Tom Miller was our favourite. No blur filter here, just a fuzzy JPG that's masked by the card shape! So clever.

We've also gathered all previous entries in a single, mindblowing CodePen collection! Browse through them here.

🎨 This months theme is The viewBox

Ideas...

• Create a comic strip with a camera effect to focus each frame.
• Let's play Where's wally? Create an illustration and let people find funny details by zooming in.
• Use the viewBox to let users zoom into part of maps to see more information on a country.

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