10 Cool CodePen Demos (July 2023)
Tags: webdev, html, css, javascript
Published: 2023-08-03 10:46:14

---
title: 10 Cool CodePen Demos (July 2023)
published: true
description: A collection of 10 cool and exciting front-end demos shared on CodePen during July 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-july-2023-a72b1c870615
---

## A Pure CSS 3D Maze!
[Ben Evans](https://codepen.io/ivorjetski) is a fantastic CSS Artist and also creates games in CSS. This time, it is a 3D Maze built with HTML and CSS. No JavaScript or other languages. Enjoy it! Note: This demo works on Chrome (and Firefox?)

{% codepen https://codepen.io/ivorjetski/pen/poQpveN %}

---


## Sunday CSS #7: 3D Pencil
This 3D rotating pencil was created by [Julia Miocene](https://codepen.io/miocene) in HTML and CSS. She used the latest CSS trigonometric functions to calculate the angles and positions and the shape points for the different layers—a simple and cool demo.

{% codepen https://codepen.io/miocene/pen/WNYYaXJ %}

---

## Animated Hirayama Fireworks
This animated vintage poster is excellent in itself. Still, [Mads Stoumann](https://codepen.io/stoumann) went beyond that and shared a [blog post](https://dev.to/madsstoumann/re-creating-a-japanese-fireworks-catalog-from-1883-in-css-83j) about the whole process with detailed explanations of the techniques used. The demo may be resource-consuming on some computers.

{% codepen https://codepen.io/miocene/pen/LYXjqNZ %}

---

## Online Guitar Tuner v3
This month, different demos by [Josetxu](https://codepen.io/josetxu) made the shortlist of this article (his CSS homage to the late cartoonist Ibañez is great, too). But this one, in particular, had to be on the list. It is practical, clean, and beautiful.

{% codepen https://codepen.io/josetxu/pen/jOQegyB %}

---

## Ancient Grass
[Sophia (fractal kitty)](https://codepen.io/fractalkitty)’s generative art has been featured in previous articles, and this one (created for a CodePen challenge) deserves to be here, too. The sun over the horsetails feels peaceful and warm as it slowly appears and moves.

{% codepen https://codepen.io/fractalkitty/pen/jOQGeOx %}

---

## 🍁 Falling autumn leaves shader 🍁
It is not autumn yet, but this interactive ThreeJS demo by [CeramicSoda](https://codepen.io/ceramicSoda) brings the season early this year. Move the mouse over the tree to see the branches moving and the leaves falling.

{% codepen https://codepen.io/ceramicSoda/pen/xxQJqVv %}

---

## 3D Nintendo Switch
[Ricardo Oliva Alonso](https://codepen.io/ricardoolivaalonso) creates great demos with 3D CSS (and lately with Blender, too). This rendition of the Nintendo console is an excellent example of that: some HTML, some CSS, and a little JS to allow the camera to move, and he got a cute and sweet-looking demo.

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

---

## 👁 Eyes SVG animation 👁
[CeramicSoda](https://codepen.io/ceramicSoda) repeats in the list with an SVG animation of eyes looking around. The turbulence filter makes this drawing amazing and creates a cute but creepy feeling. Note: the image doesn’t load on Safari.

{% codepen https://codepen.io/ceramicSoda/pen/NWEgJbG %}

---

## Rhombus rotation on hover
[Temani Afif](https://codepen.io/t_afif) creating impressive animations using just the image tag (without any other tag or container) is not new. He shared demos weekly about it. But this one was my favorite,e with the hover animation and the outline surrounding the canvas.

{% codepen https://codepen.io/t_afif/pen/YzRdWXQ %}

---

## Face Hop
One fun animated demo to finish this month’s list. With the help of That 3D Text Library and GSAP, [Steve Gardner](https://codepen.io/ste-vg) creates some bouncing emojis that change the background while hopping.

{% codepen https://codepen.io/ste-vg/pen/NWEvyqB %}

---