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.

March 19th: Cities, Captains, and Cats

CodePenChallenge: Dead Poets Society Roundup

We are amazed by the inspiring work you created with the Dead Poets Society theme for the #CodePenChallenge! Here's a selection of some of our favorite Pens from Week Two.

Check out monday.com - the visual project management tool

Oversee your team's entire workflow while organizing your design layouts, coding tasks and assets. Plan your timeline visually and communicate all in one place.

Wiggly Squiggly

"Colorful, mouse following, SVG squiggles. Written with Typescript, GSAP and rxjs" by Steve Gardner.

From Design to Code: Creating and Animating Images with CSS

José Rosário shares his process for creating an animated CSS image, from inspiration through design and animation, in this tutorial post.

Geometric cover replication with CSS Grid, clip-path, & writing-mode

Melissa Em uses "CSS Grid, clip-path, and writing modes to replicate a vintage geometric book cover" in this striking Pen.

Sleeping Cat CSS drawing/animation

Anastasia Goodwin takes inspiration from a Dribbble shot by Linn Fritz to create an adorably snoozing CSS cat.

Red Zone

"Sometimes I wonder how I got here, in the red zone". A strangely ominous infinite pattern from Dave Kwiatkowski.

CreateJS: Don't touch S.A.M

Handle with care! This demo from the CreateJS team "shows off the speed/effects that can be created using CreateJS' StageGL class".

City Center

Alice paints a quiet city at night with JavaScript in this animated Pen.

Variable Fonts

"An exploration of expressive, performant typography" by the Microsoft Edge team. Pop open the CodePen demos throughout to get a closer look at the code behind the designs.

Say Hello to Houdini and the CSS Paint API

From Will Boyd: "Houdini is an ambitious project to give developers more power over CSS than we’ve ever had before. The first piece of this project to emerge is the CSS Paint API. This article will explain why Houdini is so exciting, then show you how to get started with the Paint API."

WAAPI: Take a Ride in My Spaceship

"Part of a set of demos that tell the tale of Sleeping Beauty... in Space! This one uses the Web Animations API for a parallax effect, tying the scroll event to the animation's currentTime property", By Rachel Nabors.