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.

January 23rd: Async UI Flows, Subgrid Experiments, and CSS Waves

CodePen Radio #397: User-Generated Content Safety

By listener request, our latest podcast is about the wonderfully-terribly complicated process of keeping a site full of user-generated content safe.

Build Advanced AI-Powered Virtual Assistants

Build intelligent virtual assistants that operate across multiple channels and in over 100 languages. Give customers 24/7 support and minimize live agent interventions with the power of Conversational AI. Get started today for free.

Illuminate Your Mind

Hover/tap around in the dark to reveal the "glittering-cave effect" built with "CSS, gradients, and blending" by Simon Goellner.

Hall of Fame

Steve Gardner assembles a spectacular collection of "The very best CodePens" ranging from early-days classics to recent hits. Flip through to revisit your favorites or find something new!

CSS Pendulum Waves

Amit Sheen is back with a virtuoso performance of CSS physics! Watch the pendulum swing, then hit the arrow to turn the support and view it from a new angle.

Composing async UI flows with Promises

"A fully keyboard accessible flow of screens. They are managed with pure JS promises and animated with pure CSS. The views are promises themselves that I chain together." From Mustafa Enes.

Moving mirrors

25 mirrors reflect two lights to create an ever changing pattern in this Pen by Callum Macrae, inspired by the work of Joanie Lemercier. "What I thought would be a simple project ended up taking over a week - while three.js handles the shadows, the reflections of the light had to be manually implemented in the shader."

Scroll Reveal

A delicious portfolio of treats and text reveal on scroll in this tasty CSS & JS demo from HighFlyer.

#CodePenChallenge: Subgrid

In the 3rd week of the "New CSS" challenge, we got into subgrid! Check out the collection from week three, including Pens by Xionidos, Ashraff Hathibelagal, Henrique F. Schwingel, and majchi.

GSAP CodePens 2022

Scroll through the GreenSock team's favorite GSAP Pens of 2022 in this slick highlight reel, super-powered by GSAP's ScrollTrigger, ScrollSmoother, and SplitText plugins.

Pure CSS morphing polyhedra

Ana Tudor animates a shapeshift from "dodecahedron → rhombicosidodecahedron → snub dodecahedron → rhombicosidodecahedron → icosahedron" with SCSS in this mind-blowing Pen. Check out the Pen's description for an in-depth explanation of how it was made.

minimal svg quadratic waves

Andy Fitzsimon shares an animated SVG wave pattern that's minimal both in design and code: it's <35 lines of HTML & SCSS all told.