July 2026
-
Cut Squares Tessellated Pattern - No Div - Pure CSS
Josetxu used some conic and linear gradients along with custom properties to craft this three-dimensional pattern. It's simple and CSS-only. A nice way to practice backgrounds, sizes and positioning.
-
WindowsXP Files
As part of a CodePen challenge, Zerde Turdybek created this web version of a Windows XP folder in which you can open files. A demo for the nostalgic crew :)
-
Inversive Geometry
Another demo by Zerde Turdybek. This time using P5.js to create something more interactive: pull the dots around to move the shapes and change the drawing.
-
A love letter to Pachinko
Liam Egan developed a Pachinko arcade game, but instead of balls falling into slots, it is letters, and you can control how many by clicking a button... even create some chaos by pressing multiple times quickly. And it is fun an entertaining seeing the letters fall and collide with the dots.
-
Monkey in the water
A minimalist CSS Art by Cassidy. This animated monkey relaxing in water was drawn using only three HTML elements and some CSSS, which is pretty impressive.
-
SKYDREAMS: A 3D 1K FEVER DREAM
This 90s style game reminds of the classic Sonic mini-games. Frank Forece coded it using just 1024 bytes of JavaSCript! Use the mouse to move right and left and click to jump. Have fun! It's not as easy as it seems.
-
Line Shadows (CSS)
This animation is fully created with HTML and CSS. Figuring out timings, paths, and layers sounds complicated, but the code is incredibly simple. Although that's not surprising as Amit Sheen is world-class at creating 3D CSS animations.
-
Water - WebGL Shader
This interactive shader (mouse over to "disturb" the water) by Tamino Martinius feels incredibly realistic. The liquid texture and the waves when moving around seem so natural and smooth. Great job.
-
testing text-fit
Right now, if you want text to expand and grow its size to occupy the whole line width, you need to do some math or resort to hacks (that generally include math or unnecessary animations). In this demo, Temani Afif showcases a new CSS feature landing on the latest Chrome that will simplify considerably that work:
text-fit.
-
file drawer carousel
Vivi Tseng created this three-dimensional carousel/image gallery that performs really nicely. The transitions are smooth, the code is simple and small, and it can be customized and expanded to fit multiple purposes. I'm not a big fan of carousel, but this is a well-done component.
Check the previous list!
