JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.min.js"></script>
<div id="lines"></div>

JavaScript

// Create SVG element inside '#lines' div
var draw = SVG('lines').size('100%', '100%');
draw.viewbox(0, 0, 1920, 720);
draw.attr('stroke-linejoin', 'round');

// Create lines
var line = draw.line(1653.33, 561.57, 2286.22, 444.19).stroke({ width: 3 });
var polyline4 = draw.polyline('1415.25 203.25 1313.25 424.75 1606.75 268.25 1653.34 561.57 1313.25 424.75').fill('none').stroke({ width: 3 });
var polyline1 = draw.polyline('-278.12 460.16 45.5 267.5 358.67 181.33 614.5 273.5 833.5 224 986.5 133.5 1415.25 203.25 1606.75 268.25 2286.22 788.05').fill('none').stroke({ width: 3 });
var polyline3 = draw.polyline('833.5 224 1028.5 304.75 1313.25 424.75 812 483.5').fill('none').stroke({ width: 3 });
var polyline2 = draw.polyline('260.21 426 45.5 267.5 126.88 523 260.21 426 614.5 273.5 812 483.5 1028.5 304.75 1415.25 203.25 833.5 224 812 483.5').fill('none').stroke({ width: 3 });

// Add circles to polyline points
polyline2.marker('mid', 10, 10, function(add) {
		add.circle(5.5).cx(5).cy(5).fill('red');
});

polyline1.marker('mid', 10, 10, function(add) {
		add.circle(5.5).cx(5).cy(5).fill('red');
});

polyline4.marker('mid', 10, 10, function(add) {
		add.circle(5.5).cx(5).cy(5).fill('red');
});

polyline3.marker('mid', 10, 10, function(add) {
		add.circle(5.5).cx(5).cy(5).fill('red');
});

firstAnimation();

function firstAnimation() {
	polyline1.animate().plot('-278.12 460.16 51.75 264.5 352.08 184.58 614.33 268.33 838.33 229.67 988.33 139 1419 207 1609 263.67 2286.22 788.05').afterAll(secondAnimation);
	polyline2.animate().plot('266.75 425.75 51.75 264.5 127 516.25 266.75 425.75 614.33 268.33 806.33 482.33 1035.83 305.42 1419 207 838.33 229.67 806.33 482.33').afterAll(secondAnimation);
	polyline3.animate().plot('838.33 229.67 1035.83 305.42 1307.67 425.67 806.33 482.33').afterAll(secondAnimation);
	polyline4.animate().plot('1419 207 1307.67 425.67 1609 263.67 1657.67 558.33 1307.67 425.67').afterAll(secondAnimation);
}

function secondAnimation()...