Notices by Ana Tudor 🐯 (anatudor@mastodon.social)

@Mr_Teatime @michael_stuhr @aral CSS & JS got better over the past 10+ years, SVG got left behind. I'm hitting bugs in all browsers with SVG filters & hacking my way around them doesn't help with perf.

Opened an interop issue https://github.com/web-platform-tests/interop/issues/756

Not getting my hopes up. Some bugs have been open for 5+ years. At this point, SVG is so far behind it's going to take a huge effort to fix things. And there's no interest as long as ppl don't use it. And ppl don't use it because it's broken. 🤷♀️

The third is something I quickly made to answer a question I saw on reddit https://reddit.com/r/css/comments/1fwm87i/comment/lqg11fl/

It's similar to something you can find on a lot of websites with a couple extra constraints:
✨ no extra elements, no pseudos
✨ working fine on top of image background

#CSS #cssGradient #mask #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

The second is a quick little thing I live-coded in Professor Mode on @codepen in under 15 minutes a little while back.

Just like the first, it has absolutely no text duplication, not in the markup and not in pseudo content.

A little #SVG #filter magic 🪄 slices and offsets it https://codepen.io/thebabydino/pen/RwmPZVR

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

The first one is this text effect that uses absolutely no images whatsoever save for #CSS gradients.

Some #SVG filter magic 🪄 is responsible for the background texture and also for the 3D look of the text and its grainy gradients.

https://codepen.io/thebabydino/pen/gONbppb

#filter #svgFilter #texture #textEffect #textEffects #noise #cssGradient #code #coding #3D #3dText #frontend #web #dev #webDev #webDevelopment

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

#tinyCSStip Simplest circle sector in 4 CSS declarations!

1⃣ set width to desired diameter
2⃣ square element with aspect-ratio
3⃣ turn square into disc
4⃣ conic-gradient() magic! 🪄

The start angle and sector angle can also be animated for fun results.

Because someone asked https://www.reddit.com/r/css/comments/1fvo5dl/comment/lq9mtjj/

#CSS #gradient #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment

@aral @codepen I'm an idiot. I pasted the wrong link for the demo. Fixed now.

Thanks. Both for checking and for letting me know.

What in Beelzebub's name's going on? My Slice! demo is in the
@codepen Spark and... it looks broken in the screenshot included with it!

Been told it looks broken in Chrome before https://x.com/rolandfranke/status/1803383982798540987 but I can't reproduce it in any Chromium version on Linux. Can you? What OS?

The live demo https://x.com/rolandfranke/status/1803383982798540987

#bug

#tinySVGtip Better gooey effect with no matrix filter!

Each particle can get its own CSS blur filter with a value that may be any unit (SVG doesn't support this).

The assembly containing them gets an SVG filter as below.

Heavily commented on @codepen: https://codepen.io/thebabydino/pen/NWVdKaG

#CSS #SVG #filter #cssFilter #svgFilter #goo #gooey #blob #blobby #blur #alpha #code #coding #frontend #webDev #web #dev #webDevelopment

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

#tinySVGtip How do you create an *inset* shadow on an `img` element?

You might think inset `box-shadow`, but it doesn't work! Really, there are tons of articles & questions on StackOveflow on this very topic.

SVG filters to the rescue for an elegant solution!

✨ offset & blur image
✨ subtract it out of original image alpha ⇒ get black inner shadow
✨ paint it 🍊
✨ place it on top of img

#SVG #filter #inset #shadow #image #svgFilter #code #coding #frontend #webDev #webDevelopment