#graphiceffect — Public Fediverse posts

Cinematic/ ambient video glow effect matching playing video - no JS, no extra elements other than the `video`. No banding for the fading glow, working well in both light and dark mode.

❇️ https://ko-fi.com/post/Ambient-video-glow-matching-video-X6E323Y3L0

❇️ https://www.patreon.com/anatudor/posts/ambient-video-164955518

#SVG #filter #svgFilter #code #coding #graphicEffect #glow #frontend #web #dev #webDev #webDevelopment

Cinematic/ ambient video glow effect matching playing video - no JS, no extra elements other than the `video`. No banding for the fading glow, working well in both light and dark mode.

❇️ https://ko-fi.com/post/Ambient-video-glow-matching-video-X6E323Y3L0

❇️ https://www.patreon.com/anatudor/posts/ambient-video-164955518

#SVG #filter #svgFilter #code #coding #graphicEffect #glow #frontend #web #dev #webDev #webDevelopment

¹if my work has helped you or you just like it and you want to see more, please consider supporting it where it best suits you:

Patreon (recurring) http://patreon.com/anatudor

Ko-fi (one time/ recurring) https://ko-fi.com/anatudor

You also get access to stuff that's not (yet) public.

²because someone asked about this https://reddit.com/r/css/comments/1gpzzgu/comment/m2p0fkh/

#CSS #SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #graphicEffect

¹if my work has helped you or you just like it and you want to see more, please consider supporting it where it best suits you:

Patreon (recurring) http://patreon.com/anatudor

Ko-fi (one time/ recurring) https://ko-fi.com/anatudor

You also get access to stuff that's not (yet) public.

²because someone asked about this https://reddit.com/r/css/comments/1gpzzgu/comment/m2p0fkh/

#CSS #SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #graphicEffect

Ever wanted to fade the edges of an image? If you're a patron¹ on Patreon, then you may have already seen this simple #SVG filter solution in early 2023, but here it is for everyone now².

Live demo on @codepen, which also includes a dithering version https://codepen.io/thebabydino/pen/VYZpzrW

#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #graphicEffect

Ever wanted to fade the edges of an image? If you're a patron¹ on Patreon, then you may have already seen this simple #SVG filter solution in early 2023, but here it is for everyone now².

Live demo on @codepen, which also includes a dithering version https://codepen.io/thebabydino/pen/VYZpzrW

#SVG #filter #svgFilter #code #coding #web #dev #webDev #webDevelopment #frontend #graphicEffect

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

11! of my demos throughout the first @codepen trending pages!

#SVG #CSS #filter #3D #svgFilter #graphicEffect #textEffects #texture #css3D #transform #code #coding #web #dev #webDev #webDevelopment #frontend

The #SVG #filter primitives used here are now heavily commented.

#svgFilter #code #coding #graphicEffect #frontend #web #dev #webDev #CSS #webDevelopment

The #SVG #filter primitives used here are now heavily commented.

#svgFilter #code #coding #graphicEffect #frontend #web #dev #webDev #CSS #webDevelopment

My solution for a fun little challengeⁱ - gradual selective saturation on hover!

You can see the result on @codepen: https://codepen.io/thebabydino/pen/ZEgWWQX

Single img in a figure, no duplicating the image on a background or anything, just applying an #SVG #filter on figure after a mask on img.

Original images included for comparison.

ⁱtwitter 🐦 https://x.com/snorklTV/status/1841533625625424254

#svgFilter #CSS #code #graphicEffect #coding #frontend #web #webDev #dev #webDevelopment

My solution for a fun little challengeⁱ - gradual selective saturation on hover!

You can see the result on @codepen: https://codepen.io/thebabydino/pen/ZEgWWQX

Single img in a figure, no duplicating the image on a background or anything, just applying an #SVG #filter on figure after a mask on img.

Original images included for comparison.

ⁱtwitter 🐦 https://x.com/snorklTV/status/1841533625625424254

#svgFilter #CSS #code #graphicEffect #coding #frontend #web #webDev #dev #webDevelopment

We can also go the other way with the exact same minimal structure: from black and white photography to a duotoned image - see it on @codepen: https://codepen.io/thebabydino/pen/jOjLRyp

✨ single element, no ::before or ::after
✨ under 20 #CSS declarations
✨ #JS only needed to update 1 CSS variable on drag

#blending #blendMode #duotone #graphicEffect #code #coding #frontend #web #webDev #webDevelopment #dev

We can also go the other way with the exact same minimal structure: from black and white photography to a duotoned image - see it on @codepen: https://codepen.io/thebabydino/pen/jOjLRyp

✨ single element, no ::before or ::after
✨ under 20 #CSS declarations
✨ #JS only needed to update 1 CSS variable on drag

#blending #blendMode #duotone #graphicEffect #code #coding #frontend #web #webDev #webDevelopment #dev