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: Calculating with HTML & CSS, Houdini Paint Flecks, plus a Massive Collection of CSS Loaders

CSS Houdini- Paint API Generative "Fleck" Patterns

"I spotted this pattern on a notebook, and thought 'Hey... this would be great for a generative Paint API worklet!'" from George Francis.

#CodePenChallenge: Recipe Layout

The June challenge got off to a delicious start with a recipe layout, and the community response was amazing! Check out our collection of Pens from week one, including "Recipe Book" by Jackie Zen.

Visualizer 3000

Kit Jenson goes retro with this unique photo gallery inspired by Viewmaster toys. Pull the handle to swap to the next photo.

interferenceHex

fractalkitty creates a playground of colorful shapes with p5.js. "click to create a point. press space to reset, arrows to change shape"

Functioning Calculator (HTML & CSS)

Lillian Kodi builds a working calculator with Pug, SCSS, and very clever use of the checkbox hack.

QuickTime Clock

Jon Kantner uses SCSS to make the Big Sur QuickTime icon keep time with a second hand.

Books

Mikael Ainalem shares a minimal book app concept with progress indicators and zoom on click.

Quidditch motionPath

Christina Gorton demonstrates GreenSock's motionPath plugin with a Quidditch match, with inspiration from Sarah Drasner's FrontendMaster's SVG workshop.

CSS Loaders

Put Temani Afif's collection in your back pocket for the next time you need a loader. This is an absolutely massive collection of impressive single-div animated loaders.

CSS-Only Accessible Map Pins

Michelle Martir shares a set of pretty pastel map pins with ARIA attributes.

Solar Eclipse

Ben Szabo continues a series of #PetitePatterns with this solar eclipse in just 416 bytes!

Circular Pride Gradient

Lea Rosema fills the screen with a vibrant rainbow of color in GLSL with additive color blending. Open the control panel to modify the blur, amplitude, frequency, and motionSpeed.