Web browsers are still working towards a unified relationship with web standards. This means developers have support for some CSS prefixes but still have to wait patiently for the full benefits of other techniques like SVG animation. While vectors have become much more accepted in recent years, vector animations & effects still languish through the realm of maladapted support.
The more advanced trends appear where rubber meets the road. Where development techniques merge with the possibilities of current web browsers. The following CSS/JS snippets demonstrate some of the amazing effects you can create using SVGs & canvas elements. These techniques often work best in more creative or experimental layouts with a broad range of tech-savvy visitors.
Interactive SVG Workspace By Belle Epoque
Custom SVG elements can be combined together into an
<svg> tag to make hard-coded illustrations for the web. This example from Belle Epoque is a fully interactive studio workspace.
Sparkle Trail By Jack Rugile
Icon Hover Glow By Chris Colouryum
One of the simplest things you can do with SVG is a toggle animation. This lightbulb icon fits the metaphor nicely with an on/off animation style. Also note how the JS code is only for cross-browser support – the animation itself relies solely on HTML and CSS3.
Rotating Petals By Bailh
Abstract design ideas tend to be the most interesting but the least useful in real-world situations. I still really dig this paper pattern built on Snap.svg. It offers a weird yet significant learning curve with SVG elements like ellipse and linearGradient.
Simple Animated Icons By Simurai
CSS masking with SVGs can be very similar to Photoshop if you learn to do it right. This code snippet runs on custom SVG files with background gradients. The only downside is that CSS masks have poor browser support – but hopefully this will improve in time.
Elastic Material Design Sidebar By Nikolay Talanov
Mobile apps are renowned for their touch/tap effects that websites haven’t needed until touchscreen Internet. With SVGs you can create a touch/drag animation right in the browser, and this elastic menu plays the part nicely.
Vector Map Point By Adam Girton
Just a simple vector icon map of California with a beacon pinpointing home. California’s shape is actually built using SVG coordinates in HTML while the marker is pure CSS animation.
Responsive Graph By Andrew Weeks
Regular images can be made responsive but they often resize based on fixed dimensions. This graph can be stretchy, and even reposition data points to fit better on a small X/Y axis. Very cool use of SVGs for the responsive web.
CSS3 + SVG Animation By lionelB
A simple little airplane floating amongst the clouds. Not exactly useful for every web project but still quite inspiring to see what’s possible using only SVG & CSS.
Glossy Shine Effect By Vincent De Oliveira
Burger Menu Animation By Kyle Henwood
This is perhaps my favorite 3-bar hamburger icon animation effect. It uses two different SVGs with internal paths manipulated by JS and CSS classes.
Browser support is still a bit wonky but it could make a fine staple animation for future website interfaces.
SVG Typography Experiment By Chris Wright
A little experiment that shows how modern Webkit/IE browser engines can actually curve text along an SVG path. For all intents and purposes you’d be better off using a static image in any real project. But this is still very cool and worth considering for abstract typographic ideas.
Fullscreen Navigation By Anas Ashraf
Fullscreen dropdown menus can be found on many websites, often agencies or large creative studios. This particular code snippet uses a custom SVG for the 3-bar icon attached with a sweet animated effect.
Moving Mask By John Grishin
Canvas Circle Loader By Jack Rugile
If you’re looking to get started with CSS animation, Tuts+ have some handy courses that will get you going in no time: CSS Animation in the Real World and Scroll-Based CSS Animations.
They also have a great course for getting started with SVG for web design.
Depth of Field Effect By Vaughan Curd
Dancing Robot By Val Head
It’s the simple things in life that bring joy and this dancing robot is full of jubilation. Each limb is built with a different SVG file which animates based on a CSS class.
Social Sharing Bar By Max West
Animated Map Directions By Max Boll
LCD Clock By Christian Hanvey
CSS/JS/Canvas Night Scene By Jack Rugile
Parallax design goes hand-in-hand with SVGs and canvas elements. This minimalist scene was built using a few SVG icons surrounded by an outer canvas. It’s made to stretch and fit into enormous window sizes because the patterns are all vector-based.
SVG Letter Sprite By nahuelsotelo
Just another typographic experiment relying on SVGs for effects and scalability. The first letter of each word is contained inside an SVG sprite sheet. It requires very little code and runs surprisingly smooth in most browsers.
Shooting Plusses By Jack Rugile
UI Demo Animation By Lloyd Wheeler
SVG Weather Icons By Noah Blon
I can’t help but marvel at the beauty of this weather iconset. It’s based off Adam Whitcroft’s Climacons but each icon includes an extra CSS animation. The HTML is rather lengthy since each icon is hard-coded with XML/SVG but there’s still a lot to be learned by studying the techniques used in this snippet.
Those who aren’t familiar with vectors on the web can learn a lot by dissecting these code samples. SVGs have been fully adopted by all browsers and support for SVG manipulation is growing steadily. It’s my hope that these snippets will both teach newcomers and inspire seasoned veterans to learn more and build more SVG visual effects for the web.
If you would like to view some code snippets for animating CSS, check out this post: A Collection of Pure CSS Animation Snippets & Demos.