Clyune Component GalleryShape Morph · How it works & code
Isomorphic path interpolation for smooth transformation
Runtime logic
Visiting `/svg/morph`, DemoHost lazy-loads `demos/kits/kit-svg.js` (registry `mod: 'kit-svg'`) and calls `mount(host, { variant: 'morph' })`. mount resolves the variant to family `morph`; `withControls` builds the control panel (several presets + sliders). `createCanvasStage` creates the `<canvas>` (HiDPI ≤ 2×, ResizeObserver) and the info panel. The family’s `build(S)` initialises state and returns the per-frame callback. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21
Dependencies
react 18.3.1
Imported APIs
withControls — Wraps the demo in the shared control panel (presets, sliders, reset); hot-updates or remounts on change; paramsFromSpec — Turns the spec (colour/speed/size/count/extras) into control-panel parameter definitions; createCanvasStage — Shared Canvas 2D stage: canvas + info panel, HiDPI, one rAF loop, pointer state, idle auto-pointer; hueOf — Hue of a colour (0–360°); clamp — Clamps a value to a range; TAU — Constant 2π; fmt — Number formatting (fixed decimals); F — Formula block HTML; S.clear — Clears with the background colour (translucent = trails); S.onFrame — Registers a per-frame callback; its return value feeds the info panel; ctx.beginPath() — Starts a new path; ctx.lineTo() — Adds a straight line to a point; ctx.moveTo() — Moves the pen without drawing; ctx.closePath() — Closes the current sub-path; ctx.createRadialGradient() — Creates a radial gradient; ctx.fill() — Fills the current path; ctx.stroke() — Strokes the current path; ctx.arc() — Adds a circular arc (center, radius, start/end angle); ctx.arcTo() — Adds an arc using tangent lines; ctx.fillRect() — Fills a rectangle; ctx.save() — Saves the drawing state (transform, styles, clip); ctx.rect() — Adds a rectangle to the path; ctx.clip() — Turns the current path into the clipping region; ctx.translate() — Translates the coordinate system
Source code
frontend/src/demos/kits/kit-svg.js: FAM.morph (L180-L195)
Code walkthrough
L180-195: Calls the factory `sFam()` to produce the full definition (spec + doc + build) from the options below. L180-180: Title shown in the info and control panels: “Shape morphing”. L180-180: Range/default of the count slider. L180-180: Extra demo-specific slider/toggle: Stay time. L180-180: Range/default of the size slider. L180-180: Default main colour. L181-181: Help text of the count parameter. L181-181: Help text of the extra parameter. L181-181: Help text of the size parameter. L182-182: Preset buttons: name → parameter overrides (5). L183-183: Body of the “Notes” section. L184-184: Main formula of the “Formula” section. L184-184: Second formula line. L185-195: Per-frame draw function: draws with Canvas 2D `beginPath`, `lineTo`, `moveTo`, `closePath`, `createRadialGradient`, `fill` …; math via `Math.floor`, `Math.hypot`, `Math.max`, `Math.round`; returns readouts `mode`, `cell` to the info panel.
Principles
ptsᵢ = A ptsᵢ · (1 − p) + B ptsᵢ · p p = slow motion (t - stay time) / 1.2) Shape deformation: two paths must be equal to smooth transition, The corresponding point. Here's the circle, Stars, The shapes of the heart are re-sampled by the same points, followed by linear interpolation of each of the two points, and the shapes are continuously transformed from one to the other. When the pointer is near, the point in the vicinity is pushed lightly. SVG It's "The Vector Chart in Text":<path d="M… L… C… A…"> 里 M Means moving to a point, L Draw straight lines, C Draw three Bézier curves, A Draw round a Elimination Translate. Here Canvas 的 Path2D Parsing the same path, then pressing time t 改变描边、形状、颜色等属性，效果与网页里的 SVG Animated same.