Gerador de Textura de Ruído

Continuar na ferramenta

Mais páginas desta ferramenta

grain background SVG

Grain Background em SVG

Um fundo granulado em PNG pesa quilobytes fixos e não muda sem reexportar a imagem; o mesmo efeito em SVG é código, gerado por fórmula, então cabe direto no controle de versão e muda com um parâmetro em vez de um arquivo novo. Esta página cobre como montar esse fundo como um tile pequeno repetido, em vez de um filtro cobrindo a tela inteira.

Por que tile pequeno em vez de filtro em tela cheia

O ruído procedural em SVG vem do filtro `feTurbulence`, que calcula uma função de ruído tipo Perlin pixel a pixel dentro da região do filtro; quanto maior essa região, mais pixels o navegador recalcula a cada repaint, e `feTurbulence` está entre os filtros SVG mais caros de processar porque a fórmula roda para cada canal de cor separadamente.
Gerar um tile pequeno, algo como 128 ou 256 pixels de lado, e repeti-lo com `<pattern>` do SVG ou `background-repeat` do CSS custa uma fração do processamento de aplicar o filtro na tela inteira, porque o navegador calcula o ruído uma única vez e só copia o resultado lado a lado; o atributo `seed` do `feTurbulence` garante que esse tile fique reprodutível a cada build, sem variar sozinho de uma exportação para outra.
O atributo `numOctaves` soma camadas de ruído em frequências crescentes e amplitudes decrescentes, técnica conhecida como fractal Brownian motion; cada oitava extra dobra a frequência e reduz a amplitude pela metade, então a partir da quarta ou quinta oitava a contribuição fica pequena demais para o olho notar na maioria das resoluções de tela, e o custo de cálculo sobe sem ganho visual proporcional.

Três tiles, três finalidades

Tile de landing page

Entrada: seed: landing-grain, cells: 28
Saída esperada: Tile SVG de grão médio, pronto para `<pattern>` repetido

Cells 28 aponta para um grão de tamanho médio, nem fino demais para sumir em tela pequena, nem grosso a ponto de virar mancha.

Fundo de card em produto

Entrada: seed: card-bg-01, cells: 40
Saída esperada: Tile SVG de grão mais fino, apropriado para área menor

Um valor de cells mais alto reduz o tamanho de cada célula de ruído, adequado quando o tile precisa repetir numa área pequena sem ciclo visível.

Textura de fundo institucional

Entrada: seed: about-page, cells: 16
Saída esperada: Tile SVG de grão grosso, mais parecido com névoa

Cells 16 é a faixa mais baixa entre os três exemplos, resultando num padrão mais suave e menos detalhado por área.

FAQ da ferramenta completa

Ruído SVG substitui uma imagem PNG?

Em muitos fundos, sim: o SVG mantém edição e escala sem perda. Mas texturas muito densas geram um markup grande, que pode ficar mais pesado que um bitmap otimizado, nesses casos, rasterizar em PNG/WebP pode compensar.

O que a seed controla?

O ruído prejudica a acessibilidade?

Quando usar textura na UI?

Por que exportar em SVG?

Mais contraste é sempre melhor?

A textura é aleatória de verdade?

A ferramenta funciona sem backend?

Perguntas frequentes

Por que SVG em vez de exportar o ruído como PNG?

Porque SVG é código: o mesmo arquivo `.svg` cabe num repositório, muda de cor ou grão trocando um atributo de texto, e não precisa de uma ferramenta de imagem para gerar uma nova versão a cada ajuste de design.

O tile repetido deixa costura visível?

Depende do parâmetro de frequência escolhido: valores de cells muito baixos criam padrões com formas maiores que podem alinhar de um jeito perceptível na borda do tile; valores mais altos, com grão mais fino, disfarçam a repetição melhor.

Preciso de um `numOctaves` alto para o grão parecer realista?

Não: a partir de 3 ou 4 oitavas, cada camada extra soma uma amplitude tão pequena que o olho não distingue mais o ganho, então subir esse número normalmente só aumenta o custo de renderização sem melhorar a textura.

O tile em SVG funciona igual em qualquer navegador?

O atributo `seed` do `feTurbulence` garante a mesma sequência de ruído entre navegadores que seguem o padrão SVG, mas pequenas diferenças de antialiasing entre motores de renderização podem deixar bordas do grão levemente diferentes de um navegador para outro.

Próximos passos