HTML
<svg viewBox="0 0 1024 620" class="demo demo--aurora">
<filter id="blur">
<feGaussianBlur stdDeviation="10 1">
<animate attributeName="stdDeviation"
values="
0;0;0;
0 15;
25 1;
10 2;
5;
0;
10 1;
0 7;
0"
dur="5s" repeatCount="indefinite" />
</feGaussianBlur>
</filter>
<symbol id="text">
<text x="50%" y="50%" dy=".3em" text-anchor="middle"
filter="url(#blur)">Codepad</text>
</symbol>
<mask id="mask"
maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<use xlink:href="#text" class="text--fill"/>
</mask>
<radialGradient id="gr-aurora-1" class="gr-aurora-1"
gradientUnits = "objectBoundingBox"
cx="50%" cy="50%" r="50%">
<stop offset="0" class="aurora-stop-color-1"/>
<stop offset="90%" class="aurora-stop-color-2"/>
</radialGradient>
<radialGradient id="gr-aurora-2" class="gr-aurora-2"
gradientUnits = "objectBoundingBox"
cx="50%" cy="50%" r="50%">
<stop offset="0" class="aurora-stop-color-1"/>
<stop offset="90%" class="aurora-stop-color-2"/>
</radialGradient>
<radialGradient id="gr-aurora-3" class="gr-aurora-3"
gradientUnits = "objectBoundingBox"
cx="50%" cy="50%" r="50%">
<stop offset="0" class="aurora-stop-color-1"/>
<stop offset="90%" class="aurora-stop-color-2"/>
</radialGradient>
<radialGradient id="gr-aurora-4" class="gr-aurora-4"
gradientUnits = "objectBoundingBox"
cx="50%" cy="50%" r="50%">
<stop offset="0" class="aurora-stop-color-1"/>
<stop offset="90%" class="aurora-stop-color-2"/>
</radialGradient>
<radialGradient id="gr-aurora-5" class="gr-aurora-5"
gradientUnits = "objectBoundingBox"
cx="50%" cy="50%" r="50%">
<stop offset="0" class="aurora-stop-color-1"/>
<stop offset="90%" class="aurora-stop-color-2"/>
</radialGradient>
<use xlink:href="#text" class="text--shadow"/>
<g mask="url(#mask)">
<rect width="500" height="500"
fill="url(#gr-aurora-1)"
x="-100" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-2)"
x="-100" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-3)"
x="-200" y="100"/>
<rect width="500" height="500"
fill="url(#gr-aurora-4)"
x="80" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-5)"
x="300" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-4)"
x="500" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-3)"
x="600" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-2)"
x="720" y="50"/>
<rect width="500" height="500"
fill="url(#gr-aurora-1)"
x="550" y="100"/>
<rect width="500" height="500"
fill="url(#gr-aurora-2)"
x="400" y="100"/>
<rect width="500" height="500"
fill="url(#gr-aurora-3)"
x="300" y="100"/>
<rect width="500" height="500"
fill="url(#gr-aurora-4)"
x="250" y="100"/>
<rect width="500" height="500"
fill="url(#gr-aurora-5)"
x="100" y="100"/>
</g>
<use xlink:href="#text" class="text--transp"/>
</svg>
SCSS
@import url(http://fonts.googleapis.com/css?family=Russo+One);
BODY {
background: #222;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
.demo {
font: 10em/1 'Russo One', Impact;
}
.text--fill {
fill: #FFF;
}
.text--shadow {
fill: #000;
fill-opacity: .5;
-webkit-transform: translate(0, 30px);
transform: translate(0, 30px);
}
.text--transp {
fill: transparent;
stroke: #000;
stroke-width: 8;
stroke-opacity: .4;
}
.aurora-stop-color-1 {
stop-color: #009999;
-webkit-animation: aurora-stop-colors 7s linear infinite alternate;
animation: aurora-stop-colors 7s linear infinite alternate;
}
.gr-aurora-1 .aurora-stop-color-1 {
-webkit-animation-delay: -1.4s;
animation-delay: -1.4s;
/*stop-color: red;*/
}
.gr-aurora-2 .aurora-stop-color-1 {
-webkit-animation-delay: -2.8s;
animation-delay: -2.8s;
/*stop-color: orange;*/
}
.gr-aurora-3 .aurora-stop-color-1 {
-webkit-animation-delay: -4.2s;
animation-delay: -4.2s;
/*stop-color: gold;*/
}
.gr-aurora-4 .aurora-stop-color-1 {
-webkit-animation-delay: -5.6s;
animation-delay: -5.6s;
/*stop-color: green;*/
}
.gr-aurora-5 .aurora-stop-color-1 {
-webkit-animation-delay: -7s;
animation-delay: -7s;
/*stop-color: blue;*/
}
.aurora-stop-color-2 {
stop-color: black;
stop-opacity: 0;
}
@-webkit-keyframes aurora-stop-colors {
7.14286% {
stop-color: #009999;
}
14.28571% {
stop-color: #00cc99;
}
21.42857% {
stop-color: #00ff95;
}
28.57143% {
stop-color: #c2d65c;
}
35.71429% {
stop-color: #d8f0a8;
}
42.85714% {
stop-color: #ffbb33;
}
50% {
stop-color: #ff7733;
}
57.14286% {
stop-color: #ff002b;
}
64.28571% {
stop-color: #b814b8;
}
71.42857% {
stop-color: #6614b8;
}
78.57143% {
stop-color: #144bb8;
}
85.71429% {
stop-color: #0a85c2;
}
92.85714% {
stop-color: #009999;
}
100% {
stop-color: green;
}
}
@keyframes aurora-stop-colors {
7.14286% {
stop-color: #009999;
}
14.28571% {
stop-color: #00cc99;
}
21.42857% {
stop-color: #00ff95;
}
28.57143% {
stop-color: #c2d65c;
}
35.71429% {
stop-color: #d8f0a8;
}
42.85714% {
stop-color: #ffbb33;
}
50% {
stop-color: #ff7733;
}
57.14286% {
stop-color: #ff002b;
}
64.28571% {
stop-color: #b814b8;
}
71.42857% {
stop-color: #6614b8;
}
78.57143% {
stop-color: #144bb8;
}
85.71429% {
stop-color: #0a85c2;
}
92.85714% {
stop-color: #009999;
}
100% {
stop-color: green;
}
}
