Gerador de textura de ruído: granulado SVG para fundos CSS | We.Inc
Crie uma textura de grão de filme ou de ruído de papel com SVG feTurbulence. Ajuste frequência, oitavas, seed e opacidade, veja a prévia sobre um gradiente e copie o SVG ou uma data URL em CSS.
Uma textura de ruído é um pontilhado aleatório aplicado sobre uma cor sólida ou um gradiente para que pareça impresso, e não digital. No navegador, dá para criá-la sem nenhum arquivo de imagem: o filtro SVG feTurbulence gera ruído Perlin a partir de uma frequência, de um número de oitavas e de uma seed. Ajuste abaixo e copie algumas centenas de bytes de código.
Atributos do feTurbulence (padrões segundo o MDN)
Atributo
O que faz
Padrão
baseFrequency
Tamanho do pontilhado; números maiores geram grão mais fino. Um número, ou valores separados para x e y
numOctaves
Camadas de detalhe sobrepostas; mais camadas dão mais riqueza e mais lentidão
fractalNoise (suave, como nuvens) ou turbulence (mais nítido, ondulado)
Número inicial do padrão aleatório; mude para ter outra disposição
stitchTiles
stitch suaviza as bordas para que os blocos repetidos se encaixem sem emendas
noStitch
O granulado tira o aspecto de plástico de gradientes grandes e evita o banding de cor em fundos amplos de destaque. Um bloco de granulado em PNG adiciona um download e fica borrado quando ampliado, enquanto um filtro SVG é um texto minúsculo que fica nítido em qualquer tamanho. Ajuste os controles e veja a textura sobre um gradiente de exemplo.
Escolha fractal noise para um grão de filme suave ou turbulence para um visual mais áspero, marmorizado.
Aumente a frequência para um grão mais fino e adicione oitavas para mais detalhe. Mude a seed para outra disposição aleatória.
Defina a intensidade do granulado sobre o gradiente de exemplo e escolha se ele mantém a cor ou fica cinza.
Copie o arquivo SVG ou o CSS que o incorpora como fundo em data URL.
Para um granulado sutil sobre um gradiente, mantenha a opacidade da textura entre 0.1 e 0.3. Valores maiores começam a parecer sujos.
Uma frequência entre 0.6 e 0.9 com fractal noise parece grão de filme em tamanhos normais de tela.
Deixe o ruído em cinza, a menos que você queira pontinhos coloridos; o feTurbulence gera ruído colorido em todos os canais.
Áreas grandes com filtro custam tempo de renderização. Aplicar o granulado como imagem de fundo de um bloco fixo é mais leve do que filtrar ao vivo um elemento de tela cheia.
Perguntas frequentes
O que é feTurbulence?
É uma primitiva de filtro SVG que cria uma imagem a partir da função de ruído Perlin. Ela não precisa de imagem de entrada, então um único elemento filter dentro de um SVG consegue pintar uma textura inteira. Segundo o MDN, os navegadores a suportam amplamente desde 2015.
Qual é a diferença entre fractalNoise e turbulence?
fractalNoise mistura suas oitavas de forma suave e parece nuvens leves ou grão de filme. turbulence usa valores absolutos do ruído, o que cria cristas mais nítidas, mais próximas de mármore, fumaça ou ondulações na água.
Como adicionar granulado a um gradiente CSS?
Empilhe dois fundos: o SVG de ruído como data URL por cima e o gradiente por baixo, ou coloque o ruído em uma camada ::before com opacidade baixa e um blend mode como overlay ou soft-light. O exemplo desta página mostra a versão com pseudoelemento.
A textura se repete sem emendas?
Defina stitchTiles como stitch. O navegador então ajusta um pouco a frequência para que o padrão caiba em um número inteiro de blocos, o que elimina a emenda visível onde as cópias se encontram.
Como os números se traduzem no que você vê
baseFrequency é medida em ciclos de ruído por pixel da área do filtro, então 0.05 gera manchas grandes e 0.9 gera pontinhos do tamanho de poeira. Dois números esticam o ruído, o que é útil para metal escovado ou veios de madeira.
Cada oitava extra adiciona uma camada mais fina com o dobro da frequência e metade da intensidade. Depois de quatro ou cinco, a mudança é difícil de ver, mas o trabalho do renderizador continua aumentando.
Fazendo o granulado ficar bonito em um site
O granulado funciona melhor como uma camada discreta. Misture com overlay ou soft-light para que ele clareie as partes claras e escureça as escuras, em vez de deixar tudo acinzentado.
Confira o contraste do texto depois de adicionar textura. Pontilhado atrás de letras pequenas pode dificultar a leitura, então reserve o granulado mais carregado para fundos e áreas de destaque.
Granulado em um card com gradiente
Camada de ruído com blend mode
O SVG pinta ruído cinza em um bloco de 200 pixels. A camada ::before o repete com opacidade baixa e o mistura com o gradiente.
A mesma textura como arquivo SVG independente
Salve como grain.svg e use com background-image: url(grain.svg). A matriz de cor deixa o ruído cinza.
Estúdio de granulado
Cada mudança renderiza de novo o filtro SVG ao vivo sobre o gradiente de exemplo. Nada é enviado; a textura é desenhada pelo seu navegador.