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

Past Editions:

This week: Floating, Flying, and Flipping

Low Poly Art Generator

Evan Lévesque demonstrates polygonize.js in this interactive Pen. Upload a photo and slide the cell sizer to create a piece of low poly art!

Use Data-Driven Shapes in your Web App

What can you do with data-driven shapes? Create visual manufacturing maps, graphical asset management, office layout and space planning charts, org charts, flowcharts, and more!

More cascading text effects w/ Scrolling + ScrollOut

Scroll through a fun gallery of cascading text effects from jh3y.

Updates Available

Did you know there are updates available? Do you want to install them now? How about later? Or what about now? "My evilest Pen" from sean_codes.

#CodePenChallenge: Jellyfish

We jumped right into the deep end with the first prompt in November's Animals challenge! Check out the Pens from the Jellyfish challenge, including Viki Johnson's animated jelly.

Fullstack Advanced React & GraphQL

Join over 10,000 other developers learning to build Full Stack JavaScript Apps with React.js and GraphQL in Wes Bos' new premium training course.

Codevember #9 - Green

Holy guacamole! Romina Martin's creation for Codevember's "Green" prompt is a sassy little dip making its escape with the last chip.

Checkbox Toggle Switches Are Confusing UI

Marcus Connor makes the case for rocker switches over the classic checkbox toggle switch in this thought-provoking Post.

Object-fit Testing

Jessica Parsons demonstrates how all five values of the `object-fit` property work with an 800x300 image in 150x100 and 100x150 spaces.

Layerscape

Move your cursor to control the movement and elevation as you glide through an amazing canyon in this Pen by André Mattos.

Codevember 6 :: (Dark) Web

"Simple lil' hover animation to redact text" from magnificode for Codevember's "Web" prompt.

High Res Coin Toss

"A high resolution coin toss app. Forces three.js to double the canvas element size before compression to create photorealistic pennies at standard browser zoom levels. Physics handled with physi.js." from Matthew Main.

#198: Shaw - CodePen Blog

The newest member of Team CodePen, Stephen Shaw, stops by the show to talk about his hiring process and what his first week has been like working at CodePen.

#Codevember 2018: 7 - Sea

Henry Desroches translates a Dribbble shot by weiming into SVG and CSS in this stunning, subtly-animated Pen, created for the Codevember "Sea" prompt.