Cut-Corner Buttons, JavaScript Ferns, and a chat with Jhey Tompkins

Welcome to 2022!

We spruced up The Spark a bit, hope you like the new look :)

This week, Temani Afif shows us how cut corners can be cool (on buttons). Dillo takes us on a JavaScript botany field trip to learn about Barnsley ferns. And CodePen co-founder Chris Coyier sits down with superstar community member Jhey Tompkins for a chat about Jhey's creative process.

PEN

Barnsley Fern Playground

Dillo demonstrates the beautiful geometry of Barnsley ferns with an interactive Pen. The Pen's description gives a tutorial on the affine transformations that form the fern.

SPONSOR

DigitalOcean App Platform

DigitalOcean App Platform is a Platform as a Service solution that helps you build modern, cloud-native apps for a lot less money. We’ll handle the infrastructure, app runtimes and dependencies, so that you can push code to production in just a few clicks.

PEN

Out-of-Bounds: Generating and disposing of objects in Three.js and Cannon.js

"Properly disposing of objects to free up memory is vital in a WebGL application. As the balls fall over the edge, we rapidly and proportionally decrease their opacity, and when the opacity reaches zero, we dispose of the material and geometry and remove them from the physics world and render lists." From HoraceShmorace.

PEN

CodePen Radio #348: With Jhey

Jhey Tompkins is one of the most prolific CodePen creators out there! His creations tend to have a twist of whimsy while being beautifully designed as well as pushing the platform in unique ways. You’ll always be surprised at a Jhey Pen! Chris talks with him about the creative process, problem-solving, and sharing what you learn.

SPONSOR

Secure Apps Automatically

We create, manage and renew your SSL certificates and also protect your apps from DDoS attacks. Focus on what matters the most: building awesome apps. Let us handle provisioning and managing infrastructure, operating systems, databases, application runtimes, and other dependencies.

PEN

Based on Moirémotion

Toshiya Marukubo pays tribute to the interactive print book "Moirémotion" by Takahiro Kurashima in JavaScript. Hover to move the moiré panel over the background and create the illusion of animation.

PEN

Generative Snowflakes

"Every snowflake is individual". Huge, colorful flakes fall and accumulate in this generative snowstorm built with Cannon and Three.js by Lea Rosema.

PEN

The Matrix Resurrections

This minimal take on The Matrix series' iconic green lines of code is #26 in a series of CSS/JavaScript "digital posters" from Sparklingman.

PEN

Best CSS 3D Cuboid Ever

"How many DIVs do we need to make a cube? Seven? Six? Probably three? NO. Two DIVs are enough not only to make a cube but also to make a flexible cuboid. Here is a demo Pen showing how we can do that". From S. Shahriar.

PEN

Cut Corner Cool Button

Can't go wrong with a cool button! Temani Afif shares a trio of button styles with "No extra element, No pseudo element. Easy to adjust using CSS variables".

SPONSOR

Build and Deploy Apps at Scale

Simply point App Platform to your Github or GitLab repository and let it do all the heavy lifting related to your infrastructure. Build, deploy, manage, and scale apps • Support for Node.js, Python, Go, PHP, Ruby, Docker, static sites, and more • Zero infrastructure management • Highly scalable

PEN

Moon Surface (416 Bytes) #PetitePatterns

Bence Szabo creates a moon surface pattern as the final piece in a yearlong personal challenge, #PetitePatterns: "to create a unique organic pattern or texture each week in pure SVG. Size limit was 560 bytes (2 tweets)." Congrats, Bence!

COLLECTION

#CodePenChallenge: Flip

Flip through our collection of Pens from the final week of the December "Animation with GreenSock" challenge, including Manolis Kalafatis' flippin' clever anagram.

SPONSOR

Scale Apps, Not Costs

Keep costs low and easily optimize resources and costs as you scale apps. By running App Platform on DigitalOcean’s infrastructure, we make it simpler for you to control costs. Build, deploy, and scale apps and static websites faster and easier than ever using a simple, intuitive interface. Get started for FREE!

PEN

Single Div Flickering Neon Text

Sometimes, a little nudge is all you need. anniebombanie shares a CSS text animation with a friendly reminder on the first step of any important process: just start!

PEN

FizzBuzz

Noah Raskin gives the infamous coding challenge "FizzBuzz" a stylish reset with this tidy table of results.

Other News

Alex Riviere gets into the details of The JavaScript `in` Operator with lots of helpful embedded Pens.
Geoff Graham recreates the Hidden Brain Podcast logo in CSS.
From the "don't do this in prod" files, Henry Desroches shares a spectacularly frustrating concept: Tantalus.js

CodePen PRO

Need to make a Pen, Project, or Collection private? That’s just a toggle away with CodePen PRO. Prefer everything you make is private by default? No problem. And if you are the type that makes private things and then makes them public when they are ready, you’re in luck, that first private-to-public switch is when we send the Pen to the feeds.