This week: CSS Retro Gaming, Shader Ghosts, and JavaScript Abstract Art
Hilma Af Klint
Murilo Polese pays homage to pioneering abstract artist Hilma af Klint with a gorgeous JavaScript animation of af Klint's early 20th century painting "The Swan".
Gloopy Webpage Border
James Hancock crafts an interactive "GLSL shader made with Inigo Quilez's 3D Perlin noise function". Use the sliders to experiment with the thickness, intensity, and noise values.
Slice
Peter Garrow carves a pie-shaped slice out of a pumpkin in this tasty single-div CSS illustration for the #divtober "Slice" prompt.
CodePen Radio #337: ES Modules on CodePen
CodePen co-founder Chris Coyier takes you through the ins & outs of using ES modules in the latest episode of CodePen Radio on TV.
Shader Ghosts
Bouncy ghosts haunt a shiny chessboard world in this WebGL fragment shader demonstration from pjkarlik.
CSS Only Retro Dungeon Maze Puzzle
Takane Ichinose pushes the checkbox hack to its absolute limit in this fully playable maze game. "My tips for you in playing this game; Move slowly, you might get the key without noticing."
Single Div CSS Tin Woodman
Using a delightful vintage illustration style, Lynn Fisher assembles a CSS tin man in want of an oilcan for the #divtober prompt "Squeak".
P5js SVG Flow Field
Adam Kuhn is "channeling my inner @georgedoescode" with a beautifully textured generative SVG flow field. Click to create a new field!
Squid Game - Opening Title
Louis Hoebregts uses GSAP to recreate the title animation from Netflix's smash hit "Squid Game".
Gentle Button "Explode"
Cassie Evans shows that not every explosion has to be a catastrophe with a gentle burst of pastel shapes that pop out placidly on hover.
#CodePenChallenge: Terrible Text Fields
For the 2nd week of the Scary UX challenge, the CodePen community summoned up some truly terrible text fields. Check out our collection of Pens from week two, including C-3D2's hilariously unhelpful text field!
Reduced-motion Toggle
"Be sure to keep accessibility in mind when designing for motion". Michelle Barker presents two equally-appealing UI options with and without motion at the flip of a toggle.