10 Cool CodePen Demos

September 2025

• Elastic neon radio buttons

  • GSAP
  • SVG

  Josh Dillon has created many "glitchy" radio buttons and checkboxes. This particular example stands out for its animation (I personally wish it were a bit faster, but that's just a matter of preference). As always, the colors are well-chosen and the transitions are smooth.

  

• Pixel Art On Pure CSS - City At Sunset

  • HTML
  • CSS

  Sometimes the simplest demos are also the most effective. City at Sunset by Igor Teplostanski is a small and colorful piece of pixel art that feels vibrant.

  

• HSV(B) != HSL

  • JavaScript
  • Canvas

  CSS offers several color functions, but not all color models are supported. For example, HSL is available, while HSV is not. As the title suggests, these two formats are not the same. To illustrate the differences, David Aerne created a cool comparing tool.

  

• Single img squircles + grainy inner shadow with spread

  • SVG
  • CSS

  As part of an article series published on Frontend Masters, Ana Tudor created step-by-step demos on how to create squircle photos with inset shadows using SVG filters... just using a single <img> tag!

  

• CSS Swirl

  • HTML
  • CSS

  Several developers attempted to recreate a swirling spiral that made the rounds earlier this year. Some used GSAP, others turned to canvas, and Amit Sheen took a shot at it using only HTML and CSS. An interesting demo to see how the CSS trigonometry and math functions work.

  

• Clock made of clocks

  • React
  • Javascript

  I enjoy seeing creative approaches to coding clocks. Stefan built a digital clock in React, composed of smaller analog clocks (each as its own component.) The hour and minute hands shift dynamically to form the digital numbers based on the current time.

  

• Website Temperature Slider

  • JavaScript
  • Svelte

  Adjust the "temperature" of the webpage with this stylish slider by Simon Goellner. The background updates automatically to create warmer or cooler vibes. And it even works in dark mode! (though the effect is a bit more subtle there.)

  

• Animated segmented control in plain CSS

  • HTML
  • CSS

  Using anchor positioning, Haz demonstrates an effect that, until not too long ago, would have required more than just HTML and CSS. It works with both mouse and keyboard (nice!) right out of the box, a very welcome touch.

  

• Complementary Colors

  • P5js
  • JavaScript
  • canvas

  As part of a CodePen challenge, Gemma Croad created a generative art piece featuring orange rectangles with randomly rounded corners set against a blue background (complementary colors at play.) The code behind it is both simple and elegant.

  

• Impressive

  • WebGL
  • JavaScript

  Matthias Hurrle creates stunning WebGL shaders, and this one is no exception. The metallic textures and dynamic reflections as it moves up and down make the result truly... well... Impressive.