10 Cool CodePen Demos (November 2025)
Source: Dev.to
Blue Agori (480 bytes)
What can you paint with 480 bytes of code? If you check Bence Szabo’s demos, the answer will be “Amazing things!” Update the values in the SVG and create your own version of this illustration.
Interactive GLSL Shader Fire Spiral Animation in WebGL
This spiral shader is interactive! Move the mouse around and see the fire shape distort towards it (the y‑axis may be off). Smooth animation and design. A fantastic job by Techartist.
CSS Landscape
Gemma Croad coded a stunning landscape using CSS gradients and clip-path. The result is just beautiful, as much as the simplicity of the code.
Direction‑aware Arrow Shape
As part of his experiments with CSS shapes, Temani Afif created this demo in which the illustration changes based on the direction of the text without using JavaScript or other languages. The magic: using logical properties instead of physical properties. A neat trick.
Circular Carousel
Ryan Yu’s circular carousel impressed me. Not only does it showcase Vermeer paintings (a plus), but the work animates nicely, with a smooth scroll and snap (powered by GSAP). It could be combined with scroll‑driven animations for an even more impressive effect.
CSS Color Picker
It’s almost 2026, and there’s no need to get stuck with the old clunky default color picker that browsers offer. Adam Argyle shared a nice color picker component that works like a charm.
A Cute Cat Select with Auto‑Tail Assist
Marcel crafted one of the coolest custom selects I’ve seen: nice illustrations, subtle interactivity, full of details. It’s great! Note: while most of the micro‑interactions will work on all browsers, the tail effect will only work on Chrome (for now).
Details Element as Turnable Cards
Cyd Stumpel takes a different approach toward the <details> element, turning it into cards that flip when opened. An interesting variation from the classic expand/collapse, paying attention to details. Really cool demo.
CSS shape() with path() Fallback – SOS
This animation by ikrProjects uses GSAP to smoothly animate a black‑and‑white boat. A really interesting aspect of the demo is how it uses shape() to draw the boat and falls back to polygon() if shape() is not available. Note: this demo works best on Chrome.
Animate Clip‑path
Mariana Beldi uses clip-path with the elements inside a colorful SVG to display progressively on load. The effect is groovy and perfect for a poster‑themed presentation.