Home API system #CodePenChallenge: Air – CodePen Blog

#CodePenChallenge: Air – CodePen Blog


It’s the final week of the “Four Elements” challenge!

Last week, the community set the browser aflame for the Fire challenge. Check out the Pens in our #CodePenChallenge: Fire 🔥 collection.

December’s Challenge Sponsor: WooCommerce

- woocommerce large - #CodePenChallenge: Air – CodePen Blog

WooCommerce is the most popular eCommerce platform on the . 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: 💨

This week, we’ll draw inspiration right out of thin air.

- s s 450309 unsplash air - #CodePenChallenge: Air – CodePen Blog

Your Challenge

Create a Pen and fill it with air! You could show gusts of wind, birds in flight, or floating balloons.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-air. 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. Turn wind into something you can see, like in Karim Maaloul’s “Wind and Sand” or Tiffany Rayside’s “Wind”.
  2. Nothing can fly without air! Show us birds in flight, like in eyesight’s send button that transforms into birds. Or aircraft, like Simon Vrachliotis’ “Helicopter Flight”.
  3. Fill a Pen with balloons, like these party balloons from BrianDGLS, or the hot air balloon in Lucagez’ “React Cloudy Todo List”.


  1. Read a deep dive into creating a wind map with WebGL from Vladimir Agafonkin for Mapbox.
  2. Learn fascinating Tips and Observations of Bird Flight from animator Brendan Body.
  3. Watch Jeffrey Taylor live-code a CSS hot air balloon on YouTube.

Source link


Please enter your comment!
Please enter your name here