10 Cool CodePen Demos

November 2025

• Blue Agori (480 bytes)

  • SVG

  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

  • WebGL
  • GLSL

  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

  • CSS
  • HTML

  Gemma Croad coded a stunning landscape using CSS gradients adn clip-path. The result is just beautiful, as much as the simplicity of the code.

  

• Direction-aware arrow shape

  • CSS

  As part of his experiments with CSS shapes, Temani Afif created this demo in which the illustration changed based on the direction of the text without using JS or other language. The magic: using logical properties instead of physical properties. A neat trick.

  

• Circular Carousel

  • GSAP
  • HTML
  • JavaScript
  • SCSS

  I've seen several circular carousels these past few weeks. Ryan Yu's impressed me. Not only the Vermeer paintings (a plus), but the work animates nicely, with a smooth scroll and snap (powered by GSAP). I could see it combined with scroll-driven animations for an even more impressive effect.

  

• CSS Color Picker

  • JavaScript
  • HTML
  • CSS

  It's almost 2026, 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

  • HTML
  • CSS

  Marcel crafted one of the coolest custom select I've seen: nice illustrations, subtle interactivity, full of details. It's great! Not: While most of the micro-interactions this component has will work on all browsers, the tail effect will only work on Chrome (for now).

  

• Details element as turnable cards

  • HTML
  • CSS

  Cyd Stumpel takes a different approach towards the details element, turning it into a cards that flips when opened. An interesting variation from the classic expand/collapse, paying attention to details. Really cool demo.

  

• CSS Shape() with Path() fallback - SOS

  • GSAP
  • SVG
  • CSS

  This animation by ikrProjects uses GSAP to smoothly animate this black-and-white boat. A really interesting thing about the demo is how it uses shape() to draw the boat and fallbacks to polygon() if shape() is not available. Note: this demo will work best on Chrome.

  

• Animate Clip-path

  • SVG
  • CSS

  Mariana Beldi uses clip-path with the elements inside this colorful SVG to display progressively on load. The effect is groovy and perfect for the posters theme.