Svelte 5 component · machines-ui · Diagram
NestedRadiiDiagram
An interactive ASCII diagram of nested border radii, showing inner = outer − inset and letting both values be dragged.
Install
NestedRadiiDiagram is a Svelte 5 ASCII nested radii diagram component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { NestedRadiiDiagram } from '@fractaldesign/machines-ui';Usage
<NestedRadiiDiagram initialOuter={16} initialInset={4} />Props
| Name | Type | Default |
|---|---|---|
initialOuter | number Starting outer radius in px. Default 16. | 16 |
initialInset | number Starting inset (padding) in px. Default 4. | 4 |
interactive | boolean Show the sliders and the live CSS preview. Default true. | true |
class | string | '' |
Related components
PromptLoopDiagram An ASCII diagram of the prompt-feedback loop, stepping through a conversation and lighting each node and…AmplifierDiagram An ASCII amplifier: a small calm wave goes in, a gain slider scales it, and a large wave comes out — a…AsciiDiagram Framed ASCII or Unicode diagram text, with an optional label, a copy button, and accent highlighting of…DiagramEditor An interactive ASCII diagram editor with presets, glyph tools, alignment, and code export.MetricsTableDiagram An ASCII ledger of cost: one row per tool with its call count and time, and a totaled summary row at the…