January 4th: CSS Characters, JavaScript Convolutions, and an Accessible Theme Picker
CodePen Radio #395: The Most Hearted of 2022
On the latest podcast, Marie joins Chris for a first look chat about the 100 most hearted Pens in 2022!
Teeming Display
There's something going on under the surface in this 2D shader from Matthias Hurrle. "The cells are moved by Voro Noise, while the worm-like creatures are represented by just sine functions."
Genuary 4 - Intersections
Stranger in the Q answers the fourth Genuary prompt with this generative gem. Click or refresh to generate a new, geode-like iteration.
#CodePenChallenge — :has()
The January challenge is all about new CSS! We kicked things of with :has(). Check out what we :has() in our week one collection, including Pens from Andrii Rodzyk, Greg Robleto, Sicontis, and Aryan Tayal.
The Grumpy One
This grumpy character will grumpily jump, IF you know the right key to press, in this interactive CSS animation by Gayane Gasparyan. Based on a Dribbble shot by Olle Engström .
ZigZag Striped Cube
Josetxu demonstrates the animation potential of conic-gradient in this mesmerizing cube animation, inspired by Julio Plaza's 1960s "Hexacubos" series.
Building an accessible theme picker with HTML, CSS and JavaScript
Learn how to build a slick, accessible theme picker in this detailed tutorial from Sarah L. Fossheim, complete with lots of embedded Pens and a handy collection for reference.
Fancy hover effect on avatar
Temani Afif creates a fun "porthole" hover effect in CSS by combining CSS variables & calc to transform scale.
Illuminating shapes
Callum Macrae shares a striking Three.js scene "heavily inspired by something I saw as part of an artwork at LUX at 180 The Strand last year".
Realtime 2D Lighting
Hover around in Kit Jenson's Pen to move the light source and see where the shadows fall in the scene. Refresh for a new set of circles to explore.
Convolutions
JavaScript artist Dillo's latest colorful creation is "Curves drawn on a tessellation of circles. Each curve is perpendicular to its circle. Then connect the curves through the gap between the circles, and delete the circles."
CSS Kawaii Shark
Alvaro Montoro illustrates a friendly-looking shark with CSS, including nice subtle details in the bubbles and sunbeams in the water.