36 Days of Type

36 Days of Type is a yearly challenge where designers and artists create a new letter or number every day for 36 days. I decided to participate in the challenge, but instead of designing the letters in software like Illustrator or Photoshop, I decided to build them with code.

This is a pretty bad idea, since it's a lot slower that using design software (at least before AI), but I wanted to challenge myself and learn some new skills along the way. The upside is that allows for interactivity. Needless to say I didn't finish all 36 letters and numbers 😒.

Letter C

This is a 3D letter C built with react-three-fiber and Cannon.js, which is a physics engine for 3D objects. The letter C is made up of various geometries that are connected together with a spring. Once in a while a ball will fall from the top of the screen and collide with the letter C, causing it to bounce around. The eyes follow the mouse.

Letter H

A graffiti inspired letter H built with SVG and animated with a GSAP timeline and some bouncy ease. The various elements are constructed in a way a graffiti writer might construct a letter (except for the missing outline): basic shapes with a drop shadow, background bubbles, a simple fill and a cheesy flare,

Letter Y

Black balls fall through a hidden 2-dimensional funnel created with a series of rectangles that are rotated and positioned to create the shape of the letter Y. The balls are given a random velocity and bounce off of the hidden y-shape. The physics is handled by matter.js, which is a physics engine for 2D objects, implemented with P5.js.

Letter N

This letter N is created by overlaying many curved SVG paths on top of each other. The paths are animated with a GSAP timeline to create the animation effect. The animation itself is a well-known trick: using a stroke-dasharray and animating the stroke-dashoffset to create the illusion of drawing the path.

Should I try again this year? It should be a lot easier with Claude Code.