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.

I thought this was some crazy CSS syntax I've never seen before:

    background: @shaders(
      fragment { }
      vertex { }
      texture { }
    );

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...

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!).

wouldn't the simplest solution, just be to use transparent instead of black? or in this case #0000 instead of #000