10 Cool CodePen Demos (August 2023)
Tags: webdev, html, css, javascript
Published: 2023-09-06 16:23:41

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

## CSS Experiment: No Div Forest
[Khanh Tran](https://codepen.io/khanhtranngoccva) has been experimenting with textures in CSS and drawings with a single element or no element at all (using the `<body>`). This is one of them. The forest is a collection of conic gradients, so be ready to open the CSS file if you want to check the code, as it’s so large that the dev tools crash if you try to inspect the body.

{% codepen https://codepen.io/khanhtranngoccva/pen/wvQZeGJ %}

----

## Image hover effect with shaders
Move the mouse over the palm tree picture to get a glitch animation where the red, green, and blue channels separate. [Juxtopposed](https://codepen.io/Juxtopposed) brings this catchy effect, created with threeJS, and shares a video on how to code the demo.

{% codepen https://codepen.io/Juxtopposed/pen/MWZWpVQ %}

----

## (Svelte) Range Slider Pips fancy example
These slider labels float and bounce with the input, providing a beautiful experience (micro-interactions for the win!) [Simon Goellner](https://codepen.io/simeydotme)’s demo is clean and an excellent implementation of the Svelte Range Slider (with pips) library.

{% codepen https://codepen.io/simeydotme/pen/WNLxxvx %}

----

## Marble
If we are talking about CSS Art, [Kass](https://codepen.io/kassandrasanch) is an expert. This three-dimensional-looking sphere explores how to apply realistic shadows and lights (which are also shadows in CSS) to a single element. And extra points for making it responsive (not too common in CSS Art).

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

----

## CSS-only Flower mask with rotation and hover effect
[Temani Afif](https://codepen.io/t_afif) makes this list often. He creates impressive animations and effects with single elements and takes HTML and CSS to limits that people didn’t even know existed. This week’s dem is an example: the animated canvas and effects are all part of the `<img>` element. No additional elements or containers are needed.

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

----

## Inner Radius Design Tip with CSS Custom Properties
This is an educational demo. [Jhey](https://codepen.io/jh3y) shows how an inner border-radius doesn’t match the parent’s border-radius and what simple calculation needs to be applied to get a great match. Then, CSS variables are added to the mix so the browser does all the work.

{% codepen https://codepen.io/jh3y/pen/KKrYaxx %}

----

## Scroll-triggered animation
[Ana Tudor](https://codepen.io/thebabydino) brings an exciting experiment: using custom properties and `animation-play-state`, she can control when an animation runs based on how much of the parent is scrolled into view. Scroll down the page, and the square starts spinning; scroll up, and it will stop.

{% codepen https://codepen.io/thebabydino/pen/qBQzPGY %}

----

## Pieces of string
This generative art project by [Dillon](https://codepen.io/Dillo) reminds me of that old Windows screensaver with pipes popping all over the screen, mixed with Keith Haring’s dancing men pop art. Maybe it’s the nostalgia and how it can be easily customized with the mouse, but I really enjoyed this demo.

{% codepen https://codepen.io/Dillo/pen/XWodYNp %}

----

## Sunday CSS #8: Mosquito
[Julia Miocene](https://codepen.io/miocene) has been sharing CSS Arts and animations weekly, and this one got my attention. It is a mosquito flying back and forth around the screen, but it has so many details and moving parts that make it impressive… and all in HTML and CSS, no JS. Simply amazing.

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

----

## Fade out cards — Transition
Try deleting a card from the demo; depending on your browser, you’ll see a smooth transition. How? With the View Transitions API, an experimental technology only available on Chromium. [Una Kravets](https://codepen.io/una) shares a way to use it, with a fallback for the browsers that don’t support it yet.

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

----