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

December 20th: P5.js Kinematics, CSS Timekeeping with Houdini, and Front-End Flurries

Always be ready for SOC2 Audits.

Keep your code compliance-ready for SOC2, ISO, or HIPAA compliance audits with Rewind backups for GitHub.

Inceptron 32x

"This started as an exploration of the Screen Capture API but quickly got carried away." Brandel Zachernuk takes you into your own computer screen inside "a fully procedural world" in this jaw-dropping interactive Pen.

#CodePenChallenge: Bounce

For week two of the "Animation with GreenSock" challenge, we learned how to bounce, and squash & stretch. Browse our collection of Pens from week two, including Josetxu's bouncing ball toggle switch.

Startups can get up to $1000 free Notion credit

High-output startups like Headspace and Typeform use Notion to manage their knowledge bases, work cross-functionally, and push projects forward. Now, you can bring Notion to your team. Apply to get up to $1000 free Notion credit.

Pure CSS Functional && Responsive 3D Stopwatch

Jhey Tompkins wields the power of custom properties and Houdini's @property to craft a working (and fully responsive!) stopwatch. Dig into the helpfully commented code in the CSS panel for insight into how it all works.

Viking Ship

Take to a Three.js sea in a Viking ship model in this interactive scene from Marian Ban. Open up the "Parameters" menu up top to manipulate the sky and water to make the voyage your own!

CodePen Radio #346: with Ben Evans

Chris chats with CSS fine artist Ben Evans. "Like so many other great artists, Ben’s skills aren’t isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music."

Thank you 800 followers

Mustafa Enes celebrates a following milestone with a wiggly SVG rendition of the CodePen logo and floating text. Here's to many more, Mustafa!

Strange Creature 3: Jeff the Sea Slug

Sean Free continues a long-running series of experimentation in the deep sea of P5.js with a new strange creature that's very interested in where your cursor goes.

CSS Santa

Alvaro Montoro spreads a little Christmas cheer with this rosy-cheeked CSS illustration of Santa Claus. Check out the video linked in the preview for an 8 minute time-lapse of the process.

Snow Day!

It's the most wonderful time of the year! We gathered up a mega-collection of 130+ snowy Pens to fill your screen with flurries. Pop it open in TV View for maximum chill ❄️

3D Text

An a-peel-ing demonstration of the fun you can have with some artfully applied text shadow, from antoniasymeonidou.

Daylight Cycles of Earth

niallains visualizes " how daylight hours change over the course of the year" with CSS and JavaScript. Watch the demonstration, or grab the Earth in its orbit to control the animation.

Generative Re-arranging Grids

"A generative grid layout that magically re-arranges itself when you move your device pointer! Created using GSAP FLIP, the process involves creating random Quadtree data structures with objects focused around the current pointer position, using those Quadtrees to create CSS grid layouts, filling those grids with items, then animating them." From George Francis.

Extra News