SVG feTurbulence: filtros de ruído, granulado e textura

O SVG feTurbulence é um primitivo de filtro que preenche a sua região com ruído Perlin. Sozinho, o resultado é um campo de estática colorida; combinado com outros primitivos, vira granulado de filme, fibra de papel, nuvens, mármore ou uma fonte para deformar formas. Você o controla com cinco atributos: type, baseFrequency, numOctaves, seed e stitchTiles. A maioria das texturas dos sites modernos, inclusive o granulado dos degradês granulados, começa aqui.

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <filter id="noise">
    <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch" />
  </filter>
  <rect width="100%" height="100%" filter="url(#noise)" />
</svg>

O que cada atributo do feTurbulence faz

O baseFrequency é o que você mais vai mexer. Ele é medido em ciclos por unidade de usuário, então 0.8 aproxima os detalhes e 0.02 os estica em nuvens lentas. Dois valores, como baseFrequency="0.01 0.3", esticam o ruído num só eixo, e é assim que se imita metal escovado e veios de madeira.

Receita: granulado sobre um degradê

A coisa mais útil que o feTurbulence faz é acrescentar granulado. Um degradê digital limpo forma listras visíveis, sobretudo os escuros; um ruído leve quebra essas listras e dá à superfície um ar de impresso. Os passos: crie o ruído, tire a cor dele e sobreponha-o ao degradê com pouca intensidade.

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240">
  <filter id="grain" x="0" y="0" width="100%" height="100%">
    <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" result="noise" />
    <feColorMatrix in="noise" type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#grain)" />
</svg>

Salve isso como grain.svg ou incorpore como data URI e depois repita o bloco num pseudoelemento acima do degradê.

.hero {
  position: relative;
  isolation: isolate;
  background: linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("/grain.svg");
  background-size: 240px;
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Receita: textura de papel

Papel é ruído de baixa frequência transformado em relevo por uma fonte de luz. O feDiffuseLighting trata o ruído como um mapa de altura e o ilumina de um lado, o que produz as suaves colinas de uma folha de papel de algodão.

<filter id="paper" x="0" y="0" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise" />
  <feDiffuseLighting in="noise" lighting-color="#f7f1ea" surfaceScale="2" result="lit">
    <feDistantLight azimuth="45" elevation="60" />
  </feDiffuseLighting>
  <feBlend in="SourceGraphic" in2="lit" mode="multiply" />
</filter>

Combine com fundos off-white quentes. Fundos com textura de papel tem paletas que combinam.

Receita: bordas deformadas com feDisplacementMap

O ruído também pode mover pixels. O feDisplacementMap lê o ruído e desloca cada pixel da origem em até scale unidades, o que dá linhas feitas à mão, texto derretendo e água ondulada.

<filter id="wobble">
  <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="2" seed="3" result="warp" />
  <feDisplacementMap in="SourceGraphic" in2="warp" scale="10" xChannelSelector="R" yChannelSelector="G" />
</filter>

<text x="40" y="120" font-size="96" font-weight="700" filter="url(#wobble)">Wavy</text>

Desempenho e comportamento nos navegadores

O feTurbulence funciona em todos os navegadores atuais, mas em muitos é calculado na CPU e seu custo cresce com a área e as oitavas. Um bloco de 240 pixels é calculado uma vez e repetido, o que é barato. Um filtro em tela cheia num elemento vivo é recalculado sempre que o elemento é redesenhado, o que pode ser lento em celulares.

1. 1

   Repita em blocos

   Renderize o ruído num pequeno SVG com stitchTiles="stitch" e repita-o como imagem de fundo.

2. 2

   Mantenha poucas oitavas

   Um numOctaves acima de 4 raramente acrescenta detalhe visível em tamanhos de granulado e custa a cada vez.

3. 3

   Evite animá-lo

   Animar baseFrequency ou seed força um recálculo completo a cada quadro. Desloque um bloco estático com uma transformação.

4. 4

   Confira os dois temas

   Um granulado que fica bom no escuro pode parecer sujo no claro. Ajuste a opacidade por tema, como em degradês para modo escuro.

Para uma versão só com CSS da mesma ideia, veja CSS noise texture. E se você quer granulado sem ajustar filtros, todo Mark do Gradiently traz o próprio granulado e material como parte da sua receita, renderizado ao vivo em qualquer tamanho que você desenhar.