Back to Posts

Gravity Falls Logo

July 15th, 2022 - 2 minute read


I pick up and put down a lot of side projects, a lot of the time never to return to them again. I think normally it's down to the size and scope creep, or something in my life takes priority and I don't feel like going back to it after.

Something I've been interested in trying out is just doing very tiny but finished and complete pieces of work, I was thinking of calling these "sketches". They aren't big enough to big whole "project" but should only take 2 hours to 2 days maximum.

Anyway, I was re-watching Gravity Falls recently and thought it might be fun to try to re-create the logo with just CSS, it seemed like the perfect candidate to try out the new idea.

For reference the logo on the intro screen looks like this:

There's two hurdles I couldn't quite make it over, but if anyone has any ideas I'd love to hear them:

- I thought I could just skew the text or layer up multiple versions but the text has a kinda 3D extrusion effect going on. Without reaching for something like React-Three-Fiber I'm not 100% sure how I'd achieve that, so I played around with layering copies of the text.

- The warp effect is kinda possible with CSS but it's hard to arch the text. There's nothing for that as far as I'm aware.

Anyway here it is:

Gravity
Falls

Gravity
Falls

Gravity
Falls