Skip to content

Instantly share code, notes, and snippets.

@carpad88
Forked from pqoqubbw/svg-filter-paper
Created September 4, 2025 04:07
Show Gist options
  • Save carpad88/bd150628a7bbd8ae62d0a42ecaa38212 to your computer and use it in GitHub Desktop.
Save carpad88/bd150628a7bbd8ae62d0a42ecaa38212 to your computer and use it in GitHub Desktop.
<svg width="300" height="300" viewBox="0 0 300 300">
<defs>
<filter id="paperEffect">
<feTurbulence
type="fractalNoise"
baseFrequency="0.04"
numOctaves="5"
result="noise"
/>
<feDiffuseLighting
in="noise"
lightingColor="#fff"
surfaceScale="2"
result="texture"
>
<feDistantLight azimuth="45" elevation="60" />
</feDiffuseLighting>
<feTurbulence
type="turbulence"
baseFrequency="0.05"
numOctaves="3"
seed="5"
result="tornNoise"
/>
<feDisplacementMap
in="SourceGraphic"
in2="tornNoise"
scale="10"
xChannelSelector="R"
yChannelSelector="G"
result="tornEdges"
/>
<feBlend
in="texture"
in2="tornEdges"
mode="multiply"
result="combined"
/>
</filter>
</defs>
<rect
x="10"
y="10"
width="280"
height="280"
fill="#ffffff"
filter="url(#paperEffect)"
/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment