MainSequence / Composition reference

Build the MetaTables icon.

One worked example: preserve the project mark, compose a quiet family signature, then add a separate activity layer. The dimensions below explain this composition; adapt them to the next logo.

1. Build three layers

01 / IDENTITY

Keep the real mark

Place the unchanged logo in a 26 × 26 box at (7, 7) on a 40 × 40 canvas. The table cells and relationship nodes stay legible.

02 / FAMILY SIGNATURE

Balance the corners

Add a detached node at (35.5, 4.5) and a short lower-left diagonal. Keep both outside the logo. Dashed boxes show the reserved space.

03 / ACTIVITY

Scan below the identity

Reserve y = 34.2…38.6 for three short rows. Highlight one row at a time while working. The logo stays fixed; the accent carries the motion.

2. Change the accent with the state

Idle

Node opacity breathes over 4.8 s. Identity stays still.

Thinking

Three small signals orbit the node. No table scan yet.

Working

A highlight scans three rows over 2.4 s. Activity, not progress.

Needs attention

The node becomes a gently pulsing diamond. No flashing.

Check at display size

Motion here demonstrates design states. In the host, use reported agent activity. Pause and reduced motion preserve a readable frame.

3. Adapt this composition to another project
  1. Replace the identity layer. Keep that project's real mark and adjust its optical size. Do not copy MetaTables' table imagery to an unrelated agent.
  2. Keep a clear activity area. This example uses the lower band. A wider or taller logo may need another placement or less detail.
  3. Choose one relevant action. The moving row communicates the work of this agent. Design the next project's accent around its own purpose.
  4. Verify the result. Inspect both themes, small sizes, stills and the loop. This HTML uses SVG/CSS for explanation; export the owning project's assets in the target host's supported format.
Editable source: logo, composition and animation

This file is the complete runnable example. The excerpts below are read from the same source that draws the previews.

Original logo geometry

Composition and state selection

Motion rules

Source mark: MetaTables project's public/navigation-icon.svg, reproduced here as a teaching reference with its geometry preserved and fill set to currentColor. Production artwork and build tooling belong to the owning project. This example makes no backend requests and changes no installed icons.