Ana Tudor 🐯How would you code this with the following constraints:
✅ pure CSS
⚠️ under 10 declarations
⚠️ 1 element
❌ no pseudos
❌ no JS
⚠️ no SVG, no images in general save for at most 2 CSS gradients
Philip Zastrow@anatudor does 1 element mean body, or in addition to body?
@zastrow 1 element means 1 element, no restriction on what kind of element, but it does not mean 1 element and another element.
The 1 element can be 1 div or it can be the body, but not both. I personally used the html element.
@anatudor my brain is not going to let this one go. Thank you for the response and clarification.
@anatudor I gave this a shot with a body + div setup and an html to clip it. Fun challenge. I’d like to figure out if I can get this simpler. https://codepen.io/zastrow/pen/OJwPegM
@anatudor Well, I have a solution, but it only works in Chrome, and that is because I’ve just learned about the @property rule.
The other thing I learned about for this solution was `background-blend-mode`, which I am super excited about.
Curious about your thoughts on attempt 2:
@zastrow `@property` - yup, good start.
Why put `transform` in `@keyframes`? You can set `transform: rotate(calc(-1*var(--pos)))`. Also, the `from` keyframe isn't needed, `0deg` is the initial value set in `@property`.
Not sure what you're trying to do with the `hsl()` computations - taking that blueviolet from the gif and using it as it it with black works just fine. Also, you only have 2 background layers - only 1 blend mode is needed. How `difference` works in detail https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
@zastrow If you're going to set that transform, also set `overflow: hidden` to get rid of the dancing scrollbars.
Also, ditch `forwards`. `forwards` means the value the animated property takes once the `animation` has ended is the value of the `to`/ `100%` keyframe, which means it's completely pointless to add it when the `animation` is `infinite` (never ends).
@anatudor Thank you for all the feedback. The `hsl` stuff was wild guesses when I was using `exclusion` blend-mode instead of `difference`. However, that article of yours was fascinating! My understanding of blend modes came from years of designing in Photoshop. The math behind color is very interesting, even if it takes some time for my head to get around it all. Thank you, again.
Bali Balo@anatudor I gave it a go, that was fun. Here is my best attempt https://codepen.io/bali_balo/pen/qByEzxv/8f52d569ed787a9465de8c3329368ed0?editors=0100
Probably doesn't count since I used both a div and the body and that's 11 rules ignoring variables anyway. Tried to make it all 1 element but seems difficult to get the rotation movement without transforms. There was some cool potential with having one background-attachment fixed and the other scroll but fixed background don't work on transformed elements :( (something like that, using a simpler animation https://codepen.io/bali_balo/pen/mdjyNxM/c6993449ee080942da2124234c26ff2a?editors=0100)
@balibalo Rotation can be done without transforms now (and even without carefully chosen timing functions to emulate such motion). 😼
Amelia Bellamy-Royds@anatudor It depends: Am I *trying* to turn my laptop into a portable electric heater, or no?
@AmeliaBR No. Not doing anything out of the ordinary with this demo. It has *extremely* limited support and even that support is barely since this week, but doesn't require much in terms of perf.
Noah Liebman@anatudor @AmeliaBR I feel like it’s repeating linear and conic gradients with blend mode difference for the xor. The thing I’m stuck on is moving the center of the radial gradient in a circle. You can’t move a gradient’s `at` based on an offset path or something (afaik). Are you animating custom props using trig functions or something?
For reference, 1st demo here, except animating the angle, not emulating circular motion with carefully chosen timing functions for x & y https://mastodon.social/@anatudor/109530871757375435
Francis Rubio 
@anatudor I would do it with a mix of radial and conic gradients then use blend modes for the checkers effect and then keyframe animation I think?