SVG filter + mask

by clauswilke

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
  <filter id="paper-texture-filter">
    <feTurbulence baseFrequency=".01 .05" type="fractalNoise" numOctaves="5" seed="4325" result="noise"/>
    <feDiffuseLighting in="noise" lighting-color="#FFFFFF" surfaceScale="3" result="lighting">
       <feDistantLight azimuth="45" elevation="15"/>
    </feDiffuseLighting>
    <feComponentTransfer in="lighting" result="final-texture">
        <feFuncR type="linear" slope="0.1"></feFuncR>
        <feFuncG type="linear" slope="0.1"></feFuncG>
        <feFuncB type="linear" slope="0.1"></feFuncB>
      </feComponentTransfer>
  </filter>
  <mask id="paper-texture-mask">
    <rect x="0" y="0" width="100%" height="100%" filter="url(#paper-texture-filter)"/>
  </mask>
   <rect x="150" width="500" height="500" fill="blue"/>
   <rect width="500" height="500" fill="#ffffff" mask="url(#paper-texture-mask)" fill-opacity="1"/>
</svg>