I was on a friend's website recently and noticed a cool animation of a classical column. This made me curious about animations, so I decided to build one. I got a rough sketch of the Golden Gate Bridge and gave it to Lovable to take a crack at animating it. When I quickly ran out of credits, I moved the project to Claude Code. You can see the final result below.

Here's some notes on what we built:

(1) It's a React component that generates an SVG programmatically using JavaScript math. Every element (towers, cables, deck, and suspenders) is calculated from scratch using 1-point perspective geometry. There's a single vanishing point on the right horizon, and every line in the drawing is derived from it, so the whole scene recedes correctly as if you're standing close to the left tower looking toward the distant one.

(2) The draw-on effect uses an SVG technique called stroke-dashoffset. Every line and curve in the drawing starts fully “hidden” (the stroke dash is offset so it's invisible), then animates to fully drawn. What makes it feel natural is that each element's animation is staggered based on its horizontal position — elements on the left start drawing first, and elements on the right start later, so the whole bridge appears to draw itself left-to-right over about 4 seconds.

(3) The suspension cables are cubic Bézier curves, and the vertical suspenders (the vertical wires hanging from the cables to the deck) had to be placed at mathematically correct perspective-compressed intervals evenly spaced in 3D space. The component uses a binary search algorithm to find the exact point on each Bézier curve where each suspender should attach.

Getting to this place required a lot of iterating and brainstorming with Claude. Fun project with some cool math!