JSFiddle - React, Tailwind, and code Playground

by codecowboy

HTML

<svg width="419" height="300" viewBox="-349 -250 1396 1000"><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#000000" stroke-opacity="0.2" stroke-width="3" class="leaflet-clickable" d="M267.62471111111114 296.3442219500005L157.17777777777775 211.52786578818512"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#000000" stroke-opacity="0.2" stroke-width="3" class="leaflet-clickable" d="M157.17777777777775 211.52786578818512L219.75555555555553 200.83252876343343"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#000000" stroke-opacity="0.2" stroke-width="3" class="leaflet-clickable" d="M219.75555555555553 200.83252876343343L324.87199999999996 177.25855146272878"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#000000" stroke-opacity="0.2" stroke-width="3" class="leaflet-clickable" d="M324.87199999999996 177.25855146272878L540.0627555555556 314.2715575083277"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="#000000" stroke-opacity="0.2" stroke-width="3" class="leaflet-clickable" d="M540.0627555555556 314.2715575083277L523.6730666666667 208.60074510954828"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="red" stroke-opacity="0.8" stroke-width="3" class="leaflet-clickable" d="M267.62471111111114 296.3442219500005L157.17777777777775 211.52786578818512"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="red" stroke-opacity="0.8" stroke-width="3" class="leaflet-clickable" d="M157.17777777777775 211.52786578818512L219.75555555555553 200.83252876343343"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke="red" stroke-opacity="0.8" stroke-width="3" class="leaflet-clickable" d="M219.75555555555553 200.83252876343343L324.87199999999996 177.25855146272878"/></g><g><path stroke-linejoin="round" stroke-linecap="round" fill="none"...

JavaScript

(function ($) {
    
// Thank you, Pythagoras :) http://abstrusegoose.com/376
function calculateDistance(s, e) {
    return Math.sqrt(
        Math.pow(Math.abs(s.x-e.x), 2) +
        Math.pow(Math.abs(s.y-e.y), 2)
    );
}
    
// Call on a set of paths nodes that express lines
$.fn.animateLines = function (duration) {
    if (duration == null) duration = 3000;
    
    var uid = 'animateLinesTrigger' + new Date().getTime().toString();
    var common = this.eq(0).closest('svg');
    var totalDistance = 0;
    
    // first pass calculates all the distances and prepares animations
    this.each(function () {
        var path = $(this);
        var d = path.attr('d').match(/[-0-9.]+/g);
        var s = { x: parseFloat(d[0]), y: parseFloat(d[1]) }, 
            e = { x: parseFloat(d[2]), y: parseFloat(d[3]) };
        var distance = calculateDistance(s, e); 
        totalDistance += distance;
        
        path.attr('d', 'M'+s.x+' '+s.y+'L'+s.x+' '+s.y);
        path.data(uid+'Distance', distance);
        path.data(uid, function (segmentDuration) {
            common.queue(function (nextInQueue) {
                path.animate({ segmentProgress: 1 }, {
                    step: function (now, fx) {
                        var x = s.x + (e.x-s.x)*now;
                        var y = s.y + (e.y-s.y)*now;
                        path.attr('d', 'M'+s.x+' '+s.y+'L'+x+' '+y);
                    },
                    complete: function () {
                        nextInQueue();
                    },
                    duration: segmentDuration,
                    ease: 'linear'
                });
            });
        });
    });
    
    // second pass triggers all the animation queueing
    this.each(function () {
        var distance = $(this).data(uid + 'Distance');
        ($(this).data(uid))(Math.floor(duration * distance/totalDistance));
        $(this).data(uid, null);
    });
    
    return this;
};

})(jQuery);

//...