| <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> |
| <defs> |
| <filter id="over" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="over"/> |
| </filter> |
| <filter id="in" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="in"/> |
| </filter> |
| <filter id="out" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="out"/> |
| </filter> |
| <filter id="atop" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="atop"/> |
| </filter> |
| <filter id="xor" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="xor"/> |
| </filter> |
| <filter id="arithmetic" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> |
| </filter> |
| <filter id="over-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="over" x="20" y="20" width="120" height="50"/> |
| </filter> |
| <filter id="in-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="in" x="20" y="20" width="120" height="50"/> |
| </filter> |
| <filter id="out-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="out" x="20" y="20" width="120" height="50"/> |
| </filter> |
| <filter id="atop-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="atop" x="20" y="20" width="120" height="50"/> |
| </filter> |
| <filter id="xor-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="xor" x="20" y="20" width="120" height="50"/> |
| </filter> |
| <filter id="arithmetic-subregion" color-interpolation-filters="sRGB" x="0%" y="0%" width="115%" height="115%"> |
| <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" result="transp"/> |
| <feOffset dx="10" dy="10"/> |
| <feComposite in2="transp" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" x="20" y="20" width="120" height="50"/> |
| </filter> |
| </defs> |
| </svg> |
| <style> |
| img { |
| margin: 10px; |
| transform: translateZ(0); |
| } |
| </style> |
| <img style="filter: url(#over); filter: url(#over);" src="resources/reference.png"> |
| <img style="filter: url(#in); filter: url(#in);" src="resources/reference.png"> |
| <img style="filter: url(#out); filter: url(#out);" src="resources/reference.png"> |
| <img style="filter: url(#atop); filter: url(#atop);" src="resources/reference.png"> |
| <img style="filter: url(#xor); filter: url(#xor);" src="resources/reference.png"> |
| <img style="filter: url(#arithmetic); filter: url(#arithmetic);" src="resources/reference.png"> |
| <img style="filter: url(#over-subregion); filter: url(#over-subregion);" src="resources/reference.png"> |
| <img style="filter: url(#in-subregion); filter: url(#in-subregion);" src="resources/reference.png"> |
| <img style="filter: url(#out-subregion); filter: url(#out-subregion);" src="resources/reference.png"> |
| <img style="filter: url(#atop-subregion); filter: url(#atop-subregion);" src="resources/reference.png"> |
| <img style="filter: url(#xor-subregion); filter: url(#xor-subregion);" src="resources/reference.png"> |
| <img style="filter: url(#arithmetic-subregion); filter: url(#arithmetic-subregion);" src="resources/reference.png"> |