10 Cool CodePen Demos (March 23)

#codepen #css #javascript #webdev

3D Camera Icons

Jon Kantner 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 or rotating pill), but the CSS shadows and lightning from this 3D Camera Icons are really out of this world.

Pure CSS landscape #4

This CSS art by Arman Borkhani was inspired and extended from an illustration by Kristofer Haugvik on Behance (which is already impressive.) The simplicity of the drawing and the code makes the work even more beautiful.

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 and how smoothly the icons open and close. The movement is so soft moving along the curve.

VR Gravity Manipulation

I’ll admit that I haven’t tried Caleb Miller’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.

Text effects

Kassandra Sanchez (Kass) 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!)

That 3D Text Library — requestAnimationFrame()

Continuing with more fancy animated text codepens (following up with some demos he shared earlier this year), Steve Gardner shared a wavey demo (Motion warning before running the demo!)

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

Spiral circles

I like Yuan Chuan’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.

Random Planetary System

This demo by 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’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.

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 completes an interactive and colorful demo.