Mark and sweep

No. 10 · SVG · Modular synth

Tap to collectcut a cable

A modular synth case standing for the heap. Patch cables are pointers; marking lights every module reachable from the stack, and the sweep pulls the ones left dark.

Prompt

/anatomy explain mark-and-sweep garbage collection, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { MarkSweep } from "anatomy-figures";

<MarkSweep theme="light" />

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

page.tsx

import MarkSweep from "anatomy-figures/mark-sweep";

Theme it

Five themes (dark, light, paper, blueprint, sepia), or your own colours through tokens. Every token.

page.tsx

<MarkSweep
  theme="light"
  tokens={{
    "--anatomy-card": "#ffffff",
    "--anatomy-lit": "#e5484d",
  }}
/>

Without React

index.html

import { define } from "anatomy-figures/element/mark-sweep";

define();

<anatomy-mark-sweep theme="light"></anatomy-mark-sweep>