SASS
@import "compass"
$letters: 11
$duration: 2
$depth: 50
@include keyframes( color-rot )
0%
@include filter( hue-rotate( 360deg ))
100%
@include filter( hue-rotate( 0deg ))
@include keyframes( glyph-wave )
0%
@include translate( -0.5vw , -0.5vw )
100%
@include translate( 0.5vw, 0.5vw )
html , body
position: absolute
overflow: hidden
height: 100%
width: 100%
left: 0
top: 0
div
@include translate( -50% , -50% )
@include animation( color-rot #{$duration}s linear 0s infinite normal none )
white-space: nowrap
display: inline-block
font-size: 0
position: absolute
left: 50%
top: 50%
i
color: hsl( 0 , 66% , 66% )
display: inline-block
text-transform: uppercase
font-family: 'Ultra', sans-serif
font-size: 9vw
$shadow: "0 0 red"
@for $i from 1 through $depth
$shadow: $shadow + " , #{$i}px #{$i}px hsl( #{round($i/$depth*45)} , 66% , 45% )"
text-shadow: #{$shadow}
@for $i from 1 through $letters
&:nth-of-type( #{$i} )
@include animation( glyph-wave #{$duration/2}s ease-in-out #{$i/$letters*-$duration}s infinite alternate none )
@include filter( hue-rotate( #{round($i/$letters*360)}deg ))
