The
Spark
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

This week: 3D Flipping Checkboxes, Three.js Character Creation, and Pixelated Dogs

Free Whitepaper: Adopting a Unified Component Library Strategy

Download this guide to establish a unified component library approach and propel your development cycle towards long-term success.

Creating 3D Characters in Three.js

Michelle Barker gives an in-depth tutorial on Three.js character creation at Codrops. Use Michelle's helpful embedded Pens to practice as you follow along!

CodePen Radio #336: Cassie Evans

Cassie Evans from the Greensock team is our special guest this week! Cassie is a front-end developer with a special talent and passion for animation & SVG, as evidenced in part by her amazing work on CodePen. We dig into the Greensock 3.8 release and an SVG workshop that Cassie does with the gang at Pland.

#CodePenChallenge: Dreadful Dropdowns

October's challenge is all about Scary UX 👻 Browse through the tricks & treats in our collection of Pens from week one, including Zed Dash's hilariously frustrating "Dropdown Slots".

Webinar: WooCommerce Payments

Join us in a live webinar to check out WooCommerce Payments in action. This is a great opportunity for you to contact our team directly and learn about the advantages of moving payments into the core of WooCommerce. We’ve assembled the top experts to answer your most pressing questions about WooCommerce Payments.

3D Orange Switch

Yoav Kadosh translates an ultra-realistic Dribbble shot by Voicu Apostol to CSS. Check out the subtle movement and depth behind the toggle as it slides.

Window Pixel Dog

It's the pixelated glass dog meme, adorably recreated in real pixels by pokecoder!

FlipBoxes

Amit Sheen animates checkboxes with a supremely satisfying 3D flip animation.

Single div CSS hungry hippo

Lynn Fisher illustrates a winning hippo from the classic Hungry Hungry Hippos board game for the October 6th #divtober prompt, "Hungry".

Bitmap Fill Texture using SVG Matrix Transform

Jared Stanley deconstructs images to create randomized textures. "Surprisingly challenging to reposition the bitmap fill's position/rotation. Requires use of an SVG Matrix Transform to perform the translate/rotate."

Ship on the Ocean

leimapapa gives us a bird's eye view of a sailing ship on a subtly-animated SVG sea. Click the "create your own" button at the bottom of the scene to use leimapapa's SVG pattern generator tool.

94. washi tape

ycw transforms a photo into an ethereal strip of tape with Three.js. You can grab the tape to spin the scene and inspect it from all angles.

Pure CSS Landscape

armanb uses CSS to paint a tranquil, minimal landscape with Hopper-esque hard shadows.

Umbrella

Move the umbrella to bounce the falling objects in this fun interactive Pen from Antoine Wodniack.