The
Spark
All the can't-miss links.

Delivered straight to your email each week. Go Sign Up.

Add the feed to your favorite RSS reader and never miss a thing.

Sponsor a week and reach a large audience of designers and developers.

March 20th: Infinite SVGs, GPT-4 Pens, and Back to the Future CSS

Flux Capacitor

Kostantin Denerz brings us "1.21 GIGAWATTS!" of power in this brilliant Back to the Future-inspired animated CSS illustration.

from(), to(), and fromTo() Animations

Get a taste of "GSAP's Bread and Butter" in this detailed rundown of simple tweens with from(), to(), and fromTo() methods from Web Bae.

CSS Sleeping Blob

A blobby lil buddy turns in for the night in this charming animated CSS illustration from Khanh Tran.

GPT-4 Demo Turns a Crude Sketch of a “My Joke Website” into a Functional Website for Revealing Jokes

Did you see Greg Brockman make a Pen from a hand-drawn mockup in the GPT-4 reveal video? We've got that clip for you here, along with more examples of how the CodePen community is experimenting with GPT.

GPT-4 Lines

Luke Meyrick recreates the minimal animation from the GPT-4 website with Pug and SCSS.

Infinite on top

A curvy line races through an infinite track in this SVG animation from Andy Fitzsimon. Watch for the slick transition when the line crosses the middle!

#CodePenChallenge: Radio Buttons

Week two of our "Buttons" challenge was all about radio buttons. Flip through our collection from week 2, including Pens from LadyHolz, Greg Vissing, Temani Afif, and Wakana Y.K.

cultured ink

Sophia Wood answers the #wccchallenge "organism" prompt with this noisy p5.js animation that has big "Arrival" vibes.

Responsive Border Radius with Badge

wheatup shares a tenacious mail count badge that stays in place no matter what the border radius on its parent changes to.

Flock Paper Scissors

If you want to see the rock paper scissors simulator season finale for yourself, leimapapa's got you with this random flocking simulation built with p5.js.

The triangle caterpillar

Amit Sheen shows us how a geometric caterpillar can do the worm in this jaw-dropping CSS animation.

CSS Art: Motorola RAZR V3i

Alvaro Montoro recreates the "most iconic flip phone ever" in such painstaking detail you can practically hear that retro ringtone. Check out Alvaro's CSS Drawings collection for more.

Chris' Corner

I love Henry’s guide: How to Make a Website.

There is precious little recent instructional material on how you can build a website, a perfectly great website, using just the raw materials of the web. Raw HTML & CSS, as it were. But that's not all that Henry's guide is about. It's full of holistic advice going well beyond web design:

Be kind and curious and humble when you’re working with folks, and be extra forgiving of their mistakes, so when the time inevitably comes that you make your own, there’s perhaps some goodwill in the vault for you.

🙏

I do suspect if it’s not just lack of awareness that you can build a website with just hand-written raw HTML and CSS, but more of a then what? situation. Of course, we’re hoping CodePen is a place where that is a good option and are working to make that better every day. But there are plenty of options for getting that locally crafted HTML website to a real website, like Vercel, Netlify, GitHub pages, etc, which all make it pretty decently easy. It would be unfortunate if the DevOps knowledge for getting websites to production is just as much knowledge as actually making websites.

Oh hey this makes me think of a great term thrown out by Robb Owen: Hand-thrown frontends. He compares the website-making process to the ceramics process of making a bowl out of clay.

So, for me, the frontend bowl-making process is a cyclical, non-linear one. On a surface-level it probably doesn’t seem like it’s as efficient as assembling Lego bricks to order, but over time you’ll make more bowls and each phase of iteration will gradually shorten as your skill increases towards mastery.

I’m a sucker for a good ceramics analogy as that’s what my Bachelor of Arts was focused on in college.

Oh! And speaking of Ceramics, have you seen Charlotte Dann’s Ceramics project? It’s probably my favorite generative art project I’ve ever seen. This surface is totally code-generated:

the interface of an interactive ceramics generator with options for material, glaze, blur, and slump multiplier.
Might as well be a photograph of real carved, glazed clay.

Oooooo tricky CSS challenge! Skewed Highlights. Vadim Makeev did up good:

Text that reads 'The European Accessibility Act - a milestone for digital accessibilty'. The first 4 words have a skewed yellow highlight.

You’d think transform: skew() would be involved somehow, but there isn’t a great opportunity for that, especially with arbitrary line breaks and such. Instead, the backgrounds are created with multiple gradient backgrounds (super clever) and fortunately box-decoration-break: clone; makes it look reasonable across lines.

Musing about slight alterations in CSS selector structure and how it affects selections? Sign me up for that party! Bramus compares:

.a .b .c { }
/* Versus! */
.a :is(.b .c) { }

They do look and behave similarly, but the former enforces that “c is a child of b is a child of a” situation solidly, while the latter allows for a situation where c is a child of a which is a child of b. That’s way too hard to understand in words, so here’s an image:

two box model diagrams with the second selecting a c > b > a situation

Demo Pen

Admittedly I don’t reach for :is() all that much, but I suspect usage might go up a bit now that native CSS nesting is here and that all nested selectors must start with a symbol. So a quick way around wanting to nest element selector is wrangling it in an :is():

header {
  h1 { } /* nope */
}

header {
  :is(h1) { } /* yup */
}

Let's end with a little collection of developers looking forward to upcoming tech trends. This is, of course, popular in January and it's March now but gimme a break I'm a little slow sometimes.