Gerador de Textura Noise SVG

Texturas de noise SVG: além do grão simples

O noise SVG construído sobre o filtro <feTurbulence> é a forma mais flexível de adicionar uma sensação tátil e analógica a uma interface digital. O filtro base produz um campo de ruído Perlin gerado proceduralmente — mas o verdadeiro poder aparece quando você encadeia primitivas extras como feColorMatrix, feDisplacementMap e feComposite para imitar materiais reais.

Variações de textura por combinação de filtros

• Textura de papel — baseFrequency baixa (0,6-0,9) com 2-3 octaves, mais um tom quente suave via feColorMatrix.
• Concreto / pedra — frequência alta (1,5+) com 5+ octaves e uma matriz de detecção de borda para reforçar contraste.
• Madeira (grain) — noise anisotrópico: estique o campo em um eixo com baseFrequency="0,05 0,8" para criar fibras horizontais.
• Trama de tecido — mesmo truque anisotrópico, com duas camadas de noise perpendiculares blendadas via feComposite operator="arithmetic".
• Ondulação de água — alimente o noise no feDisplacementMap para deformar uma imagem subjacente — a base dos efeitos de distorção de vidro.

Tile sem emendas e detalhe multi-octave

Para um noise que repete sem emendas, use stitchTiles="stitch". O navegador alinha o campo procedural às bordas do tile, permitindo reutilizar o mesmo SVG como background-image CSS ou <pattern> sem repetições visíveis. O parâmetro numOctaves controla quantas frequências de ruído são somadas — mais octaves dão uma textura mais densa e "natural", ao custo de GPU. No Chromium 80+, feTurbulence é acelerado por GPU, e uma textura 600×300 renderiza confortavelmente a 60 fps.

<filter id="paper">
  <feTurbulence type="fractalNoise" baseFrequency="0.85"
                numOctaves="3" stitchTiles="stitch"/>
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.95
    0 0 0 0 0.92
    0 0 0 0 0.85
    0 0 0 0.18 0"/>
</filter>

Aplicações editoriais e de marca

Noise é o segredo por trás de várias linguagens de design reconhecíveis. O estilo editorial do NYT digital usa um leve grão de papel sob cada artigo longo, sugerindo continuidade com o impresso. Páginas brutalistas abraçam o grão pesado como statement estilístico. Marcas B2C quentes (skincare, slow food, livros indie) sobrepõem noise com 5-10% de opacidade em hero sections para humanizar o flat design. O efeito Risograph — noise de alta opacidade com paleta restrita de 2-3 cores — emula o visual de zines e cartazes de tiragem limitada.

Performance vs PNG e integração

Um filtro de noise SVG vence um PNG tileado em todos os eixos: é menor (menos de 1 KB versus dezenas), escalável em qualquer resolução incluindo Retina, e sua cor é customizável em runtime via feColorMatrix. Para melhor desempenho, gere o filtro uma vez e referencie via <pattern> ou data URL cacheada em CSS. Plugins PostCSS como postcss-svg-noise permitem inline durante o build, e há plugins Tailwind expondo um utilitário backdrop-noise para uso por componente.

Perguntas frequentes

Cadeias complexas de filtro são caras? O primeiro paint custa alguns milissegundos; paints seguintes reutilizam o resultado rasterizado se você manter o filtro dentro de um <pattern> ou máscara. Evite aplicá-las em elementos que animam transforms — a região do filtro recomputa a cada frame.

Quanto de noise um site de marca deve usar? Sutil — em torno de 5-10% de opacidade. Acima disso, passa de "acabamento tátil" para "display quebrado".

Posso controlar a cor do noise? Sim — feTurbulence emite escala de cinza, e feColorMatrix tinta para qualquer paleta sem sair do SVG.

Como deixar sem emendas em um fundo full-bleed? Combine stitchTiles="stitch" com um <pattern> quadrado de 200-400 px e aplique via fill="url(#noise)".