| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <html> | 
|  | 3   <head> | 
|  | 4     <style> | 
|  | 5       .box { | 
|  | 6         width: 200px; | 
|  | 7         height: 200px; | 
|  | 8         background-color: green; | 
|  | 9         margin: 20px; | 
|  | 10         -webkit-filter: url(#merge); | 
|  | 11         filter: url(#merge); | 
|  | 12       } | 
|  | 13     </style> | 
|  | 14   </head> | 
|  | 15   <body> | 
|  | 16     <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> | 
|  | 17       <defs> | 
|  | 18         <filter id="merge" color-interpolation-filters="sRGB"> | 
|  | 19           <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"/> | 
|  | 20           <feOffset dx="-80" dy="-80" in="trans" x="50" y="50" width="150" heigh
    t="150" result="offsetNeg"/> | 
|  | 21           <feOffset dx="80" dy="80" in="trans" x="0" y="0" width="150" height="1
    50" result="offsetPos"/> | 
|  | 22           <feMerge x="40" y="40" width="120" height="120"> | 
|  | 23             <feMergeNode in="offsetNeg"/> | 
|  | 24             <feMergeNode in="offsetPos"/> | 
|  | 25           </feMerge> | 
|  | 26         </filter> | 
|  | 27       </defs> | 
|  | 28     </svg> | 
|  | 29     <div class="box"></div> | 
|  | 30   </body> | 
|  | 31 </html> | 
| OLD | NEW | 
|---|