Posted on

#CodePenChallenge: Blobs

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

  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?

Resources

  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.

The post #CodePenChallenge: Blobs appeared first on CodePen Blog.

Posted on

#CodePenChallenge: Triangles

New week, new #CodePenChallenge!

Last week, we bounced into the shapes challenge with circles. Browse through the Pens from the challenge in our #CodePenChallenge: Circles 🔵 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 Two Prompt: Triangles 🔺

This week we're getting to the point of the shapes challenge with Triangles!

Your Challenge

Create a Pen that features triangles in an interesting way.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-triangle. 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

  1. Show off your favorite way to make a triangle in the browser. Will you make it with CSS, SVG, or another technique?
  2. Have you heard of the Sierpinski triangle? It's a fascinating fractal you can generate with JavaScript.
  3. Triangles are the root of the low-poly image style. Could you create an interesting image from triangles?

Resources

  1. Here are a couple of approaches to creating triangles in the browser: the classic border method, and the clip-path method.
  2. Feeling fractal-y? Study up on Sierpinski with Massimo's Sierpinski triangle or Jarrod Thibodeau's The Chaos Never Ends.
  3. Thinking about going the low-poly route? Check out Mikael Ainalem's Ocean and Luke Reid's Low Poly Landscape for inspiration.

The post #CodePenChallenge: Triangles appeared first on CodePen Blog.