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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/svg-noise-filter)

Uma única primitiva de filtro cria quase todas as texturas da web: grão sobre um gradiente, papel por trás de um cartão, um tremido numa aresta. Eis o que faz cada atributo, com receitas que funcionam.

## The short version

- O feTurbulence do SVG é uma primitiva de filtro que gera ruído de Perlin, que podes usar como grão, papel, nuvens ou fonte de deslocamento.
- O atributo baseFrequency define o tamanho do ruído: valores altos, entre 0,6 e 0,9, dão grão fino, e valores baixos, entre 0,01 e 0,05, dão nuvens grandes e suaves.
- type="fractalNoise" cria um ruído suave e uniforme, ideal para grão e papel, enquanto type="turbulence" cria um ruído mais nítido e ondulado, ideal para mármore e água.
- Um pequeno mosaico de ruído com stitchTiles="stitch", sobreposto a um gradiente com baixa opacidade, acrescenta textura e esconde o banding a um custo mínimo.
- O feTurbulence é pesado de calcular em áreas grandes, por isso gera-o uma vez como mosaico em vez de o animares em ecrã inteiro.

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](https://gradiently.design/pt-pt/guide/grainy-gradients), começa aqui.

```html
<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 mínimo: um filtro que faz ruído, aplicado a um retângulo. O resultado é estática multicolor até removeres a cor.

## O que faz cada atributo do feTurbulence

| Atributo | Valores | Efeito |
| --- | --- | --- |
| `type` | `turbulence` (predefinição) ou `fractalNoise` | Ondulado e nítido, ou suave e uniforme |
| `baseFrequency` | Um número, ou dois para x e y | Menor significa elementos maiores |
| `numOctaves` | Número inteiro, predefinição 1 | Camadas de detalhe mais fino; custa velocidade |
| `seed` | Qualquer número, predefinição 0 | Um padrão aleatório diferente |
| `stitchTiles` | `noStitch` (predefinição) ou `stitch` | Alisa as arestas para os mosaicos se repetirem sem costuras |

Os cinco atributos. Muda um de cada vez enquanto afinas, porque interagem entre si.

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.

| baseFrequency | Aspeto | Uso |
| --- | --- | --- |
| 0,8 a 0,9 | Grão fino de película | Sobreposição em gradientes e fotografias |
| 0,5 a 0,7 | Grão visível, risografia | Cartazes, páginas editoriais |
| 0,15 a 0,3 | Pintas grossas, betão | Fundos, pedra |
| 0,02 a 0,05 | Nuvens, fumo | Fibras de papel, iluminação suave |
| 0,005 a 0,01 | Ondas grandes e lentas | Deslocamento, mármore |

Pontos de partida para um mosaico de cerca de 300 píxeis de largura. O ruído escala com o SVG, por isso um mosaico desenhado maior parece mais grosso.

### type="fractalNoise"

- Suave, como nuvens, bem distribuído
- Bom para grão, papel e nevoeiro
- A escolha habitual para sobreposições

### type="turbulence"

- Mais nítido, com vincos escuros
- Bom para mármore, fogo e água
- Fica carregado como sobreposição total

## 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.

```html
<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>
```

O feColorMatrix com saturate 0 torna o ruído cinzento. Definir a região do filtro como o retângulo inteiro evita uma borda suave.

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

```css
.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;
}
```

Os modos de mistura overlay e soft light mantêm a cor do gradiente e só acrescentam textura. Começa com opacidade de 0,08 a 0,15 e avalia em ecrã inteiro.

A base por baixo do grão: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Os gradientes violeta escuros como este são onde o banding mais se vê, que é exatamente onde o grão ganha o seu lugar. Mais sobre a causa em [banding em gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## 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.

```html
<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>
```

Aumenta o surfaceScale para uma folha mais rugosa; baixa o elevation para uma luz rasante que exagera cada fibra.

Combina-o com fundos quentes em branco-sujo. [Fundos com textura de papel](https://gradiently.design/pt-pt/guide/paper-texture-background) 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.

```html
<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>
```

Uma escala de 4 a 12 parece feita à mão. Acima de 30, a origem fica irreconhecível. Muda o seed para obteres outro tremido.

> **O texto continua a ser texto** O texto SVG filtrado continua a ser texto real, por isso pode ser selecionado e lido por leitores de ecrã. Mantém as deformações subtis em tudo o que as pessoas precisam de ler.

## 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. **Faz um mosaico** Gera o ruído num SVG pequeno com `stitchTiles="stitch"` e repete-o como imagem de fundo.
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. **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. **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](https://gradiently.design/pt-pt/guide/dark-mode-gradients).

Para uma versão só com CSS da mesma ideia, vê [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture). 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.

Um cartaz vertical com fundo de gradiente profundo e uma textura de grão fino por trás de um título curto

Um Mark com grão integrado na superfície. O ruído faz parte da receita, por isso mantém a mesma escala em todos os tamanhos.

## FAQ

### O que faz o feTurbulence no SVG?

Gera ruído de Perlin dentro de um filtro SVG. Podes mostrar o ruído diretamente como textura ou passá-lo a outras primitivas, como feColorMatrix, feDiffuseLighting ou feDisplacementMap.

### Que baseFrequency devo usar para grão?

Experimenta entre 0,7 e 0,9 com type fractalNoise e três oitavas para um grão fino de película. Valores mais baixos criam elementos maiores e mais suaves.

### Qual é a diferença entre fractalNoise e turbulence?

O fractalNoise é suave e uniforme, bom para grão e papel. O turbulence tem vincos mais nítidos e serve para efeitos de mármore, fogo ou água.

### Porque é que o meu ruído SVG tem costuras visíveis quando repetido?

Define `stitchTiles="stitch"` no feTurbulence e define a região do filtro como o mosaico inteiro com x, y, width e height, para as arestas coincidirem e não aparecer uma borda suave.

### O feTurbulence é lento?

Pode ser em áreas grandes ou quando animado, porque recalcula o ruído em cada repintura. Um pequeno mosaico estático repetido como fundo é barato.