Noise Texture Generator

Continue in the tool

More pages for this tool

SVG grain background

SVG Grain Background

A grain background exported as a PNG carries a fixed file weight and cannot change without re-exporting the image; the same effect in SVG is code, generated by a formula, so it fits straight into version control and changes with a parameter instead of a new file. This page covers building that background as a small repeated tile, instead of a filter covering the full screen.

Why a small tile instead of a full screen filter

Procedural noise in SVG comes from the `feTurbulence` filter, which computes a Perlin like noise function pixel by pixel across the filter region; the larger that region, the more pixels the browser recalculates on every repaint, and `feTurbulence` is among the more expensive SVG filters to process because the formula runs separately for each color channel.
Generating a small tile, something like 128 or 256 pixels a side, and repeating it with an SVG `<pattern>` or CSS `background-repeat` costs a fraction of applying the filter across the full screen, because the browser computes the noise once and just copies the result side by side; the `feTurbulence` `seed` attribute keeps that tile reproducible on every build, instead of drifting between exports.
The `numOctaves` attribute sums noise layers at increasing frequency and decreasing amplitude, a technique known as fractal Brownian motion; every extra octave doubles the frequency and halves the amplitude, so from the fourth or fifth octave onward the contribution gets too small for the eye to notice at most screen resolutions, while the compute cost keeps climbing without a matching visual gain.

Three tiles, three purposes

Landing page tile

Input: seed: landing-grain, cells: 28
Expected output: Tile SVG de grão médio, pronto para `<pattern>` repetido

A cells value of 28 points to a mid sized grain, not so fine it disappears on a small screen, not so coarse it turns into a blotch.

Product card background

Input: seed: card-bg-01, cells: 40
Expected output: Tile SVG de grão mais fino, apropriado para área menor

A higher cells value shrinks each noise cell, appropriate when the tile needs to repeat across a small area with no visible seam.

Institutional page background

Input: seed: about-page, cells: 16
Expected output: Tile SVG de grão grosso, mais parecido com névoa

A cells value of 16 is the lowest of the three examples, producing a smoother pattern with less detail per area.

Full tool FAQ

Can SVG noise replace a PNG image?

For many backgrounds, yes: SVG stays editable and scales losslessly. But very dense textures produce large markup that can end up heavier than an optimized bitmap, in those cases, rasterizing to PNG/WebP may pay off.

What does the seed control?

Can noise hurt accessibility?

When should texture be used in UI?

Why export as SVG?

Is more contrast always better?

Is the texture truly random?

Does the tool work without a backend?

Frequently asked questions

Why SVG instead of exporting the noise as a PNG?

Because SVG is code: the same `.svg` file fits into a repository, changes color or grain by swapping a text attribute, and does not need an image tool to generate a new version on every design tweak.

Does the repeated tile leave a visible seam?

It depends on the chosen frequency parameter: very low cells values create larger shapes that can align noticeably at the tile edge; higher values, with finer grain, hide the repetition better.

Do I need a high `numOctaves` for the grain to look realistic?

No: from 3 or 4 octaves onward, every extra layer adds an amplitude so small the eye can no longer tell the difference, so raising that number usually just adds rendering cost without improving the texture.

Does the SVG tile render identically in every browser?

The `feTurbulence` `seed` attribute guarantees the same noise sequence across browsers that follow the SVG standard, but small antialiasing differences between rendering engines can leave the grain edges slightly different from one browser to another.

Next steps