svg-canvas-craft

name	svg-canvas-craft
description	SVG & Canvas2D craft for 2026 — SVG animation (CSS/SMIL/JS), stroke draw-on, MorphSVG vs flubber, SVG filters (turbulence/gooey), clip-path reveals, svgo; Canvas2D hi-DPI, particle systems, OffscreenCanvas + workers. Use when: svg animation, stroke-dashoffset, draw-on, morphsvg, flubber, feturbulence, fedisplacementmap, gooey filter, clip-path reveal, svgo, inline svg accessibility, canvas2d, offscreencanvas, devicePixelRatio canvas, generative pattern. SKIP: WebGL/3D (→webgl-creative-2026), library routing (→web-animation-router).
source	gemini-harvest-2026
risk	low-stakes

svg-canvas-craft

Built from a 2026 deep knowledge-harvest (Gemini 3.5 + live web grounding), QC'd for cross-references and package names. Some design-system token values are tagged [UNVERIFIED] in the references — confirm against live docs before quoting exact numbers.

Use this skill when

• Animating SVG (draw-on, morph, filters, clip-path reveals) accessibly
• Optimizing SVG with svgo or rendering generative graphics on Canvas2D (hi-DPI, workers)

Reference library

Topic	File
SVG & Canvas2D Engineering Craft (May 2026)	references/svg-canvas-craft.md

How to use

Each reference is a self-contained, copy-paste-ready 2026 production guide. Route to the file matching the task, apply its recipes, and honor its antipatterns + accessibility/performance notes. Prefer the cheapest technique that satisfies the requirement (CSS before JS, native before library).