Frosted copy

No. 47 · Early example

A lightbox and a print: frost is a blurred copy of what is behind the pane, made at half resolution in two passes, then bent by the glass.

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

import { FrostedCopy } from "anatomy-figures";

<FrostedCopy theme="light" />

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

import FrostedCopy from "anatomy-figures/frosted-copy";

Theme it

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

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

Without React

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

import { define } from "anatomy-figures/element/frosted-copy";

define();

<anatomy-frosted-copy theme="light"></anatomy-frosted-copy>