6 Followers
20 Following
7 Posts
Dancing Dots

CSS version of the Jitter file [Dancing Donuts](https://jitter.video/file/?id=8ye_-xv7-IpStBS_9CuP2) found in the [Jitter templates](https://jitter.vid...

Red Ripple Yellow Ripple codepen.io/bali_balo/pe... via
@codepen

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

CSS 16x16 display

Small idea, using CSS to create a grid of "pixels" individually controlled based on their position. Along with a few sample animations for it Does not...

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)

https://codepen.io/bali_balo/pen/gOqEmgG

CSS Neural Network (number detection)

Just a small idea. Results are often wrong. The model is very small and trained manually with limited data (and I'm no expert in neural networks). Th...

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!

https://codepen.io/bali_balo/pen/ZEwLVQm

CSS Physics

The recent addition of mathematical functions to CSS, as well as @property rules allow advanced animations. This is a small proof of concept testing us...

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

gradients animation

...

CodePen