SVG filter

by clauswilke

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
  <filter id="paper-texture">
    <feTurbulence baseFrequency=".01 .05" type="fractalNoise" numOctaves="4" seed="4325" result="noise"/>
    <feDiffuseLighting in="noise" lighting-color="#FFFFFF" surfaceScale="3" result="lighting">
       <feDistantLight azimuth="45" elevation="35"/>
    </feDiffuseLighting>
    <feColorMatrix in="lighting" type="luminanceToAlpha" result="alpha"/>
    <feComponentTransfer in="alpha" result="alpha2">
       <feFuncA type="linear" slope="-1" intercept="1"/>
    </feComponentTransfer>
    <feComponentTransfer in="alpha2" result="alpha3">
       <feFuncA type="gamma" exponent="3.6"/>
    </feComponentTransfer>
    <feComponentTransfer in="alpha3" result="alpha4">
       <feFuncA type="linear" slope="-0.5" intercept="1"/>
    </feComponentTransfer>
    <feFlood flood-color="#FEFDEF" result="flood"/>
    <feComposite in="flood" in2="alpha4" operator="in" />
  </filter>
   <rect width="500" height="500" fill="#AC7B09"/>
   <rect width="500" height="500" filter="url(#paper-texture)"/>
   <rect x="500" width="500" height="500" fill="#FEFDEF"/>
</svg>