GraphSurya

Import

svelte

import { GraphSurya } from 'markgraphy';

Basic usage

svelte

<GraphSurya
  title="example"
  animated={true}
  cols={60}
/>

[ example ]

                                                            
                                                            
                                                            
                         ░    ▒    ░                        
                         ▒▓   ▓   ▓▒                        
                     ░▒   ▓▓░░░░░▓▓   ▒                     
                      ▒▓▓░░▒▓▓▓▓▓▒░░▓▓                      
                         ░▒▓▓███▓▓▒░                        
                    ░▒▓▓░░▒▓█████▓▒░░▓▓▒░                   
                       ▓▓░▒▒▓▓▓▓▓▒▒░▓▓                      
                     ▒▒▓   ░░░░░░░   ▒░                     
                         ▒▓   ▓   ▓▒                        
                         ░    ▓    ░                        
                              ░                             
                                                            
────────────────────────────────────────────────────────────

the mover of days

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
`animated?`	`boolean`	`true`	Animate the day cycle. Default true. Reduced motion freezes a mid-morning frame.
`cols?`	`number`	`60`	Width of the scene in characters. Default 60.
`rows?`	`number`	`18`	Height of the scene in rows. Default 18.
`speedMs?`	`number`	`120`	Milliseconds per tick. Default 120.
`rays?`	`number`	`12`	Number of spokes on the wheel. Default 12.
`seedNum?`	`number`	`5`	Seed for the per-spoke length jitter. Default 5.
`label?`	`string`	`'the mover of days'`	Short caption under the art; the art itself is decorative.
`class?`	`string`	`''`	—

Exported types

GraphSuryaProps

Reduced motion

Animation is disabled under prefers-reduced-motion.