cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-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

This is my first attempt at Perlin Noise, which uses flow fields and connects lines, and p5. The number in the bottom left corner is the frame rate. The animation runs for 30 seconds then stops looping. This does use WebGL to improve performance. As seen in the bottom left, the performance is still rather poor (always below 30 fps), so I'll be looking into how to make this more performant.

Working with a post effect stack with HDR rendering (and adaptive tonemapping -- though that's coming and going) and Bloom. Yay bloom.

Picked Posts

View More Posts

Z-Index Is Weird

Z-Index Is Weird

(but positioning is much weirder)

If you’ve played around in CSS a bit, you got to the point where you wanted one thing to be on top of another thing. You found out about something...

Picked Collections

View More Collections

12 Pens

Lorenz attractor

Lorenz attractor

12 Pens

The Power of Twisted Alchemy

I made two pens, Twisted Alchemy && Rings of Power. Both are perfect remix templates... so, needless to say, I'll be remixing them ;) As usual, same code,...

7 Pens

Pens in CodepenDC 3/8/2017

These are pens that were talked about in CodePenDC on 3/8/2017