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.

August 7th: Rings, Rain, and Responsive Reptiles

Airport Distance Map

"Get the distance between two airports 'as the crow flies'.Built with SVG, Vue, D3, GSAP, and love." by Shaw

Modular, embeddable content management

Add CMS functionality to any website, on any platform. Make content & code edits quickly, and empower non-technical users to edit content themselves.

Minimal Film Poster: LOTR

Luke Meyrick's minimalist take on a, animated Lord of the Rings poster highlights the story's most precious element.


Angela Velasquez takes on the question that baffles front-end herpetologists everywhere: would a browser snake be responsive or adaptive?

Game of Life on Earth

Mustafa Enes' game of life experiment includes bodies of water and land masses for a earthy vibe.

Insect Builder v0

Pop open the dat.gui controls on Findoff's Pen and build yourself a custom insect!

Rainbolt V2 P5*

"I'm developing my P5* raindrop routine each evening. I was really pleased to be able to get the drops to form an ellipse or little puddle / droplet as they hit!" - by The Brutal Tooth

Intro Vertex Shaders Part 4: Form Follows Function

"This is the fourth and final in a series of articles about advanced WebGL animation using Three.js and Three.bas, my extension for complex and highly performant animation systems." - from Szenia Zadvornykh

Symmetric Harmony

"A Kaleidoscope, on canvas. Drag && Drop an image from file, OR copy an image from any source (such as Google Images) and paste it onto the canvas using CTRL+V. If viewed from mobile, moves along with device orientation. MouseMove / TouchSwipe -- or just watch and let it move on its own." by Tiffany Rayside.

Vue Time Comparison

"Using the browser's native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings." Made with Vue, SVG, GreenSock by Sarah Drasnser.

Virtual Mixtape: Summer Babes (2017)

Una Kravets put together a summertime mixtape using the Web Audio API, based on a Pen from web audio maestro Rumyra. FYI, it autoplays (good) music.

CSS Coffee Animation

Perk up with a little bit of fresh coffee in agathaco's animated CSS illustration.