Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →September 2026’s CodePen picks range from animated CSS art and optical illusions to shader effects, a donut chart and an interactive 3D flowchart. Here are ten distinct demos to explore, with the techniques and interactions that make each one stand out.
This selection is based on Álvaro Montoro’s roundup, published on DEV on October 2, 2026. The descriptions below reflect the roundup author’s observations; they are not independent browser or performance tests. Read the roundup on DEV.
As an Amazon Associate I earn from qualifying purchases.
Ten CodePen demos worth a look
1. Realistic Interactive Pool Water
Temple’s pool-water shader pairs animated water with interaction that produces a splash. Montoro highlights the colors and the natural feel of the effect, while noting that the splash can seem a little excessive. It’s a good example of how a small interaction can make a visual effect feel more tactile.
Free tools Windows power users keep installed
One-click scans. No signup required.
2. Checkerboard Cylinder Illusion
Jon Kantner’s optical illusion starts with a checkerboard that appears to reveal dark cylinders. The cylinders flip into another checkerboard pattern, then into colored cylinders. The appeal is the visual transformation: a familiar flat pattern becomes a surprising depth illusion.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
3. Rise & Steam (sleepy dumplings)
Gemma Croad’s sleepy-dumpling scene is animated CSS art made with HTML and CSS. The roundup specifically notes keyboard accessibility, a useful detail for anyone looking at how a playful visual can also accommodate keyboard interaction.
4. Vintage Circus Tickets
Also by Gemma Croad, this ticket design uses CSS art to evoke aged circus ephemera. Its carefully composed grid, alignment and layout are the draw: the visual style depends as much on the arrangement of the details as on the vintage treatment.
5. Circular nav using :scroll-* & animation-timeline:view()
Chris Bolson’s circular menu combines scroll-snap, scroll pseudo-elements and scroll-driven animations. It’s a navigation experiment as well as a motion demo, but the roundup warns that its experimental browser features mean it won’t work in every browser. Treat it as an example to explore, not as evidence of universal support.
Recommended Free Tools
6. A Donut Chart That’s Actually a Donut
Chathura Jayasanka turns a donut chart into a playful, interactive visualization. It includes a legend, data regeneration and an option to take a bite out of the donut. The Pen is associated with CodePen’s charts challenge, making it a particularly literal fit for September’s theme.
Rank #3
7. Pure CSS LED Playboard
Ben Evans’s interactive light board switches on when you hover, and the surrounding page responds to the emitted light. The effect makes the interaction feel broader than the board itself; the roundup also notes that the creator invited others to make similar experiences.
8. Sliced Gooey Text
Sergey Borovikov’s text treatment uses Three.js and canvas to create a sliced, gooey visual effect. Clicking changes the text, although Montoro cautions that adding too much can make it hard to read. The demo is a reminder that an effect can be striking while still needing restraint to preserve legibility.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
9. 3D Mermaid Diagram
Grant Jenkins takes a Mermaid flowchart and adds 3D interaction with Three.js. The roundup describes zooming, moving elements and switching between two- and three-dimensional versions. It’s one of the picks that connects most directly to CodePen’s September focus on charts and diagrams.
10. the core
Stranger in the Q’s animated shader is colorful and hypnotic, with a look Montoro compares to Granada-inspired arts and crafts. Unlike the chart and navigation examples, its appeal is primarily visual: it’s a compact showcase of shader-driven motion and color.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How the picks connect to September’s CodePen theme
CodePen’s official September 2026 challenge theme was “Charts and Graphs,” with weekly prompts covering flowcharts, pie and donut charts, and lines and bars. See the September challenge page. The donut visualization and 3D Mermaid flowchart are clear fits, but this roundup is broader than the challenge: it also includes CSS art, shaders, interactive effects and navigation.
What to try first
- For CSS art: start with Rise & Steam or the Vintage Circus Tickets.
- For interaction: try the pool water, LED playboard or donut chart.
- For 3D and diagrams: explore the Mermaid flowchart or Sliced Gooey Text.
- For visual illusions and motion: compare the checkerboard cylinders with the shader work in the pool-water demo and the core.
CodePen’s Spark page is another official place to browse weekly discoveries; its page includes September 2026 editions. Browse CodePen Spark.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
