This week: Art with Conway's Game of Life, Checkbox Rasterization, and a little Chaos
3D CSS Flippy Snaps v2
Tiles turn over with a fun flutter sound in this flippin' cool photo gallery from Jhey Tompkins, built with React & GSAP.
Gen Art with Conway's Game of Life
ilithya "made a responsive version of Conway's game of life to make generative art by creating random alive cells and transform them via cellular automation". View the Pen details for in-depth instructions for how to use this fascinating generator.
Walt Disney's MultiPlane Camera
Simon Arnold deconstructs Disney's parallax animation machine in this interactive Pen. Check out the video link for details on how the real camera worked!
"This example shows how to smear the vertices of a circle to create a splat. It uses Two.Circle to get the points and applies it to a Two.Path whose vertices update to squash-and-stretch." From Jono Brandel.
#CodePenChallenge: Knockout Text
The third prompt for November's challenge was Knockout Text, and the CodePen community knocked us out with talent! Check out the Pens from week three, including Sicontis' concert poster featuring some names you might recognize 😉Sponsored:
Startups can get up to $1000 free Notion credit
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.
Lea Rosema continues a series of gorgeous, colorful shaders with this pixelated rainbow wonder. Don't forget to try out the dat.gui controls up top!
CodePen Radio #342: Workers
In the latest episode of CodePen TV on the Radio, Chris and Shaw talk about how we uses Cloudflare Workers with the KV storage to power several things on CodePen, like serve landing pages with the content provided by WordPress yet served on an entirely different Ruby on Rails powered site.
Click to shatter the pane, or let it autoplay and watch a tremendous series of shatters in this interactive SVG animation from Dave Pagurek.
PBR CSS Demo
"Building texture maps for Physically-based-rendering (PBR) materials is a tedious process, but by leveraging CSS for layout and color control, we can retain the benefits of the 2D web and expand their application into 3D!" From Brandel Zachernuk.
DIY Video Games
Tom Miller shares a collection of four handcrafted playable video games, including some options for two to play on the same keyboard.
"Choose an image from your hard disk and have it painted on the screen via checkbox inputs — leveraging the powers of the new accent-color property in CSS". From Emanuel Kluge.Sponsored:
Malicious attacks can wipe GitHub repos
Rewind protects your IP with automated backups of GitHub. Restore your code repositories & associated metadata in seconds.