Progressive Draw - SVG (Animated SVGs)

Watch your vector artwork draw itself right onto the screen!

Easy to Use

Setting up a new animation couldn’t be more simple. You just save your artwork directly from Adobe Illustrator, add a line of code to your HTML, and you’re ready to go!

Easy to Customize

• Change the following with just one variable:
  


• Animation speed for lines and fills
  


• Play on load, on click, or when it becomes visible on scroll
  


• Draw everything at once or one element at a time
  


• Draw fills in order or at the very end of the animation
  


• Delay time between images
  


• Enable/disable the play/pause button on hover
  

Other Features

• You can control play, pause, resume, reverse, and restart externally
  


• Responsive design
  


• Works on all major browsers, even mobile and Explorer
  


• Works great even if the artwork has mostly fills instead of lines
  


• Add an unlimited number of SVG’s to your page
  

Excellent Support

It’s no coincidence that I’m a 5-star Elite Author here on CodeCanyon – I provide great support. Not only are there comprehensive instructions, the code is well commented and I’m prompt and helpful when you contact me. Look what some of my customers have to say about me:

Some things to note:

• Modern browsers can’t handle SVG’s with variable stroke widths so they either need to be converted to normal strokes or converted to fills
  


• This file is for vector, not raster artwork – meaning it won’t animate your PNG or JPG images
  

Related Items