It's time to start week two of the December "Four Elements" challenge!

Last week, the CodePen community went around the world and dug into the dirt for with the Earth prompt. Check out the Pens in our #CodePenChallenge: Earth 🌍 collection.

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 Two Prompt: Water 💧

This week, we're taking inspiration from a very versatile element: water. It can flow or freeze, fall from the sky, float as a fog, or drip from a faucet. The possibilities are endless!

Your Challenge

Fill a Pen with water! Jump in a lake, get caught in the rain, or do a little washing up.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-water. 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. Build a beautiful body of front-end water, like in Simon Kinslow's "The Forest River", Judith Neumann's "Lake House", or Jon Kantner's "Endless Ocean".
  2. Create a rainstorm, like Steve Gardner's "SVG Rain", or a snowstorm, like Julius Horn's "Windy Snowstorm".
  3. Water is for washing, too! Show water doing the housework, like in uzcho_'s "Animated 3D Insta Washer", or Charlie Marcotte's "CSS Sink".


  1. Thinking about building an ocean in the browser? Have a look at David Li's Ocean Waves Simulation.
  2. Check out Lucas Bebber's tutorial on Rain & Water Effect Experiments for Codrops.
  3. Watch The Coding Train's Daniel Shiffman create a Snowfall with p5.js.