css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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.

November 13th: Fries, Fridges, and Formations

Pot Maker

Why bother taking a pottery class? All that wedging and centering and ughcgk. Don Pinkus allows you to be a master potter by dragging your mouse! 😉

The young watch brand for designers

MVMT has reinvented the watch game with beautiful design at fair prices + free shipping & returns. Just in time for the holidays, get 15% off with our code: codepen.


Jeyko Caicedo used just a dozen lines of JavaScript to draw this text-based wave.


Nikita Skargovskii weaves an undulating orb with Three.js in this hypnotic Pen.

Codevember #10

The incomplete circles in Donde Lapera's experiment here really give the whole ecosystem a lot of life!

Codevember 008: Fridge

If your refrigerator is running with this much glee, should you really catch it? A delightful Codevember entry by Adam Kuhn.

CodePen Radio #150: Codevember Begins

It's Codevember! All this month on CodePen Radio, our focus is on the annual Pen-a-day challenge. Marie is on to tell you all about Codevember — what it is, how to participate.

Useful Tests for JS-Powered Styling

Tommy Hodgins shares tests that are "useful for styling, whether it's trying to target selectors CSS can't normally reach, or trying to use element queries or container queries".

Soccer Formations in CSS Grid

"I’ve been having a ball playing around with CSS Grid. To kick off my first blog post, here's how I implemented a few popular soccer formations using one flexible CSS Grid" from Hannah Oppenheimer.

Bike GSAP SVG Stroke Animation

"Starting from an svg representing a cyclist with multiple stroke i'm able to animate the dash offset of all of thoses at the same time using GSAP DrawSVG plugin and TimelineLite" from Alaric Web.

Codevember #9

"Ketchup and Mayonnaise are on tour, and the fries are loving it" in DPDK's surreal take on the Codevember "french fries" prompt.

#Codevember 2017 — Storm

Alexandre Rivaux whips up a storm of brilliant colors in this GLSL fragment experiment.