13 min read

Animation , CSS , Design

CSS relative colour values are now widely supported. In this article, pioneering author and web designer Andy Clarke shares practical techniques for using them to theme and animate SVG graphics.

I’ve recently refreshed the animated graphics on my website with a new theme and a group of pioneering characters, putting into practice plenty of the techniques I shared in this series . A few of my animations change appearance when someone interacts with them or at different times of day.

View this animated SVG on my website . ( Large preview )

The colours in the graphic atop my blog pages change from morning until night every day. Then, there’s the snow mode , which adds chilly colours and a wintery theme, courtesy of an overlay layer and a blending mode.

Snow mode allows my pioneer town background to adapt throughout the day.…