diagram

NestedRadiiDiagram

An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values be dragged.

Install

pnpm add @fractaldesign/machines-ui

import '@fractaldesign/machines-ui/style.css';
import { NestedRadiiDiagram } from '@fractaldesign/machines-ui';

Preview

+- - - - - - - -[ NESTED RADII ] - - - - - - -+
|                                             |
|   ╭ - - - - - - - - - - - - - - - - - - ╮   |
|   |  outer   16px                       |   |
|         ╭ - - - - - - - - - - - - ╮         |
|   |◀ - ▶|  inner   12px           |     |   |
|         ╰ - - - - - - - - - - - - ╯         |
|   |          inset    4px               |   |
|   ╰ - - - - - - - - - - - - - - - - - - ╯   |
|                                             |
|       inner = outer - inset                 |
|       12px = 16px -  4px                    |
+- - - - - - - - - - - - - - - - - - - - - - -+

Outer radius 16px Inset 4px

12px

inner = max(0, 16 - 4) = 12px

<NestedRadiiDiagram initialOuter={16} initialInset={4} />

Props

Prop	Type	Default	Description
initialOuter	number	16	Starting outer radius in px. Default 16.
initialInset	number	4	Starting inset (padding) in px. Default 4.
interactive	boolean	true	Show the sliders and the live CSS preview. Default true.
class	string	''

API

class forwarded to the outer element

Theming

CSS custom properties this component reads.

--border
--graph-accent
--text-primary
--text-secondary

src/lib/components/diagram/NestedRadiiDiagram.svelte