[CodePen Spark] Loops, Switches, and JS Mathematics

No dark-mode styles — this email renders the same in a dark client.

View this issue on CodePen
Advertisement
Retrieval Augmented Generation (RAG) grounds your model in your data, not its training set. Agentic memory carries context across sessions. Semantic search matches intent, not keywords.
Each depends on the same building block: a vector database. Explore what to evaluate for your use case:
Architecture diagrams: Each pattern mapped with Amazon Bedrock and Amazon Bedrock AgentCore
Evaluation framework: Hybrid search, scaling, hosting trade-offs, embedding pipeline fit, and metadata filtering
Free trials: Test vector databases in AWS Marketplace and start building
Download the Evaluation Guide
This week's CodePen community highlights include a generative loop lab from Pete Benoit, a toggle switch with a life of its own from Jon Kantner, and a collection of Mathtober delights from Sophia Wood.
pen
Manifold Mandala
"Inspired by the video game Manifold Garden, this pen uses wtc-gl and some sweet shader magic to build some uncanny structures. Click+drag to orbit, mouse-wheel to zoom, right-click+drag to pan." From Liam Egan.
collection
Mathtober 2026
JavaScript mathematical mage Sophia Wood's collection of Mathtober is marvelous! Try it out in TV View for a meditative look at the beauty of JS math.
collection
CodePen Challenge: Ghost Talk
In week two of our Halloween Jest Fest, we talked to ghosts 👻 Check out the challenge collection, including Pens by grantjenkins , ikrprojects , gymnase , and grauconejo13 . Want to get in on this frightfully fun challenge? Week 3 is on now !
podcast
CodePen Radio #445: CodePen AI is Here
CodePen co-founders Chris & Alex are on the latest podcast to talk about our brand new AI feature. Ask it to build something, debug some code, optimize something, or even just explain some code or tell you how a particular feature of CodePen works.
pen
Pixel Bug Morph: Pure CSS Dither Dissolve
Hit the switch to toggle between images and watch them dither and dissolve from one to the other in this CSS-only Pen from Sensiblemnd.
pen
Loop Lab - generative SVG playground
"Get a little loopy" with Pete Benoit's interactive SVG playground. Select a starting shape, then slide the toggles to build a loop you like. Once you've got it all dialed in, you can download the SVG with the click of a button.
pen
Toggle Switch With Legs
Flip the switch and the handle stands up and skates across the toggle in this playful Pen from Jon Kantner.
pen
Button powered by GSS
LukyVJ's new GSS "a CSS-like language for 3D scenes" makes its debut with this dazzling galaxy button.
Chris’ Corner
A collection of web design and development news and thoughts from CodePen's own Chris Coyier.
We Love CSS
It warms my old heart to hear Jason Santa Maria wax poetic about modern CSS :
CSS has exploded! Flexbox, grid, many kinds of viewport units, variables, and on and on. So many things we used to patch in to extend CSS or turn to Javascript for are now just part of the spec. The ease with which you can create a flexible type scale or size elements and spacing responsively with clamp … the screen has really matured into its own unique design medium with tailored affordances that aren’t just translations from another medium (print). CSS finally gave the web its own grain .
Part of what’s so great about CSS now is how much it knows. Like Adam says, it knows about the user, the device, variables, layout, and more .
Components/elements/containers whatever , can own all their presentation aspects for nearly any scenario now. They can feel like magic, perfectly adapting to wherever the component author or designer has condoned.
So some of working with CSS has shifted from you just delivering hard instructions to listening to what’s going on on the page and reacting to those circumstances.
So what are people actually doing with CSS these days? Project Wallace has some analytic data around this . ~10% of sites using @container queries is interesting to me! It seemed like they weren’t really taking off for a while, but perhaps they are finding their stride now.
Here are some other fancy things people are doing with CSS:
They are using anchor positioning for fancy stuff like drawing connections and shrinkwrapping text bubbles .
They are using very modern CSS features to handle their light/dark theming, like, ahem, light-dark() and contast-color() .
They are using CSS nesting as a progressive enhancement technique.
They are expanding the ideas behind fluid typography and improving them with modern functions like round() .
You can adjust your email preferences any time, or instantly unsubscribe to emails of this kind. Need help with anything? Hit up support . Interested in sponsoring? Here's our sponsorship info .
CodePen 70 SW Century Dr #1019 Bend OR 97702

Accession

nse/codepen/2026-10-21/4723

From

CodePen · support@codepen.io

Sent

21 October 2026 · 21:00 UTC