New month, new #CodePenChallenge!

Last week, we wrapped up the November Animals challenge with a trip into the past. Check out the Pens from the Dinosaurs prompt in our #CodePenChallenge: Dinosaurs 🦕 collection.

December's Theme: The Four Elements 💠

This month, we draw inspiration from the four classical elements: earth, water, air, and fire.

December's Challenge Sponsor: WooCommerce

WooCommerce is the most popular eCommerce platform on the web. Use WooCommerce to sell anything from luxury mattresses and cupcakes, to date-driven sales like kayak lessons, to one-off items like beautiful hand-crafted jewelry.

Week One Prompt: Earth 🌍

Let's hit the ground running with this week's challenge! This week we're taking inspiration from the earth element — and the planet Earth, too.

Your Challenge

Build a Pen that draws upon the earth element. Celebrate our planet, grow some crystals, or dig into the dirt!

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-earth. 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. Illustrate or animate your own planet Earth. You could do something realistic, like Bryan Jones' "3D Earth" or something playful, like the earth in Burke Holland's "Real Time Moon".
  2. Dig in and build a garden, like Nat Cooper's "Drag and Drop Succulent Garden" or Thibaud Goiffon's "Rabbit Garden".
  3. Crystals and gems make beautiful front-end projects. You could generate crystal spikes like Amanda Glosson's "Spinning Ball of Crystal" or fashion a polished gem like David Lyons' "Sapphire".


  1. Want to make a globe? Check out planetary.js, or Jorin's quick tutorial on creating a globe with D3.js.
  2. Nat Cooper shared SVG assets and a great tutorial for building a succulent terrarium in the post A Drag-and-Drop Succulent Garden : Project Outline.
  3. Watch Mike Mangialardi create a sparkling SCSS crystal in Speed Art: Crystal Loader on YouTube.