Skip to content
Site volume
Colourway

3D kit

Block mark

The 2 × 2 MAKR mark as blocks on integer pixels, with gap or overprint seams, from favicon size up.

  • Beta
  • Expressive layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-three/svg
On this page

The mark arrangement at the front camera, snapped to whole pixels so it stays crisp at 16 and 32 px.

Example#

Look of this example
Live render of examples/block-mark/basic.tsx

Usage#

Use the block mark for the 2 × 2 mark drawn from the blocks on whole pixels: the favicon, app icons and very small marks. faviconSvg returns the same drawing as a string for icon files.

  • Seams. gap leaves paper between the squares; overprint overlaps them so the seams print both inks, as the mark's option a does.
  • Sizes. 16 px is seven-pixel squares with a one-pixel seam; 32 px is fourteen and two; letters from 48 px.

Layer and volume#

Art; identical at every volume.

Anatomy#

The parts of examples/block-mark/basic.tsx, numbered:
  1. MarkFour squares on whole pixels..mk-block-mark

Volume#

  • Quiet

    Identical at every volume.

  • Studio

    Identical.

  • Press

    Identical.

  • Rave

    Identical.

Content#

  • Named "MAKR Labs" by default.

Do and don't#

Do

Drawn for the pixel grid.

Don't

The 128 px mark scaled down to 16 px in an icon file.

A big mark shrunk into blur.

Below 32 px, anti-aliased edges smear. The block mark lands every edge on a whole pixel, so the favicon stays crisp.

Fidelities#

The favicon fidelity; faviconSvg returns the same drawing as a string.

Performance#

Server markup, 0 JS.

Gating#

None.

Accessibility#

  • role="img" named "MAKR Labs" by default.

Props#

PropTypeDefaultDescription
size requirednumbernonepx.
colourwayColourwayIdnone
theme"bone" | "night"none
variant"gap" | "overprint"noneGap or overprint seams, from the brand work that settles D-A3.
labelstringnone
classNamestringnone

Generated from BlockMarkProps in packages/overprint-three/src/svg/block-mark.tsx.

Tokens#

System tokens (6)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorthreeThe block model, physics and the SVG and CSS fidelities (P1-T9 to P1-T12): the cast, the logo, mark and pile-a arrangements, the rain and tidy kit constants, the cannon-es PhysicsWorld with the hard settle cap and keep-out columns, letters baked from Anybody, BlockCss, BlockScene with its drop, the card hop, BlockSvg, BlockStill, blockSvgString with resolved hex, BlockMark and faviconSvg.