All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

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.


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.