15 Examples of SVG Animations for Web Designers

Examples of SVG Animations

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.

1. Become a Traveler Today

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.

2. SVG Loader Animations

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.

3. Project Deadline Is Coming

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.

4. SVG Text Animation Using Stroke Offset Method

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.

5. Sketch Photo Animation

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.

6. Beating Heart Animation

If you want to see an example of a really sophisticated SVG animation, take a look at David Corkett’s carefully crafted beating heart animation. Even though it’s a complicated effect, it doesn’t use any JavaScript but solely relies on SVG and CSS. The heart is made of multiple polygons to which the author added ease-in and ease-out effects using CSS’ @keyframes rule.

7. Pointless Rider

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.

8. Sovog 404 Page

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.

9. List Expand SVG Animation

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.

10. SVG Animation with Sliders

Kenneth Aamås’ beautiful SVG animation with sliders demo makes use of both Sass and JavaScript to achieve a smart, user-controlled effect. You can change the dimensions of the image with the help of three sliders at the bottom of the page. Each slider is tied to a different part of the image that begins to move when the user changes the position of the slider. For this animation, the author uses the transition CSS property instead of keyframe animations, which results in a subtler effect.

11. Wanderlust

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.

12. Back to the Future

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.

13. Isometric Alphabet Animation

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.

14. SVG Sprite Animation

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.

15. Planetary Resonance

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.

Next Steps

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:



26

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.