Revision control
++ <svg width="1000" height="500" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
++ <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>