Back to portfolio

Drawn — Portrait Loading Animation v6.2

Five colors painted from your portrait. The middle expands and wipes the canvas — paints getting painted over. By the time the portrait reveals, you've already met its palette.

9:41 ●●● ●● ●

Here's what we see in you.

You navigate your vibrant career with a blend of confidence and charm, effortlessly connecting with others in every room you enter.

Creating your portrait
effervescent
audacious
vivid

This is you, drawn.

Prototype controls

Example portraits (shuffled palette each generation)

Loading duration

v6.2 — the transition:
• All 5 circles stay fully visible as loading completes
• Canvas stroke finishes, thickens to 4px, warms to accent
• Dominant color expansion begins from center of middle circle (starts at 44px, slightly larger than the well it covers)
• Expands outward in one continuous motion — wipes over the other 4 circles as it grows
• Border-radius morphs from circle to rounded-square, matching the canvas frame
• Fills the entire canvas interior with the dominant color
• Brief beat on the clean color field
• Portrait fades in on top with subtle scale-up
• Stroke settles from 4px to 3px as final grace note

Same flow, in the build

The animation above is the v6.2 design exploration. Here’s the same reveal flow captured from a recent development build — same portrait, same shape of moment, same single decision: go with this one, or try one more. The colors that paint the loading screen are the colors of the portrait that follows.

Drawn portrait reveal screen