Skip to content

Instantly share code, notes, and snippets.

@haggen
Created April 26, 2025 10:49
Show Gist options
  • Save haggen/1d28df0cc0663a37d397e7bf04d5b282 to your computer and use it in GitHub Desktop.
Save haggen/1d28df0cc0663a37d397e7bf04d5b282 to your computer and use it in GitHub Desktop.
Noise displacement filter in CSS+SVG
<div style="filter: url(#grain)"></div>
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
<defs>
<filter id="grain">
<feTurbulence
type="fractalNoise"
baseFrequency="1"
numOctaves="2"
stitchTiles="stitch"
/>
<feDisplacementMap in="SourceGraphic" scale="1.5" />
</filter>
</defs>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment