JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="OpenLayers_Layer_Vector_64_svgRoot" width="1065" height="506" viewBox="0 0 1365 806" style="display: block;"><g id="OpenLayers_Layer_Vector_64_root" transform="" style="visibility: visible;"><g id="OpenLayers_Layer_Vector_64_vroot"><polyline id="OpenLayers_Geometry_LineString_76_background" points="1120.3219302062905,262.794537693184,1143.1912635437202,300.16596521422844,1120.3219302062905,262.794537693184,1142.7361524325277,299.6177115867614,301.69081894854105,477.2496815971045" fill="none" stroke="#FF0000" stroke-opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none"></polyline><polyline id="OpenLayers_Geometry_LineString_76" points="1120.3219302062905,262.794537693184,1143.1912635437202,300.16596521422844,1120.3219302062905,262.794537693184,1142.7361524325277,299.6177115867614,301.69081894854105,477.2496815971045" fill="none" stroke="#FF0000" stroke-opacity="0.7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="none"></polyline></g><g id="OpenLayers_Layer_Vector_64_troot"></g></g></svg>

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...