Andy Clarke has spent years pushing the boundaries of what CSS can do with SVG, and his latest work proves that the browser is now a serious environment for design systems, not just a delivery mechanism. We think this is exactly the kind of practical, forward-looking experimentation that the web needs. CSS relative colour syntax is no longer a future promise; it is a widely supported tool that lets developers derive colours from a single source of truth, and Clarke shows us how to put it to work on animated SVG themes without reaching for JavaScript.
What this means for you is a cleaner, more maintainable way to build graphics that respond to context. Clarke's refreshed site uses animations that change appearance based on user interaction and even the time of day. That is not magic; it is the result of using relative colour functions to adjust lightness, saturation, or hue from a base palette. Instead of hardcoding every variant of a colour for every state, you define one value and let the browser compute the rest. The practical payoff is immediate: your SVG themes become easier to update, more consistent across states, and lighter to ship. If you have ever maintained a set of icons that needed a dark mode variant or a hover state, you already feel the pain this technique removes.
Clarke's approach also reinforces a broader principle we have long championed: progressive enhancement does not mean staying static. His characters and graphics are not purely decorative; they are part of the user experience, adapting to how and when someone visits the site. By leaning on CSS relative colour syntax, he avoids the complexity of a JavaScript-based theming system while still delivering a dynamic result. That is the kind of accessible innovation that benefits everyone, from the developer who writes the code to the visitor who sees a graphic that feels alive. It is not about chasing the latest spec for its own sake; it is about finding the simplest, most resilient path to a better outcome.
The lesson here is concrete and actionable. Start by identifying a single SVG on your site that changes colour with a theme or interaction. Replace its hardcoded colour values with relative colour functions tied to a CSS custom property. Test it in the browsers your audience uses. That one change will give you a model you can apply to every graphic you build from now on. Clarke has already done the hard work of proving the technique works in production. The only question left is whether you will take the next step and make your own graphics as responsive as the world around them.