# first.items[].content
Top layer has all 3 RGB channels 0 in this case ⇒ black inner shadow.

We paint it orangey using feColorMatrix as detailed here https://mastodon.social/@anatudor/1121 57559510002242

Finally, we put it on top of SourceGraphic (bottom layer in2 input). This is done with the default (normal) mode for feBlend.

#svg #filter #svgFilter #blending #compositing #blendMode #alpha #inset #shadow #css #code #coding #web #dev #webDev #frontend #webDevelopment

# first.items[].contentMap.en
Top layer has all 3 RGB channels 0 in this case ⇒ black inner shadow.

We paint it orangey using feColorMatrix as detailed here https://mastodon.social/@anatudor/1121 57559510002242

Finally, we put it on top of SourceGraphic (bottom layer in2 input). This is done with the default (normal) mode for feBlend.

#svg #filter #svgFilter #blending #compositing #blendMode #alpha #inset #shadow #css #code #coding #web #dev #webDev #frontend #webDevelopment

# first.items[].attachment[].name
Screenshot of the interactive paint with a certain RGB value demo, with the feColorMatrix primitive using the values from an input[type=color] (which are also displayed in the hex. RGB and percentage RGB formats), a button to copy the SVG filter to clipboard, a visual test area and options to select what the filter gets applied on (text + emojis or a CSS gradient or a .png with transparency or a fully opaque .jpg).

# first.items[].attachment[].name
Screenshot of the filter and its result up to the point where the black inset shadow is painted orange using feColorMatrix.

# first.items[].attachment[].name
Final step: the orangey inset shadow is placed on top of the initial image.