JSFiddle - React, Tailwind, and code Playground

by Vicos

HTML

<svg>
					<line id="lineOne" x1="55" y1="85" x2="55" y2="85" />
					<line id="lineTwo" x1="215" y1="116" x2="271" y2="27" />
					<line id="lineThree" x1="270" y1="210" x2="212" y2="280" />
				</svg>

CSS

svg{
	position: absolute;
	left: 40.3%;
	top: 17.9%;
	height: 585px;
	width: 550px;
}
svg line{
	stroke: black;
    stroke-width: 1;
}

JavaScript

var i1 = 56;
	var j1 = 86;
	intervalId1 = setInterval( function() {
		
		$('#lineOne').attr({"x2":i1, "y2":j1});
		i1 -= 2;
		j1 -= 3.10;
		if (i1 < 0 && j1 < 0) {
			clearInterval(intervalId1);
		};
	}, 50);
	var i2 = 215;
	var j2 = 116;
	intervalId2 = setInterval( function() {
		
		$('#lineTwo').attr({"x2":i2, "y2":j2});
		i2 += 2;
		j2 -= 3.20;
		if (i2 > 271 && j2 < 26) {
			clearInterval(intervalId2);
		};
	}, 50);
	
	var i3 = 212;
	var j3 = 281;
	intervalId3 = setInterval( function() {

		$('#lineThree').attr({"x1":i3, "y1":j3});
		i3 += 2;
		j3 -= 2.40;
		if (i3 > 270 && j3 <= 209) {
			clearInterval(intervalId3);
		};
	}, 50);