Newsletter • Issue 68

Gradient Paths, Loading Disco, and Particle Dancing!

This Week’s LiveStream

A11y & Responsivity with GSAP A11y & Responsivity with

The wonderful Cassie Evans is back on the stream this Tuesday!

Cassie will show us the new gsap.matchMedia()! It’s a new feature that makes responsive and accessible reduced motion animations simple!


Gradient Path Gradient

You can’t apply gradients to SVG’s stroke property, so there’s no built-in way to create gradients on a path.

But there is a way, and it doesn’t use a single gradient. Instead, you create a couple hundred rectangles along the path, each with a slightly different color.

Mike Bostock figured this out back in 2013, and this CodePen is Noah’s take on it. It uses GSAP’s MotionPathPlugin to find the points, and a touch of D3 to get the rainbow values.

Apple Keynote Animation Apple Keynote

The gradient pen above reminded me of this piece by Louis Hoebregts.

While it looks similar, Louis is using canvas to render the gradient. The delightfully bouncy animation is all GSAP.


Astro 1.0 Astro

There isn’t a framework that I enjoy building with more than Astro, and it’s just hit v1.0!

It ships only the JS you need, but lets you build in React, Vue, Svelte, and lots more. The DX is great, and like all good things it uses Vite. It has first-class Markdown/MDX support, and pulling in data from a CMS like Prismic is so simple.

I enjoy Astro so much, you’ll even see my name in the testimonials!

This isn’t an ad, I just really like Astro.

Adventure game graphics with DALL-E 2 Adventure game graphics with DALL-E

People are finding such clever ways to use the incredible DALL-E 2. Here the author creates images and then pixelates them to achieve the old-school adventure game aesthetic.

Shared by Kilian in the Discord community.


Loading Disco Loading

Upgrade your loading spinner with this slick “Loading Disco” by Joe Bell.

The button stroke’s gradient spins around as it loads. Damn is it fun to watch.


Stunning 3D visuals and a clever “text message” interface, but I’ll let their description speak for the excellent content:

Welcome to our DMs! Seen is a collection of chats exploring the interplay between race, ethnicity, and our creative practices and careers, by a group of East and South East Asians in the design industry.

Particle Dancer Particle

Just an incredible combination of flow effects and motion capture, all in Three.js. This is one you’ve got to see in motion.


Color & Contrast

Check out this comprehensive guide on color, made for UI designers. This will be my new go-to when trying to sound smart talking about color.

Shared by Mike in the Discord community.

So long, partner

Thanks for riding along! I hope to see you at Thursday’s stream! Cassie is always a delight to have on.

Your neigh-bor,