dra

drawsvg

Lightweight, simple to use jQuery plugin to animate SVG paths

Showing:

Popularity

Downloads/wk

138

GitHub Stars

760

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

31.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jQuery DrawSVG

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

  • Weighs less than 2KB minified and 800 bytes gzipped.
  • Easy to use.
  • Easing and stagger support.
  • Free!

Usage

Include jQuery DrawSVG after jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.drawsvg.js"></script>

Initialize the plugin on the element you want to animate and store in a variable

var mySVG = $('#my_svg_element').drawsvg();

Run the animation

mySVG.drawsvg('animate');

Look at the demos for more advanced usages.

Options

OptionTypeDefaultDescription
durationInteger1000The time to complete the animation of each path.
staggerInteger200Delay to start animating each individual path.
easingStringswingWhich easing function each path will use to transition.
Use jQuery Easing Plugin for different easing functions.
reverseBooleanfalseDirection that the line will be drawn.
callbackFunctionfunction() {}A function to call once the animation has been completed.

Demos

Simple usage

Draw on scroll

Callback example

Animate mask path

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100