Gerador de Noise SVG

Noise SVG: como funciona o grain procedural

Noise (ou grain) é uma textura granular sobreposta a cores e gradients planos para dar sensação tátil ao design e mascarar o banding visível que telas de 8 bits produzem em transições sutis de cor. A geração Awwwards de designers adotou a técnica por volta de 2020 — a Apple usa em landing pages, sites brutalistas pintam com ela e ilustrações estilo risograph dependem dela. O truque que tornou tudo barato e independente de resolução foi a primitiva de filtro SVG <feTurbulence>, um gerador de noise estilo Perlin nativo em todos os navegadores modernos.

O filtro mínimo viável é assim:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="n">
    <feTurbulence type="fractalNoise" baseFrequency="0.9"
                  numOctaves="3" stitchTiles="stitch"/>
    <feColorMatrix values="0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0 0
                            0 0 0 0.4 0"/>
  </filter>
  <rect width="100%" height="100%" filter="url(#n)"/>
</svg>

O que cada parâmetro faz

• baseFrequency — resolução do noise. Baixo (0.4) fica mais smooth e com cara de nuvem; alto (1.5) fica granular e cinematográfico. O sweet spot para grain sutil é 0.7–0.9.
• numOctaves — quantas camadas de noise são somadas. Mais octaves = mais detalhe visual ao custo de CPU. Três é um bom default.
• seed — inteiro que controla a sequência pseudoaleatória, fazendo o mesmo SVG renderizar idêntico toda vez.
• type — turbulence é mais agressivo e caótico, fractalNoise é mais suave e natural.
• stitchTiles="stitch" — faz a textura encaixar sem costura quando você a repete como background, essencial para tile de CSS.

Aplicando o noise via CSS

O jeito mais ergonômico de aplicar é inlinear o SVG como data URI e jogá-lo em background-image. O padrão de plugin Tailwind .bg-noise embute isso numa utility. Sobreponha o noise a um gradient com mix-blend-mode: overlay para o feel de impressão, ou com opacity: 0.05–0.1 para matar o banding sem alterar o tom geral.

Perlin, Simplex, white noise — qual a diferença?

White noise é o chiado de TV antiga — cada pixel é aleatório de forma independente. Perlin noise, inventado por Ken Perlin em 1983 para o filme Tron, é noise gradiente suave que parece nuvens ou mármore. Simplex noise é a refinação de Perlin em 2001, mais rápida em dimensões maiores. O feTurbulence usa um algoritmo da família Perlin, por isso você consegue produzir resultados de nuvem e de grão só mudando a frequência.

Pegadinhas de performance

Filtros SVG rodam na GPU em browsers modernos, mas cobrir toda a viewport a cada paint ainda custa alguns milissegundos em dispositivos fracos. Dois truques: (a) renderizar um tile pequeno (256×256) uma vez e repetir como background CSS — fica em torno de 1 KB de payload — ou (b) bakear um PNG e servir pelo CDN. Para noise animado, use will-change: filter com parcimônia e prefira animar o atributo seed via requestAnimationFrame, porque o Chrome não interpola esse valor com suavidade via CSS.

Perguntas frequentes

O noise degrada a performance da página? Só em overlays animados de tela cheia. Um tile estático 256×256 repetido como background CSS é praticamente de graça.

Quanto de noise é "suficiente"? Para UI design, 5–10% de opacidade é o sweet spot — visível de perto, invisível de longe e o bastante para matar o banding de gradient.

O noise é gerado no servidor? Não — o navegador calcula o feTurbulence localmente. Nenhum byte sai da sua máquina e não há renderização backend.

Por que o Safari renderiza um pouco diferente do Chrome? As implementações de Perlin seguem a spec SVG mas divergem no arredondamento subpixel. A diferença costuma ser invisível em opacidades típicas; se importar, sirva um PNG.