<andres-carmona />

TIL #7: SVG Filters
First published on
on css, html, svg, effects, filters

SVG filters allow you to create complex visual effects directly within your SVG graphics using a variety of filter primitives. You can apply effects like blurring, color manipulation, and even custom distortions to your SVG elements.

SVG Filters

<p class="ripple-text">SVG Filters</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);
}