Convert text to SVG paths quickly and easily

Back

Fire Effect

Fiery distortion effect

Fire
<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>