HTML
<svg viewBox="0 0 600 300">
<radialGradient id="gr-radial"
cx="50%" cy="50%" r="70%"
>
<animate attributeName="r"
values="10%;150%;80%;0%"
dur="4s" repeatCount="indefinite" />
<stop stop-color="#FFF" offset="0">
<animate attributeName="stop-color"
values="#16a085;#f1c40f;#e67e22;#1abc9c;#e74c3c;#2ecc71;#9b59b6"
dur="6s" repeatCount="indefinite" />
</stop>
<stop stop-color="rgba(55,55,55,0)" offset="100%"/>
</radialGradient>
<text text-anchor="middle"
x="50%"
y="50%"
dy=".35em"
class="text"
>
CODEPAD
</text>
</svg>
CSS
.text {
fill: url(#gr-radial);
}
html, body {
height: 100%;
}
body {
background:#12111e;
background-size: .2em 100%;
font-family: 'Raleway', sans-serif;
font-size: 8vw;
text-transform: uppercase;
margin: 0;
}
svg {
position: absolute;
width: 100%;
height: 100%;
text-shadow:21px 2px 2px #111;
}
