Searching around just leads back to this blog though [0]. It would be amazing if this was real syntax, but I guess security reasons would probably make it a no-go for general use.
Indeed, there was an old CSS Shaders feature (in Chrome, behind a flag) behind from way back around 2013 [1]. Unclear if there's been any development since.
Here's hoping this will never come to browsers because this would become an endless pit of fingerprinting loopholes, similar to canvas and other related APIs.
It seems the shader transparent version is badly aliased? The effect is less noticeable on Chrome than Firefox, but it is still quite visible. This defeats the purpose of vector graphics...
It's a nice trick to play around, but that limits its usefulness.
It is indeed badly aliased. The technique demonstrated does not take into account antialiasing in the initial render, which causes this issue. There are ways to improve it, but I would advise against this approach in general since it doesn't handle these edge cases well.
Nice explanation. This is one of those shader tricks that feels obvious once you see it, but saves a ton of asset wrangling in practice. Treating black as a blend signal at render time instead of baking alpha channels is a clean solution, especially for effects, legacy textures, or quick prototyping.
The author creates art using their own custom library that uses CSS-like syntax to render HTML, SVG, and more recently shaders. The point isn't that this is the best way to do it. It's simply a trick that the author used to do something with their own bespoke library that they were trying to do.
I thought this was some crazy CSS syntax I've never seen before:
Searching around just leads back to this blog though [0]. It would be amazing if this was real syntax, but I guess security reasons would probably make it a no-go for general use.Indeed, there was an old CSS Shaders feature (in Chrome, behind a flag) behind from way back around 2013 [1]. Unclear if there's been any development since.
[0] https://yuanchuan.dev/add-shaders
[1] https://developer.chrome.com/blog/introduction-to-custom-fil...
Looks like it's an extension offered by this https://css-doodle.com/
Yeah, good catch.
yuanchen.dev is the creator of that, I guess.
Here's hoping this will never come to browsers because this would become an endless pit of fingerprinting loopholes, similar to canvas and other related APIs.
I think browsers can already block sites from reading image data from images embedded from other domains so maybe you could use the same logic here
Also WebGL/WebGPU do exist already although I guess that’s easier to disable
I eagerly await times when random website's CSS can mine crypto on my GPU.
It seems the shader transparent version is badly aliased? The effect is less noticeable on Chrome than Firefox, but it is still quite visible. This defeats the purpose of vector graphics...
It's a nice trick to play around, but that limits its usefulness.
It is indeed badly aliased. The technique demonstrated does not take into account antialiasing in the initial render, which causes this issue. There are ways to improve it, but I would advise against this approach in general since it doesn't handle these edge cases well.
We have come a full circle with a re-invention of luma keying, originally from the 1950s, or so.
Nice explanation. This is one of those shader tricks that feels obvious once you see it, but saves a ton of asset wrangling in practice. Treating black as a blend signal at render time instead of baking alpha channels is a clean solution, especially for effects, legacy textures, or quick prototyping.
Why not svg filters to create alpha channels? Seems to be supported by the library too (very useful btw!).
I want to point out as an out-of-touch early 2010s front-end dev that CSS has comically gotten away from me, exemplified by:
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
If you are gonna use shaders. Why not create the whole boxes as meshes? Why bother with the CSS at all?
The author creates art using their own custom library that uses CSS-like syntax to render HTML, SVG, and more recently shaders. The point isn't that this is the best way to do it. It's simply a trick that the author used to do something with their own bespoke library that they were trying to do.
I sincerely hope this is not a real CSS feature.
wouldn't the simplest solution, just be to use transparent instead of black? or in this case #0000 instead of #000
No, because the black needs to cover up other shapes (up until the final step of rendering).
the examples don't really looks like it should be necessary depending on how you go around creating the shapes