Back
Fire Effect
Fiery distortion effect
<svg viewBox="0 0 600 120">
<defs>
<linearGradient id="fireg" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#fff17a"/>
<stop offset="0.4" stop-color="#ff6b00"/>
<stop offset="1" stop-color="#7c0a00"/>
</linearGradient>
<filter id="fire">
<feTurbulence baseFrequency="0.02" numOctaves="3" result="t"/>
<feDisplacementMap in="SourceGraphic" in2="t" scale="20"/>
</filter>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<text x="50%" y="55%" font-size="44" text-anchor="middle" fill="url(#fireg)" filter="url(#fire)">Fire</text>
</svg>