In using the <svg> element we are establishing a fragment consisting of nested details in our document. This fragment has its own viewport and coordinate system which can seem very complex and intimidating when first getting started.

I have been working with SVG gradients a lot lately. I wrote about getting started with SVG gradients over at SitePoint, and also an intro on animating SVG gradients over at Designmodo. While they are super neat and pretty straight forward, I ran into a couple cross browser issues that I wanted to discuss further in this post.

I recently did some experimenting with animating inline SVG icons and wanted to quickly review my process and the joys and frustrations I ran into.

I created two demos to show how animations can be activated via switch. One demo animates an “Airplane Mode” experience and the other contains a series of street lamps that will turn on. So let’s take a look.

I recently had to use multiple CSS animation delays and wanted to create a quick demo to, you know, demonstrate.

I have been using CSS triangles a lot lately in drawings. While they are genius and I love them, they can also be annoying and inflexible. I figured out how to make them slightly less annoying and thought I should shout it from the rooftops.