SVG is one of the most interesting formats in web design. It allows designers to create exciting graphics with interactivity and animation. Whether you use CSS or JavaScript, creating animation in SVG is entirely up to you. Whatever you use, it’s clear that you’ll be able to fill in the gaps of HTML elements and CSS being used alone. That’s what makes SVG so exciting!

So let’s move on to a bucket load of inspiration! Here’s a beautiful collection of some brilliant SVG animations you wouldn’t believe were possible to create.

Become a traveler today

See the Pen SVG Animation by jjperezaguinaga (@jjperezaguinaga) on CodePen.

This is by far one of the most creative and spectacular SVG animations I have seen on Codepen. Penned by jjperezaguinaga, this animation proves that the wonders a simple “rotating effect” using HTML and CSS can do.

Rain Bros Don’t Like JS

See the Pen Rain-Bros don't like JS by cihadturhan (@cihadturhan) on CodePen.

This is super-cute HTML and CSS3 only SVG animation. Penned by cihadturhan, the animation plays in a loop with strange looking characters walking continuously. The legs have been animated with the help of SVG, while the rest uses mostly CSS3.

Rainbow Rocket Man

See the Pen SVG Rainbow Rocket Man by Chris Gannon (@chrisgannon) on CodePen.

Chris Gannon decided to shoot off this animation using CSS and JavaScript—and of course immense creativity. A cute little astronaut ascends to space on his rainbow-powered jet pack. He also has an antenna at the top. The GSAP Tweenmax plugin has been used in this one.

Focus on the user and all else will follow

See the Pen Animated writing font (SVG paths) by Lee Porter (@elevaunt) on CodePen.

Here’s a typography-based animation for all type-lovers. Lee Porter made this animation first focus on the word “user” with a blur effect on the rest of the words that slowly come into view a few seconds later. Even after the animation is complete, the border continues to sort of “glow” with the lines fading and appearing simultaneously. This is a slightly complex animation compared to the rest and uses HTML, CSS, and JavaScript.

Self Drawing Xbox One

See the Pen Self drawing Xbox One (SVG Animation) by Max (@MyXoToD) on CodePen.

This cool animation was penned by Max. He used HTML and CSS to allow an Xbox One to appear as a sketch by being drawn first, and then transform into a realistic image of an Xbox One. You can tweak it around if you like, but for an Xbox lover, it’s pretty neat!


See the Pen ilwuD by Max (@MyXoToD) on CodePen.

This is another one by Max. He uses a similar concept to draw out the “crispy mountain” before the image is complete. The same technique can be used for just about any business logo design, making it more than just a simple vector graphic. HTML and CSS were used to create this—no need for JavaScript.

Draw me like one of your French girls

See the Pen Draw me like one of your french girls. by Max (@MyXoToD) on CodePen.

Did that strike you as a dialogue from a movie? I think so too! Max takes drawings to another level on this one by animating his own photo with the same drawing effect he uses in the previous ones. This is a neat idea for an animation to display photos. Unlike the previous ones though, it uses CSS as well as JavaScript to complete the look.

SVG Border Animations

See the Pen SVG Border Animation 1 by Zach Saucier (@Zeaklous) on CodePen.

Need a tweak to the border? Check out this SVG animation by Zach Saucier. I’ve seen plenty of those underlines that swipe a color right to left on hover, but I hadn’t yet seen one that transforms into a border. This one was created using HTML and CSS.

Hourglass Loader

See the Pen Hourglass loader by Leela (@madetoday) on CodePen.

Here’s a great animation that should keep your visitors busy while your website loads. Although this animation looks complicated, it really isn’t! All it uses is a little bit of HTML and CSS. The result, however, is far more fascinating. Leela managed to pen this cute animation that “timelessly” displays an hourglass loading and turning over insides a circle. Perfect for long load times!

SVG animate

See the Pen SVG · animate by Jorge Aznar (@jorgeatgu) on CodePen.

This brilliant pen shows what SVG can do with simple tricks. Coded by Jorge Aznar, this cute animation transforms, rotates, and re-colors simple shapes. The concept is a nice one which you can use on any graphic with disparate elements. For example, it could work well for logos, icons, or other vector graphics. The pen uses mostly HTML and a little bit of CSS.

Breaking Bad

See the Pen Breaking Bad by Tim Pietrusky (@TimPietrusky) on CodePen.

This coder must be huge fan of the Breaking Bad because he has designed a fairly accurate and genuinely spectacular animation for the title. Who says rotations, hover effects, and line drawing is all SVG can do? Tim Pietrusky proves that there’s more to SVG animation with the “smoke effect” accompanied by the Breaking Bad movie title. It includes an audio too!

SVG Animation with Velocity JS

See the Pen SVG Animation with Velocity.js by Gabriel (@manussakis) on CodePen.

This is a cute and simple animation by Gabriel that uses veloicty.js along with CSS.