Animate SVG Paths Using jQuery And Velocity - SVG Path Animator

SVG Path Animator is a jQuery plugin used to draw and animate SVG path strokes using accelerated JavaScript animations based on Velocity.js.

How to use it:

1. Load the necessary jQuery, Velocity.js and velocity.ui.js in the html document.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>

2. Embed a SVG image (e.g. signature, icon) in the document.

<svg id="example" viewBox="0 0 96 96" class="svg-icon icon-cloud">
    <path id="icon-cloud_border" fill="#4D5152" d="M47.9 82.3l-0.2-7.5c0-0.1-0.5-4.6 2.3-7.7 1.7-1.9 4.3-2.9 7.6-2.9h17.3c3.8 0 14.1-3.5 14.1-14.7 0-12.9-12.2-13.7-12.7-13.7 -0.5 0-1-0.5-1-1 0-0.1 0.2-5.6-3.3-8.9 -2.1-2-5.2-2.9-9.2-2.5 -0.4 0-0.8-0.2-1-0.6 -0.2-0.4-5.2-10.8-18-10.3 -18 0.7-20.5 17.1-20.8 20.4 0 0.5-0.4 0.9-0.9 0.9C21.5 33.9 7 35.3 7 50c0 8.6 8.1 13.5 12.4 14.2 2.6 0.4 16 0.4 19.4 0.2 2.7-0.2 4.8-1.1 6.2-2.9 3.4-4 2.7-10.9 2.6-11l-0.1-1 2-0.2 0.1 1c0 0.3 0.8 7.8-3.1 12.5 -1.9 2.2-4.4 3.4-7.7 3.6 -3.6 0.2-17.1 0.2-19.9-0.2C13.2 65.1 5 59 5 50c0-14.4 12.7-17.5 16.1-18 1.2-9.7 7.8-20.8 22.6-21.5C56.2 10 62 18.8 63.3 21.3c4.3-0.2 7.7 0.8 10.1 3.2 3.2 3.1 3.8 7.5 3.9 9.5C82.5 34.6 91 38.4 91 49.6c0 12.7-11.8 16.7-16.1 16.7H57.6c-2.7 0-4.7 0.8-6.1 2.2 -2.2 2.5-1.8 6.2-1.8 6.2l0.2 7.6L47.9 82.3z" />
    <g>
        <circle id="ball2" class="ball" r="3.5" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball3" class="ball" r="3" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball4" class="ball" r="2.5" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball5" class="ball" r="2.2" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball6" class="ball" r="2" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball7" class="ball" r="1.8" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball8" class="ball" r="1.4" cy="87.290741" cx="48.762711" fill="#FF550E" />
        <circle id="ball9" class="ball" r="1" cy="87.290741" cx="48.762711" fill="#FF550E" />
    </g>
    <g>
        <polygon id="icon-cloud_arrow_top" class="arrow" fill="#FF550E" points="41.7 54.2 48.7 47.6 55.7 54.2 54.2 55.6 48.7 50.3 43.2 55.6 " />
        <polygon id="icon-cloud_arrow_bottom" class="arrow" fill="#FF550E" points="55.7 76.8 48.7 83.4 41.7 76.8 43.2 75.4 48.7 80.7 54.2 75.4 " />
    </g>
    <g>
        <path id="icon-cloud_reflection" fill="#12C4E8" d="m 30.178658,31.155089 c -0.383147,0 -0.766295,-0.306518 -0.766295,-0.766295 0,-0.07663 0,-10.651504 11.417799,-11.494429 0.459777,0 0.766295,0.306518 0.842925,0.689666 0,0.459777 -0.306518,0.766295 -0.689666,0.842925 -9.961838,0.766295 -10.038467,9.57869 -10.038467,9.961838 0,0.383147 -0.306518,0.689665 -0.766296,0.766295 0,0 0,0 0,0 z" />
    </g>
</svg>

3. Download and insert the minified version of the SVG Path Animator after jQuery library.

<script src="svg_path_animator.min.js"></script>

4. Initialize the SVG Path Animator on the SVG element.

<var myAnimation = new AniPath('#example');
// myAnimation.init(dur = 3000, del = 0, min_speed = 0);
myAnimation.init(3000, 100, 300);

5. Style the SVG paths in the CSS.

#example path {
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

6. Activate the SVG path animation.

myAnimation.animate();

---

This awesome jQuery plugin is developed by jwrunge. For more Advanced Usages, please check the demo page or visit the official website.