<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;
width: 160px;
height: 90px;
background-image: url(resources/reference.png);
display: block;
float: left;
}
</style>
<ul>
<li style="filter: blur(3px)"/>
<li style="filter: brightness(0.5)"/>
<li style="filter: contrast(3)"/>
<li style="filter: drop-shadow(5px 5px 5px blue)"/>
<li style="filter: grayscale(0.5)"/>
<li style="filter: hue-rotate(180deg)"/>
<li style="filter: invert(1.0)"/>
<li style="filter: opacity(0.5)"/>
<li style="filter: saturate(10)"/>
<li style="filter: sepia(1.0)"/>
<li style="filter: url(#xor)"/>
</ul>