SVG Gradient Text Animation

HTML
<svg viewBox="0 0 125 115"> <defs> <linearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" > <stop stop-color="#FF5B99" offset="0%"/> <stop stop-color="#FF5447" offset="20%"/> <stop stop-color="#FF7B21" offset="40%"/> <stop stop-color="#EAFC37" offset="60%"/> <stop stop-color="#4FCB6B" offset="80%"/> <stop stop-color="#51F7FE" offset="100%"/> </linearGradient> </defs> <text fill="url(#rainbow)"> <tspan font-size="30" x="0" y="30"> gradient </tspan> <tspan font-size="65" x="0" dy="60">text</tspan> <tspan font-size="20" x="0" dy="20">all up in here</tspan> </text> </svg>
CSS
body { font-family: "Oswald", Impact, Charcoal, sans-serif; text-transform: uppercase; background: #222; overflow: hidden; } svg { max-height: 80vh; margin: 10vh auto; display: block; animation: scaleIt 3s linear infinite; } @keyframes scaleIt { 0% { transform: scale(1) } 100%, 0% { transform: scale(1.1) } 50% { transform: scale(1) } }
JAVASCRIPT
Expand for more options Login