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