10 Cool CodePen Demos (September 2024)

Temani Afif has created a CSS trick that features an animated notch that adapts to the avatar's position using just a few lines of HTML and CSS code. Rafa has developed an interactive demo that displays the time of day using a moving stick, offering a personalized experience based on the computer's time. Ksenia Kondrashova has experimented with shaders to create a lightweight pixel distortion animation that can be customized for different effects. Guillaume Martigny has created an infinite forest of pine trees using Pencil.js, a JavaScript 2D drawing library that creates a calming 3D effect. Grant Jenkins has created a beautiful animation of dancing bugs using JavaScript, featuring smooth and fun details. Mergim Ujkani has created an animated version of the Docker logo using only HTML and CSS, featuring a whale swimming and jumping in the ocean. Mariana Beldi has developed a scroll-driven animation demo that creates a smooth scrolling experience with moving, shrinking, and fading elements. Gibson has created an Olympic Medal counter component using React and Framer Motion, which could make a cool widget on a sports website. Jon Kantner has developed a recording widget that animates with every user interaction and as time passes. yuanchuan has created a mesmerizing spinning animation using SVG and CSS, with incredibly simple code.