Element Gallery

Every demo is created programmatically from Rust/WebAssembly using the svg-dom crate. Pick a demo from the menu on the left; hover, click and drag the highlighted elements to see live event handling.

Build & serve with cargo demo from the project root, then open http://127.0.0.1:8000/demo/

<rect>

fill · stroke · rounded (rx) · hover (pointerenter / pointerleave swap fill) · click (toggle fill colour)

<circle>

fill · stroke-only · hover (radius grows on pointerenter)

<line>

horizontal · diagonal · thick stroke

<path>

M L Z (closed triangle) · Q (quadratic Bézier wave) · A (elliptical arc / open semicircle)

<text>

plain · bold large · coloured — y positions the text baseline, not the top of the bounding box

<g> — group

Two groups share the same local element coordinates; a transform="translate(…)" repositions each group as a unit. The dashed connector is drawn in SVG root space.

AnimationLoop — requestAnimationFrame

Three simultaneous animations driven by a single AnimationLoop::start closure: radius pulse · horizontal travel · hue rotation

on_click — click counter & reset button

click the button to increment a counter held in a shared Rc<Cell>; the separate reset button (a second on_click) zeroes it. The counter colour cycles on every click.

mousemove — colour wheel

Move the pointer over the wheel: each mousemove reads MouseEvent.offsetX / offsetY, derives a hue from the pointer's angle, and recolours the swatch on the right. One transparent surface captures the pointer so the cursor never flickers.

Modifier keys & contextmenu

click reads the shift / ctrl / alt / meta flags on the event; right-click fires a raw contextmenu handler that calls preventDefault() to suppress the browser menu.

mousedown / mouseup — press state

Press and hold (primary button) to drive a pressed state from mousedown / mouseup; pointerleave cancels it so the button cannot stick down. The readout also lists any shift / ctrl / alt / meta keys held during the press.

pointerenter on grouped SVG

Each bordered group holds two child shapes and keeps its own fire counter. Both groups use the wrapped pointerenter event, so each counter rises only once per boundary crossing; moving between children inside the group does not add extra ticks.

mousedown → mousemove → mouseup — drag & drop

Press the card and drag it: mousedown records the grab offset, mousemove repositions the card (clamped so it stays inside the dashed box), and mouseup drops it. A single transparent surface captures the whole gesture and hit-tests the card itself, so the pointer can move freely without outrunning it.