effect-reference-composite.html | Explore in Territory

<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;
}
</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">
chromium/third_party/blink/web_tests/css3/filters/effect-reference-composite.html
