<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
<defs>
<filter id="xor" 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.5 0" result="transp"/>
<feOffset dx="10" dy="10"/>
<feComposite in2="transp" operator="xor"/>
</filter>
</defs>
</svg>
<style>
li {
margin: 10px;
display: block;
float: left;
}
img {
width: 160px;
height: 90px;
}
</style>
<ul>
<li><img style="filter: blur(3px)" src="resources/reference.png"/></li>
<li><img style="filter: brightness(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: contrast(3)" src="resources/reference.png"/></li>
<li><img style="filter: drop-shadow(5px 5px 5px blue)" src="resources/reference.png"/></li>
<li><img style="filter: grayscale(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: hue-rotate(180deg)" src="resources/reference.png"/></li>
<li><img style="filter: invert(1.0)" src="resources/reference.png"/></li>
<li><img style="filter: opacity(0.5)" src="resources/reference.png"/></li>
<li><img style="filter: saturate(10)" src="resources/reference.png"/></li>
<li><img style="filter: sepia(1.0)" src="resources/reference.png"/></li>
<li><img style="filter: url(#xor)" src="resources/reference.png"/></li>
</ul>