One pane

No. 34 · Early example

The glass, on topA layer it is drawn fromBezel, 34 pxcopyTo() into the 2D canvasOne frosted pane as a die set, taken apart into the layers it is drawn from and stacked bottom up on four guide pillars that stand on the corners of the pane’s 360 × 220 box. At the bottom, the picture behind the pane. Above it, the frosted copy I make of it: it covers the box plus 100 px on every side, the reach of the bend and the blur (6 × 11.8 + 3 × 9 + 2), and I draw it at half size, 280 × 210. Then the distance field, just the size of the box, engraved here in rings 12 px apart. On top, the glass, 40 px thick, flat in the middle and curved only in its 34 px bezel, the one band where the picture bends, by 71 px at most. The result is copied into the pane’s 2D canvas, the small frame on the front ledge.

A frosted pane as a die set, taken apart into the layers it is drawn from and stacked bottom up on four guide pillars.

Drawn while the skill was being made, for a long article on rendering frosted panes in WebGL.

Install

npm install anatomy-figures

In your code

page.tsx

import { OnePane } from "anatomy-figures";

<OnePane theme="light" />

Or load this figure on its own, so the others never download:

page.tsx

import OnePane from "anatomy-figures/one-pane";

Theme it

Early examples keep their own light and dark palettes: theme picks one, and --anatomy-card sets the ground.

page.tsx

<OnePane
  theme="dark"
  tokens={{ "--anatomy-card": "#000000" }}
/>

Without React

It still draws with React inside, so install react and react-dom next to it.

index.html

import { define } from "anatomy-figures/element/one-pane";

define();

<anatomy-one-pane theme="light"></anatomy-one-pane>