RYAN_KELLY.DEV

[ GRAPHICS_GENERATORS ]

> Deterministic, seed-driven SVG generators. Same seed + params ⇒ identical output — usable as talk backgrounds, hero art, or exported assets.

> Tune the controls, then copy a generator's config straight into a talk's frontmatter.

Accent
Seed · 7
Density · 0.50
Opacity · 0.50

Dot Grid

Regular grid of dots with a scatter flaring to full accent.

dot-grid

Diagonal Hatch

Parallel 45° rules — a few pop, the rest stay ghostly.

diagonal-hatch

Node Network

Constellation of nodes wired to their nearest neighbours.

node-network

Contour

Stacked topographic waves with occasional bright bands.

contour

Iso Grid

Isometric lattice of diamonds; some cells fill with accent.

iso-grid

Scatter Blocks

Brutalist confetti of rotated squares — outlined to solid.

scatter-blocks

[ HOW_TO_USE ]

> In a talk's MDX frontmatter, define one or more named backgrounds and pick a deck-wide default (copy it from any card above):

backgrounds:
  node-network:
    generator: node-network
    seed: 7
    accent: '#22d3ee'
    density: 0.50
    opacity: 0.50
background: node-network

> Any slide can switch background by name with a directive — the backdrop only transitions when the name changes: {/* bg: intense */}

> Or render inline anywhere: <GeneratedBackground generator="contour" accent="#39ff14" />

> Generators live in components/graphics/ as pure (params) => svgString functions.