Construction Grid

Overlay a division grid on logo artwork to explain its proportions.

<ConstructionGrid
  mark="brandmark"
  cols={8}
  rows={8}
  caption="Construction grid for the mark"
/>

Usage

Show the configured brandmark on a square, ten-by-ten field. Configure the source artwork in Logos.

<ConstructionGrid />

Examples

Show the brandmark on a square field

The opening preview uses eight divisions on each axis and a custom caption. Omitting these options uses ten divisions and a generated caption instead.

<ConstructionGrid
  mark="brandmark"
  cols={8}
  rows={8}
  caption="Construction grid for the mark"
/>

Use the generated caption

Omit cols, rows, and caption for a ten-by-ten brandmark field with the built-in construction explanation. Replace that caption when it does not accurately describe your artwork.

<ConstructionGrid />

Use a rectangular field

Choose separate horizontal and vertical divisions for a wider mark. Supply a caption that explains your actual artwork rather than relying on the generic caption.

<ConstructionGrid
  mark="logotype"
  cols={12}
  rows={4}
  caption="A rectangular field for the logotype; use the supplied artwork."
/>

Grid behavior

cols and rows control both the division count and the field’s aspect ratio. The grid is an illustration over the supplied artwork, not an SVG geometry editor; it does not inspect paths or prove that curves align with grid lines. Use positive division counts.

API reference