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