10 Cool CodePen Demos

July 2025

• Basic scroll-target-group

  • css
  • html

  Una Kravets showcases scroll-target-group on this demo (Chrome 140+ required). The menu on the right side will update as the page scrolls... and all in pure CSS!

  

• Office CSS Art

  • html
  • css

  As part of a DEV.to CSS Art challenge, Bridget Amana drew an office inspired by the TV show The Office. It's a pity it didn't win, it was my favorite from all the CSS drawings.

  

• 3DCSS

  • HTML
  • CSS

  Expertly using animation-composition, Amit Sheen (who else?) is able to craft and bring to life this incredible animation in fewer than 75 lines of CSS. Mind blown!

  

• AI Keys

  • HTML
  • CSS
  • JavaScript

  A fun demo by creative coder Jhey Tompkins. Maybe the keyboard of the future for AI developers: enough buttons for tab, copy-paste, and ask the LLM.

  

• Sunday CSS #15: Made This Dog with Just HTML & CSS. No SVG or Canvas!

  • HTML
  • CSS
  • SVG

  Julia Miocene shares CSS Art videos on Sundays. She only uses HTML, CSS, and a little bit of SVG for filters (the noise effect in this dog is perfect). Follow her on YouTube, the videos are great.

  

• Galactic Black Hole Simulation

  • ThreeJS
  • WebGL
  • JavaScript

  Impressive interactive black hole simulator with ThreeJS. Spin it, change its colors, click on it... There's so many possibilities to discover. Great demo by lyziew.

  

• Inverting shapes using shape()

  • CSS

  Temani Afif shares useful tips and tricks with CSS. This time, it is how to invert a clip created using the new shape() function. The idea is simple and effective.

  

• Flight Status Card

  • JavaScript
  • ThreeJS
  • HTML
  • CSS

  A complete card with flight status data created by TurboKit. From weather information to seat location, you can move the mouse over the different card elements to obtain extra information.

  

• Circular Nav Component

  • HTML
  • CSS
  • JavaScript

  Chris Bolson created a navigational menu using circular patterns to display and layout buttons with smooth animations. The demo includes links to interesting variants. I may steal use them for inspiration in a future project.

  

• Interactive Black Hole

  • JavaScript
  • canvas

  A different type of black hole from Prasenjit. It doesn't have as many options as the previous one, but the clean and smooth animations are out of this world. Motion warning.