// svg-filters.js

Interactive demos of popular SVG filter effects. Hover or click to see them in action.

SQUIGGLE

Animated turbulence creates a hand-drawn, boiling effect. Great for cartoon aesthetics.

<feTurbulence> + <feDisplacementMap>

LIQUID

Slow-moving fractal noise for underwater or heat distortion effects.

baseFrequency animation

GLITCH

Fast turbulence changes create digital distortion and scan-line artifacts.

High-frequency displacement

GLOW

Gaussian blur combined with color matrix for soft luminescence.

<feGaussianBlur> + <feBlend>

RGB SPLIT

Split RGB channels with offset for lens distortion or VHS effects.

<feColorMatrix> + <feOffset>

GRAIN

Animated noise texture for vintage film or analog photography look.

<feTurbulence> fractalNoise

EMBOSS

Convolution matrix creates raised 3D appearance with directional lighting.

<feConvolveMatrix>

PIXEL

Composite tiling reduces resolution for retro 8-bit aesthetics.

<feTile> + <feMorphology>

// playground

Apply filters to your own text. Type below and select a filter.

HELLO WORLD