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.

December 27th: Practical Three.js, Canvas and JavaScript Exploration, and CSS City Building

#CodePenChallenge: Loop

The 3rd week of the "Animation with GreenSock" challenge got loopy! Browse our collection of Pens from week three, including natszafraniec's colorful loop "Love Hypnosis".

Project Management Has Never Been Easier

Shortcut is made for developers and PMs, providing speedy task management, reporting, and collaboration. Try it for free today!

Grid Items Share Background

Noah Raskin makes clever use of CSS grid to craft a slick catalog-style shopping layout concept. Each department has its own grid item on a shared background image.

CSS (Cascading Style Snowglobe)

Alvaro Montoro let's it snow in this darling CSS snowglobe. Check out the YouTube video linked in the preview for a timelapse of the coding process — plus a little cameo from Alvaro himself inside the snowglobe!

The Persistence of Memory

shirasawa draws inspiration from Salvador Dalí's legendary work to create an interactive layout that juxtaposes elegant typography & a monochrome palette with the psychedelic effect of Dalí's melting clocks.

American Style CSS Building

"Fully responsive American-style CSS building created for my CSS city. I thought it would be much easier to make, but it took me over 4 hours!" From Albert Walicki.

Fake 3D Image

Chris Johnson demonstrates the practical versatility of Three.js with faux-3D on photos. "Processing a depth map image together with a normal image using a fragment shader in order to make a fake 3D image with depth."

The Ultimate Marquee

Magnificode invites Nicolas Cage into a playful example of how to reproduce the (in)famous HTML marquee element effect with CSS. Hover over one of the Cage heads for a surprise.

Tessellated Patterns

Josetxu started making tessellations during the July 2021 "Patterns" #CodePenChallenge — and never stopped! This collection features 6 months worth of perfect pure-CSS tessellated patterns.

CodePen PRO

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. Like: Drag-and-drop uploading of assets, make anything private with the flip of a toggle, collaborate in real-time with Collab Mode, and a whole lot more!

Untitled

"A lot of triangles are scaling" in this wintry study of canvas and JavaScript from Toshiya Marukubo.

CodePen Radio #347: Using Notion

Team CodePen's Chris Coyier and Rachel Smith dig into the details of how we use Notion to do just about everything at CodePen, including planning this newsletter you're reading and the podcast they're chatting on!

The Dots vs. The Bars

"Why not both at the same time?" Temani Afif shares a showcase of ten single-div animated CSS loaders made with a combination of dots and bars.

SVG Watch

Hunor Marton Borbley demonstrates how to create a working "watch" with JavaScript and SVG. Check out the video linked in the preview for an in-depth tutorial on how it was made.

Extra News