SVG (Scalable Vector Graphics) has a number of advantages compared to other image formats used on the web. First and foremost, SVGs are scalable therefore can adapt to any screen size without any quality loss. Then, browsers can load them faster, using fewer resources. And, they can be edited with CSS just like they were regular HTML elements. Besides being used for static images, you can also create awesome animations with SVG. In this article, we have collected 15 examples of SVG animations to inspire you to use them in your own web projects, too.
This awesome ‘Become a Traveler Today’ demo by Jose Aguinaga is currently the most popular SVG animation on CodePen, and this is not a coincidence, as a lot of work went into this artistic project. The author created the graphics with Adobe Illustrator and exported it with the SVG Export plugin. He also made use of the Sass preprocessor to create the fine-tuned keyframe animation that carefully moves the globe around the screen.
These pure SVG loaders by Nikhil Krishnan are a beautiful example of how to create SVG animations suitable for real-world web projects. Just like the ‘Become a Traveler Today’ demo, these loaders also use the Sass preprocessor. However, here, the animation is a native SVG effect added directly to the animateTransform SVG element within the HTML page.
This cool project deadline animation by Jonathan Silva is scary and funny at the same time. It shows very well that you can really use SVG animations for any kind of creative project. With this little but smart deadline reminder, you can motivate your team to keep up with the deadlines, without being a nag. Here, the author created the animated effect using CSS’ @keyframes rule and a bit of jQuery to set the timing.
Besides animated images, you can also use SVG animations to create awesome text effects. For example, take a look at this beautiful text animation by Mack Ayache. He makes use of simple SVG shapes to create the letters. Then, he adds the movement separately to each letter using the stroke-dashoffset and stroke-dasharray SVG attributes. However, he adds these attributes to the CSS rather than to the <svg> element within the HTML. He can do that because SVG’s presentation attributes can be used as CSS properties as well.
This unique sketch photo animation by Kristen Zirkler can be a great addition to any user interface that shows profile pictures. The author created the graphic in Adobe Illustrator by placing two layers on top of each other, one for her photo and one for the path that goes around her face. Then, she used Sass to add the keyframe animation that modifies the stroke-dashoffset and opacity rules.
If you ever wanted to create an animated logo, here’s an excellent example. The Pointless Rider demo by Elliott Munoz shows that you can use SVG animations for branding purposes as well. By default, it’s an elegant black and white logo. The author added the subtle animated effect with the animateTranform and animateMotion SVG elements. Here, the CSS only aligns the items and sets the colors, but it’s SVG that takes care of all the motion on the screen.
404 pages are another area where you can successfully put an SVG animation into use. Marco Barría’s Sovog 404 page demo relies on SVG and Sass to make the robot raise its limbs. While the parts of the robot are all separate SVG paths, they are moved up and down with the help of the transform: rotate(); CSS property, used on each path individually.
If you want an example of an SVG animation that you can easily use in everyday projects, here’s an interesting demo. This elegant list expand animation by Daniel Wolf can work well in any mobile or web application where you want to show extended information to users. According to the author’s description, the key to this effect is “the timing of elements that move into transition”. The animations rely on CSS as well as a little bit of jQuery for the click functionality.
The Wanderlust demo showcases an awesome SVG effect that you can see in the user interface of many travel and airline applications. Heidi Olsen created this SVG animation for The100DayProject. Rather than using native SVG elements or CSS for the animated effect, she opted for the Tween.js library, which is another great way of adding sophisticated animations to SVG paths. She also made use of absolute positioning to fix the plane and its route on the screen.
If you are a movie enthusiast, you will surely love this Back to the Future animation by Emmanuel Drouin. It features the time travel car well-known from the famous movie. The car appears on the screen gradually from the first lines to the full-blown graphic. The author uses several less-known CSS properties to achieve the sophisticated effect, such as stroke-opacity, stroke-width, animation-fill-mode, and others.
Jeselle Obina’s Isometric Alphabet Animation is a super cool collection of animated A to Z letters. All the letters are in three dimensions and feature a multi-color line drawing motif. In the HTML, each letter is a separate <div> tag that includes an SVG path. The author adds the animated effect with CSS, using well-calculated cubic-bezier timing functions. If you need animated 3D letters that look good on any screen, this awesome demo is definitely worth a closer look.
This spectacular walking dog animation by Mark Nelson makes use of the SVG sprite technique detailed in Sarah Drasner’s article in Smashing Magazine. If you take a look at the HTML, you will see that it doesn’t include any <svg> elements, just a bunch of <div> tags. This is because the SVG images are added to the CSS within the background property, in a layered manner. Altogether, the demo contains four SVGs (with PNG fallbacks). The author achieves the movement by animating the background-position property with the help of the @keyframes rule.
If you love astronomy, here’s a cool SVG animation called Planetary Resonance that you will certainly like. The author Dudley Storey visualizes the coincidental orbital resonance of the Earth and Venus. According to the demo description, “for every eight orbits of the Earth, Venus orbits the Sun almost exactly 13 times.” As you would expect, everything is precisely calculated in this demo. There’s even a step-by-step tutorial on the author’s blog that can help you achieve the same effect.
We are hoping you could get some inspiration out of our collection and will start creating your own SVG animations soon. As you could see, there are many techniques you can use to add an animated effect to an SVG graphic — you will surely find the one you like the most. If you want to learn more about animations or still need some inspiration, check out our following articles, too: