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.

October 16th: Navigation, Pathfinding, and Dimensions

Breadcrumbs Navigation

Andreas Storm with some subtle and classy fade in animation making a "back button" more robust, with links to other areas of a site.

HelloSign API, developer focused eSign API

Embed documents directly on your website with just a few lines of code.

Lazy Loading with Inline SVG

Mikael Ainalem simulates slow loading images with timeouts in this Pen. The clever part is the SVG shapes that form the placeholders before the images load. Those are much smaller in size than the raster data that comes later.

Typing Text Transition

Rachel Smith created a fun demo where letters animate in as you type into an input. Better still, she shared how it works: a hidden element with normally positioned characters inform the animated and absolutely positioned characters.

Shipping Concept

Well. Didn't see that one coming.

Path Finder Game

Such a simple concept in this game by Blaz Kemperle, but it's extremely well done, fun, and a bit addictive.

CodePen Radio #147: Content Inventory

Marie and Chris talk about the whys and hows of doing a content inventory on CodePen's documentation.

Launch a Rocketship

A little green creature takes a trip among the stars in Yoon Lee's animated Pen.

Getting Two-Dimensional Coordinates from a One-Dimensional Array

Vincent Maglione gets into the math behind grabbing x and y coordinates from a single, one-dimensional array as an alternative to nested for loops.

Animated Skull

The Creative Coding Club's "It's Alive!" challenge is scaring up some creepy stuff, like this watchful skull animated by Ellen Probst.

Stretchy Pants - A Resizable Concept

Jase Smith shares his idea (and code) for a resizable side panel. Watch the code sample update while you drag or double-click the resizer!

Yet Another 2D Tile Map Editor

"[A]lmost a complete map editor for both standard 2d (top-view or platform) and isometric tiles." by Karl Patrik Johansson.