What it does
SVG Color Filter Playground demonstrates feColorMatrix, an SVG filter that changes image colours through a grid of numbers. Supply a picture, adjust the matrix and compare named treatments with the unfiltered image. You can reuse and modify its MIT-licensed source with the required notices retained.
Drop an image onto the left side or click to select one. The editable values sit on the right, alongside the SVG filter markup. Presets such as Black & White, Old Times and Cold Life give you starting points to compare.
Changing one number at a time makes its effect easier to follow. Select No Filter to return to an unchanged reference, then inspect how the matrix and picture differ after an edit. The visible markup connects the result to the feColorMatrix element used on a web page.
This is a learning playground; the author points production-library users to a separate project. Its own source is MIT-licensed, allowing reuse and modification with the copyright and permission notices retained.
Strengths
- The image, matrix and SVG markup can be compared in one place.
- Named filter presets make it easier to explore distinct colour effects.
Watch out for
- The project is presented as a playground rather than a production filter library.
Best for
- Web designers learning how SVG colour-matrix filters affect images.