dither-kit-svelte

five chart types, generative avatars, buttons, and gradient washes on one tiny canvas engine, for Svelte 5

Composable, dithered charts with a children-as-config API. Ordered-dither fills that hold up in light and dark, entrance animations, a gliding scrub tooltip, selection, winking sparkles, and colour bloom.

scrub it, hover a legend entry to spotlight that series, click to lock it

install

add a chart, no config needed: it pulls core and its deps automatically
or
paste into Claude Code, Cursor, or any agent to install + wire up a chart

also available: bar-chart, radar-chart, and core. swap the last path segment. files land in src/lib/components/dither-kit/.

+ prefer the @dither-kit namespace?
register it once in components.json, then add by @name: 
// components.json
{
  "registries": {
    "@dither-kit": "https://dither-kit-svelte.jimmyverburgt.com/r/{name}.json"
  }
}

charts

tweak these charts from the floating panel →

area

bar

line

pie

radar

knobs

variant
"gradient" | "dotted" | "hatched" | "solid"
bloom
"off" | "low" | "high" | "aura" | { blur, brightness, opacity, saturate }
stackType
"default" | "stacked" | "percent"
colors
green blue purple pink orange red grey
animate
animationDuration + replayToken for entrance and replay
interactive
false = decorative spark, no crosshair or tooltip
<!-- tiny decorative spark, no axes, no tooltip -->
<Sparkline data={[3, 7, 5, 9, 8, 12]} color="green" bloom="aura" />

beyond charts

standalone: none of these pull in the chart engine

avatar

deterministic from the name: 32 mirrored pattern bits × 2 mirror axes × 180 hues ≈ 1.5 trillion avatars. half fold left/right, half fold top/bottom.

button

a real <button>. the dither eases denser on hover, denser still while pressed. size it with class like any button.

gradient

from
to
your footer the wash fills whatever relative container it sits in