Revision control
Copy as Markdown
<defs>
<filter id="imageOver">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="over" />
</filter>
<filter id="imageIn">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="in" />
</filter>
<filter id="imageOut">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="out" />
</filter>
<filter id="imageAtop">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="atop" />
</filter>
<filter id="imageXor">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="xor" />
</filter>
<filter id="imageArithmetic">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite
in2="SourceGraphic"
operator="arithmetic"
k1="0.1"
k2="0.2"
k3="0.3"
k4="0.4" />
</filter>
<filter id="imageLighter">
<feColorMatrix
in="SourceGraphic"
type="matrix"
values="0 0 0 0 0
1 1 1 1 0
0 0 0 0 0
0 0 0 1 0" />
<feOffset dx="5" dy="5" />
<feComposite in2="SourceGraphic" operator="lighter" />
</filter>
</defs>
<g transform="translate(0,25)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageOver)" />
<text x="80" y="-5">over</text>
</g>
<g transform="translate(200,25)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageIn)" />
<text x="80" y="-5">in</text>
</g>
<g transform="translate(400,25)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageOut)" />
<text x="80" y="-5">out</text>
</g>
<g transform="translate(600,25)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageAtop)" />
<text x="80" y="-5">atop</text>
</g>
<g transform="translate(0,240)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageXor)" />
<text x="80" y="-5">xor</text>
</g>
<g transform="translate(200,240)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageArithmetic)" />
<text x="70" y="-5">arithmetic</text>
</g>
<g transform="translate(400,240)">
<circle
cx="90"
cy="80"
r="70"
fill="#c00"
style="filter:url(#imageLighter)" />
<text x="80" y="-5">lighter</text>
</g>
</svg>