JSFiddle - React, Tailwind, and code Playground

by gregbabula

JavaScript

var strokes = [ { stroke: "M50 500", time: 0},
                { stroke: "l200 60", time: 800},
                { stroke: "l300 -400", time: 600},
                { stroke: "l-150 -20",  time: 300},
                { stroke: "l-180 350", time: 200},
                { stroke: "l-160 -80", time: 800},
                { stroke: "L50 500", time: 600}];


var drawnPath = strokes[0].stroke;
var paper = Raphael(10, 10, 800, 600);
var myPath = paper.path(drawnPath);
var section = 1;



//Path
var boxPath = paper.path('M192.023,123.882H379.106L375.091,123.85900000000001C375.091,173.933,415.683,214.525,465.75800000000004,214.525L465.77200000000005,210.525L465.69000000000005,475.25700000000006C465.69000000000005,487.18700000000007,475.36000000000007,496.8570000000001,487.2900000000001,496.8570000000001H689.97H851.5450000000001H887.9080000000001').attr(guidePathStyle),
boxPathRight = paper.path('M754.403,123.878H716.35C704.422,123.878,694.75,133.548,694.75,145.478V192.40800000000002L694.688,181.95700000000002V475.25800000000004C694.688,487.18800000000005,685.018,496.85800000000006,673.088,496.85800000000006H325').attr(guidePathStyle);



myPath.attr({
    "stroke-width": 4,
    "stroke": "#060",
    "stroke-opacity": 0.5
});


animatePath();

function animatePath() {
    if (section < strokes.length) {
        drawnPath += strokes[section].stroke;
        myPath.animate({
            path: drawnPath
        }, strokes[section].time, animatePath);
        section++;
    }
}