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.

February 26th: Avatars, Portraits, and Noise

Animated SVG Avatar

This yeti respects your privacy! An adorable animated login buddy, built with GSAP TweenMax library and GSAP's MorphSVG plugin by Darin S.

Get a FREE .design domain name today!

.design reflects what you do as a designer. Your name comes with free email hosting, SSL Security, & a Site Builder.

Would you like fries with that?

Build yourself an SVG burger with a little help from Vue.js and Tiffany Choong!

Glass Galaxies

"Particles each pick another random particle to orbit around leaving trails behind of their movements. Click to generate a new galaxy" in this atmospheric Pen by Ben Matthews.

How I Construct a Pen on CodePen

Sten Hougaard shares how he takes an idea from a thought to a sketch to a finished Pen in this informative blog post.

Page Transition - Old TV Switching Off

Chris Smith shares a clever idea for a retro exit transition — the old-fashioned fade out of a vintage TV.

Three.js and Web Audio API

Send stars out into space and chill out in the shadow of Saturn in this spaced-out Pen by Ellen Probst.

CSS Illustration: Face

Click the radio buttons to try out different hairstyles on this pure CSS model illustration by White Pallet.


"I got inspired by a Dribbble shot I saw on Twitter the other day and decided to make my own simplified version of what a Windows 95 Instagram program might look like!" by Gabrielle Wee.

SVG Text Portrait

Hover over the quote to reveal a piece of the portrait in this experiment with clip-path by Lisi Linhart.

GLSL: Tri Noise Soup

Liam Egan is back with another psychedelic GLSL showcase. Check out the comments in the JS panel for a peek behind the scenes.

Day 14: Record Player

Mogeli lortkipanidze drops the needle on day 14 of a 30 day personal challenge to make a CSS image every day.