Circular Navigation, Grid Math, and Marvelous Modals

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

View this issue on CodePen
Circular Navigation, Grid Math, and Marvelous Modals
This week's CodePen community highlights include an experimental circular navigation UI from Chris Bolson, some impressive grid mathematics from Temani Afif, and an assortment of fun modal effects from ol-ivier.
We were just doing some upgrades to our Asset Hosting feature making uploads faster and we took the opportunity to give CodePen PROs a bit more , on us.
Total Storage
Developer PRO: 10 GB 25 GB
Super PRO: 20 GB 50 GB
Max File Size
Developer PRO: 10 MB 20 MB
Super PRO: 15 MB 30 MB
About double, all around. In case you didn't know, images, particularly on our Asset Hosting, have some serious superpowers .
video
CodePen School with Chris & Shaw
Class is in session on our YouTube channel at 10 a.m. Pacific today! Like office hours with your favorite professor, but actually fun. Join Chris Coyier and Stephen Shaw for live coding, Q&A, and more.
pen
20 New Modal Effects
ol-ivier is back with another set of fun animated modals. Click a button to bring up a modal and see the key CSS feature that makes it work. When you're done with this one, go back and check out the
first set , too!
pen
Bounce! (CSS)
Amit Sheen brings us a bouncing ball on a rainbow trampoline in this pure CSS animated illustration. It's just 77 lines of CSS 😳
pen
CSS Sine Wave Animation with sibling-index() and sibling-count()
"Compositor-friendly CSS wave by staggering translate animations with sibling-index() and sibling-count()." From Mobalti.
link
Extracting Grid Information Using CSS
Building on a previous tutorial on hover proximity , Temani Afif shows us how to extract column and row count and grid item coordinates from randomly-placed grid items with a bit of CSS mathematics.
collection
CodePen Challenge: Baked Charts
In week two of our Charts & Graphs challenge, we baked up some tasty pie and donut charts. Take a bite out of the collection, including Pens by grantjenkins , ikrprojects , visaint , and Giedr-Ju . Want to join in? This week we're doing line and bar charts 📈
pen
Circular nav using :scroll-* & animation-timeline:view()
Chris Bolson combines experimental :scroll- psuedo elements, animation-timline:scroll() , and anchor positioning for this cutting-edge navigation wheel. Click the center of the wheel to navigate through the categories. Chrome only, for now.
pen
Checkerboard Cylinder Illusion
Jon Kantner draws inspiration from the legendary GIF artist Bees and Bombs for this mind-boggling CSS animation. "When one group flips 180°, the next is seamlessly formed out of the background, giving the background the previous group’s color."
CodePen PRO
Invite Someone Else To Edit Your Pen
You can invite someone to be a co-editor of your Pen anytime. All you need to know is their username or email address. This used to be something you could only do on a Team account, but not anymore in CodePen 2.0.
Chris’ Corner
A collection of web design and development news and thoughts from CodePen's own Chris Coyier.
Dave Rupert has a new syntax highlighter: MicroLighter . He wrote about the why . There are a bunch of trade-offs with all the technologies that do this job. The trade-offs here seem pretty worth it for a relatively lightweight, infrequent syntax highlighting job. I mean 2 KB as a base library is pretty amazing, with the languages coming in even smaller. I generated a demo and fiddled around with it a little just to show it works super well on CodePen, naturally.
My favorite part about MicroLighter is how it uses the web’s Highlight API , a feature I was pretty into exploring about a year ago. The idea that it “doesn’t touch the DOM” is kind of amazing to me. I also like how Dave, as the President of Web Components, made it available as <micro-lighter> . I feel like a lot of projects like this would have gone straight for a React component or other framework-specific implementations. Dave can confidently say: you don’t need that, this will work everywhere . Which is true and satisfying these days. You not using web components is a you problem.
Which means I can now drop some hot web component links for you!
Cool term from Ariel Salminen: Progressive Web Components , along with a library .
If you’re curious about the encapsulation potential of web components, Cassondra Roberts’ talk Shining Light on the Shadow DOM from a few years ago is good.
It’s very reasonable for a design system to put form-related elements within custom elements. The pseudonymous mehm8128 has an example with a <label for="checkbox"> and <fancy-checkbox id="checkbox"> . So the real <input type="checkbox"> is now with a Shadow DOM and the real <label> probably can’t “see” it. Well now there is a solution for this . I tested it and it works , in Chrome at least 😬.
Remy Sharp shared a trick I absolutely did not know. In Chrome DevTools, $() maps to querySelector and $$() maps to querySelectorAll . I knew that. Reminiscent of the jQuery days. But now $$$() maps to a query that goes through Shadow DOMs .
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-09-23/2292

From

CodePen · support@codepen.io

Sent

23 September 2026 · 16:00 UTC