SCSS Radiating Text

index.html

<h1 class="name">
  Chris is the bomb
</h1>

script.js

//Inspired by Johan Fagerbeg's pen: https://codepen.io/birjolaxew/pen/EPOobx?editors=0100

scss-radiating-text.markdown

SCSS Radiating Text

A Pen by Caree Youngman on CodePen.

License.

style.scss

$colors: red, orange, yellow, blue;
$size: 25;

@mixin rainbow-shadow($colors, $offset: 0, $size: $size) {
  $len: length($colors);
  $outp: 0px 0px transparent;
  @for $i from 1 through $size {
    $ind: floor( max($i + $offset, 1) / $size * length($colors) ) % $len + 1;
    $col: nth($colors, $ind);
    $outp: #{$outp}, #{$i}px #{$i}px #{$col};
  }
  
  text-shadow: $outp;
}

body { margin: 0; background: #171717; }
h1 {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: -#{$size/2}px 0 0;
  font-family: 'Pacifico', cursive;
  font-size: 15vh;
  color: white;
  text-align: center;
}
.name {
  animation: animated-rainbow-shadow 1s infinite;
}

@keyframes animated-rainbow-shadow {
  @for $i from 0 to $size + 1 {
    #{$i / $size * 100}% {
      @include rainbow-shadow($colors, $i);
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" />