10 Cool CodePen Demos (March 23)
Tags: codepen, css, javascript, webdev
Published: 2023-04-05 02:26:39

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

## 3D Camera Icons

[Jon Kantner](https://codepen.io/jkantner) is usual at these CodePen lists, but the work is fantastic! So it makes sense. This month I had several of Jon’s demos shortlisted (like this [realistic glass icon](https://codepen.io/jkantner/pen/MWqOxwe) or [rotating pill](https://codepen.io/jkantner/pen/rNZydYN)), but the CSS shadows and lightning from this 3D Camera Icons are really out of this world.

{% codepen https://codepen.io/jkantner/pen/wvERagx %}

## Pure CSS landscape #4

This CSS art by [Arman Borkhani](https://codepen.io/armanb) was inspired and extended from an [illustration by Kristofer Haugvik on Behance](https://www.behance.net/gallery/24075785/Soer-Helgeland/modules/164573941) (which is already impressive.) The simplicity of the drawing and the code makes the work even more beautiful.
{% codepen https://codepen.io/armanb/pen/dyqWyJO %}

## Radial Menu with CSS trig functions

Trigonometric functions are getting supported by browsers, and this month there have been some exciting demos. I liked the idea of this menu by [Una Kravets](https://codepen.io/una) and how smoothly the icons open and close. The movement is so soft moving along the curve.

{% codepen https://codepen.io/una/pen/VwGRpXN %}

## VR Gravity Manipulation

I’ll admit that I haven’t tried [Caleb Miller](https://codepen.io/MillerTime)’s demo because I don’t have a VR set, so I can’t vouch for how it works. But building the idea with JavaScript and Three.js is worth adding to the list.

{% codepen https://codepen.io/MillerTime/pen/MWqQOgg %}

## Text effects

[Kassandra Sanchez (Kass)](https://codepen.io/kassandrasanch) shared some text effects that remind us of the classic WordArt. They are simple to create and eye-catchy, the text is still selectable, and they are fun! (plus, some are animated too!)

{% codepen https://codepen.io/kassandrasanch/pen/YzOEeOa %}

## That 3D Text Library — requestAnimationFrame()

Continuing with more fancy animated text codepens (following up with some demos he shared earlier this year), [Steve Gardner](https://codepen.io/ste-vg) shared a wavey demo (Motion warning before running the demo!)

Link: https://codepen.io/ste-vg/pen/eYLXMwB

## Spiral circles

I like [Yuan Chuan](https://codepen.io/yuanchuan)’s CSS doodles. They are original and fresh and usually have something… hypnotic to them. This demo is no exception. The color selection is perfect, and the lines remind me of bamboo bending. I can’t take my eyes off them.

{% codepen https://codepen.io/yuanchuan/pen/zYJRpge %}

## Random Planetary System

This demo by [Josetxu](https://codepen.io/josetxu) was part of a CodePen challenge (random buttons). The planets are drawn with HTML and CSS, changing randomly when clicking the button. (Warning before running: it may consume many system resources)

Link to demo: https://codepen.io/josetxu/pen/QWVajaN

## Cool hover effect using one element

[Temani Afif](https://codepen.io/t_afif)’s demo uses the `@property` so it won’t work in all browsers, so if you can’t see it... go to a browser that supports it and be amazed by the effect and its simplicity: 1 HTML element (`<img>`) and a few dozen CSS lines are needed to achieve it.

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

## Neumorphic Liquid Slider (CSS, Animation)

I’m not fond of neumorphism, but this demo is cool. Using Houdini to animate a slider and the elements around it (a liquid that goes up and down depending on the value), [Kostantin Denerz](https://codepen.io/konstantindenerz) completes an interactive and colorful demo.

{% codepen https://codepen.io/konstantindenerz/pen/qBMvXNK %}