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).
Ideas
- Did you make a Pen for the circles or triangles challenge? Use that as your starting point to create new blobby shapes.
- 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.
- Blobs can bring a bit of delight to UI. Could you blobbify a button or form action?
Resources
- Planning to transform a regular shape into a blob? Our very own Chris Coyier curated a list of blob building tools for Bizarro Devs.
- Going for the lava lamp vibe? Check out Alex Zaworski's Pure CSS Lava Lamp or Adam Kuhn's gooeytype A.
- Watch the Keyframers blobbify a form's error state in the first video from their two-part Gooey GUI livestream.
The post #CodePenChallenge: Blobs appeared first on CodePen Blog.