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 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).