Simplifying the Apple Watch Breathe App Animation With CSS Variables

When I saw the original article on how to recreate this animation, my first thought was that it could all be simplified with the use of preprocessors and especialy CSS variables. So let’s dive into it and see how!

The result we want to reproduce.
The structure
We keep the exact same structure.
In order to avoid writing the same thing multiple times, I chose to use a preprocessor.
My choice of preprocessor always depends on what I want to …

Simplifying the Apple Watch Breathe App Animation With CSS Variables is a post from CSS-Tricks

Link: https://css-tricks.com/simplifying-apple-watch-breathe-app-animation-css-variables/