| website | https://bali.balo.cool |
| codepen | https://codepen.io/bali_balo |
| website | https://bali.balo.cool |
| codepen | https://codepen.io/bali_balo |
Small collection of CSS animations where each "pixel" size is controlled by its position on the grid
CSS 16x16 display https://codepen.io/bali_balo/pen/NWJNzaE
Can you recognize hand-drawn digits in CSS? Yes!! (kinda)
You can feed the sate of some inputs to a pre-trained neural network. It's not perfect, small and slow (and not well optimized by me) - but it kinda works
(footage below is sped up)
Physics in CSS!
With sqrt() coming to Chromium (120+), this demo now works in all major browsers except Firefox (needs @property for custom property animations)
Chrome 120 released today, Edge coming this week. Make sure to update!
@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)