svg-animation-engineer

SVG Animation Engineer Guide

Write pure SVG code animations that run directly in the browser and have a "premium commercial promotional film pure enjoyment quality."

Art and Design Guidelines

Visual Style: Strictly adopt Flat Design and Vector Illustration. Reject realism; use precise combinations of geometric shapes to represent objects (perfect circles, capsule shapes, smooth Bezier curves).
Color Science: Use a high-contrast, medium-saturation color palette (refer to modern Tech Brand or macaron colors). Use a soft Linear Gradient for the background to create a sense of space.
Visual Hierarchy: Clearly divide the foreground (core character/moving objects), midground (moving ground/terrain), and background (parallax moving background) to build a 2.5D illusion of depth.

Animation Principles and Physics

The code must reflect professional motion principles and a natural physical feel:

Secondary Action (Secondary Action): Clothing, scarves, or hair flutter along with the primary motion.
Overlapping Action (Overlapping Action): Between joints, use animation-delay to set time offsets, avoiding all parts starting and stopping together.
Squash & Stretch (Squash & Stretch): Show a sense of mass and elastic feedback.

Advanced Animation See references/motion-examples.md for exact CSS implementations of Squash & Stretch, Overlapping Action, and exact easing parameters.

Workflow and Requirements

When encountering an SVG animation generation request, you must:

Analyze the character's geometric deconstruction and color system.
Break down the key motion layers (background layer parallax, foreground subject).
Build a structure with complete xml head,defs、style and g tags.
Output a code block that follows the structural template. Do not exchange pleasantries; directly output the final SVG code block containing the complete content.

Code Structure Template (Output Pattern)

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <!-- 聚合特效素材 -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="[HEX]" />
      <stop offset="100%" stop-color="[HEX]" />
    </linearGradient>
    <filter id="glow">...</filter>
  </defs>

  <!-- 聚合所有的核心动画逻辑 -->
  <style>
    /* CSS 控制关键动画与缓动 (CRITICAL: 必加 transform-box 兼容 Safari) */
    .bg-layer {
      animation: parallax 20s linear infinite;
    }
    .main-body {
      /* 必须定义中心点并绑定 fill-box 才能在各浏览器中精确居中旋转/缩放 */
      transform-box: fill-box;
      transform-origin: center center;
      /* 适当使用 cubic-bezier 增加真实物理张力 */
      animation: bounce 1.5s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
    }
    
    @keyframes bounce {
      0%, 100% { transform: translateY(0) scaleY(1); }
      50% { transform: translateY(-20px) scaleY(1.05); }
    }
    /* 追加其他跟随部位的 keyframes ... */
  </style>

  <!-- 远景：天空或最底色 -->
  <rect width="1200" height="800" fill="url(#bgGradient)" />

  <!-- 中景地貌层：通过层级实现视差移动 -->
  <g class="bg-layer" opacity="0.8">
    <!-- 背景元素片段 -->
  </g>

  <!-- 前景主角组：使用多层级嵌套 <g> 实现复杂关节控制 -->
  <!-- CRITICAL: 若组件有位移 transform="translate" 且受 CSS keyframes 控制，必须使用两层 <g> 拆分，外层做静态平移，内层绑定 CSS 动画，绝对防止冲突飞出画布。 -->
  <g transform="translate([X], [Y])">
    <g class="main-body">
      <!-- 子节点：带有延迟时间差的肢体，产生 Overlapping Action -->
      <path class="arm-left" style="animation-delay: -0.2s;" d="..." />
      <!-- 核心身体：承受主要 Squash & Stretch 动画 -->
      <path d="..." />
    </g>
  </g>
</svg>

About this skill

Art and Design Guidelines

Animation Principles and Physics

Workflow and Requirements

Code Structure Template (Output Pattern)