Profile

No. 44 · Early example

A pin, one per pixel, resting on the glassThe pin I'm readingWhere the bezel startsA slice through the edge of a clear pane, standing on a bench with its cut face up, to scale: 46 px thick, and the last 26 px are the bezel. A profile gauge rides in on two rails and presses forty spring pins against it, one per pixel, each stopping where the glass is. That is the height the slope adds up to. Across the middle the pins stand level; over the bezel they give way, slowly at first and then fast, and the caliper on the right finds the rim 26.8 px high, about 19 below the middle. The shader never builds this shape; the gauge is only how I show it.

A slice through the edge of a clear pane, to scale, with a profile gauge whose forty spring pins press against the eased bevel.

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 { Profile } from "anatomy-figures";

<Profile theme="light" />

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

page.tsx

import Profile from "anatomy-figures/profile";

Theme it

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

page.tsx

<Profile
  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/profile";

define();

<anatomy-profile theme="light"></anatomy-profile>