#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

7⃣ 545 ❤️ Cycling gradient glow - no text duplication https://codepen.io/thebabydino/pen/rNPOpJK

A simple #SVG filter trick.

We create the gradient text.

The filter creates a blurred copy of it and places it underneath.

We then animate the gradient stops... magic! 🪄✨

#css #svgFilter #filter #filterEffect #glow #text #textEffect #textGlow #cssGradient #code #coding #frontend #web #webDev #dev #webDevelopment

3⃣ 747 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE

Behind demo https://css-tricks.com/recreating-the-twitter-heart-animation/

Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!

#css #svg #code #coding #frontend #web #webDev #webDevelopment #dev

Double bubble! 🫧

On scroll text bubble up effect with 1 div, no text duplication, no JS - just a little bit of #CSS trickery and a simple #SVG #filter! 🪄

Live on @codepen
https://codepen.io/thebabydino/pen/NWmBmrZ

#CodePenChallenge #svgFilter #CodePen #text #textEffect #code #coding #frontend #webDev #webDevelopment #web #dev #scrollAnimation

We’ve always told devs that browsers prioritize what to implement based on dev demand.

There is one exception: #SVG.

SVG is used on >65% of websites. Yet, browsers have been *refusing* to work on SVG, ignoring pressure and pain points from web devs.

#StateOfHTML showed SVG as the top content pain point: https://2023.stateofhtml.com/en-US/features/content/#content_pain_points

Tons of work (SVG 2, fill & stroke, and more) has sat unimplemented for years. At this point, in standards circles, we know not to touch SVG with a barge pole.

[1/2]

State of HTML 2023: Content

The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.

^{2023.stateofhtml.com}

#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