cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv headernumbered-list123split-screen

CodePen is a social development environment for front-end designers and developers. 👋

It’s the best place to build and deploy a website, show off your work, build test cases, and find inspiration.

Sign Up Learn More

This is CodePen Projects!

Projects screenshot

Picked Pens

View More Pens

Picked Projects

View More Projects


For this generator, instead of hardcoding arrays of possible haiku lines to mix and max, I decided to use the datamuse API to create haikus inspired by a word that the user picks. The haikus are sometimes accurate, mostly ridiculously nonsensical, and pretty much always hilarious AI speak.

Picked Posts

View More Posts

Picked Collections

View More Collections

14 Pens

Tunnel animation

Demos from my article about Tunnel animations

27 Pens

CSS Grid Talk Examples

The updated examples for my talk at An Event Apart Orlando, Chicago and Boston in 2016, as well as several others talks about Grid Layout.

54 Pens


I like shorts! They're comfy and easy to wear!