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

March 13th: Mazes, Magazines, and X-Men

Circle Fractal

You might be impressed at how little code this demo by Johan Karlsson is, utilizing p5.js

3D Magazine flip preview in CSS

What looks like a simple text-on-image design pattern by Jamie Coulter impressively unfolds to reveal more detail about a magazine issue.

Valentin François

It's always fun to find a new member who is intimately exploring an idea. French computer sciences student and hobbyist graphic/web designer Valentin François has been looking at spinners based on variations of different geometric shapes.

SVG Animation for Canada 150th

Issey, a freelance designer & developer for interactive storytelling created this haunting little animated island for a fiction story in The Globe and Mail.


Scott R McGann's programatically generated hexagonal maze not only rotates about in 3D space, but also solves itself as you mouse over the different internal hexes.


Ryan Spilhaus creates little avatar-sized subtly animated versions of Professor X, Cyclops, Jean Grey, Wolverine, Storm, Nightcrawler, Iceman, and Magneto.

Go PRO on CodePen

Unlock the full power of CodePen with features like Live View, Asset Uploading, Presentation View, and many more.

Bi-directional Step Sequencer

Create and share your own step sequences in Jake Albaugh's addictively interactive musical Pen.

Responsive Orbital Icons - Animated

Pieter Biesemans' set of subtly animated icons brings to mind space travel and exploration.

Text Effects

Mandy Michael's collection gathers up her latest CSS text effects experiments into an inspiring gallery.

Fading text with CSS blend modes

Hover over the text to reveal the rest of Giana's clever fade-away text.

Daily UI #013: Direct Messaging

The Daily UI challenge inspires so many cool Pens, like Fabio Ottaviani's slick direct messaging concept.