Public
- Public
- Network
- Groups
- Popular
- People

Screenshot of the 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).

Download link

Screenshot of the 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).
https://files.mastodon.social/media_attachments/files/112/157/556/099/888/345/original/a5b76dc9629cf71c.png

Notices where this attachment appears

Ana Tudor 🐯 (anatudor@mastodon.social)'s status on Tuesday, 14-May-2024 19:08:39 JST Ana Tudor 🐯

A while ago, I posted about mono emojis with #CSS filters. https://mastodon.social/@anatudor/111617727010747501
It was... quite complicated, but there's a better way - with a simple #SVG #filter!
If you're a patron on Patreon, you may have already seen the interactive demo... now it's public for everyone https://codepen.io/thebabydino/pen/LYamwrz
(you can pick another value for the fill using the input[type=color] and copy the SVG filter to clipboard)
#CodePen #interactive #code #coding #svgFilter #frontend #webDev #webDevelopment

In conversation about 6 months ago from mastodon.social permalink