10 Cool CodePen Demos (September 2023)
Tags: webdev, html, css, javascript
Published: 2023-10-08 19:44:24

---
title: 10 Cool CodePen Demos (September 2023)
published: true
description: A collection of 10 cool and exciting front-end demos shared on CodePen during September 2023
tags: webdev,html,css,javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfw3mg1mfnyng0ca29pp.png
canonical_url: https://alvaromontoro.medium.com/10-cool-codepen-demos-september-2023-16085e47d2d2
---

## 3D Room — ThreeJS
[Ricardo Oliva Alonso](https://codepen.io/ricardoolivaalonso) has some fantastic 3D rooms coded in HTML and CSS. He built a room using ThreeJS this time, and the results are incredible. It is a beautiful, elegant room that can be rotated and zoomed in to see the details.

{% codepen https://codepen.io/ricardoolivaalonso/pen/KKbWGNZ %}

---

## Common Application Message Colors
In this demo of a progressively enhanced accordion component, [Adrian Roselli](https://codepen.io/aardrian) shares some past choices for message colors (which coincidentally match the disability pride flag colors… “for funsies”).

{% codepen https://codepen.io/aardrian/pen/qBLNYBe %}

---

## Gooey Menu Concept
There are serious components and fun components. This is one of the latter. [Ksenia Kondrashova](https://codepen.io/ksenia-k) brings an animated menu that would make the Nickelodeon team super-happy. Maybe not to use in production, but as a prototype, it is terrific.

{% codepen https://codepen.io/ksenia-k/pen/gOZgLgR %}

---

## Kurzgesagt submarine
[Mergim Ujkani](https://codepen.io/MergimUjkani) creates an animated (and interactive) piece of CSS Art. Move the mouse in front of this submarine, and the lights will follow around… and all in HTML and CSS, without any JavaScript.

{% codepen https://codepen.io/MergimUjkani/pen/XWoKVWo %}

---

## 100% CSS Breakout (game)
Prepare to get your mind blown by [Jane Ori](https://codepen.io/propjockey). She coded an Arkanoid-style game entirely in HTML and CSS, without a single line of JavaScript in view… and the result is, well, you need to check it 😉

{% codepen https://codepen.io/propjockey/pen/dywNyBQ %}

---

## Bouncy Pagination
[Adam Kuhn](https://codepen.io/cobra_winfrey) (aka Cobra Winfrey) creates beautiful experiences. This month, he shared a fun pagination component for a CodePen Challenge. Click on the different pages, and see the component bend and throw the ball to the correct location.

{% codepen https://codepen.io/cobra_winfrey/pen/PoXbbZO %}

---

## Physics Playground
[Ksenia Kondrashova](https://codepen.io/ksenia-k) repeats in this month’s list. In particular with a particle experiment that shows the physics of particles when rotating and shaking a box. The movement is natural and hypnotizing.

{% codepen https://codepen.io/ksenia-k/pen/abPwMdr %}

---

## Mail form with attachment
Who said that components have to be boring? This form and file-upload component are proof of the contrary. Microinteractions, previews, and animations create a wholesome experience beautifully crafted by [Nicolas Jesenberger](https://codepen.io/nicolasjesenberger).

{% codepen https://codepen.io/nicolasjesenberger/pen/MWZJWEe %}

---

## 70s ovals
This generative art demo by [LoFi](https://codepen.io/loficodes) is classy and elegant. I like the simplicity in the design and how the colors combine to create an experience reminiscing the 70s—a great job.

{% codepen https://codepen.io/loficodes/pen/qBLjaey %}

---

## Octagon Octahedron Octopus
A low-poly octopus drawn in 3D CSS by [Fitz](https://codepen.io/MackFitz). Click on the Play button to see it animated. The octopus movement is natural (or as natural as it can be for a low-poly version). It makes it an impressive demo if you want to see animations, trigonometric functions, and 3D CSS together in action.

{% codepen https://codepen.io/MackFitz/pen/vYvdjRN %}

----

And that’s all for the September list. For more cool CodePen demos, check last month’s article: https://dev.to/alvaromontoro/10-cool-codepen-demos-august-2023-bge