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

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

Um único primitivo de filtro faz quase todas as texturas da web: granulado sobre um degradê, papel atrás de um cartão, uma ondulação numa borda. Veja o que cada atributo faz, com receitas que funcionam.

## The short version

- O feTurbulence do SVG é um primitivo de filtro que gera ruído Perlin, que você pode usar como granulado, papel, nuvens ou fonte de deslocamento.
- O atributo baseFrequency define o tamanho do ruído: valores altos, de 0,6 a 0,9, dão granulado fino, e valores baixos, de 0,01 a 0,05, dão nuvens grandes e suaves.
- type="fractalNoise" gera um ruído suave e uniforme, bom para granulado e papel, enquanto type="turbulence" gera um ruído mais agudo e ondulado, bom para mármore e água.
- Um pequeno bloco de ruído com stitchTiles="stitch", sobreposto a um degradê com baixa opacidade, acrescenta textura e esconde faixas a um custo mínimo.
- O feTurbulence é caro de calcular em áreas grandes, então renderize-o uma vez como bloco repetido em vez de animá-lo em tela cheia.

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](https://gradiently.design/pt-br/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 cria ruído, aplicado a um retângulo. A saída é uma estática multicolorida até você tirar a cor.

## O que cada atributo do feTurbulence faz

| Atributo | Valores | Efeito |
| --- | --- | --- |
| `type` | `turbulence` (padrão) ou `fractalNoise` | Ondulado e agudo, ou suave e uniforme |
| `baseFrequency` | Um número, ou dois para x e y | Menor significa detalhes maiores |
| `numOctaves` | Número inteiro, padrão 1 | Camadas de detalhe mais fino; custa velocidade |
| `seed` | Qualquer número, padrão 0 | Um padrão aleatório diferente |
| `stitchTiles` | `noStitch` (padrão) ou `stitch` | Suaviza as bordas para o bloco se repetir sem emendas |

Os cinco atributos. Mude um de cada vez enquanto ajusta, porque eles interagem.

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.

| baseFrequency | Parece com | Uso |
| --- | --- | --- |
| 0,8 a 0,9 | Granulado fino de filme | Sobreposição em degradês e fotos |
| 0,5 a 0,7 | Granulado visível, risografia | Cartazes, páginas editoriais |
| 0,15 a 0,3 | Pontilhado grosso, concreto | Fundos, pedra |
| 0,02 a 0,05 | Nuvens, fumaça | Fibras de papel, iluminação suave |
| 0,005 a 0,01 | Ondas grandes e lentas | Deslocamento, mármore |

Pontos de partida para um bloco de uns 300 pixels de largura. O ruído escala com o SVG, então um bloco desenhado maior parece mais grosso.

### type="fractalNoise"

- Suave, parecido com nuvens, bem distribuído
- Bom para granulado, papel e névoa
- A escolha habitual para sobreposições

### type="turbulence"

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

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

```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 deixa o ruído cinza. Definir a região do filtro como o retângulo inteiro evita uma borda suave.

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

```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 mesclagem overlay e soft light mantêm a cor do degradê e só acrescentam textura. Comece com opacidade de 0,08 a 0,15 e avalie em tela cheia.

O fundo sob o granulado: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Degradês de violeta escuro como este são onde as faixas mais aparecem, exatamente onde o granulado se justifica. Mais sobre a causa em [faixas em degradês](https://gradiently.design/pt-br/guide/gradient-banding).

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

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

Aumente o surfaceScale para uma folha mais áspera; diminua o elevation para uma luz rasante que exagera cada fibra.

Combine com fundos off-white quentes. [Fundos com textura de papel](https://gradiently.design/pt-br/guide/paper-texture-background) 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.

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

Um scale de 4 a 12 parece feito à mão. Acima de 30, a origem fica irreconhecível. Mude o seed para obter uma ondulação diferente.

> **Texto continua sendo texto** Texto SVG com filtro continua sendo texto de verdade, então pode ser selecionado e lido por leitores de tela. Mantenha as deformações sutis em tudo que as pessoas precisam ler.

## 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. **Repita em blocos** Renderize o ruído num pequeno SVG com `stitchTiles="stitch"` e repita-o como imagem de fundo.
2. **Mantenha poucas oitavas** Um `numOctaves` acima de 4 raramente acrescenta detalhe visível em tamanhos de granulado e custa a cada vez.
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. **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](https://gradiently.design/pt-br/guide/dark-mode-gradients).

Para uma versão só com CSS da mesma ideia, veja [CSS noise texture](https://gradiently.design/pt-br/guide/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.

Cartaz vertical com fundo em degradê profundo e uma textura de granulado fino atrás de um título curto

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

## FAQ

### O que o feTurbulence faz no SVG?

Gera ruído Perlin dentro de um filtro SVG. Você pode mostrar o ruído diretamente como textura ou passá-lo a outros primitivos, como feColorMatrix, feDiffuseLighting ou feDisplacementMap.

### Que baseFrequency usar para granulado?

Tente de 0,7 a 0,9 com type fractalNoise e três oitavas para um granulado fino de filme. Valores mais baixos dão detalhes maiores e mais suaves.

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

O fractalNoise é suave e uniforme, bom para granulado e papel. O turbulence tem vincos mais agudos e serve para efeitos de mármore, fogo ou água.

### Por que meu ruído SVG tem emendas visíveis quando repetido?

Defina `stitchTiles="stitch"` no feTurbulence e ajuste a região do filtro para o bloco inteiro com x, y, width e height, para as bordas coincidirem e nenhuma borda suave aparecer.

### O feTurbulence é lento?

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