It’s week three of the Shapes #CodePenChallenge!

Last week, we got straight to the point with triangles. Check out the Pens from the challenge in our #CodePenChallenge: Triangles 🔺 collection.

February’s Challenge Sponsor: CodePen PRO

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You’ll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.

Week Three Prompt: Blobs 🍦

After a couple weeks of strict shapes, it’s time to get blobby! This week we’re throwing out the compass and the ruler to create soft, amorphous blob shapes.

Your Challenge

Create a Pen that features irregular, blobby shapes.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-blob. We’ll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).


  1. Did you make a Pen for the circles or triangles challenge? Use that as your starting point to create new blobby shapes.
  2. Ever seen a lava lamp? The oil and wax inside create and endless variety of blobby shapes. Maybe you could light up the browser that way.
  3. Blobs can bring a bit of delight to UI. Could you blobbify a button or form action?


  1. Planning to transform a regular shape into a blob? Our very own Chris Coyier curated a list of blob building tools for Bizarro Devs.
  2. Going for the lava lamp vibe? Check out Alex Zaworski’s Pure CSS Lava Lamp or Adam Kuhn’s gooeytype A.
  3. Watch the Keyframers blobbify a form’s error state in the first video from their two-part Gooey GUI livestream.