CodePen : Circles, Coils, and Concentration

View this issue on CodePen

Circles, Coils, and Concentration

Some wonderful creativity this week, as always, from all you out there in the CodePen community. Y’all never fail to impress. We had to pick just a few from all the great Pride Pens going around and other current cultural events. Shaders seem to be a bit of a recent trend, and you’ll be hearing more about trends soon if you subscribe to the podcast.

Fashion Woman pen
Fashion Woman
Asyraf Hussin recreates, with HTML and CSS alone, a design from Yevhen Verlen on Behance.

Noise variations collection
Noise variations
Liam Egan put together a group of interesting full-screen shaders. Make sure to click through to watch them move. The still images are beautiful but their movement really makes them shine.

Apple inspired Pride clock pen
Apple inspired Pride clock
Scott Kellum with some extremely clever CSS trickery here. An overlay of colors sits overtop this pen (turn off the `mix-blend-mode` on it to see), but ultimately only reveals itself in the lines (see the radial gradient on the "inner" element) and the numbers. The `filter` blur on the numbers melts them into the lines. Wow.

The Circle (Netflix) UI pen
The Circle (Netflix) UI
A recreation of the UI from the show "The Circle" on Netflix, by Hyperplexed.

Marquee pen
Max Böck, mercifully, doesn’t use the actual marquee tag here, but recreates the effect multiple times in a much more aesthetically pleasing way.

Notifications Collection (4 examples, responsive) pen
Notifications Collection (4 examples, responsive)
Looking for some options for styles of notifications (e.g. success, warning, error)? Natalia Davydova has created a number of simple, clean examples.

3D Scrolling Gallery/Timeline pen
3D Scrolling Gallery/Timeline
Quite an interactive experience from Tom Miller where your scrolling zooms image at you in 3D space. Greensock on full display.

Pride 2022 🌈 pen
Pride 2022 🌈
Shaders are so hot right now! Paul J Karlik creates this wonderfully active pride display entirely in shaders. Paul explains: "WebGL Fragment Shader / Raymarching custom SDF shapes (letters) and creating a refraction effect with some looping trickery. This is created all with just math!! And oh yeah Happy Pride!"

Organize your content for the world sponsor
Organize your content for the world
74,000 + developers & marketers use Storyblok’s CMS to deliver powerful content experiences on any frontend: Websites, eCommerce and more.

Florence + The Machine Dance Fever Concentration pen
Florence + The Machine Dance Fever Concentration
Lee Martin uses our Vue Editor to create a really classy version of a memory game based on this album. (I guess "Concentration" is the official name of those type of games, huh). The sounds are an especially nice touch, especially when the song kicks off on a match.

recoil pen
Some fairly digestible math from Ryan Thavi drips drops from the sky into a slow moving sprial-based experience here, ultimately painted to a canvas.

CSS only 3D perspective button pen
CSS only 3D perspective button
How the background of the button is flat, but the letters are 3D is such a unique look for this button by Temani Afif, it gives it a modern feel we haven’t seen before.

chriscorner.png Chris‘ Corner

A collection of web design and development news and thoughts from CodePen’s own Chris Coyier.

I’m feeling like hitting y’all with a collection of 🔥 hot links this week since I’ve got some good ones saved up. I hope you don’t mind.