Hello friends! 👋
We're excited to bring you the first ever edition of viewBox - your window into the magical world of SVG.
Each month we'll be bringing you a bitesize tip, an article, some fun demos, and a challenge.
Let's open up the box and see what's inside...
💡 SVG tip
Did you know that you can animate SVG in a background image or image tag?
Save your CSS animations within your SVG, reference it like a normal image and it'll animate! Just like a GIF.
Firefox users can even enjoy an animated favicon!
Cool huh! Unfortunately, no support on IE as it doesn't support CSS animations on SVG.
Check it out in action!
✏️ Article
Cassie's site is full of whimsical SVG touches, including a mini-cassie that responds to mouse movement.
Here's part one of a write-up explaining how to get values from mouse movement and plug them into an animation.
✨ Fun demos
Bouncy Ice cream -- view on codepen
Lawrie's bouncy ice cream is so joyful. The use of easing to build anticipation is great.
Rainbow morphing hilbert curve -- view on codepen
This rainbow morphing hilbert curve by Lea Rosema is mindblowing!
Aside from some pretty crazy maths, this is using Greensock's new scrolltrigger plugin, which is worth checking out.
Bubbling -- view on codepen
This isometric bathroom from Shunya is aesthetic af. Such beautiful colours.
The rising bubbles are also very clever, the movement looks so natural because they're moving along motion paths.
Our logo animation! -- view on codepen
It was so much fun animating our logo!
There are a lot of clip-paths being used here. Try removing them to see how the animation is working behind the scenes.
🏆 viewBox Challenge!
We were both judging the codepen challenges last month. We had an absolute blast seeing what everyone in the community was making, so we're going to start our own challenge!
Each edition we'll give you a theme to kick-start your imagination. We'll feature our favourite one in next month's edition.
👽 This months theme is GALAXY
Ideas...
-
How about making a star animate inside a favicon?
-
Can you find a way to generate random SVG planets by creating them in JavaScript?
-
What about trying out the new GSAP scrolltrigger plugin to scroll through a space adventure?