<!-- I ♡ Y -->
<svg version="1.1" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
  <symbol id="text">
    <text x="0" y="35%" class="text">AITTER</text>
  </symbol>
  <g>
		<use xlink:href="#text" class="use-text"></use>
		<use xlink:href="#text" class="use-text"></use>
		<use xlink:href="#text" class="use-text"></use>
		<use xlink:href="#text" class="use-text"></use>
		<use xlink:href="#text" class="use-text"></use>
  </g>
</svg>
svg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
}

.text {
	font-size: 200px;
	font-family: cursive;
}

.use-text {
	fill: none;
	stroke: white;
	stroke-dashoffset: 35%;
	stroke-dasharray: 0 87.5%;
	stroke-width: 2px;
}

.use-text:nth-child(1) {
	stroke: #360745;
	animation: animation1 8s infinite ease-in-out forwards;
}
.use-text:nth-child(2) {
	stroke: #D61C59;
	animation: animation2 8s infinite ease-in-out forwards;
}
.use-text:nth-child(3) {
	stroke: #E7D84B;
	animation: animation3 8s infinite ease-in-out forwards;
}
.use-text:nth-child(4) {
	stroke: #EFEAC5;
	animation: animation4 8s infinite ease-in-out forwards;
}
.use-text:nth-child(5) {
	stroke: #1B8798;
	animation: animation5 8s infinite ease-in-out forwards;
}

@keyframes animation1 {
	50%,70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 7%; }
}
@keyframes animation2 {
	50%,70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 14%; }
}
@keyframes animation3 {
	50%,70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 21%; }
}
@keyframes animation4 {
	50%, 70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 28%; }
}
@keyframes animation5 {
	50%,70%{ stroke-dasharray: 7% 28%; stroke-dashoffset: 35%; }
}

View Compiled
Rerun