3 ms·
They are using SVG because SVG filters can be used in CSS too. You can even apply filters to real-time video playback. I have a video player project where I’ve
by pseudosavant 3y ago
They are using SVG because SVG filters can be used in CSS too. You can even apply filters to real-time video playback. I have a video player project where I’ve worked on adding filters for black and white, retro, etc.
You can apply them to any element or even the entire page.
https://developer.mozilla.org/en-US/docs/Web/CSS/filter#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/filter#synt...
- pseudosavant 3y agoHere is a demo page I had for trying out filters to show the effect: https://svg-video-filters.glitch.me/ https://svg-video-filters.glitch.me/
- dahart 3y agoNice, the morph filter is tantalizingly close to what the poster is looking for. (I’m sure you know already, but unfortunately that page doesn’t work on iOS.) Maybe there’s a ‘nearest neighbor’ or ‘box filter’ blur in SVG, but I’m not aware of one. I googled and see other people looking for the same effect and resorting to canvas and hand-crafted image processing. It might be doable and reasonably performant with a WebGL shader.
- nextaccountic 3y agoThe reason most filters are so damn slow in Firefox here is because this is grabbing each frame and processing them in the CPU, right? Or the implementations guarantee that all and every SVG filter is done fully in GPU? (I recall Firefox had a push to do more work on GPU with webrender, citing game engines as inspiration, but I reckon this is a hard problem)