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…
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
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
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!
Cassie’s pen combines masking and viewBox animation to zoom. See if you can find the fingerprints. 👀
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
- 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