10 Cool CodePen Demos

March 2026

• 2026 F1 Drivers Custom Select using appearance: base-select

  • HTML
  • CSS

  Chris Bolson crafted one of the most impressive custom selects that I have seen so far (and by far). It doesn't even look like a native HTML select. The whole UX is so smooth and clean... you have to try it!

  

• Select your Fruit!

  • HTML
  • CSS

  Another custom select, this time coded by Temani Afif. It also doesn't look like your typical select control (far from it), but this one falls in a more playful and fun side. Shoot the fruit to explode it make your selection. A nice experiment and a must try, too.

  

• Demo of lighter operator in SVGFECompositeElement

  • SVG
  • Safari

  Safari has a great team coding the browser and sharing updates with the new features. Recently, Safari included support for the feComposite element and Jen Simmons created this demo to showcase how it works. (Without that property, there wouldn't be a glow around the circles.)

  

• Neon Iridescent Ribbon using P5

  • P5.js
  • JavaScript

  A relaxing animation with a colorful ribbon or lace moving around the screen. Margarita did a nice job with this demo that can be helpful to learn P5.js: update the different settings on top and check how the demo changes.

  

• Untitled

  • Matter.js
  • JavaScript
  • canvas

  As part of the "opposite directions" CodePen challenge, Shivani coded this entertaining animation. Two teams of figures (Cyan and Magenta) clash in the center as they try to reach the opposite corner. It was fun looking at the characters move and try to guess which team would win each time.

  

• CSS `position: sticky` for Single Axis Scroll Containers

  • HTML
  • CSS

  If you have ever worked with large data tables, you may know what a pain in the neck it is to keep header or columns sticky to help visualize the information. Luckily that may change soon! Bramus showcases a new feature that has landed on Chrome Canary that simplifies that experience in large tables.

  

• CodePen TV - 100% Pure CSS

  • CSS
  • HTML

  Every time that Ben Evans shares CSS Art, you know it is going to be amazing. And he didn't disappoint with this TV set coded exclusively with HTML and CSS. The illustration is interactive, so go ahead, explore it, and play with all the buttons!

  

• using `sibling-index()` to hue-shift / increment `opacity` in `svg` `path`s

  • SVG
  • CSS

  The title is really descriptive in this illustration by Many Nicole. The colors in the SVG changing by using relative colors and the new sibling-index() function to update the hue of the different lines that form this blob.

  

• The CSS if() Function

  • CSS

  Rob created a tutorial about the if() function in CSS that allows to create inline conditional in a website styles. Learn, see the demos, and the test your knowledge at the end. A great resource to learn about CSS.

  

• Gekke zoom dingen

  • HTML
  • CSS

  As the title indicates, this is a "crazy" zoom demo by Cyd Stumpel. Combining scroll-driven animations with zoom with scale, the effect is really nice and looks cool like a parallax, but different. A great idea, that I may steal borrow for some projects.