<span>G</span><span>L</span><span>O</span><span>W</span><span>I</span><span>N</span><span>G</span>

@import 'https://fonts.googleapis.com/css?family=Permanent+Marker';

$r : 50px;  // glow radius
$o : 25px;  // glow offset
$d : 2s;    // duration
$chars : 7; // # of letters
$bg : #111; // background color

$c : cyan yellow tomato;

body {
	font: 15vw/1 Permanent Marker;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	text-align: center;
	background: $bg;
	color: snow;
}

span {
	animation: glow $d ease-in-out both infinite;	

	@for $i from 1 through $chars {
		&:nth-child(#{$i}) {
			animation-delay: $i/$chars * -$d;
		}
	}
}

@mixin glow($c1, $c2, $c3) {
	text-shadow:
		0 0 $r/6 snow,
		0 (-$o) $r $c3,
		(-$o) $o $r $c2,
		$o $o $r $c3;
}

@keyframes glow {
	0%, 100% {
		@include glow(nth($c, 1), nth($c, 2), nth($c, 3));	
	}
	33% {
		@include glow(nth($c, 2), nth($c, 3), nth($c, 1));
	}
	66% {
		@include glow(nth($c, 3), nth($c, 1), nth($c, 2));
	}
}