10 Cool CodePen Demos

October 2025

• Unmasked!

  • HTML
  • CSS
  • JavaScript

  Ryan Mulligan developed a memory game using emojis and CSS animations instead of images. The result is fun and entertaining, that was an entry for the CodePen Masks challenge.

  

• Pill Stepper

  • React
  • JavaScript
  • CSS

  A number/slider component with a plus and minus sections that get wider as you decrease (or increase, respectively) the number. Jon Kantner crafting beautiful user experiences (as always).

  

• Augmented Matrix

  • P5.js
  • JavaScript
  • canvas

  If someone can do magic with Math and code, that's Sophia (fractal kitty). This demo is part of Mathtober'25: a matrix drawn on radial graph paper so that the lines are curved, the numbers are different size circles, and it ends up looking like a bowtie. Refresh or click for a new one.

  

• Kirby CSS Art

  • CSS
  • HTML

  Four HTML tags and some CSS is all the Aleksandr Hovhannisyan needed to draw this fantastic rendition of Kirby from the Nintendo video games. A fun resource to learn about custom properties, pseudo-elements, and background gradients.

  

• Changing vars in scroll driven animation to use on hover is maybe too much

  • HTML
  • CSS

  Cyd Stumpel created a CodePen to compare and debug how changing CSS properties affect scroll driven animations. Logging the results and the different alternatives.

  

• Playing Around with Speech Bubbles

  • HTML
  • CSS

  Sarah Frisk shared a prototype for a future website using speech bubbles and images in a responsive way using Flexbox. So it can be illustrative and there's a cute cartoon. Win-win. :)

  

• Range selection using modern CSS

  • HTML
  • CSS

  There are different ways to make range selections with CSS Temani Afif showcase a more modern way using mathematical functions (sign()), sibling-index(), and the new if() function. An interesting approach completely different to everything you've seen before (possibly).

  

• Hold to delete

  • HTML
  • CSS
  • SVG

  Sometimes, instead of having a series of questions and confirmations dialogs, there's a "hold this button" to confirm. That's the case of this demo created by Bridget Amana: a button with micro-interactions to delete. As you hold the button down, the "timer" advances showcasing how long is left to perform the deletion.

  

• 3D Slider Cards

  • JavaScript
  • HTML
  • CSS

  This interactive slider/gallery by NIDAL is really cool. Drag and drop the tiles to move them and trigger the 3D effect. The interaction is a bit rough around the edges, but the gallery looks really nice overall.

  

• checkers

  • CSS

  This checkered pattern by Lea Rosema is a perfect example of how the simple things look great (and often work great too). It may be my memory playing tricks on me, but this pattern reminds me of the Sonic video games for some reason.