--- name: animated-svg-character-rigging description: Build stylized animated SVG characters with jointed body-part scaffolds, renderer-compatible transforms, and framing QA. Use for turning photos or pose references into looping SVG puppets. version: 1.0.0 author: Hermes Agent license: MIT metadata: hermes: tags: [svg, animation, character, rigging, puppetry, vector-art, smil] --- # Animated SVG Character Rigging Use this when a user wants a person/character turned into an SVG illustration or animated SVG, especially when the request mentions joints, scaffolding, puppet-style body parts, or pose-driven dance/motion. ## Goal Create a stylized, readable SVG character built from segmented body parts with explicit joint pivots, then animate it in a way that survives common SVG renderers. ## Recommended workflow 1. **Extract pose structure first** - If the source is an image, use vision to identify: - head tilt - shoulder line - torso orientation - hip tilt / weight shift - upper-arm, forearm, thigh, and shin angles - negative space between limbs - Do not start by tracing contours blindly. First reduce the pose to a rig. 2. **Choose a simplified body decomposition** - Separate into: - head - hair/front hair/back hair if needed - torso / ribcage - pelvis - upper arms + forearms + hands - thighs + shins + feet - Use rounded tapered shapes rather than detailed anatomical outlines. - Preserve the silhouette cues that make the pose readable. 3. **Build the SVG around local joint origins** - Author each body part in a local coordinate system where the joint sits at or near `(0,0)`. - Nest child parts inside parent groups: - shoulder group contains upper arm - elbow subgroup contains forearm - hip group contains thigh - knee subgroup contains shin - Add visible rig lines / joint circles only if the user wants the scaffold aesthetic. 4. **Prefer nested positioned groups + `animateTransform` for motion** - For compatibility, avoid relying on CSS animation of SVG groups when those groups also have inline SVG `transform` attributes. - This task revealed a real failure mode: some renderers effectively dropped or mis-composed the base transform, causing the figure to render mostly off-screen. - Safer pattern: - set base placement with inline `transform` on `` - animate motion with child groups using SVG `animateTransform` - use separate nested groups when combining base translation and animated rotation - Example structure: ```svg ``` 5. **Center the whole character intentionally** - After drawing, check the character's effective bounds against the `viewBox`. - Align the figure with the scene anchor (for example, a ground shadow ellipse under the feet/center of mass). - If a render shows only a corner of the character, suspect transform composition or viewBox mismatch before rewriting the art. 6. **Validate with static raster QA** - Render the SVG to PNG using a local rasterizer if available. - This is useful for checking: - framing/cropping - subject centering - gross silhouette errors - But do **not** trust static raster QA for animation compatibility; it will not prove the loop behaves correctly. 7. **Run design QA on the render** - Ask vision to check: - is the full character visible? - does it read as the intended subject? - do the limbs attach coherently? - does the pelvis align with the legs? - is the subject separated enough from the background? ## Renderer compatibility lessons ### Avoid this fragile pattern - CSS animations on SVG groups that also already use inline `transform` values. - Some renderers/browser embeddings may render the background correctly but misplace the animated group, often pushing it off-screen toward the top-left. ### Prefer this pattern - Base transform in the SVG element tree. - Animation via `animateTransform` on the same group with `additive="sum"`, or on nested child groups. - One responsibility per group: - outer group = world placement - inner group = idle sway / body bounce - child groups = limb rotations ## Common failure modes ### 1. Character mostly off-screen Symptoms: - only a corner of the figure is visible - background looks correct - the subject is absent from the intended ground/shadow area Checks: - top-level character group translation - transform order - CSS vs inline transform conflicts - viewBox not covering actual character coordinates Fixes: - move the top-level character group down/right into the active viewport - replace CSS-transform-driven motion with nested groups + `animateTransform` - keep the scene anchor (like an oval shadow) fixed and align the figure above it ### 2. Static render looks too dark / unreadable Symptoms: - body merges into the sky/background - details disappear in Telegram or raster previews Fixes: - increase contrast between subject and background - avoid very dark fills against dark skies - add lighter skin tones, highlights, or outline separation ### 3. Rig markers feel disconnected Symptoms: - joints look like floating dots - scaffold lines do not describe anatomy Fixes: - ensure every joint corresponds to an actual pivot - visually align rig lines through limb centers - keep pelvis, shoulders, elbows, knees, and ankles readable ## Output checklist - SVG has a clear `viewBox` - full figure fits inside frame with margin - body parts are grouped by joint hierarchy - animation loops cleanly - subject is centered relative to the scene - if scaffold aesthetic is requested, rig lines and joint circles are visible and anatomically coherent - raster QA confirms framing ## Good defaults - Portrait canvas for full-body characters: around `900x1400` - Use an ellipse shadow beneath the figure as a visual anchor - Keep motion subtle unless the user asks for a bigger dance loop - If delivery platform is chat-based, optimize for immediate readability over ultra-subtle detail ## Notes - A static PNG preview can confirm composition, but the `.svg` file is the actual deliverable for motion. - If a first version renders incorrectly in chat/browser preview, diagnose transform compatibility before redoing the illustration from scratch.