It Starts With a Frame.
And the frame carries props - set animation, border type, padding, background.
[ graphs | charts | svelte 5 | mdsvex ]
Graphs, charts and animated diagrams for a novel render and aesthetic to markdown notes.
Block glyphs, dashed frames, one accent, thousands of iconsets.
33 graphs, 30 animations, 6 diagrams
— same frame, same accent, same vocabulary.
inspired by the work of Emil Kowalski
Lists, Tables, ASCII.
The frame is a blank canvas - you decide what goes in there.
Static vs Animated.
Lists can be workflows, diagrams can be animations. Bring it all to life.
Examples
From
markgraphy
hello@markgraphy.dev
Bill to
Acme Studio
14 Market Street
San Francisco, CA
| Description | Qty | Rate | Amount |
|---|---|---|---|
| Design system | 1 | 4,200 | 4,200 |
| Motion pass | 1 | 1,800 | 1,800 |
| Docs rewrite | 8h | 180 | 1,440 |
- Subtotal
- 7,440
- Tax
- 0
- Amount due
- 7,440
Net 30. Wire to the account on file.
| Decision | Reason |
|---|---|
| ease-out on enter | feels snappier |
| 180ms, not 400ms | feels faster, more responsive |
| springs for gestures | they carry your momentum |
| scale 0.97 on press | it makes the UI feel alive |
| no animation at all | you open it hundreds of times |
tap
server
update
tap
update
server syncs
- src/lib
- graphs
- GraphStat.svelte
- GraphTable.svelte
- frame
- Graph.svelte
draft
edit
shipped
12,400
SepOctNovDecJanFebMarAprMayJunJulAugSep
MWF
·░·░▒··
··░▒░░·
░░▒·░··
·▒·░·░░
··░░·█·
·░··█··
···█░··
··█··░·
·█··░▒·
···░▒··
·░░▒·░·
·░▒·░··
·▒░░···
··░··█·
·░·░█··
░░·█···
··█·░░░
·█░·░▒·
···░▒░·
··░▒·░·
·░▒·░··
·▒·░░··
··░··█·
·░··█░·
···█···
·░█··░·
·█··░▒·
··░░▒··
░·░▒·░·
·░▒░░·░
·▒·░···
··░·░█·
·░░·█··
···█·░·
··█░·░·
·█··░▒·
···░▒··
··░▒·░·
·░▒·░░·
·▒·░···
·░░··█·
░░··█··
··░█··░
··█··░·
·█·░░▒·
·░·░▒··
··░▒░░·
·░▒·░··
·▒·░·░·
··░░·█·
·░··█··
···█░··
··█··░·
·······
Frame Showcase
dash type
motion
pad
corner
Built with for Sveltekit.