A Handmade SVG Bar Chart (featuring some SVG positioning gotchas)

Let’s take a look at some things I learned about positioning elements within SVG that I discovered whilst making a (seemingly) simple bar chart earlier this week.

You don’t have much choice but to position things in SVG. SVG is a declarative graphics format, and what are graphics but positioned drawing instructions? There are plenty of gotchas and potentially frustrating situations though, so let’s get down to it.


My Favorite Halloween Pens

The Halloween game over on CodePen is pretty strong. I’ve been keeping a Collection of them myself, but so have a lot of other people who put mine to shame. You can even search for Halloween Collections, if you really wanna follow the rabbit hole. Today is the day, so I figured we’d keep the spirit going by picking out some of my very favorites. Some new, some from years past.


Spooky Dark UX Patterns

Since Halloween is coming up, I thought I’d go through some things I’ve seen implemented on sites that sent a chill down my spine. Dark UX Patterns are things built for the web that are really bad for the user, and actually take time and care to build.


Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement

I did an online seminar (organized by Shopify) in which I gave my “10 Things You Can & Should Do With SVG” talk. You can watch the video at this link. Sara Chisholm busted it out into an article that covers some of my points and embeds some of the demos.

Direct Link to ArticlePermalink


Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement is a post from CSS-Tricks

Source: Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement

1 2 3 15