Token bucket

No. 27 · SVG · Air bench

Hold to punchhover the tape

A pump fills a tank at two tokens a second and a relief valve vents past eight. Each press spends a token to punch a paper tape; with none left, an interlock holds the press shut.

Prompt

/anatomy explain a token bucket rate limiter, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { RateLimiter } from "anatomy-figures";

<RateLimiter theme="light" />

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

page.tsx

import RateLimiter from "anatomy-figures/rate-limiter";

Theme it

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

page.tsx

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

Without React

index.html

import { define } from "anatomy-figures/element/rate-limiter";

define();

<anatomy-rate-limiter theme="light"></anatomy-rate-limiter>