GraphMandala

Import

svelte
import { GraphMandala } from 'markgraphy';

Basic usage

svelte
<GraphMandala
  title="example"
  animated={true}
  cols={48}
/>
[ example ]

the circle that holds

Props

PropTypeDefaultDescription
titlestring—Caption drawn on the top edge as [ TITLE ]. Uppercase, 1–2 words.
animated?booleantrueAnimate the bloom. Default true. Reduced motion freezes a fully bloomed frame.
cols?number48Width of the scene in characters; at least 38 so the outermost ring fits. Default 48.
rows?number24Height of the scene in rows; at least 20 so the circle fits the cell aspect. Default 24.
folds?number8Rotational folds (K). One cell of the canonical petal is rotated K times. Default 8.
rings?number5Number of concentric lotus-petal rings. Default 5.
speedMs?number130Milliseconds per tick. Default 130.
seedNum?number11Seed for the per-ring radius and phase perturbation. Default 11.
label?string'the circle that holds'Short caption under the art; the art itself is decorative.
class?string''—

Exported types

  • GraphMandalaProps

Reduced motion

Animation is disabled under prefers-reduced-motion.