Scalable vector graphics (SVG) need no introduction for web designers. They scale up and down crisply, play nicely with animations, they’re a powerful format...

In this tutorial, the second in a two part series, we’ll be taking the awesome vector-based illustration produced in How to Create a Long Scrolling...

In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more...

Time for another CodePen Challenge! With Halloween just around the corner, we’d like you to get creative with some spooky SVG. You have three characters to...

A quick quiz to test your knowledge of semantic HTML, based on the free short course Using SVG Sprites.

SVG technology has been around for years, but it has only recently started gaining wide usage. In this course, you'll learn how to combine multiple scalable...

In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on...

Animating the stroke of an SVG is perfect for simulating handwriting. Over the course of two tutorials we’re going to use CSS animation to make a signature...

In today’s tutorial we’ll take a look at a tool in Illustrator which helps authoring of SVG interactivity. It’s called–wait for it–The SVG Interactivity...

Today’s tutorial is one that will leave you feeling impressed that you’ve written so little code to achieve such a delightful animation. DrawSVG by the...

When it comes to choosing a CSS animation, you’ve got a world of choice at your fingertips. There are thousands available, but which should you use, and...

In this tutorial I’m going to demonstrate a basic implementation of some SVG icons, how to provide a fallback, and how to turn them into an SVG sprite.