Codepad Text Effect

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; }
JAVASCRIPT
Expand for more options Login