SVG Noise Texture Generator

Create a scalable, resolution-independent noise or grain texture as a single SVG file — no image editor, no Photoshop plugins, and nothing to upload. The texture is drawn entirely by the browser's own <feTurbulence> filter primitive, so the result is a tiny piece of vector markup that stays crisp at any size and weighs a fraction of a PNG.

What it does

Film grain, paper fibre, subtle background noise and cloud-like patterns are all variations of the same thing: pseudo-random values shaped into a visible texture. This generator exposes the controls that matter and emits ready-to-use SVG you can copy straight into your markup or download as a .svg file.

Controls

• Type — Fractal Noise gives an even, organic grain (great for film-grain overlays and paper textures); Turbulence produces cloudier, swirling patterns.
• Base frequency — the scale of the noise. Higher values pack the pattern tighter for a finer grain; lower values spread it into larger blobs. The slider value is divided by 100, so 65 means a frequency of 0.65.
• Octaves — how many layers of detail are summed together. More octaves add richness at the cost of a little render time.
• Seed — picks which pseudo-random pattern you get. <feTurbulence> is deterministic for a given seed, so the same seed and settings always produce the exact same texture — change the seed to roll a different pattern, keep it to reproduce one.
• Stitch tiles — makes the pattern tile seamlessly, so the texture can repeat as a background without visible seams.
• Color mode — Monochrome renders grayscale grain; Colored tints the noise with a colour of your choice, using the noise's brightness as the transparency.
• Background — the solid fill painted behind the noise.
• Noise opacity — how strongly the grain shows over the background.
• Contrast — boosts or softens the intensity of the noise.
• Width / height — the nominal pixel size of the SVG. Because SVG is vector, this only sets the default dimensions; the texture scales losslessly to any size.

How to use the output

Copy the SVG source and paste it inline into an HTML page, an icon set, or a design file. Or download the .svg and drop it into your project like any other asset. To use it as a repeating CSS background, encode the SVG into a data: URI and set it as a background-image with background-repeat: repeat — enable Stitch tiles first so the tile edges line up.

Why SVG instead of a PNG?

An SVG noise texture is a few hundred bytes of markup that renders at the display's native resolution — no blurring on high-DPI screens and no fixed pixel dimensions to fight. The <feTurbulence> filter is supported in every modern browser.

Is it reproducible?

Yes. For the same type, frequency, octaves and seed, the generated markup is byte-for-byte identical every time, so you can commit the seed and settings and always regenerate the same texture.

Privacy

Everything runs locally in your browser. Your settings and the generated SVG never leave your device.