SVG feTurbulence: filtros de ruído, grão e textura

O SVG feTurbulence é uma primitiva de filtro que preenche a sua região com ruído de Perlin. Sozinho, o resultado é um campo de estática colorida; combinado com outras primitivas, torna-se grão de película, fibra de papel, nuvens, mármore ou uma fonte para deformar formas. Controlas com cinco atributos: type, baseFrequency, numOctaves, seed e stitchTiles. A maioria das texturas dos sites modernos, incluindo o grão dos gradientes com grão, 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 faz cada atributo do feTurbulence

O baseFrequency é o que vais mexer mais. Mede-se em ciclos por unidade de utilizador, por isso 0.8 junta os elementos e 0.02 estica-os em nuvens lentas. Dois valores, como baseFrequency="0.01 0.3", esticam o ruído ao longo de um eixo, que é como se imitam o metal escovado e a veia da madeira.

Receita: grão sobre um gradiente

O que o feTurbulence tem de mais útil é acrescentar grão. Um gradiente digital limpo forma faixas visíveis (banding), sobretudo nos escuros; um ruído leve desfaz essas faixas e dá à superfície um ar impresso. Os passos: faz o ruído, tira-lhe a cor e depois coloca-o sobre o gradiente 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>

Guarda isto como grain.svg ou incorpora-o como data URI e depois repete-o num pseudoelemento por cima do gradiente.

.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

O 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 alturas e ilumina-o de um lado, o que produz as pequenas colinas suaves 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>

Combina-o com fundos quentes em branco-sujo. Fundos com textura de papel tem paletas que lhe assentam bem.

Receita: arestas deformadas com feDisplacementMap

O ruído também pode mover píxeis. O feDisplacementMap lê o ruído e desloca cada píxel da origem até scale unidades, o que dá linhas feitas à mão, letras a derreter 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 dos navegadores

O feTurbulence funciona em todos os navegadores atuais, mas em muitos é calculado no CPU e o custo cresce com a área e as oitavas. Um mosaico de 240 píxeis é calculado uma vez e repetido, o que é barato. Um filtro em ecrã inteiro num elemento vivo é recalculado sempre que o elemento é redesenhado, o que pode ser lento em telemóveis.

1. 1

   Faz um mosaico

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

2. 2

   Mantém poucas oitavas

   Um numOctaves acima de 4 raramente acrescenta detalhe visível ao tamanho do grão e custa de cada vez.

3. 3

   Evita animá-lo

   Animar o baseFrequency ou o seed força um recálculo completo em cada frame. Em vez disso, desloca um mosaico estático com uma transformação.

4. 4

   Confirma os dois temas

   O grão que fica bem no escuro pode parecer sujo no claro. Afina a opacidade por tema, como em gradientes para modo escuro.

Para uma versão só com CSS da mesma ideia, vê textura de ruído em CSS. E se queres grão sem afinar filtros, cada Mark do Gradiently traz o seu próprio grão e material como parte da receita, desenhado em direto ao tamanho que quiseres.