Random Noise SVG
Generate an SVG noise texture using feTurbulence.
Overview
The Random Noise SVG generator emits a tiny SVG that renders as a grainy, film-style noise texture using the built-in <feTurbulence> filter. The output is a self-contained SVG you can paste into a CSS background, overlay on a hero image or use as a subtle grain layer to age a flat design.
The generator is aimed at frontend designers chasing that "analogue grain" trend, game UI designers adding texture to flat assets and brand designers warming up over-clean illustrations. Long-tail searches like "svg noise texture generator", "css grain effect inline svg" and "feTurbulence noise filter snippet" all resolve here.
How it works
SVG's <feTurbulence> filter primitive produces Perlin-style or fractal noise directly in the renderer — no rasterised image is shipped. The tool exposes the four useful knobs: baseFrequency controls scale, numOctaves adds high-frequency detail, type switches between Perlin turbulence and fractal noise, and seed produces a reproducible pattern. The output is a single <svg> containing a <filter> definition and a <rect> that applies the filter to fill the viewport.
Because the noise is generated at render time, the SVG file is only a few hundred bytes regardless of the rendered resolution — the browser does the heavy lifting. You can layer it over an image with mix-blend-mode: overlay or set a low opacity for a subtle film-grain finish without inflating page weight.
Examples
baseFrequency 0.9, octaves 2 → fine film grain
baseFrequency 0.2, octaves 4 → cloudy, larger blobs
type "fractalNoise" → softer, more organic texture
seed 42 → reproducible pattern across reloads
FAQ
Will this slow down my page?
feTurbulence is GPU-accelerated in modern browsers, and the SVG payload is tiny. Heavy use across many large elements can still tax weaker GPUs.
Can I tint the noise?
Yes. Apply feColorMatrix or wrap the SVG in a parent with filter: hue-rotate(...). The tool can emit a tint matrix on request.
Why is the same seed reproducible?
feTurbulence is deterministic given the seed and frequency parameters; the same inputs produce identical pixel patterns across browsers.
Is it better than a PNG noise overlay?
For typical web use, yes — the SVG is smaller, scales without artefacts and stays crisp at any pixel density.
Can I use this in print?
The SVG renders cleanly in any vector-aware renderer. For print-perfect predictable output, rasterise at the target DPI in a design tool first.