10 Cool CodePen Demos (February 23)
Tags: codepen, css, webdev
Published: 2023-03-04 02:24:55

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

## Gemstone in Time

A really impressive WebGL demo from [Matthias Hurrle](atzedent), with a dodecahedron prism inside of a spinning resin cube. The lights and the reflections are fantastic and take the animation to the next level. Check out more impressive demos on their CodePen profile.

{% codepen https://codepen.io/atzedent/pen/MWqywxp %}

## Pencil Preloader

[Jon Kantner](https://codepen.io/jkantner) does impressive demos with interactive components and micro-interactions. This loader is no exception. Simple but full of details (that wiggle of the eraser when deleting the pencil trace is super funny). It looks like Jon played with this circular component idea during February, as there’s [another cool circular demo with a battery meter](https://codepen.io/jkantner/pen/eYLzPxZ).

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

## Pop-Up Hover Effect (featuring CSS Developers)

Apart from creating impressive [CSS art](https://codepen.io/t_afif/pen/BaOLqom) demos, [Temani Afif](https://codepen.io/t_afif) shares patterns in pure CSS and interactive components like these pop-ups. A brilliant combination of borders, outlines, and masks that provide animation on hover… and all with just the `<img>` tag!

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

## Carousel with Drag and Wheel

A new animation with cards by [Fabio Ottaviani](https://codepen.io/supah). I recommend testing it on mobile, where the rotations and movements are smooth and beautiful. This demo has collected more hearts in two weeks than some of the most-hearted CodePen demos in 2022!

{% codepen https://codepen.io/supah/pen/xxJMbbg %}

## Scroll Driven Gallery

A few weeks ago, a rotating gallery made the rounds on Twitter. [Jhey Tompkins](https://codepen.io/jh3y), an expert at whimsical demos, decided to try it and shared his own version of this gallery that rotates and zooms as you scroll on the page.

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

## AI01: Vista

[CJ Gammon](https://codepen.io/cjgammon) built this card design with the help of Midjourney (and shared the process on Youtube). The AI provides the design, and CJ creates the code. The wavy animation between the header and the card’s content makes it for me.

{% codepen https://codepen.io/cjgammon/pen/PoBxXrP %}

## Daily Sketch

[Yuan Chuan](https://codepen.io/yuanchuan) always shares beautiful drawings with SVG and CSS (doodles!). The collection on this demo caught my attention. They looked like snowflakes (they are not), and their shapes and colors were hypnotical.

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

## Falling Words

This small animation by [Gayane Gasparyan](https://codepen.io/gayane-gasparyan) is catchy and fun. A sentence is generated at the top, then the words fall and crash and spread slowly through the screen. It would be nice if the phrase remained on top longer, but the effect is pretty cool.

{% codepen https://codepen.io/gayane-gasparyan/pen/LYJEoZM %}

## Demo Idea Generator

How often have you planned on building something but don’t come up with any idea? Well, [Una Kravets](https://codepen.io/una) has the solution: a demo idea generator! This demo may look simple, but it is fantastic and a great problem solver.

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

## Pure CSS Angled Sections

[Ana Tudor](https://codepen.io/thebabydino) shares a way of creating tilted and angled sections using CSS variables and trigonometric functions (heads up: not fully supported by all browsers). And to put the cherry on top, she adds a detailed explanation of the process and how to adapt it, all within the demo.

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