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.

This week: Plaid, Pythons, and Porygons

Colour Changing Chameleon

Show Cassie Evans' clever chameleon a color and it will do its best to match (with some help from tracking.js).

Protect Your Digital Self - Have Backups

Unlimited online backup for just $5/month from Backblaze, the #1 online backup provider for Macs and PCs. Don't delay, get back up today.

Snakes

Steve Gardner slithers in with this striking snake animation made with POP.svg.

#CodePenChallenge: Masks

The Halloween fun continues! Last week, the CodePen community played with masks — the scary kind and the SVG kind. Check out our collection of Pens from the Masks challenge, including Paul's "Mask Slider".

Web Workers and OffscreenCanvas

Gerard Ferrandez moved his famous dancing robots into "their own separate OS-managed CPU thread", and shared the details in a post for our Spectrum community.

CodePen Radio #194: GraphQL

Chris, Rach, and Cassidy are on to talk about bringing GraphQL and Apollo into the CodePen stack.

CSS Porygon

"Porygon from Pokemon. It likes to be patted (hovered over)" from David James.

CSS Grid for Getty Images

"Getty Images is going through a whole redesign. This is the prototype code of the new homepage that uses CSS Grid" from Thomas Vaeth.

CodePen Brighton - Pass the Pen

The CodePen Brighton meetup crew took the "Pass the Pen" challenge and created this spacey scene!

WordPress.com

WordPress powers 31% of the internet. Use WordPress.com to start, update, and view your site seamlessly from any device. There is a generous free plan, but with any of three affordable paid plans you get a custom domain name and access to advanced design tool.

Pour

A goldfish photo pours into the frame in this lovely animation from ycw.

Color Flood Game with Colorblind Mode

Josh Collinsworth builds a playable color flood game with React and CSS grid. Flip the toggle to check out the colorblind-friendly emoji mode!

Mouth expressions with Pug, SVG and GSAP

Watch your browser go from happy to confused to neutral in this amusing study of animated expressions from Alessandro Falchi.

CSS Button on Plaid

It's that time of year again! Marcus Connor buttons up the browser in plaid in this delightful autumn Pen.