Grainy Background

Credits to Pedro Duarte and Delba for this.


<svg
  className="pointer-events-none fixed top-0 left-0 isolate z-50 opacity-25 dark:opacity-[0.15] mix-blend-normal"
  width="100%"
  height="100%"
>
  <filter id="pedroduarteisalegend">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.80"
      numOctaves="4"
      stitchTiles="stitch"
    />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#pedroduarteisalegend)"></rect>
</svg>


<svg
  className="pointer-events-none fixed top-0 left-0 isolate z-50 opacity-25 dark:opacity-[0.15] mix-blend-normal"
  width="100%"
  height="100%"
>
  <filter id="pedroduarteisalegend">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.80"
      numOctaves="4"
      stitchTiles="stitch"
    />
    <feColorMatrix type="saturate" values="0" />
  </filter>
  <rect width="100%" height="100%" filter="url(#pedroduarteisalegend)"></rect>
</svg>

The background effect is awesome, you can feel on this site.

Thoughts? 🤔