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.

October 23rd: Hexagons, Waves, and Metaballs

Sea Debris Concept

Adam Kuhn's animated shark does its best to swim through a sea of debris in this thought-provoking animated Pen.


The complete project management platform for agile teams.

Post About Your Pen

Our very own Rach Smith put out a community challenge: "After you code a Pen or a Project, pick one part of the code you can explain and write a post about it". Rach is gathering up responses to the challenge on a new website (built in CodePen Projects!).


"Metaballs, not to be confused with meatballs, are organic looking squishy gooey blobs." Varun Vachhar gets into the practical math behind building these delicious morsels.

CodePen Radio #147: Charlotte Dann

On our latest podcast episode, Rach and Marie talk to front-end developer and jewelry designer Charlotte Dann about Hexatope, her project for designing jewelry with hexagonal generative art.

Example.js | 1 - Basics

"[A] small guide intended to aid you in learning JS by quickly scrolling through incrementally complex examples, that subtly introduces new concepts over time." from Matei Copot.

CSS3 Perspective Playground

Get a little perspective on your CSS with this perspective visualizer by Mehmet Burak Erman.

Seamless Loop SVG stroke Animations

Craig Roblewsky shows you how to draw a stroke and loop it around your SVG element infinitely with GreenSock's TweenMax and DrawSVG plugins.

Breakdown of a calc() for a Square Grid

Lasse Diercks demonstrates how to use calc() along with CSS grid to create an HTML component that "turns every child into a square".

SVG Waves with feDisplacementMap

CodePen community superstar Gabi gives us an in-depth look at how to create hypnotic waves in SVG, with both static and animated examples.

VMIN for Canvas

"If the canvas was a div or any other kind of HTML element we could just set it's width and height css properties to be 80vmin and call it a day, but that's not how canvas works." Derek Morash shares how he created a vmin-like function in JS.

Full-Screen Unsplash Slideshow

Brian Haferkamp explains how he built a beautiful full-screen photo slideshow with the Unsplash API.