Really Cool Examples of SVG Animations in the Wild

With most browsers now supporting SVG (Scalable Vector Graphics) image types, it has never been easier to dynamically animate vector graphics. In addition, the latest CSS3 specs also make animating pretty straight forward without the need to mess around with a ton of JavaScript. Because of all this, we have started to see some really interesting and creative usage of SVG animations across the web.

Below are some examples of SVGs being used across the web that I think work well and really add to the experience.

Lighthouse Brewing Company

The Lighthouse Brewing company’s website utilizes animated SVGs on their homepage in the large hero image area to help bring the illustration to life. Just adding some subtle motion to a few of the graphical elements really draws attention and gives the feeling of items actually floating in the water.

 

Space Ape

On the Space Ape website, they utilized SVGs for a majority of their websites graphics, but the one that really stands out is the rocket as you scroll down the page. In addition to the rocket actually blasting off as you scroll, it has some subtle flame/smoke animations, which I think are a nice touch. This is a strong way to introduce users to your website’s content as you scroll and explore down the page.

Apex

Apex’s website uses SVGs to help tell a story with their content. As you scroll down the page, the text and shapes animate. This draws attention to the sections of the homepage. These shape animations really help make the content stronger and aid with what the content is trying to convey to the user.

James Ross Consulting

On James Ross Consulting, the line animations and the unique animated icons really aid the content in telling a story. This is a great example of how subtle animation on icons can really make things pop and help with the mood of the website.

As you can see, SVGs are the perfect file type for basic icons and vector web graphics. They can really help amp up your content and draw attention to certain elements. In addition to their low filesize, they can also be quickly manipulated and updated with ease by just using simple CSS.


Leave a Reply

Your email address will not be published. Required fields are marked *

*