Theming Animations Using CSS Relative Colour

This article, part of the Smashing Animations series by web designer Andy Clarke, explores practical techniques for theming and animating SVG graphics using CSS relative colour values. With wide support now available for these features, Clarke demonstrates how developers can gain greater control over design themes while simplifying their workflow. The tutorial focuses on leveraging the OKLCH colour space to create dynamic visual effects, such as animations that change appearance based on user interaction or time of day. Clarke illustrates these concepts with examples from his personal website, including a 'snow mode' that applies wintery colours through overlay layers and blending modes. Drawing inspiration from classic Hanna-Barbera cartoons, the piece emphasizes resource efficiency and element reuse in animation. It serves as a technical guide for front-end developers and web designers looking to enhance their SVG implementations with modern CSS capabilities, offering insights into creating adaptive, responsive, and visually engaging web graphics without relying on heavy JavaScript libraries or complex external tools.