cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

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

September 24th: Lettering, Lissajous, and Lincoln

Yeti Hand Pagination

Darin Senneff's helpful yeti is back, this time as an adorable pagination helper.

We're your new favorite domain registrar

We believe in variety (everything from .com to .online to .pizza), simple-but-useful interfaces, and painless experiences. Try us out!

#CodePenChallenge: HTTP Status 403

The community had fun with the forbidden in this challenge! Check out the Pens from week 3 of September's HTTP Status challenge, including this LOTR-themed Pen from A van Hagen.

CodePen Chicago: August 27th, 2018 at ActiveCampaign

Brian Montana shares highlights from the latest CodePen Chicago meetup where the theme was glitch art!

​Data-Driven UX

Learn how to employ usage data and session replay to drive exceptional user experience and product experiences for your users. Watch the webinar to see how.

CodePen Radio #191: Debugging

Cassidy and Marie are on to talk about tips for debugging your code, from the tools built into your browser and CodePen to IRL stuff like rubber duck debugging.

Weird input

Make an "impactful" statement with this unique input field from Jack Pack.

Lissajous Table - Pannable

Jacob Foster's Pen lets you pan around on an animated Lissajous table to explore the knots and patterns as they are made.

Text dilated by a Photo Mask - SVG Filters

"The input photo gets converted into a high contrast alpha mask with a color matrix, then we mask the original text, dilate it by a pixel and recomposite the dilated text on top of the original at 70%" in this Pen from Michael Mullany.

Emoji Map Editor

Go to town with emoji in this interactive Pen from Octavector. "Easily customisable, simply edit the STATE object and add the emoji and colours you wish to use in the app."

Marjo Sobrecaray on CodePen

"Making aesthetically pleasing pens is my hobby!" Check out Marjo's clever custom profile (notice the animation in the header?) and browse through some wonderful Pens!

SVG Logo Minification Trick: Use text for trademarks

Taylor Hunt shares a hint for reducing the minified size of an SVG that includes a trademark symbol in this demo packed with helpful embedded examples.

PIXI.js Displacement Mapped Text

Type in some text and watch it transform in a wiggly, wavy way in this PIXI.js demo from Shaw.

Pure CSS StopWatch

Zohir makes interesting use of keyframes to create this fully functional stopwatch with just CSS.