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