Fabric SVG Filter Demo

Date Added - 07/15/2025

Topics - SVG, Filters, Displacement

Here we'll break down the steps to applying a fabric texture to Text, images, and div elements! This svg filter combination utilizes feImage, feColorMatrix, feGaussianBlur, feDisplacementMap, and feBlend. We'll then finally use feMerge to combine the background and foreground elements.

🧵 Step-by-Step Filter Construction

  1. feImage (BG & Original): We load the fabric image twice. One will be the background (BG), and the other will be manipulated for displacement.
  2. feColorMatrix (Saturate): Desaturates the image so we only use luminance to drive distortion.
  3. feGaussianBlur: Blurs the desaturated image to soften the distortion pattern.
  4. feDisplacementMap: Applies the blur as a displacement map to warp the input (like text).
  5. feColorMatrix (Opacity): Reduces the alpha of the displaced result to blend it more gently.
  6. feBlend: Multiplies the displaced image over the original texture.
  7. feMerge: Combines the blurred background and final textured text into one final image.

Satin
Controls
50 %
50 %
20

🧩 Full SVG Filter Code

Here's the complete SVG snippet we used to achieve the fabric-textured displacement effect:

    
        <svg width="100%" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice">
  <defs>
    <filter id="displacement-filter-satin" filterUnits="userSpaceOnUse">
      <feImage href="fabric.jpg" result="BG" />
      <feImage href="fabric.jpg" result="original" />
      <feColorMatrix in="original" type="saturate" values="0" result="IMAGE" />
      <feGaussianBlur in="IMAGE" stdDeviation="0.15" result="BLUR" />
      <feDisplacementMap in="SourceGraphic" in2="BLUR"
        xChannelSelector="R" yChannelSelector="B"
        scale="20" result="Textured_Text" />
      <feColorMatrix in="Textured_Text" result="Textured_Text_2" type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 .8 0" />
      <feBlend in="BG" in2="Textured_Text_2" mode="multiply" result="Final_Text" />
      <feMerge>
        <feMergeNode in="BG" />
        <feMergeNode in="Final_Text" />
      </feMerge>
    </filter>
  </defs>

  <text x="50%" y="40%" text-anchor="middle"
    font-size="80" font-weight="700"
    font-family="Arial" fill="green"
    dy=".3em"
    style="filter: url(#displacement-filter-satin);">
    Satin
  </text>
</svg>