Lab Svg Defs

A drop-in <defs> block that registers a coordinated set of gradients, patterns, and filters used by "lab" / "workbench" style backgrounds — a soft tinted glow, a top-to-bottom node sheen, a corner vignette, and a 20×20 dot-grid pattern.

All IDs are prefixed so multiple instances coexist on the same page without colliding.

Installation

npx shadcn@latest add https://craftbits.dev/r/lab-svg-defs.json

Usage

import { LabSvgDefs, labSvgRefs } from "@craft-bits/core";
 
const r = labSvgRefs("my-lab");
 
<svg>
  <LabSvgDefs id="my-lab" />
  <rect width="100%" height="100%" fill={r.grid} />
  <rect width="100%" height="100%" fill={r.vignette} />
  <g filter={r.glow}>
    <circle r={20} fill="var(--cb-accent)" />
    <circle r={20} fill={r.nodeGrad} />
  </g>
</svg>

Understanding the component

1. Drop inside <svg>. LabSvgDefs renders an SVG <defs> element. It must live inside an <svg> to register its gradients, patterns, and filters.
2. Unique id prefix. Every gradient / pattern / filter is prefixed with the id you provide (or a stable sanitized useId() if you omit it). Multiple lab visualizations on the same page never clobber each other's defs.
3. Four pieces, one prefix. glow (tinted Gaussian-blur bloom), nodeGrad (top-to-bottom sheen), vignette (soft corner darkening), and grid (20×20 dot pattern). Each one is reachable by labSvgRefs(prefix).
4. Theme-aware defaults. gridColor and glowColor default to var(--cb-fg-muted) and var(--cb-accent) so the defs adapt to the active theme.

Props

Accessibility

• <defs> is non-rendered SVG content — it has no a11y surface of its own.
• The <svg> that hosts LabSvgDefs should still carry role="img" and aria-label describing the visualization.

Credits

• Extracted from: terminal-dreams (src/components/recipe-lab/shared/LabSvgDefs.tsx).