Logo Stroke Draw
Logo & brandNested rounded squares stroke themselves on in sequence, then hand over to a solid fill as the wordmark masks up
This is the format it was composed for. Switch above to see it lay itself out for another: same animation, re-arranged for the frame.
What you can change · 4 settings
Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.
- Wordmarkwordmark · string
Wordmark set beneath the mark. Short and uppercase reads best.
now: MOTIONSTASH
- Taglinetagline · string
Optional line under the wordmark. Omit for a barer lockup.
now: Code-based motion design
- Ringsrings · number
Number of nested rounded squares in the mark. Three is the balanced default.
now: 3
- Brandbrand · string
Brand token id, one of the keys of BRANDS.
now: slate
For developers · source, dependencies and provenance
Dependencies
No Tailwind, no CSS, no asset files. Inline styles only.
Source
Provenance
Prompt
A logo sting where an abstract mark of nested rotated rounded squares draws itself on stroke by stroke, then the strokes cross-fade into solid fills and a wordmark masks up underneath.
