December 20th: P5.js Kinematics, CSS Timekeeping with Houdini, and Front-End Flurries
Keep your code compliance-ready for SOC2, ISO, or HIPAA compliance audits with Rewind backups for GitHub.
"This started as an exploration of the Screen Capture API but quickly got carried away." Brandel Zachernuk takes you into your own computer screen inside "a fully procedural world" in this jaw-dropping interactive Pen.
For week two of the "Animation with GreenSock" challenge, we learned how to bounce, and squash & stretch. Browse our collection of Pens from week two, including Josetxu's bouncing ball toggle switch.
High-output startups like Headspace and Typeform use Notion to manage their knowledge bases, work cross-functionally, and push projects forward. Now, you can bring Notion to your team. Apply to get up to $1000 free Notion credit.
Jhey Tompkins wields the power of custom properties and Houdini's @property to craft a working (and fully responsive!) stopwatch. Dig into the helpfully commented code in the CSS panel for insight into how it all works.
Take to a Three.js sea in a Viking ship model in this interactive scene from Marian Ban. Open up the "Parameters" menu up top to manipulate the sky and water to make the voyage your own!
Chris chats with CSS fine artist Ben Evans. "Like so many other great artists, Ben’s skills aren’t isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music."
Mustafa Enes celebrates a following milestone with a wiggly SVG rendition of the CodePen logo and floating text. Here's to many more, Mustafa!
Sean Free continues a long-running series of experimentation in the deep sea of P5.js with a new strange creature that's very interested in where your cursor goes.
Alvaro Montoro spreads a little Christmas cheer with this rosy-cheeked CSS illustration of Santa Claus. Check out the video linked in the preview for an 8 minute time-lapse of the process.
It's the most wonderful time of the year! We gathered up a mega-collection of 130+ snowy Pens to fill your screen with flurries. Pop it open in TV View for maximum chill ❄️
An a-peel-ing demonstration of the fun you can have with some artfully applied text shadow, from antoniasymeonidou.
"A generative grid layout that magically re-arranges itself when you move your device pointer! Created using GSAP FLIP, the process involves creating random Quadtree data structures with objects focused around the current pointer position, using those Quadtrees to create CSS grid layouts, filling those grids with items, then animating them." From George Francis.
- Chrome Developers team issued a #Designcember challenge for container query demos, with a Pen template to get you started.
- Learn how to create a dark mode switch that respects the system theme from probablykasper on Dev.to
- Lea Verou makes use of our prefill API to include editable demos in the docs for md-block, " a custom element for rendering stylable (light DOM) Markdown".