NestedRadiiDiagram

Import

svelte

import { NestedRadiiDiagram } from 'markgraphy';

Basic usage

svelte

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

+- - - - - - - -[ 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

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`	`''`	—

Exported types

NestedRadiiDiagramProps