SVG Filter Effects

When to use this

• You need a gooey/metaball merge effect where shapes visually fuse together.
• You want organic distortion (warping, turbulence) applied to DOM elements or SVG shapes.
• CSS filter: blur() / drop-shadow() is not enough -- you need composited filter chains.
• You want animated noise/turbulence textures generated purely in markup.
• Do NOT use this for simple blur or drop shadow on a single element -- CSS filter is cheaper and simpler.

Mental model

SVG filters are a compositing pipeline. Each filter primitive (fe* element) takes one or two named inputs, processes them, and produces a named output. You chain them by connecting outputs to inputs.

The key primitives:

• feTurbulence: Generates Perlin or fractal noise as a pixel buffer. This is not noise applied to anything -- it IS pixels of noise. You use it as a displacement map or blend source.
• feDisplacementMap: Takes two inputs. One is the source image, the other is a map (often from feTurbulence). It shifts each pixel of the source by an amount determined by the map's color values. R channel controls X displacement, G channel controls Y displacement.
• feGaussianBlur: Gaussian blur. The foundation of the gooey effect.
• feColorMatrix: 4x5 matrix transform on RGBA values. The gooey trick: blur shapes so they merge, then use a steep alpha threshold in feColorMatrix to snap the blurred alpha back to hard edges.
• feComposite: Boolean operations (in, out, atop, over, xor, arithmetic) between two inputs.