JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<svg height="1210" width="1500">
  
	<line class="line-one " x1="0" y1="0" x2="1200" y2="1200" style="stroke:rgb(255,0,0);stroke-width:4;stroke-linecap: round" />
	<line class="line-two" x1="0" y1="0" x2="1200" y2="1200" style="stroke:rgb(225,185,0);stroke-width:16;stroke-linecap: round" />
		<line class="line-three" x1="0" y1="0" x2="1200" y2="1200" style="stroke:rgb(0,0,0);stroke-width:8;stroke-linecap: round" />
</svg>

CSS

svg .line-one {
	stroke-dasharray: 80 20 5 20;
	stroke-dashoffset: 0;
	animation: move-one 3s linear infinite;
}

svg .line-two {
	stroke-dasharray: 14 80;
	stroke-dashoffset: 0;
	animation: move-two 3s linear infinite;
}

svg .line-three {
	stroke-dasharray: 20 120;
	stroke-dashoffset: 0;
	animation: move-three 5s linear infinite;
}



@keyframes move-one {
	to {
		stroke-dashoffset: 125;
	}
}

@keyframes move-two {
	to {
		stroke-dashoffset: -94;
	}
}

@keyframes move-three {
	to {
		stroke-dashoffset: 140;
	}
}