Merge sort

No. 14 · SVG · Chime rack

Hover to stepclick shuffles

A chime rack of eight tubular bells. An overhead traveller rehangs them run by run, always taking the lower of the two front bells, until they ring in order.

Prompt

/anatomy explain merge sort, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { MergeSort } from "anatomy-figures";

<MergeSort theme="light" />

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

page.tsx

import MergeSort from "anatomy-figures/merge-sort";

Theme it

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

page.tsx

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

Without React

index.html

import { define } from "anatomy-figures/element/merge-sort";

define();

<anatomy-merge-sort theme="light"></anatomy-merge-sort>