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.
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.
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).
- 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”.
- Dig in and build a garden, like Nat Cooper’s “Drag and Drop Succulent Garden” or Thibaud Goiffon’s “Rabbit Garden”.
- 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”.
- Want to make a globe? Check out planetary.js, or Jorin’s quick tutorial on creating a globe with D3.js.
- 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.
- Watch Mike Mangialardi create a sparkling SCSS crystal in Speed Art: Crystal Loader on YouTube.