JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div> 
<h3>
<svg viewBox="0 0 960 300">
	<symbol id="s-text">
		<text text-anchor="middle" x="50%" y="80%">Title</text>
	</symbol>

	<g class = "g-ants">
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
		<use xlink:href="#s-text" class="text-copy"></use>
	</g>
</svg>
</h3>
<p>Some text here</p> 
</div>
</body>

CSS

body
{
	margin: 0;
	padding: 0;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #000;
}
p
{
	position: relative;
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	letter-spacing: 4px;
	overflow: hidden;
	background: linear-gradient(90deg, #000, #000fe6, #000);
	background-repeat: no-repeat;
	background-size: 80%;
	animation: animate 3.75s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: rgba(45,45,45,.05);
	display: flex;
	justify-content: center;
}
@keyframes animate
{
	0%
	{
		background-position: -500%;
	}
	100%
	{
		background-position: 500%;
	}
}

svg {
    display: flex;
    font: 10.5em 'Montserrat';
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
	stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #BD0034;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

@media screen and (max-width: 600px) { p { font-size: 20px; } }