Skip to content
Site volume
Colourway

3D kit

Block SVG

One block as SVG at the house camera: letters, supports and the wood block, for small places and lists.

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

A single block from the model, projected at the house camera.

Example#

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

Usage#

Use a block SVG for one block in a small place: a list item, a card's corner, a line's section head. Letters print their line's ink, the wood block its wood, supports the lead pair until Press.

  • Glyphs. The letters M, A, K and R, the wood // and the support shapes.
  • Name. With label it is a named image; without it, it is hidden art.
  • The same block in CSS 3D is BlockCss, for when it should hop.

Layer and volume#

Art. Letters print their line, the wood block its wood, supports the lead pair until Press.

Anatomy#

The parts of examples/block-svg/basic.tsx, numbered:
  1. TopThe lightest band..mk-b-t
  2. FrontThe mid band, with the letter..mk-b-f
  3. LetterThe second plate, printed on the front..mk-b-l

Volume#

  • Quiet

    Letters in their line; supports in the lead pair.

  • Studio

    The same.

  • Press

    Supports print their own line.

  • Rave

    The same as Press.

Content#

  • A letter block means its line: use K for Websites, R for Growth, A for Software, M for Custom apps.

Do and don't#

Do

Websites

K beside Websites.

Don't

Websites

Growth's R beside Websites.

Every letter block means its line (D-C2). A mismatched letter teaches readers that the blocks mean nothing.

Fidelities#

The SVG fidelity; BlockCss is the same block in CSS 3D.

Performance#

Server markup, 0 JS.

Gating#

None.

Accessibility#

  • label names it (role="img"); without it the block is aria-hidden.

Props#

PropTypeDefaultDescription
block requiredstring | BlockSpecnoneA block spec, or a cast id (`M`, `cube1`, `wood` …).
familyFamilynoneDefault: `familyOf` at the resolved volume (letters and wood print their own).
sizestring | number48px or a CSS length (default 48).
labelstringnoneNames the block (`role="img"`); otherwise `aria-hidden`.
classNamestringnone

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

Tokens#

System tokens (13)

Its own properties (4)

  • --mk-3d-key-w
  • --mk-3d-print
  • --mk-3d-reg-x
  • --mk-3d-reg-y

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.