| <!doctype HTML> |
| |
| <div id=clipper style="width: 100px; height: 100px; overflow: hidden; position: relative; left: 100px; top: 100px; border: 1px solid black; filter: url('#grain')"> |
| <div style="width: 100px; height: 100px; margin-left: -40px; margin-top: -40px; background: lightblue"></div> |
| </div> |
| |
| <svg height="0" width="100" viewbox="00 0 100 100"> |
| <defs> |
| <filter x="-20%" y="-20%" width="120%" height="120%" filterUnits="objectBoundingBox" id="grain"> |
| <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" result="fpr1"></feTurbulence> |
| <feBlend in="SourceGraphic" in2="fpr1" mode="multiply" result="fpr2"></feBlend> |
| </filter> |
| </defs> |
| </svg> |
