SVG

Daily curated collection of articles and resources.

meyerweb.com

Scaling SVG Clipping Paths for CSS Use

I’ve been working a lot with the clip-path property recently, as I write the chapter on filters, blends, clipping, and masking for CSS: The Definitive Guide’s long-delayed 4th edition (available now in ...

css-tricks.com

Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified “non-rectangular headers” as a tiny trend. A la: it’s not crazy popular yet, but just you wait, kiddo. We’re talking about headers (or, more generally, ...

UI8 sponsored

Branding Book & Style Guide Templates

A beautiful collection of 5 different style guide templates! 75 fully customizable and easy to use pages, each with real wording. These templates are the perfect starting point for creating beautiful branding books.

varun.ca

Component Based SVG Icon System

Much has been written about SVG Icon Systems and why they are amazing. In this post I want to share my workflow for creating a component based SVG icon system. The focus ...

learningd3.com

An Old Tool for Designers

5 years ago, I decided to learn D3.js. I was a designer, and didn’t have much JavaScript experience. Looking back, it was one of the best career decisions I’ve made. I’ve used ...

mediatemple.net

Map Rollovers

Let’s say you have a map of the world and you want to be able to highlight the country (or state, or county, etc.) as the cursor hovers over it or it ...

cloudfour.com

An SVG Wish List

CSS and SVG are great together. But I’m tired of translating my design intent to increasingly complicated transform rules which don’t even work consistently across browsers. In a world where elements don’t ...