SVG's have continued to be a big visual element in progressing user experience in recent years, and they don't show any signs of slowing down. These 2D vector-based animations have all the signs of what the future of web is looking for. Quick to render, infinitely scalable, interactive and SEO friendly.
As the progression and popularity of SVGs has grown so have the resources. By using some of these sweet tools available you can get a animated SVG up and running quickly.
A great tool for creating animated SVGs is Vivus.js and Vivus Instant.
Here is an example of how I was quickly able to turn a logo I made for Ashley Stevens Design into a SVG animation.
First I made and outlined version of the illustration with Adobe Illustrator, and exported it as an SVG. Then I used the SVG OMG tool to clean up the SVG code so it is easier to work with. Finally I used the Vivus Instant tool to animate my SVG.
The vivus Instant tool will create some CSS to enhance the animation affects. For this example I deleted the created CSS styles and use the Vivus js manipulation options.
Load The Background Color After The Path Finishes Running
Loading content is becoming a big feature in web design especially as single page applications are doing a much better job at it. Being able to introduce content in a more creative and expected way continues to challenge designers and developers. Checkout this example by codrops.com that is one of the inspirations behind Vivus.js that is sure to blow your mind.
To create the loading effect of a page element like the examples at Codrops, we can use vivus.js and some simple css. There are also other options for creating this effect like the CSS
mask-image syntax that works similar to the
For this example I set the SVG
fill="blue" and used the CSS
fill-opacity: 0; to hide to background color while the SVG is running. Then with vivus.js using the callback option we can use
classList to add the class with
fill-opacity: 1; after the path finishes running. There is no need to use jQuery. Here is the reference I used from the vivus.js GitHub.
SVGs can be complicated as they are XML-based files that can be integrated with HTML. Still we are able to use them with
object tags as well as inline. So they may seem a bit foreign at first, but quickly become a great feature of web design.