SVG

Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.

`box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.

A nice tool for generating mesh gradients from Erik D. Kennedy. You might call it a bit of a trend, but as Erik pointed out in a recent newsletter, they can be quite versatile because it’s just a nice background look that doesn’t demand anything in particular from the brand.

Gradient text is pretty easy to do these days with `background-clip: text;` — but it kills your ability to use `text-shadow`. SVG to the rescue.

The `clip-path` property with the `inset()` shape makes for some cool design opportunities. Here we’ll expand on some existing ideas, improving them by not requiring any content duplication.

I enjoyed Micah R Ledbetter’s SVG triangle of compromise and generally think it’s a fair analysis of how any-which-way you use SVG on a page, you’re giving up some kind of nice ability it could have. For instance, if you use SVG through an <img> tag, it’s cached nicely, but you give up on CSS […]

This 9-minute video from Juxtopposed on blurring is a great watch. There are an awful lot of ways to blur things on the web, from filter, backdrop-filter, <feGaussianBlur>, to WebGL. I particularly like the idea of masking an element with a backdrop-filter with a gradient so, for instance, a header can fade out how much […]

Shape morphing animations can be awfully cool. They can be artistic and elaborate like the waving cape of a brand character, or simple and understated like video player controls morphing from one state to another. Alexandru-Gabriel Ică digs into doing this in <svg>. There is a fairly big prerequisite to these kind of animations: the […]

Icônes is an amazing icon resource site. There are tens of thousands of free-to-use icons which are easy to browse and find. Export or copy in SVG, PNG, or as a component in many popular frameworks.

https://icones.js.org/

I only just recently saw Faces.js, a library for producing controllable cartoony avatars. It was launched in 2012, so I’m a little late to the party. It produces faces (busts, really) randomly, or with certain parameters locked to what you want. I think that’s a really cool idea, and if you needed this kind of […]