Cool

HTML
<svg class="demo demo--text"> <symbol id="s-text"> <text x="50%" y="50%" dy=".3em" text-anchor="middle">cool</text> </symbol> <g class="symbols-list"> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> <g class="symbols-item"> <use xlink:href="#s-text" class="text--item"/> </g> </g> </svg>
SCSS
svg { position: absolute; width: 100%; height: 100%; } @import url(http://fonts.googleapis.com/css?family=Russo+One); BODY { background: #000; } svg { position: absolute; width: 100%; height: 100%; } .demo--text { font: 16em/1 'Russo One', Impact; letter-spacing: .05em; } $colors: hsl(0,100,50), hsl(25,100,50), hsl(50,100,50), hsl(75,100,50), hsl(100,100,50), hsl(125,100,50), hsl(150,100,50), hsl(175,100,50), hsl(200,100,50), hsl(225,100,50), hsl(250,100,50), hsl(275,100,50), hsl(300,100,50), hsl(325,100,50), hsl(350,100,50) ; $max-colors: length($colors); $max-copies: 15; $time: 2s; $time-long: $time*3; $time-step: $time/$max-colors; $stroke-width-step: 2; $fill-opacity: .3; .symbols-item { animation: offset-direction $time-long linear infinite; @for $item from 1 through $max-copies { &:nth-child(#{$max-copies}n + #{$item}) { animation-delay: -$time-step*$item/3; } } fill: none; stroke-width: 2; .text--item { fill-opacity: $fill-opacity; animation: anim-stroke $time linear infinite alternate; animation-name: anim-move; animation-duration: $time; } @for $item from 1 through $max-copies { &:nth-child(#{$max-copies}n + #{$item}) .text--item { $color: nth($colors, $item); stroke: $color; stroke-opacity: .4; fill: $color; fill-opacity: $fill-opacity/$item + .15; animation-delay: -$time-step*$item/2; } } } @keyframes offset-direction { 25% { transform: translate(-200px,0) } 75% { transform: translate(200px,0) } } @keyframes anim-move { 50% { transform: translate(0, 40px); } }
JAVASCRIPT
Expand for more options Login