Designing and animating my personal brand mark

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.

Fusing G and Y by hand, then finessing the geometry with golden-ratio circles

I started with sketches. Fusing G and Y in a single mark was harder than it sounded, because they don't naturally share a stem and most attempts read as one letter eating the other. The form that worked came out of the drawing, and set up the geometry that followed.

Passing the blur test, from print scale down to 16px favicon

The mark had to hold up at every scale before any motion was layered on top. The blur test, where you squint 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.

A loop with no sudden stops, built from trim paths in After Effects

The motion had to read as continuous, so anything that ended on a hard pause or visible reset was ruled out. 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 brief I set myself was short, sharp, and loopable. The final sequence exports as a Lottie file, light enough to ship on a website hero or an avatar.

Static for print, animated for the web, both reading as the same mark

The static mark lives across web, business cards, and avatars. The animated version sits at the top of my portfolio, with the same form and logic carrying across surfaces.