Posted on

#CodePenChallenge: Fire

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

Last week, the CodePen community made it rain for the Water prompt. Check out the Pens in our #CodePenChallenge: Water 💧 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 Three Prompt: Fire 🔥

We're playing with fire this week! Let's set CodePen alight with Pens inspired by the fire element.

Your Challenge

Fire up a Pen and set it aflame! Light a candle, throw a fireball, or show us some fireworks.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-fire. 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. 'Tis the season for candles, like in Sarah Drasner's "Flame" and Yule Logs, like Alex Bergin's.
  2. Create pixelated fire, like the kind Fire Mario throws in Dave Judd's Pen.
  3. Light up the sky with fireworks like the Pens in our "Fireworks!" collection.

Resources

  1. Learn how to create a glowing, crackling fire effect with CSS animations from HackerNoon.
  2. Get that 8-bit fire look with a pixelated fire effect tutorial from slicker.me.
  3. Did you know there's a fireworks.js ? Of course there is!

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

Posted on

#CodePenChallenge: Water 💧

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).

Ideas

  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".

Resources

  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.

The post #CodePenChallenge: Water 💧 appeared first on CodePen Blog.