SVG Graph Animation using Snapsvg and Jquery

by Aman Bansal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="svg" viewBox="0 0 1920 1080"></svg>

JavaScript

var snapA = Snap("#svg");

jQuery(document).ready(function() {
    var home_graphAnimation = {
    
    drawsvgline: function(data,i, color, callback) {
      var i2 = i+1;
      var circle1 = snapA.circle(data[i].x , data[i].y ,5);
      circle1.attr({
        stroke: color,
        fill: color,
      });
      var pathA = snapA.path("M "+data[i].x +" "+ data[i].y + " L " + data[i2].x + " " + data[i2].y);
      var lenA = pathA.getTotalLength();
      pathA.attr({
        stroke: color,
        strokeWidth: 4,
        fill: 'none',
        // Draw Path
        "stroke-dasharray": lenA + " " + lenA,
        "stroke-dashoffset": lenA
      }).animate({"stroke-dashoffset": 0}, 100,mina.linear,function(){

        var circle2 = snapA.circle(data[i2].x , data[i2].y ,5);
        circle2.attr({
            stroke: color,
            fill: color,
        });    
        if (data[i2+1]) {
           home_graphAnimation.drawsvgline(data,i+1,color,callback);
        }

        if (i2+1 == data.length) {
            console.log("Callback Executed");
            if(typeof callback == 'function') {
                callback(data);
                return;
            }
        }
        

      });  
    },

    drawVerticalLine: function(){
        var getPath = snapA.path('M958 420 l0 -320');
        var pathLength = getPath.getTotalLength();

        var perc = 0;
        var dotLength = 10;
        var gapLength = 10;

        getPath.attr({
            stroke: '#000',
            strokeWidth: 2,
            strokeDasharray: 0,
            strokeDashoffset: 0,
            
        });


        function verticalDashLine(){
            perc +=1;
                if(perc>100){
                    perc = 100;
                }
            var visibleLength = pathLength*perc/100;
            var drawnLength = 0;
            var cssValue = '';
            while(drawnLength < visibleLength){
             drawnLength += dotLength;
                if(drawnLength < visibleLength){
  ...