Rim light

No. 46 · Early example

The rim at full: the edge faces the keyThe rim, as bright as each edge’s facingWhere each lamp’s light landsA small studio with a pill-shaped control on a turntable. The key lamp stands at the top left, along (−0.6, −0.8) on screen, and the fill stands opposite, its knob on the dimmer at half. The stroke round the rim is as bright as each edge’s facing: full where the edge faces the key, half where it faces the fill, and only a trace at the two points where it runs along the light, from the 0.03 of glow every edge keeps. The line fades over the first 1.5 px inside the edge, and where the rim is brightest the b⁶ glow lifts the last few pixels with it. Turn the table and the bright arc stays where it is: the light is fixed on the screen, not on the pane. This pill is a control, so its rim is 0.42; a clear pane uses 0.16.

A small studio with a pill-shaped control on a turntable, a key lamp and a fill on a dimmer, lighting its rim by how squarely each point faces them.

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

<Studio theme="light" />

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

page.tsx

import Studio from "anatomy-figures/studio";

Theme it

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

page.tsx

<Studio
  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/studio";

define();

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