Los filtros SVG te permiten crear efectos visuales complejos directamente dentro de tus graficos SVG usando distintos primitives. Puedes aplicar blur, manipulacion de color y distorsiones personalizadas.

Filtros SVG

<p class="ripple-text">Filtros SVG</p>

<svg style="position: absolute; width: 0px; height: 0px; pointer-events: none;">
  <filter id="water-ripple">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.05"
      numOctaves="2"
      result="ripple"
    >
      <animate
        attributeName="baseFrequency"
        dur="10s"
        values="0.02;0.05;0.02"
        repeatCount="indefinite"
      ></animate>
    </feTurbulence>
    <feDisplacementMap
      in="SourceGraphic"
      in2="ripple"
      scale="5"
    ></feDisplacementMap>
  </filter>
</svg>

.ripple-text {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: bold;
  text-align: center;
  filter: url(#water-ripple);
}

• Descubierto originalmente en: SVG Filters are just amazing!
• Documentacion MDN de SVG Filters: https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_filters
• Demo de filtros SVG: https://yoksel.github.io/svg-filters/

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">👾</text>
</svg>

Referencia:

Mas sobre SVG favicons y como mantener favicons sin perder la cordura:

• https://css-tricks.com/svg-favicons-and-all-the-fun-things-we-can-do-with-them
• https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7 ← Muy bueno 👌