#tinySVGtip
Want to turn your filled¹ reindeer² 🦌 into an outline one? You can do so with this super simple #SVG #filter!

¹needs a transparent background input
²or anything else on a transparent background, really

#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

#tinySVGtip Give a box with a (semi)transparent background a gradient shadow!

Create absolutely positioned pseudo covering entire parent border-box
https://mastodon.social/@anatudor/111494048104942509

Place it behind parent with z-index.

Set desired gradient on it. Apply a super simple SVG filter that blurs & offsets it, then subtracts original out of it.

@codepen demo https://codepen.io/thebabydino/pen/jOvPgNd

#svg #filter #svgFilter #gradient #cssGradient #gradientShadow #code #coding #frontend #web #webDev #webDevelopment #dev

#tinySVGtip Simplifying an SVG filter

#SVG #filter #svgFilter #default #code #coding #frontend #web #webDev #dev #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

#tinySVGtip Create a barcode ▌│█║▌║▌║ with a CSS gradient pattern (only a handful of CSS declarations in total) + a super simple SVG filter!

Also an entry for this week's #CodePenChallenge https://codepen.io/thebabydino/pen/abroLRa

The background gradients pattern was heavily inspired by "cicada stripes" from the CSS3 Patterns gallery by @leaverou https://projects.verou.me/css3patterns/#cicada-stripes

#CSS #SVG #filter #svgFilter #cssGradient #barcode #cssTricks #cssTip #cssTips #code #coding #frontend #webDev #webDevelopment

#tinySVGtip Remember to *always* set

`color-interpolation-filters='sRGB'`

for your #SVG #filter.

Otherwise: wildly different results in Chrome/ Firefox vs. Safari out of primitives that manipulate channel values (`feComponentTransfer` for gooey effect, `feColorMatrix` for stuff like 👇)

Thx to @AmeliaBR for the tip.

SO is *full* of "why isn't the Chrome/ Firefox result as expected?", "why is it different in Safari?" questions.

#code #coding #svgFilter #frontend #webDev #xml #webDevelopment

#tinySVGtip Been using this forever, but don't think I've ever shared it here.

Easily create stripes along any direction in SVG!

✨ draw a line along that direction
✨ make it dashed
✨ make it much thicker
✨ no, not like that... I really mean much thicker!

That's it! 🥳🎉

Here it is, illustrated with #code on #CodePen: https://codepen.io/thebabydino/full/MWLBzpa

#svg #stripes #svgPattern #pattern #coding #frontend #webDev #webDevelopment

#tinySVGtip
This works in Chrome! 🤯

Wish it worked in Firefox too.

What can be achieved with it: irregularly shaped elements with borders with simple code & without using children or pseudos (for example for a thumb on a range, which can have neither). Like in the last image.

#SVG #coding #web #webDev #frontend #webDevelopment #svgFilter