# SVG feTurbulence: filtros de ruido, grano y textura

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

Una sola primitiva de filtro crea casi todas las texturas de la web: grano sobre un degradado, papel detrás de una tarjeta, una ondulación en un borde. Esto es lo que hace cada atributo, con recetas que funcionan.

## The short version

- SVG feTurbulence es una primitiva de filtro que genera ruido Perlin, que puedes usar como grano, papel, nubes o fuente de desplazamiento.
- El atributo baseFrequency fija el tamaño del ruido: los valores altos, entre 0,6 y 0,9, dan un grano fino, y los bajos, entre 0,01 y 0,05, dan nubes grandes y suaves.
- type="fractalNoise" crea un ruido suave y uniforme, ideal para grano y papel, mientras que type="turbulence" crea un ruido más nítido y ondulado, ideal para mármol y agua.
- Una pequeña tesela de ruido con stitchTiles="stitch", superpuesta a un degradado con baja opacidad, añade textura y oculta el banding con muy poco coste.
- feTurbulence es costoso de calcular en áreas grandes, así que renderízalo una vez como tesela en lugar de animarlo a pantalla completa.

**SVG feTurbulence** es una primitiva de filtro que rellena su región con ruido Perlin. Por sí solo, el resultado es un campo de estática de colores; combinado con otras primitivas se convierte en grano de película, fibra de papel, nubes, mármol o una fuente para deformar formas. Se controla con cinco atributos: `type`, `baseFrequency`, `numOctaves`, `seed` y `stitchTiles`. La mayoría de las texturas de las webs modernas, incluido el grano de los [degradados granulados](https://gradiently.design/es/guide/grainy-gradients), empiezan aquí.

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

Lo mínimo: un filtro que genera ruido, aplicado a un rectángulo. El resultado es estática multicolor hasta que le quitas el color.

## Qué hace cada atributo de feTurbulence

| Atributo | Valores | Efecto |
| --- | --- | --- |
| `type` | `turbulence` (por defecto) o `fractalNoise` | Ondulado y nítido, o suave y uniforme |
| `baseFrequency` | Un número, o dos para x e y | Cuanto menor, más grandes los rasgos |
| `numOctaves` | Número entero, por defecto 1 | Capas de detalle más fino; cuesta velocidad |
| `seed` | Cualquier número, por defecto 0 | Un patrón aleatorio distinto |
| `stitchTiles` | `noStitch` (por defecto) o `stitch` | Suaviza los bordes para que las teselas se repitan limpias |

Los cinco atributos. Cambia uno cada vez mientras ajustas, porque interactúan entre sí.

`baseFrequency` es el que más vas a tocar. Se mide en ciclos por unidad de usuario, así que `0.8` junta mucho los rasgos y `0.02` los estira en nubes lentas. Dos valores, como `baseFrequency="0.01 0.3"`, estiran el ruido a lo largo de un eje, que es como se imitan el metal cepillado y la veta de la madera.

| baseFrequency | Aspecto | Uso |
| --- | --- | --- |
| 0,8 a 0,9 | Grano de película fino | Capa sobre degradados y fotos |
| 0,5 a 0,7 | Grano visible, risografía | Carteles, páginas editoriales |
| 0,15 a 0,3 | Moteado grueso, hormigón | Fondos, piedra |
| 0,02 a 0,05 | Nubes, humo | Fibras de papel, iluminación suave |
| 0,005 a 0,01 | Ondas grandes y lentas | Desplazamiento, mármol |

Puntos de partida para una tesela de unos 300 píxeles de ancho. El ruido escala con el SVG, así que una tesela dibujada más grande se ve más gruesa.

### type="fractalNoise"

- Suave, como nubes, repartido de forma uniforme
- Bueno para grano, papel y niebla
- La elección habitual para capas superpuestas

### type="turbulence"

- Más nítido, con pliegues oscuros
- Bueno para mármol, fuego y agua
- Resulta recargado como capa completa

## Receta: grano sobre un degradado

Lo más útil que hace feTurbulence es añadir grano. Un degradado digital limpio se divide en franjas visibles, sobre todo los oscuros; un ruido ligero rompe esas franjas y hace que la superficie parezca impresa. Los pasos: crea el ruido, quítale el color y superponlo al degradado con poca intensidad.

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

feColorMatrix con saturate 0 vuelve gris el ruido. Ajustar la región del filtro al rectángulo completo evita un borde difuminado.

Guárdalo como `grain.svg` o incrústalo como data URI, y después repítelo en un pseudoelemento por encima del degradado.

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

Los modos de fusión overlay y soft light conservan el color del degradado y solo añaden textura. Empieza con una opacidad de 0,08 a 0,15 y juzga el resultado a pantalla completa.

El fondo bajo el grano: `linear-gradient(160deg, #0f0b1e 0%, #312e81 55%, #6d28d9 100%)`

Los degradados violeta oscuro como este son donde más se nota el banding, que es justo donde el grano se gana su sitio. Más sobre la causa en [banding en degradados](https://gradiently.design/es/guide/gradient-banding).

## Receta: textura de papel

El papel es ruido de baja frecuencia convertido en relieve por una fuente de luz. `feDiffuseLighting` trata el ruido como un mapa de alturas y lo ilumina desde un lado, lo que produce las suaves colinas de una hoja de papel de algodón.

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

Sube surfaceScale para una hoja más rugosa; baja elevation para una luz rasante que exagera cada fibra.

Combínalo con fondos blanco roto cálidos. [Fondos con textura de papel](https://gradiently.design/es/guide/paper-texture-background) tiene paletas que le van bien.

## Receta: bordes deformados con feDisplacementMap

El ruido también puede mover píxeles. `feDisplacementMap` lee el ruido y desplaza cada píxel de la fuente hasta `scale` unidades, lo que da líneas dibujadas a mano, tipografía que se derrite y agua 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>
```

Un scale de 4 a 12 parece hecho a mano. Por encima de 30 la fuente se vuelve irreconocible. Cambia seed para obtener otra ondulación.

> **El texto sigue siendo texto** El texto SVG filtrado sigue siendo texto real, así que se puede seleccionar y lo leen los lectores de pantalla. Mantén las deformaciones sutiles en todo lo que la gente necesite leer.

## Rendimiento y comportamiento en los navegadores

feTurbulence funciona en todos los navegadores actuales, pero en muchos se calcula en la CPU y su coste crece con el área y las octavas. Una tesela de 240 píxeles se calcula una vez y se repite, lo que es barato. Un filtro a pantalla completa sobre un elemento vivo se recalcula cada vez que el elemento se repinta, lo que puede ir lento en móviles.

1. **Usa teselas** Renderiza el ruido en un SVG pequeño con `stitchTiles="stitch"` y repítelo como imagen de fondo.
2. **Mantén pocas octavas** Un `numOctaves` por encima de 4 rara vez añade detalle visible a tamaños de grano y cuesta siempre.
3. **Evita animarlo** Animar `baseFrequency` o `seed` obliga a recalcularlo todo en cada fotograma. Mueve en su lugar una tesela estática con un transform.
4. **Revisa los dos temas** Un grano que queda bien en oscuro puede verse sucio en claro. Ajusta la opacidad por tema, como en [degradados para modo oscuro](https://gradiently.design/es/guide/dark-mode-gradients).

Para una versión solo con CSS de la misma idea, consulta [textura de ruido en CSS](https://gradiently.design/es/guide/css-noise-texture). Y si quieres grano sin ajustar filtros, cada Mark de Gradiently lleva su propio grano y material como parte de su receta, renderizados en vivo al tamaño al que diseñes.

Un cartel vertical con un fondo degradado profundo y una textura de grano fino detrás de un titular corto

Un Mark con el grano integrado en su superficie. El ruido forma parte de la receta, así que mantiene la misma escala a cualquier tamaño.

## FAQ

### ¿Qué hace feTurbulence en SVG?

Genera ruido Perlin dentro de un filtro SVG. Puedes mostrar el ruido directamente como textura o pasarlo a otras primitivas como feColorMatrix, feDiffuseLighting o feDisplacementMap.

### ¿Qué baseFrequency debo usar para el grano?

Prueba de 0,7 a 0,9 con type fractalNoise y tres octavas para un grano de película fino. Los valores más bajos crean rasgos más grandes y suaves.

### ¿Qué diferencia hay entre fractalNoise y turbulence?

fractalNoise es suave y uniforme, bueno para grano y papel. turbulence tiene pliegues más nítidos y encaja con efectos de mármol, fuego o agua.

### ¿Por qué mi ruido SVG muestra costuras al repetirse?

Pon `stitchTiles="stitch"` en feTurbulence y ajusta la región del filtro a toda la tesela con x, y, width y height, para que los bordes coincidan y no aparezca un borde difuminado.

### ¿feTurbulence es lento?

Puede serlo en áreas grandes o cuando se anima, porque recalcula el ruido en cada repintado. Una tesela pequeña y estática repetida como fondo es barata.