Designing and animating my personal brand mark
Fusing two initials into a single mark, then animating it to loop seamlessly
Context
A personal brand mark to live across web, avatar, and business cards
Two initials, G and Y, that needed to read as one form. The constraint that mattered most after that was the motion, which had to be short, sharp, and seamlessly loopable.
The form
Fusing G and Y by hand, then finessing the geometry with golden-ratio circles
They don't naturally share a stem, and most attempts read as one letter eating the other. I started with sketches, and the form that worked came out of the drawing, setting up the geometry that followed.
Once the shape was there, I used golden-ratio circles to finesse the proportions and pull the relationships into something I could reproduce cleanly. The geometry came after the sketch, as a way to finesse what was already there.
The spacing
Half a golden-ratio circle on every side, taken from the same circle that forms the ear of the g
With the mark finished, it needed a clear-space rule. I went with a half of one of the golden-ratio circles that forms the ear of the lowercase g doubles as the spacing around the mark on every side. The same geometry the mark is built from defines the space it lives in.
The squint test
Passing the squint test, from print scale down to 16px favicon
The mark had to hold up at every scale before I layered any motion on top. The squint test, where you squint your eyes until the detail disappears and check whether the silhouette still reads, is where logos with thin detail or fussy joinery quietly fail. This one passed from print size down to 16px favicon, because the fused G-and-Y shape carries enough mass at every dimension to keep its identity intact.
The animation
A loop with no sudden stops, built from trim paths in After Effects
The motion had to read as continuous, so I ruled out anything that ended on a hard pause or visible reset. I built the animation in After Effects using trim paths to draw the form on, dissolve it back, and redraw, creating a loop with no visible seams. The final sequence exports as a Lottie file, light enough to ship on a website hero or an avatar.
Outcome
Static for print, animated for the web, both reading as the same mark
The static mark lives across web, business cards, and avatars, with dark mode handled by inversion alone since there's no brand colour to manage. The animated version sits at the top of my portfolio, with the same form and logic carrying across surfaces.
