Accessible D3 donut charts
A solid tutorial on making an accessible donut chart with D3. A couple of options are discussed, along with the pros/cons of each. I personally prefer the first option, where the labels and data are […]
Archives
SVG crop
An absolutely fantastic little utility site that takes pretty much any SVG and removes all of the white space. You can drag'n'drop, upload image files, or just paste markup directly into a text […]
Smarter SVG filters
An in-depth guide to SVG filters, including colour manipulation, contrast, brightness, sharpening, blur, blend modes, and distortion. Very useful when trying to work out which combination of filters […]
Mastering SVG Animation
For the past couple of weeks I've been lucky enough to take part in Cassie Evans' latest SVG workshop (the first truly exceptional perk of the "new" career 🤩). The workshop was split into five […]
Collapse SVG to a single path
Very useful tool: just upload an SVG and it will attempt to output the file as a single path 👍 Fantastic for converting icon libraries for design […]
SVG Instagram filters
🤯 An absolutely brilliant tool for linking CSS filters with SVG colour matrices to create Instagram-like image overlays and […]
Generative social media card editor
Man, I wish I'd been able to put something together like this back when I was managing a content team. The ability to just type directly into an image and have the background generatively populate […]
Ectogenesis and generative art
I stumbled onto Tyler's site while trying to find some examples of SVG manipulation and all I can say is wow 🤯 I've been a fan (and proponent) of generative art for many years, but Tyler's work […]
Creating textures with SVG filters
A fantastic overview of the feTurbulence SVG filter, including interactive examples of all the relevant attributes, how they can be combined, and some of the cool things you can (glitch buttons, […]
Firefox and SVG fill for CSS
I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out […]
SVG OMG!
SVG OMG is a brilliant (and free) web tool for sanitising, standardising, and minifying SVG assets. It's brilliant and has saved me a few times […]
The making of Netlify's million devs animated website
Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG […]
Illustrated modular people
What a cool idea 😎 A set of line illustrations (SVG etc. goodness) that you can mix'n'match to create avatars, all fully modular. Currently it's an open-source graphics resource, but I could […]
CSS animations within SVG
A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even […]
CSS icons with a single div
More than 700 web icons made entirely in CSS from a single <div> (SVG versions are also present). Very useful and great […]
Images good to the last byte
An exhaustive guide to image optimisation, compression, formats, and quality on the […]
Super Tiny Icons
A collection of hyper-optimised SVG logos for social media, popular websites, and tech companies. Every logo, whether in PNG or SVG form, is less than 1kb in size and have a base scale of […]