Generative CodePens, 3D Particle Effects, and GUIs!

---

CodePens

Double Helix | Tom Miller — codepen.io

I’m digging this animated DNA strand, made with SVG and GSAP. Each section is made of two circles and just one line that has a stroke-dasharray to create the gap in the center.

Personal Space | George Francis — codepen.io

George is using his ‘packing’ technique to make sure every creature has its own space on the screen. With a click they’ll move around and find a new spot.

If these little characters were in a video game I’m pretty sure I’d be hooked on it.

Joy Division | Michelle Barker — codepen.io

A lovely tribute to the cover of Joy Division’s classic album art for Unknown Pleasures. Looks like a pixel-perfect recreation, but refresh the page and it’ll generate a new version!

Vaporwave Sketchbook | Cassie Evans — codepen.io

My favorite part of this is how the elements animate into the scene. The line drawing is such a nice touch, and I love the idea of adding a paper feel to the vaporwave aesthetic.

Articles

Three ways to create 3D particle effects | Varun Vachhar — varun.ca

This article by our friend Varun Vachhar shows three different ways to make particle effects. Each effect has an interactive demo with sliders and checkboxes so you can get a sense of what’s affecting the result.

Varun has one of my favorite blogs, so once you’re done with this article, poke around to the others.

Resources

Dat GUI, Tweakpane, and Knobs

Value Editing GUIs

If you’ve ever found yourself tweaking a few numbers over and over again, trying to get a certain design just right, these tools should help!

Each one is a GUI that allows for easy manipulating of values. They each come with types like booleans, colors, ranges, text fields, etc.

Dat.GUI is the classic, and probably the one you’ve seen used in CodePens to let you experiment.

Knobs was introduced to me by Chris Coyier during our holiday stream. It’s specifically built for CSS custom properties and makes editing them a breeze.

TweakPane has my favorite UI of the group and even has some cool features like value monitoring. Thanks to James Totty for showing me this one!

WCAG in Plain Language — thisiswcag.com

I love any resource that makes accessibility guidelines easier to understand or implement. This takes the technical and detailed Web Content Accessibility Guidelines and translates them to short, plain English.

What I’ve Been Up To

It’s been a while since I’ve made a CodePen just for the heck of it. I brushed off some of what George Francis taught us on stream and started making some generative grids. I’m pretty happy with how it turned out.

Some sample results

I hope to put out a little article detailing some of what I learned, but you can check it out here in the meantime:

Generative Grid | Alex Trost — codepen.io

Using SVG.js, George’s utility library, and ColorLovers palettes.

Some personal news: I got a promotion! I’m now Developer Experience Lead at Prismic, and get to lead a fantastic group of folks. It’s pretty exciting and I hope to get the hang of it soon.

So Long, Partner

Thanks for riding with us for another week! As always you can reply to this email to say howdy, or mention what parts you enjoyed and want to see more of.

We’d also love to see you in our super-friendly Discord community.

Your neigh-bor,

Alex