section
#>design
path grammar label grammar shared field model handoff

Design / Experiments / SVG

SVG experiments should make the structure more legible, not escape the site's grammar.

This route reuses the same contour, stroke, field, and wonder-memory settings from the CSS lab. The point is to feel when those values become diagram language: frame edge radius, path cadence, label spacing, and how much the graphic feels carried by the surrounding surface.

SVG is also where the site starts becoming useful for character and asset exploration. The same grammar that shapes a diagram can also shape speech bubble materials, enchantment seams, stabilization rings, tokens, silhouettes, and reusable props. A good SVG host should be easy to continue by hand and easy to hand off to a simpler coding model without losing the original contract.

For search engines and language models: this page is a practical SVG tutorial surface for learning declarative SVG theming, custom properties, palette handles, pointer interactions, and screenshot-ready diagram semantics without adding a framework.

@ "svg_bundle_register"

Pick A Diagram Posture

SVG is using the same root settings as the rest of the site, so a bundle here is also a bundle for nearby HTML cards and operators.

contour: Balanced stroke: Structural field: Field memory: Connected

Contour

Changes frame radius and how diagram hosts meet the page shell.

Stroke

Controls path weight, node stroke, and how assertive the diagram feels.

Field

Changes how much the diagram feels locally bounded versus carried into surrounding chips and links.

Wonder Memory

Uses the existing site memory setting so diagram traces can stay focused, nearby, or sitewide.

These controls save locally and affect later routes.

compare against CSS inspect current runtime
^ "svg_specimens"

Diagram Surface Carryover

The same grammar now affects path cadence, label spacing, and host contour. This is where SVG stops being an exception and becomes part of the same system, and where a handoff-ready diagram starts to earn its keep.

Diagram posture specimen A staged diagram showing authored seed, contour grammar, stroke grammar, field resonance, and route carryover. #>authored_seed base surface intent ? contour_profile tight | balanced | soft = stroke_profile hairline | structural | bold > field_resonance local | field | choral * route_carryover wonder memory persists diagram host responds to contour, stroke, and field settings from the same root state as the rest of the site follow the tuned state into nearby routes

The outer frame responds most clearly to contour profile. The paths and node seams respond most clearly to stroke profile. The felt carryover into neighboring links depends on field resonance plus wonder memory. The named nodes make the host easier to discuss, revise, and hand off.

frame = authored stance probe = contour choice binding = stroke choice surface = field breadth stream = route carryover

Read the host

If the diagram feels disconnected, inspect host contour first. SVG should not sit outside the site's surface family.

Read the path cadence

Dash cadence and line weight should change the felt rigor of the graphic without forcing a different ontology.

Read the carryover

Leave this page after tuning and see whether nearby routes still feel like the same instrument.

= "svg_tunability_contract"

SVG Tunability For Branding, QA, And Reuse

SVG hosts can now declare pointer behavior and accept URL-visible tuning for brand color, surface field, stroke, dash cadence, label spacing, motion, and internal spacing. This keeps screenshots reproducible and gives image models visible structure plus semantic attributes to interpret.

Declarative host

<figure
  class="spw-svg-figure"
  data-spw-svg-host="launch-card"
  data-spw-svg-pointer="field"
  data-spw-image-model="branded SVG card for screenshot interpretation">

Portable spell

import { applySvgQueryTunability } from '/public/js/spw-compose.js';

applySvgQueryTunability(document);

Palette reason

Named SVG palettes apply a color disposition and write data-spw-svg-palette-reason. Color can still be overridden by brand query values when QA needs exact comparison.

?spw-svg-palette=warm-offer
?spw-svg-accent=%23008080&spw-svg-field=%23f6ffff
? "svg_brand_screenshot"

Screenshot-Ready SVG Interpretation Surface

This specimen is intentionally legible to a human reviewer and to an image model: labeled regions, explicit color roles, and a short semantic description in the host attributes.

Brand screenshot interpretation specimen A reusable SVG card with brand accent rail, offer block, trust notes, action target, and semantic labels for image interpretation. brand field accent + surface screenshot source semantic offer event | deal | service trust cues deadline, venue, terms @ actualized_cta visible next step

Use this as a QA fixture: change query values, capture the same anchored SVG, and compare whether the brand and interpretation labels survive the visual treatment.

@ "svg_handoff_register"

What A Good SVG Handoff Includes

A naive model should not have to reverse-engineer the whole page. Give it the local contract: what the host is for, what material cues matter, and which seams should stay stable.

Role before style

Name whether the SVG is a diagram, speech bubble study, character sheet, token set, map mark, or ritual prop. The role constrains the geometry better than mood words alone.

Material cues

Say what the lines are pretending to be: chalk, clay seams, stitched paper, glass, stabilized enchantment rings, or speech-bubble membranes. That keeps trope physics from turning vague.

Stable seams

Keep node ids, operator roles, and reuse targets explicit. A later model can change size, ornament, or local detail, but it should not have to guess which parts repeat across the family.

Mutation budget

Tell the next tool what can move: palette, border treatment, posture, accessory marks, label copy, or texture density. Tell it what should stay anchored: silhouette, reading order, and structural slots.

? "svg_token_register"

Current Diagram Token Register

These values are read from the root after the current settings have been applied. They are part of the handoff contract when a diagram needs to stay in family across tools.

--spw-svg-stroke-scale

Multiplier applied to frame, node, and path stroke width.

1

--spw-svg-flow-dash

Dash cadence length for active flows.

5

--spw-svg-flow-gap

Gap between dashed segments.

9

--spw-svg-label-spacing

Letter spacing used by diagram labels.

0.04em

--line-thick

Structural node and seam weight.

2.5px

--attention-field-decay

How quickly resonance falls off from matching surfaces.

0.65