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.

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

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.

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.

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

pen
Marquee
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.

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.

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.

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!"

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.

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.

pen
recoil
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.

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.