10 Cool CodePen Demos (January 2026)
Source: Dev.to
Border‑Shape Chevron Nav Styled
Una Kravets showcases the border‑shape property and uses it to create a breadcrumb‑style navigation with triangular sides. Simple and easy to code. Note: this demo requires Chrome Canary to work.
Responsive Grid of Hexagon without Media Queries
In a series of experiments, Temani Afif shows what can be achieved using the corner‑shape property. This hexagon grid is a great demo, but it will only work on Chrome at the moment.
Poll Graphic
This demo is not to showcase a current feature, but to ask people for their opinion about a forthcoming feature: multiple borders and outlines. Lea Verou shared it on social media, asking developers which option they thought was better.
Genuary Day 12
As part of Genuary, developers and artists code generative art. Sophia (Fractal Kitty) created animated spinning boxes with p5.js. They change every time you click on the drawing.
Genuary 1: One Color, One Shape
Alexander Korotaev’s entry for the first day of Genuary (more generative art coming up too). This animated star, created with vanilla JS and Canvas, changes every time the page is reloaded.
Generative Ink Blobs
Holland Blumer coded this generative art that resembles oil colors mixing. It regenerates into a new random shape every time the page is reloaded or resized (it may take a second to generate, but it’s worth it).
Untitled (Generative Particles)
Another generative art piece, this time by Jacob Foster. Groups of particles move randomly around the screen, leaving a trace of color and light behind them. The effect is quite hypnotic.
Lotus
This neon‑looking lotus, coded by Shivani, can be slightly animated by clicking on it or pressing the space bar. Open or close—it’s relaxing to watch the flower spin slowly.
Rigged Stick Walk
Another demo by Shivani. This time it is a study of a stick figure walking, with movement adjustable via input ranges. You can tweak elbows, arms, hips, and body (though there’s no option for the knees).
Three.js: Start / Pause Animation
Created by Diana Moretti for the Start Button CodePen Challenge, this animation includes a Start/Pause button that controls the animation. The more interesting part is the infinite loop that spins and can be animated using Three.js.