DrawSVG for jQuery – Animated SVG Enlivens Your Web site

Fortuitously, the SVG format can do much more than simply present vector-based mostly graphics. Animations are potential as nicely. With JavaScript, you’ll be able to management and affect these animations in many various methods. The jQuery plugin DrawSVG lets you draw the paths of an SVG graphic in an animation. This opens fascinating methods of drawing the paths.

Necessities for DrawSVG

As a jQuery plugin, this nicely-recognized JavaScript all-rounder needs to be built-in into the HTML head along with the plugin. After that, it’s attainable to animate the paths of an SVG graphic. These are the SVG shapes created by way of „“ aspect. Line width and color may be outlined as typical, utilizing attributes or CSS. A fill color shouldn’t be assigned to the paths as it will not be animated and thus would all the time be seen.

DrawSVG makes use of „stroke-dasharray“ and „stroke-dashoffset“ to attract the paths. Due to that, these two attributes shouldn’t be used elsewhere.

Two States of the Animation

Because the plugin requires entry to the DOM tree of the SVG graphic, the SVG supply must be tied to the HTML aspect. A easy animation may be created by a single line of JavaScript.

$("svg").drawsvg("animate");

The instance accesses all SVG parts which are labeled within the HTML doc and shifts them to the animation perform „drawsvg()“. To take action, the complete graphic is pale out at first. After that, the plugin attracts the only paths of the graphic by itself. To create a sensible drawing impact, particular person paths are animated with brief breaks in between.

The extra paths the graphic incorporates, the extra animations are created.

Adjusting Animations by way of Settings

The period of the break between the beginning factors of the separate paths may be set individually utilizing the choice „stagger“.

var $svg = $("svg").drawsvg( stagger: The post DrawSVG for jQuery – Animated SVG Enlivens Your Web site appeared first on DICKLEUNG DESIGN 2014.