This week: Stacks, Skateboards, and Synths
Generative + Customisable SVG Social Images!
Generate a random, stylish social media image with George Francis' interactive Pen. "I think these could be really handy for startups / blogs with limited design resources. Or really anyone that finds creating social/meta images a drag!"
Webcam x Dices
"Turn on your webcam and get your face on this grid of dices" in this trippy Pen by Louis Hoebregts.
React Color Gradients
Marco Biedermann translates a Dribbble shot by Egor Kosmachev to React for this lovely gallery of gradients.
Sticky Photo Stack
Photos form a stack as you scroll down the page in this CSS image gallery from Bennett Feely.
CodePen Radio #299: Meet CPHub
Chris and Alex are on to chat about all the technical in-and-outs of a new internal project "CodePen Hub".
Layout Template with CSS Grid
"A quick exercise exploring essential layout template setup using CSS Grid and bare minimum DOM." From Stephanie Eckles.
For the third week of the States of Matter Challenge, our host Kristopher Van Sant challenged us to work with the gas state of matter. Check out the Pens from week three, including "CSS Scene - Industrialization and Climate Change" by Shadow Scientist.Sponsored:
Build Cloud-Native Apps Fast
Deliver apps faster with REST, GraphQL, CQL, and JSON/Document APIs. Try DataStax Astra DBaaS. Get started in minutes with 5 GB free.
Random Rainbow Generator Skypack
Did you know you can use Skypack to load JS packages on CodePen? Melissa McEwen's rainbow generator uses randomColor and Chroma. Press the button to generate a new rainbow, then check out the JS panel to see how the imports work.
Interactive Skate Loading
A little skateboarder does some rad tricks in this interactive loader from Aaron Iker. Spend some time with it, there's an easter egg in here!Sponsored:
Tips for scaling a test automation suite
Join Testim’s free webinar to learn how to architect tests to minimize maintenance and maximize reuse. Register before Feb. 2.
Genuary 6 Triangle Subdivision
"GENUARY is an artificially generated month of time where we build code that makes beautiful things." Johan Karlsson's answer to the "Triangle Subdivision" prompt is this gorgeous Pen. Refresh the Pen or resize the preview to generate a new set of triangles.
Play a little tune with your computer keyboard on Alex Lerida's perfect pink synth!
HTML Earth (Made with LUME)
"Do you see the Moon's shadow on Earth's surface when it passes in front of the sun?" Joe Pea demonstrates LUME.js with the beauty of planet Earth.