The component that animates the stroke of any SVGElement and updates the style attribute of the target.
Animate the stroke for most SVGElement shapes, with a very easy to use coordinates system.
The KUTE.js SVG Draw component enables animation for the stroke-dasharray and stroke-dashoffset properties via CSS style.
The component uses the SVG standard .getTotalLength() method for <path> shapes, while for the other shapes it uses some helper methods to calculate the values required for animation.
It can work with <path>, <glyph>, <circle>, <ellipse>, <rect>, <line>, <polyline> and <polygon> shapes. It uses a very simple to use coordinates system so you can set up animations right away.
As you will see in the examples below, there is alot of flexibility in terms of input values.
// draw the stroke from 0-10% to 90-100%
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
// draw the stroke from zero to full path length
var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
// draw the stroke from full length to 50%
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
Based on the above sample code, let's see some animation going on:
draw property also accepts absolute values, eg. draw: '0 150'; the .to() method takes 0% 100%
as start value for your tweens when stroke-dasharray and stroke-dashoffset properties are not set.stroke on some shapes may not completely close, you might want to consider values outside the [0-100] percent range.