| <!DOCTYPE html> |
| <svg width="500" color-interpolation-filters="sRGB"> |
| <filter id="convError1" x="0" y="0" width="1" height="1"> |
| <feConvolveMatrix order="-1 -1" kernelMatrix="1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| <filter id="convError2" x="0" y="0" width="1" height="1"> |
| <feConvolveMatrix order="1 1" kernelMatrix="1 1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| <filter id="convError3" x="0" y="0" width="1" height="1"> |
| <feConvolveMatrix order="1 1" kernelMatrix="1" divisor="0"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| <filter id="convError4" x="0" y="0" width="1" height="1"> |
| <feConvolveMatrix order="1 1" kernelMatrix="1" divisor="1" targetX="1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| <filter id="convError5" x="0" y="0" width="1" height="1"> |
| <feConvolveMatrix order="1 1" kernelMatrix="1" divisor="1" targetX="0" targetY="1"/> |
| <feColorMatrix values="1 0 0 0 0, 0 1 0 0 0.5, 0 0 1 0 0, 0 0 0 1 1"/> |
| </filter> |
| |
| <rect width="500" height="100" fill="red"/> |
| <rect width="100" height="100" fill="red" filter="url(#convError1)"/> |
| <rect width="100" height="100" fill="red" filter="url(#convError2)" x="100"/> |
| <rect width="100" height="100" fill="red" filter="url(#convError3)" x="200"/> |
| <rect width="100" height="100" fill="red" filter="url(#convError4)" x="300"/> |
| <rect width="100" height="100" fill="red" filter="url(#convError5)" x="400"/> |
| </svg> |