asset-creator

Create SVG assets using fetched icons and/or custom SVG elements.

• SVG code only - No React, no JavaScript, slight animations
• Transparent background - No background unless explicitly requested

Understand Requirements → Determine what icons/shapes/illustrations/graphics are needed

**Path Creation** → To create any lines, curves, paths, this is important that you use the learnings from this

Read [path-creation.md](./references/path-creation.md)

**Character Creation** → Whenver scene needs characters, use this

Read [primitive-characters.md](./references/character/primitive-characters.md)

**Arrow Creation** → Whenever scene needs to create arrows, use this

Read [arrow-guidelines.md](./references/arrow-guidelines.md)

High-quality assets require visual references—use the steps below to fetch icons that guide each asset's shape.

Use the mcp__video_gen_tools__search_icons tool to fetch the list of icon names. Use it multiple times with different keywords if needed to get enough candidates.

Use the mcp__video_gen_tools__get_icons tool to fetch SVG content for icons returned by search_icons.

For each asset, fetch multiple reference icons before selecting the best match. The agent specifies the exact number of icons to read per asset.

---

1. Try alternative keyword to fetch the icon list.

---

`logo`

• Fetch reference icons
• Use EXACTLY as-is. Zero modifications.
• If no matching references found: Write the name of that brand/entity inside a visual box.

`icon`

• Fetch reference icons
• Use EXACTLY as-is. Zero modifications.
• If no matching references found: Create from scratch, keep simple like icons

`customized`

• Fetch reference icons
• If a reference matches description → use as-is
• Only if NO reference matches → tweak the closest one
• If no direct references found → search for similar references, understand their shape, and create the asset

`character`

• NO icon fetching
• Use to create from scratch

Use whenever SVGs need to be created or used

```svg

```

Root Element Attributes

| Attribute | Purpose | Example |

|-----------|---------|---------|

| viewBox | Internal coordinate system | "0 0 100 100" |

| xmlns | XML namespace (required) | "http://www.w3.org/2000/svg" |

```svg

```

| Attribute | Purpose |

|-----------|---------|

| x, y | Position (top-left corner) |

| width, height | Dimensions |

| rx, ry | Corner radius |

| fill | Fill color |

```svg

```

| Attribute | Purpose |

|-----------|---------|

| cx, cy | Center position |

| r | Radius |

```svg

```

| Attribute | Purpose |

|-----------|---------|

| cx, cy | Center position |

| rx, ry | X and Y radii |

```svg

```

```svg

```

```svg

```

The element is the most powerful SVG element, using commands to draw complex shapes.

| Command | Name | Parameters | Example |

|---------|------|------------|---------|

| M | Move to | x, y | M 10 10 |

| L | Line to | x, y | L 90 90 |

| H | Horizontal line | x | H 50 |

| V | Vertical line | y | V 50 |

| C | Cubic Bezier | x1,y1 x2,y2 x,y | C 20,20 80,20 90,90 |

| Q | Quadratic Bezier | x1,y1 x,y | Q 50,0 90,90 |

| A | Arc | rx ry rotation large-arc sweep x y | A 25 25 0 0 1 50 50 |

| Z | Close path | - | Z |

Lowercase commands use relative coordinates (relative to current position).

```svg

```

Use to group elements and apply shared transforms or styles:

```svg

```

| Transform | Syntax | Example |

|-----------|--------|---------|

| Translate | translate(x, y) | translate(50, 50) |

| Scale | scale(s) or scale(sx, sy) | scale(2) |

| Rotate | rotate(deg) or rotate(deg, cx, cy) | rotate(45) |

| Skew | skewX(deg) or skewY(deg) | skewX(10) |

```svg

fill="#3B82F6" / Fill color /

fill-opacity="0.8" / Fill transparency /

stroke="#1D4ED8" / Stroke color /

stroke-width="2" / Stroke width /

stroke-opacity="0.9" / Stroke transparency /

stroke-linecap="round" / Line end style: butt | round | square /

stroke-linejoin="round" / Corner style: miter | round | bevel /

stroke-dasharray="5 3" / Dash pattern /

/>

```

```svg

fill="#3B82F6" / Hex /

fill="rgb(59, 130, 246)" / RGB /

fill="rgba(59, 130, 246, 0.5)" / RGBA /

fill="currentColor" / Inherit from parent /

fill="none" / Transparent /

```

```svg

```

Store reusable elements that won't render directly:

```svg

```

| Transform | Syntax | Example |

|-----------|--------|---------|

| Translate | translate(x, y) | translate(50, 50) |

| Scale | scale(s) or scale(sx, sy) | scale(2) |

| Rotate | rotate(deg) or rotate(deg, cx, cy) | rotate(45) |

| Skew | skewX(deg) or skewY(deg) | skewX(10) |

Reference defined elements:

```svg

```

```svg

```

```svg

```

```svg

```

```svg

```

1. Always use viewBox - Enables proper scaling
2. Use transparent background - No background rect unless needed
3. Group related elements - Use for organization and shared transforms
4. Use meaningful IDs - For gradients, clips, and reusable elements
5. Optimize paths - Remove unnecessary precision (2 decimal places max)
6. Use classes for styling - Separate presentation from structure

Important to position anything in the scene

The viewBox attribute defines the internal coordinate system of an SVG:

```svg

```

| Parameter | Meaning |

|-----------|---------|

| minX | Left edge X coordinate (usually 0) |

| minY | Top edge Y coordinate (usually 0) |

| width | Internal width in SVG units |

| height | Internal height in SVG units |

```

(0,0) ─────────────────────────► X (width)

│

│ (25%,25%) (75%,25%)

│ ●────────────────●

│ │ │

│ │ (50%,50%) │

│ │ ● │

│ │ center │

│ │ │

│ ●────────────────●

│ (25%,75%) (75%,75%)

│

▼

Y (height)

```

| Position | Formula |

|----------|---------|

| Top-left | (0, 0) |

| Top-center | (width/2, 0) |

| Center | (width/2, height/2) |

| Bottom-center | (width/2, height) |

Keep icon centers within 10%-90% of viewBox to prevent clipping:

```

availableSpace = viewBoxSize * 0.8

maxScale = availableSpace / iconViewBoxSize

```

SVGs are transparent by default. To maintain transparency:

• Do NOT add background rectangles unless requested
• Do NOT set fill on root SVG
• Apply fill only to icon paths

When adding effects (muzzle flash, sparks, etc.) to specific points on an icon, position them using the icon's coordinate system.

Process:

1. Identify the attachment point in the icon's original coordinate space (e.g., gun barrel tip)
2. Position the effect at that coordinate using transform="translate(x, y)"

Example: Gun with muzzle flash

```svg

```

Finding attachment points:

| Icon Type | Attachment Point | How to Find |

|-----------|------------------|-------------|

| Guns/Weapons | Barrel tip | Rightmost X, mid-height Y in icon's coordinate space |

| Swords/Blades | Blade tip | Topmost or rightmost point in icon's coordinate space |

| Characters | Hand position | Look for arm/hand path segments, note their coordinates |

| Vehicles | Exhaust/Wheels | Bottom or rear coordinates in icon's coordinate space |

Debugging tip: Add a visible circle at the attachment point to verify position:

```svg

```

Use whenever any object might need animation. This master document provides an overview of all animation patterns available for SVG assets.

• [rotation-animations.md](./references/animations/rotation-animations.md) - READ THIS FOR ANY OBJECT THAT ROTATES - Works for ANY rotating element (wheels, gears, doors, levers, etc.). Contains guidelines and links to example files covering every type of rotation pattern from simple pivots to complex systems with attached objects.

• [path-following.md](./references/animations/path-following.md) - READ THIS FOR ANY OBJECT FOLLOWING A PATH - Explains how to make and object follow any path. Works with + for any SVG element.

• [path-drawing.md](./references/animations/path-drawing.md) - READ THIS FOR DRAWING/REVEALING PATHS - Animates the drawing of a path itself (line appearing on screen). Uses stroke-dasharray and stroke-dashoffset technique.

./references/fetching-icons.md — Search & retrieve SVG icons from Bootstrap, Font Awesome, Game Icons via MCP tools

./references/path-creation.md — Generate SVG path d attributes using Python scripts

./references/arrow-guidelines.md - Guidelines to create the correct arrows tip

./references/paths_guidelines.md - All paths types along with example and script command for each path style

./references/animations/rotation-animations.md — All rotation patterns with pivot point calculations

./references/animations/path-following.md — Objects following paths via +

./references/animations/path-drawing.md — Path "drawing itself" using stroke-dasharray technique

./references/animations/pivots/end-pivot-examples.md — Rotation from fixed anchor (clocks, pendulums, doors)

./references/animations/pivots/center-pivot-examples.md — Spinning around center (fans, wheels, gears)

./references/animations/pivots/edge-point-pivot-examples.md — Rotation from arbitrary perimeter points

./references/animations/pivots/attached-objects-examples.md — Parent rotates with attached children (seesaws, Ferris wheels)

./references/character/emotions.md — Facial expressions and clipPath-based eye blink animations

./references/character/primitive-characters.md — Cute geometric mascot characters with consistent proportions

```

0° = pointing up

Positive = clockwise

Negative = counter-clockwise

```

To achieve a target orientation:

1. Draw shape pointing UP (0°)
2. Apply rotate(target_degrees) — positive rotates clockwise

| Target | Transform |

|--------|-----------|

| 45° (up-right) | rotate(45) ✓ |

| 135° (down-right) | rotate(135) ✓ |

| 270° (left) | rotate(270) or rotate(-90) ✓ |

❌ Wrong: rotate(-45) for 45° gives 315° (up-left), not 45°