| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .box { |
| width: 200px; |
| height: 200px; |
| background-color: green; |
| margin: 20px; |
| filter: url(#merge); |
| } |
| </style> |
| </head> |
| <body> |
| <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
| <defs> |
| <filter id="merge" color-interpolation-filters="sRGB"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.3 0" result="trans"/> |
| <feOffset dx="-80" dy="-80" in="trans" x="50" y="50" width="150" height="150" result="offsetNeg"/> |
| <feOffset dx="80" dy="80" in="trans" x="0" y="0" width="150" height="150" result="offsetPos"/> |
| <feMerge x="40" y="40" width="120" height="120"> |
| <feMergeNode in="offsetNeg"/> |
| <feMergeNode in="offsetPos"/> |
| </feMerge> |
| </filter> |
| </defs> |
| </svg> |
| <div class="box"></div> |
| </body> |
| </html> |
