Viewing entries tagged
SVG

SVG Drawing Animation | Codrops

Screen Shot 2014-01-08 at 1.52.53 PM.png

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.

demosthenes.info – SVG Optimisation: The Basics

While the SVG format is extremely efficient in expressing illustrations, vector files can become just as bloated as their bitmap kin. SVG code is often riddled with unnecessary elements, attributes, and spaces, while editors such as Adobe Illustrator and Inkscape add even more to the file with custom namespaced tags.

Animated line drawing in SVG

I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the process. Here's how it's done: