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.
Kit Jenson goes retro with this unique photo gallery inspired by Viewmaster toys. Pull the handle to swap to the next photo.
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.
Jon Kantner uses SCSS to make the Big Sur QuickTime icon keep time with a second hand.
Mikael Ainalem shares a minimal book app concept with progress indicators and zoom on click.
Christina Gorton demonstrates GreenSock's motionPath plugin with a Quidditch match, with inspiration from Sarah Drasner's FrontendMaster's SVG workshop.
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.
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.