November 2024
-
Turkey Day! - Single Div CSS Art
I haven't had many pieces of CSS Art lately in this list, but Greg Robleto drew a beautiful turkey for Thanksgiving Day with a single HTML element. The code is amazing and responsive.
-
Broken Glass Effect (on click, WebGL)
Ksenia Kondrashova did a cool demo with WebGL. Click anywhere on the picture and see it break like a glass. A combination of filters, fractures, and color changes in this interactive canvas.
-
Domo Dance Party! (2024 remake)
This demo may be simple (just HTML and CSS) and a bit silly, but it brings me joy. Call it nostalgia or just a thirst for fun, Will Boyd was able to deliver a taste of the old Internet in this curious demo.
-
CSS Anchor Positioning - Yearbook layout
James Stuckey Weber built a dynamic showcase for the CSS anchor positioning. Resize the window to see how the titles reorganize automatically smoothly (Chrome is required for this demo).
-
Truchet Lines
This animation is hypnotizing. Tiles with two opposite archs that form random shapes and changes continuously. Greatly crafted by Rafa, who is a master of working with animations and canvas.
-
Engine Button
A realistic-looking ignition button for a car created by Robert Raichle. The way the lights and shadows are coded, and the subtle textures created with CSS backgrounds is the cherry on top. Nicely done.
-
Peas
Another fun demo. This time it's from Hannah Morgan, who created this particle physics page with smiling peas falling and reacting to collisions. Coded with GSAP, I recommend resizing the window view and see what happens with the peas.
-
3-axis cube packing
Sergey Borovikov builds an animated sphere... using cubes. Developed with three.js, the cubes are randomly generated and placed to form the three-dimensional sphere. Then the whole system is animated for this impressive result.
-
Ripple Grid
Click on the tiles to see a blue ripple propagating through the whole grid. Coded by David Lewis using HTML, CSS, and vanilla JavaScript.
-
[Pure CSS] Sine & Cosine Visualized
Beautiful work in HTML+CSS by Brett Schwickerath, who created and animated this sine/cosine visualizer without using any fancy library or JavaScript. Great colors, smooth animations, and educational? A+ work.
Check the previous list!
...And check the following list!
