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…
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.
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.
Read the blog post
Lawrie’s bouncy ice cream is so joyful.
The use of easing to build anticipation is great.
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.
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.
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.
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.
How about making a star animate inside a favicon?
What about trying out the new GSAP scrolltrigger plugin to scroll through a space adventure?