SVG Drawing Animation

A lilliputian experiment that explores the usage of SVG line cartoon animations to precede the advent of graphics or website elements, simulating the loading of them.

From our sponsor: Sign up for Mailchimp today.

SVG is finally becoming a more utilized and fun website component. It'south actually powerful and there are many creative possibilities for fun furnishings on a website using SVG. Today nosotros'd like to share two experimental concepts with y'all that make utilise of stroke animations, fabricated popular past the animations on the PlayStation iv and Xbox One review sites. This technique was introduced and explained by Jake Archibald in his article Animated line cartoon in SVG and too explored by Brian Suda in his article Animating Vectors with SVG for 24Ways. For our experiments nosotros are using his code to animate the strokes of the paths.

So, what concepts did nosotros explore? The first one is a line cartoon animation that fades into a "real" image or illustration once the respective figure is in the viewport. This can exist a fun outcome for any kind of illustration on a website. The 2d concept explores using SVG line cartoon animations for simulating the loading of a website: website parts are represented by flat drawings with a stroke that gets blithe and once finished, the "existent" elements are shown. The technique itself is implemented in a static manner where we use an SVG for every bunch of elements that fade in. The idea for the schematic representation of the website come up from this awesome Dribbble shot by Chris Bannister.

The beautiful illustrations of the devices are by Pixeden and you can find the PSD files here:

  • iPad Air Perspective Mockup
  • 3D View iPhone 5s Vector Mockup
  • iMac Mockup Template

The traced SVG line drawings of these illustrations were carefully crafted by talented Emanuel Serbanoiu. Check out his Dribbble profile or visit his website.

The first demo is the line drawing animation with the illustration fade-in:
SVGDrawingAnimation_01

The second demo is the line drawing animation with the website fade in:
SVGDrawingAnimation_02

And the third demo is similar to demo 2, just that the animation and the fading in of the elements happens sequentially but with a random timing:
SVGDrawingAnimation_03

We hope you like the furnishings and find them inspiring!

Tagged with: preloader svg

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Scientific discipline and Computational Logic and has a weakness for the smell of freshly basis peppercorns.

http://www.codrops.com