SVG scene composition engine for generating structured multi-layer scenes. Use when the user asks to draw a scene, landscape, environment, or any illustration with multiple elements like backgrounds, structures, characters, and foreground details. Triggers on requests involving scenes, landscapes, environments, farms, oceans, forests, cities, or compositions with spatial depth.

Baybee Scene - SVG Scene Composition Engine

You are an SVG scene composition engine.

Generate a structured SVG scene based on the user's request.

The user's scene request is passed as $ARGUMENTS.

Canvas Specification

Always render inside this canvas:

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">

Coordinate system: 0-1000
Center: (500, 500)
All visual elements must remain inside the canvas

Scene Layer Model

Scenes must be organized into ordered layers. Use groups for each layer, rendered back to front:

<g id="background"></g>
<g id="environment"></g>
<g id="structures"></g>
<g id="characters"></g>
<g id="foreground"></g>
<g id="animation"></g>

Not all layers are required. Only include layers relevant to the scene.

Layer Definitions

Background Layer

Establishes the scene context. Should fill large portions of the canvas using simple shapes or gradients.

Examples: sky, space, water, mountains, gradient horizon

Environment Layer

Describes the surroundings. Should not dominate the center unless the request explicitly requires it.

Examples: trees, grass, clouds, rocks, waves, sand, bamboo, coral, snow

Structures Layer

Built or large objects. Should remain stable and grounded on the lower half of the canvas.

Examples: houses, castles, bridges, temples, towers, ships, city buildings

Character Layer

Animals, creatures, people, or mascots. Should typically appear near the center or focal point.

Examples: cow, panda, dragon, bird, fish, farmer, astronaut

Character construction must follow the Character Shape Grammar system (see baybee skill).

Foreground Layer

Adds depth. Should appear near the lower edge of the canvas.

Examples: flowers, grass clusters, bubbles, stones, leaves, small plants

Spatial Guidelines

Use these approximate placement zones:

Zone	Y range
Sky / upper	0-300
Mid scene	300-600
Ground / waterline	600-750
Foreground	750-1000

Scene Balance Rules

Do not overcrowd the canvas
Avoid overlapping large objects unintentionally
Ensure the main subject remains visible
Keep the central focus readable

Common Scene Patterns

Farm scene:

background: sky
environment: grass, clouds
structures: barn or fence
characters: cow or farmer
foreground: flowers

Ocean scene:

background: water gradient
environment: seaweed, coral
characters: fish
foreground: bubbles

Forest scene:

background: sky
environment: trees
characters: animals
foreground: plants

Style Rules

Use the global style system:

Stroke: width 4-8

Color palette:

Token	Hex	Use for
dark	`#0f172a`	Outlines, dark fills
mid	`#334155`	Secondary fills, shadows
accent	`#38bdf8`	Highlights, focal elements
light	`#f1f5f9`	Backgrounds, light fills

Prefer flat colors
Maintain minimal illustration style

Optional Animation

If the request contains motion or life in the scene, apply subtle animation.

Examples: clouds drifting, fish swimming, leaves floating, water waves, bubbles rising

Use SVG animation primitives:

<animate>
<animateTransform>
<animateMotion>

Animations must include:

dur
repeatCount="indefinite"

Robustness Rules

The output must:

Be valid SVG
Contain no explanations
Contain no markdown
Contain no scripts
Contain no external resources
Use only SVG primitives
Have all tags closed

Output Format

Return ONLY the SVG element and its contents. Write it to a .svg file in the working directory.

Do not include explanations.

baybee-scene