TCP handshake

No. 06 · SVG · Mail ropeway

Tap to connecthut to drop

A mail ropeway between two stations. Canisters flying SYN, SYN with an ACK pennant, then ACK ride the rope across, and each station's semaphore shows its connection state.

Prompt

/anatomy explain the TCP three-way handshake, interactive

Install

npm install anatomy-figures

In your code

page.tsx

import { TcpHandshake } from "anatomy-figures";

<TcpHandshake theme="light" />

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

page.tsx

import TcpHandshake from "anatomy-figures/tcp-handshake";

Theme it

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

page.tsx

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

Without React

index.html

import { define } from "anatomy-figures/element/tcp-handshake";

define();

<anatomy-tcp-handshake theme="light"></anatomy-tcp-handshake>