10 Cool CodePen Demos

January 2026

• border-shape chevron nav styled

  • CSS

  Una Kravets showcases the border-shape and uses it to create a breadcrumb-style navigation with triangular sides. Simple and easy to code. Note: this demo requires Chrome Canary to work.

  

• Responsive Grid of hexagon without media queries

  • CSS

  In a series of experiments, Temani Afif shows what can be achieved using the corner-shape property. This hexagon grid is a great demo, unfortunately, it will only work on Chrome at the moment.

  

• Poll graphic

  • HTML
  • CSS

  This demo is not to showcase a current feature, but to ask people for their opinion about a feature to come: multiple borders and outlines. Lea Verou shared it on social media asking for feedback from developers about which option they thought was better.

  

• genuary day 12

  • P5.js
  • canvas
  • WebGL

  As part of Genuary, developers and artists code generative art. Sophia (Fractal Kitty) created these animated spinning boxes with P5.js. They change every time you click on the drawing.

  

• Genuary 1: One color, one shape

  • canvas
  • JavaScript

  Alexander Korotaev's entry for the first day of Genuary (more generative art coming up too). This animated star created with vanilla JS and canvas will change every time the page is reloaded.

  

• Generative Ink Blobs

  • p5.js
  • JavaScript
  • canvas

  Holland Blumer coded this generative art that reminds of oil colors mixing. It will regenerate into a new random shape every time the page is reloaded or resized (it may take a second to generate, but it's worth it.) Great work.

  

• Untitled

  • JavaScript
  • canvas

  Another generative art piece, this time by Jacob Foster. These groups of particles move randomly around the screen leaving a trace of color and light after them. They are kind of hypnotic.

  

• Lotus

  • SVG
  • JavaScript
  • CSS

  This neon-looking lotus coded by Shivani can be slightly animated by clicking on it or pressing on the space button. Open or close, it is relaxing looking at the flower spin slowly.

  

• Rigged Stick Walk

  • SVG
  • JavaScript

  Another demo by Shivani. This time it is a study of a sticky figure walking, and the movement can be adjusted using some input ranges. Adjust the elbows, arms, hips, body... I miss an option for the knees, but it is a sticky figure after all.

  

• Three.js: Start / Pause Animation

  • Three.JS
  • JavaScript

  This animation by Diana Moretti was created for the Start button CodePen Challenge. It includes a Start/Pause button that starts and pauses the animation (thus the name). But the more interesting part is not the button in itself but the infinite loop that spins and can be animated using Three.Js.