This week: Deep Space SVGs, CSS Hacking, and WebGL Watermelons

Save 50% plus free online tickets
Join CodePen's own Chris Coyier and many other awesome speakers at WEB UNLEASHED, the ultimate three-day conference for front-end development experts in Toronto AND Online, happening on on October 14-16. SAVE 50% off an in-person OR grab your FREE online ticket with code CODEPEN
.

Simplify your CSV file import with Flatfile
Streamline your business’s data file import - any file type, any format - all in one place with the Flatfile Data Exchange Platform. Take advantage of the rich library of smart APIs to validate, transform and import your data to your desired location. Get building for free today.

Book a Demo: Build AI-Powered Virtual Assistants
Quickly create intelligent chat and voice-based virtual assistants using advanced technology and generative AI with the industry-leading conversational AI platform from Kore.ai. Book a consultation now to see if conversational AI is right for you!

Windows 95
"This ongoing web experiment by Gabrielle Wee is an attempt to get as close as possible to Windows 95 using primarily CSS and HTML, with a little bit of JavaScript magic".

Trails
A dancing figure spreads colorful trails in this Three.js-powered Pen from prisoner849. Click the scene to change the color scheme.

Arched Toggle Switch
"This switch bends… tradition. The look is based on a Dribbble shot by Alucard." From Jon Kantner.

WebGL Watermelon With Params To Play
Ksenia Kondrashova serves up a trio of wiggly WebGL watermelon slices with your choice of seed size and ripeness.

Pure CSS - Holographic Death Star
maxi83c uses CSS mask-image to create an animated model of the infamous Death Star in that classic grainy blue Star Wars hologram style.

TV backlight
Steve Gardner recreates that cool colorful glow from the back of a nice tv with a combination of CSS filters and opacity.

Expert CSS: The CPU Hack
Jane Ori takes us on a mindbending trip into "unlocking the ability for continuous crunching of data and re-evaluation of state...in CSS, without ever touching JS" in this deep tutorial on dev.to. Don't miss the playable, pure CSS Breakout game at the end!

Distortion on Hover
Hover over the image in finnchillah's Pen to "distort it & apply chromatic aberration to it, responsive to mouse movement." Best viewed in Chrome.

Array.slice in CSS
A friendly toaster pops up a toasty "slice" in this playful Pen from Jhey Tompkins. "JavaScript is toast in this demo 😅"

#CodePenChallenge: Sticky Navigation
Things got sticky in the 3rd week of the September challenge! Browse through our collection from week three, including Pens by Benjamin Koehler, Takane Ichinose, DeyJordan, and Josetxu.

Deep Space
Take a journey into the unknown with Bence Szabo's latest #PetitePatterns — this one's only 557 bytes! Then check out Bence's incredible collection of 90+ more patterns.
Chris' Corner
CSS animation rules. Just have a look at… CodePen lol.
There was a (long) time when it didn’t exist, though. My old buddy Jonathan Snook wrote in 2007 that he didn’t like the idea of animation coming to CSS at all, but had changed his mind by 2009.
They’ve evolved a bit since those early days. They are GPU-accelerated now. We don’t need vendor prefixes on the properties. We can animate more properties, including the values of Custom Properties (especially if we type them). But they haven’t changed that much, and that’s one of the cool things about the web. Actual web platform things don’t change under our feet that dramatically, making them worth learning because that knowledge has a long shelf life.
What also evolves is how people use them, best practices, and the clever tricks that need to be discovered.
Here’s one!
I saw a blog post by Harold Cooper a little while back called Spinning Diagrams with CSS. It’s since been gone’d from the internet, but the ol’ archive caught it and I’ve made a Pen out of it, too, for posterity. Harold was showing off mathematical formulas that benefitted from a 3D look, like this:

I completely wimped out there and used an animated GIF. But Harold did not:
Several people expressed surprise that the spinning diagrams don’t use any JavaScript or animated image formats, just HTML and CSS.
One of the cool parts of Harold’s tricky is using one animation to spin things, and another animation to unspin them. Notice how the numbers at letters appear to move in 3D space, but always “face forward”. Nobody was thinking about that in 2007, I’ll tell ya that.
I remember I first read this post over RSS and the animations worked even in RSS. Probably because the styling was built in <style> blocks that my reader respected. So cool.
Josh Collinsworth wrote Ten tips for better CSS transitions and animations which is full of good practical stuff. Huge fan of #1: “Make them shorter than you think they should be”. I don’t think I’ve ever picked a transition-duration
that didn’t get lower and lower over the time I played with it, and even after deploying.
So many great examples and real-world advice!

Some of the advice, like “don’t use browser defaults”, means then having to replace easing with more bespoke stuff ala cublic-bezier
curves. Josh has a more in-depth post on that as well that is very helpful. I probably rely on browser defaults too much when it comes to this stuff, but sometimes when I play with custom curves they end up feeling worse to me. Maybe I shouldn’t just take the first thing Copilot gives me 😬 and actually understand it.
If you haven’t heard of After Dark, you’ve probably heard of Flying Toasters. It’s this iconic screensaver from the 1990s where, uh, flying toasters fly in sort-of 3D-looking space across your screen. From the top right to the bottom left, actually.
Good news, Bryan Braun did it in CSS, along with all the other After Dark screensavers.

…annnnnd he did that in 2014 which shows you how on top of things I am. (I like clicking on the Contributors page of a repo as it clearly shows you the year of the first commit.) You can kinda get a feel of the vintage by seeing chunks of CSS like this:
-webkit-animation: fly 10s linear infinite;
-moz-animation: fly 10s linear infinite;
-ms-animation: fly 10s linear infinite;
-o-animation: fly 10s linear infinite;
animation: fly 10s linear infinite;
That’s just how we used to roll.
VERY NEW THING ALERT. I need to do a deeper dive on this but I think it’s worth mentioning here right now. I’m assuming you know what cubic-bezier()
is, partially because I literally linked to an article about it from Josh above.
Cubic bezier has four parameters. No more. No less.
The new thing here is linear()
which functions as an alternative for animation timing values, which can take any number of values. Ollie Williams has a great article on it, and I’ll take a quote that he took because it’s a nice quick summary:
MDN explains the syntax:
linear(0, 0.25 75%, 1)
produces a linear easing function that spends 75% of the time transitioning from0
to.25
and the last 25% transitioning from.25
to1
.”<p>A more real-world example looks like this:</p>
animation-timing-function: linear(0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373, 1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877, 0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.981 36.4%, 1.012 38.3%, 1.036,1.046 42.7% 44.1%, 1.042 45.7%, 0.996 53.3%, 0.988, 0.984 57.5%, 0.985 60.7%,1.001 68.1%, 1.006 72.2%, 0.998 86.7%, 1);
Fancy! There is a 92% chance this will be generated by a tool for you, like maybe this one, and others likely to spring up. Get it? Spring?
All those points, well, there is a straight line between them, which I guess is why “linear” is the name. But it’s kind of a sucky name because it makes you think it’s going to behave like the”linear” keyword which is boring and straight all the way through. Oh well.
You should probably read Create complex animation curves in CSS with the linear() easing function by Bramus. Ben Holmes made a very clicky button I’ll make you click over to click.
Adam Argyle’s one-minute explanation will probably do you right, as well.
Remember when CSS nesting was coming of age and browser vendors were putting out all those polls to get you to vote on the syntax? I thought that was kinda cool, even though every single person was just like “can it be like Sass?” and they are like “no” and then they made it just like Sass.
But anyway!
I thought that’s what they were doing with animation-composition
in Bramus’ Specify how multiple animation effects should composite with animation-composition, but it turns out he’s just showing us how to use it.
It’s a little in the weeds really, but it really is something that comes up sometimes with animation. It helps with when multiple animations affect the same property. The transform
property is notorious for making this complicated because one transform
might be rotating an element, while another is translate
moving it, but they would overwrite each other in the past, so you’d have to nest elements or something. Now you can replace
, add
, or accumulate
the values, which is really pretty cool.
My first test was this thinking it would work:
button {
position: relative;
animation-composition: accumulate;
&:hover {
translate: 0 1px;
}
&:active {
translate: 0 1px;
}
}
But nope, I guess pseudo-states like that totally replace the other, so a button isn’t like hovered and active at the same time? I dunno. Honestly, it’s more useful with keyframes than transitions anyway.
OK, last thing I promise. Excellent video: Animation vs. Math.