DEV Community

Cover image for Cool Animated Codepen demos

Posted on

Cool Animated Codepen demos

  • Ricardo Oliva Alonso creates amazing-looking 3D dioramas both in CSS and using ThreeJS. This one is the latter. The textures and how the light is handled make it a well-rounded demo-one of my favourites from Ricardo.

  • Tower of Climbing Cubes Amit Sheen has demonstrated that it is possible to create impressive 3D demos using only HTML and CSS. He went one step further and showed the process live on his YouTube channel for everyone to watch. The infinite climbing cube tower he created is a perfect example of this.

  • CSS 3D Solar SystemDiscover the incredible work of Julian Garnier and his stunning representation of our solar system. This captivating piece is a testament to the beauty and complexity of our universe. Experience the wonder of the cosmos in your own home with this breathtaking work of art.

  • Color Palette A piece of generative art by Ben Matthews. The colours are based on the Finding Nemo poster, and although the strokes may look “circular,” they are rectangles wandering around. It has a remarkable effect, and the results are beautiful.

  • Pure CSS Logic Gates Max Swann uses the :has() pseudo-class and checkboxes to implement some logic gates. The result is beautiful and functional. In this case, I wouldn’t consider the checkboxes a hack, as they are the natural element for these binary inputs.

  • By using gradients and mix-blend mode, we can achieve unbelievable effects. Adding an animated background position can make things even more impressive. For example, Oscar Saharoy achieves a fantastic effect with just two gradients, and the results are truly mind-blowing.

Top comments (2)

akamgodlove profile image

Wow that's great animation.
The one that is more cool to me is that if the CSS 3D Solar System. But all of them are of high standard.

pinky057 profile image

thanks for the comment :)