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