Network map
A hub joined to its nodes; done nodes fill in and their links go solid, the rest stay hollow and dashed.
Features
- A hub and its nodes in SVG; done nodes fill and their links go solid.
- Labelled, every node is a link that says whether it is done; bare, it is a decorative glyph.
- Strokes keep their width at any size.
Use it for
- Progress through a site or a course.
- A small network diagram.
On this site
- Every page: the footer mapThe site as the network it describes: pages you have visited fill in.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
hub / nodes | { id, label, href?, at, done?, labelAt? } | at and labelAt are in view-box units. |
labelled | boolean | Labels and links. |
viewBox | string | The drawing's frame. |
Accessibility
- Labelled: a group of links that say visited or not visited yet.
- Bare: aria-hidden.
Source
The code is in src/kit/network-map.tsx in runets, MIT licensed.