<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));
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.