SVG feTurbulence: filtros de ruido, grano y textura

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, empiezan aquí.

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

Qué hace cada atributo de feTurbulence

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.

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.

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

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

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

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.

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

Combínalo con fondos blanco roto cálidos. Fondos con textura de papel 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.

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

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

   Usa teselas

   Renderiza el ruido en un SVG pequeño con stitchTiles="stitch" y repítelo como imagen de fondo.

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

Para una versión solo con CSS de la misma idea, consulta textura de ruido en CSS. 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.