| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .box { |
| margin: 10px; |
| width: 200px; |
| height: 200px; |
| background-color: green; |
| filter: url(#filter); |
| } |
| .obscurer { |
| position: absolute; |
| background-color: gray; |
| } |
| </style> |
| </head> |
| <body> |
| <svg style="display:none"> |
| <filter id="filter"> |
| <feFlood flood-color="black" flood-opacity="1"/> |
| <feDisplacementmap in="SourceGraphic" scale="10"/> |
| </filter> |
| </svg> |
| <div class="box"></div> |
| <div class="obscurer" style="height: 20px; width: 210px; left: 18px; top: 200px;"></div> |
| <div class="obscurer" style="height: 210px; width: 20px; left: 210px; top: 10px;"></div> |
| </body> |
| </html> |
