<style>
.svg {
	border: 1px solid gray;
	background: linear-gradient(45deg, tan, transparent, teal);
}
.text {
	font: bold 160px monospace;
	fill: none;
	stroke-width: 6;
	stroke-dasharray: 0 300;
	stroke-dashoffset: 0;
	filter: drop-shadow(0 0 6px #333);
}
.text:nth-child(3n + 1) {
	stroke: red;
 	animation: stroke1 10s infinite alternate;  
}
.text:nth-child(3n + 2) {
	stroke: green;
	animation: stroke2 10s infinite alternate;
}
.text:nth-child(3n + 3) {
	stroke: blue;
	animation: stroke3 10s infinite alternate;
}
@keyframes stroke1 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1000; }
}
@keyframes stroke2 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1080; }
}
@keyframes stroke3 {
	to { stroke-dasharray: 80 160; stroke-dashoffset: 1160; }
}
</style>

<svg width="800" height="300" viewBox="0 0 800 300" class="svg">
	<symbol id="hc">
		<text text-anchor="middle" x="50%" y="50%" dy="60px">花潮论坛</text>
	</symbol>
	<use href="#hc" class="text"></use>
	<use href="#hc" class="text"></use>
	<use href="#hc" class="text"></use>
</svg>