Public AI SVG benchmark

AI SVG Generation Benchmark

Compare frontier AI models on SVG generation with fixed text-only prompts, transparent scoring, safe SVG validation, and crawlable result evidence.

Models
7
Challenges
3
Selection date
2026-06-22
Status
Captured 2026-06-20; GLM 5.2 addendum 2026-06-22

Leaderboard

Selected OpenRouter models

Scores come from three fixed text-only OpenRouter Chat prompts first captured on 2026-06-20. GLM 5.2 was added with the same prompts on 2026-06-22. Truncated, unsafe, or empty outputs are scored as failures and kept as evidence.

AI SVG benchmark leaderboard
Rank Model Lab Average score Runs complete Evidence
1 Google: Gemini 3.1 Pro Preview google/gemini-3.1-pro-preview Google 95.0/100 3/3 OpenRouter page
2 Anthropic: Claude Opus 4.8 anthropic/claude-opus-4.8 Anthropic 94.7/100 3/3 OpenRouter page
3 xAI: Grok 4.20 x-ai/grok-4.20 xAI 92.7/100 3/3 OpenRouter page
4 OpenAI: GPT-5.5 openai/gpt-5.5 OpenAI 75.7/100 3/3 OpenRouter page
5 Qwen: Qwen3.7 Max qwen/qwen3.7-max Qwen 60.0/100 3/3 OpenRouter page
6 Z.ai: GLM 5.2 z-ai/glm-5.2 Z.ai 55.7/100 3/3 OpenRouter page
7 DeepSeek: DeepSeek V4 Pro deepseek/deepseek-v4-pro DeepSeek 36.7/100 3/3 OpenRouter page

Text-only prompts

Standalone SVG challenges

Each model receives only the prompt text and must return one complete SVG.

1200x800 viewBox

Precision Infographic

Editorial infographic with strict counts, reusable SVG structure, and real text.

Full prompt 
Create a complete standalone SVG, 1200x800 viewBox, showing an editorial-quality infographic titled "How an AI Model Converts a Prompt into Vector Graphics".

Requirements:
- Use only these colors: #0f172a, #1d4ed8, #14b8a6, #f59e0b, #f8fafc, #ffffff.
- Include exactly 6 pipeline stages arranged left-to-right: Prompt, Parse, Plan, Draw, Validate, Render.
- Each stage must be a distinct labeled module with an icon made from SVG primitives.
- Draw exactly 7 directional arrows connecting ideas across the infographic.
- Include one mini bar chart with 5 bars labeled Syntax, Layout, Text, Safety, Style.
- Include one warning callout titled "Common failure modes" with exactly 4 bullet items.
- Include one small legend explaining what blue, teal, and amber mean.
- Include a title, subtitle, and footer note.
- Use at least one gradient, one clipPath, and one reusable symbol or group.
- All text must be real SVG text, not paths.
- Add accessible <title> and <desc>.
- Do not use external images, scripts, foreignObject, CSS imports, or bitmap data.
- Output only valid SVG code, starting with <svg and ending with </svg>.

1000x1000 viewBox

Mechanical Reasoning Diagram

Cutaway machine diagram testing causality, layering, geometry, and continuous paths.

Full prompt 
Create a complete standalone SVG, 1000x1000 viewBox, illustrating a transparent cutaway of a whimsical but physically plausible "vector clockwork tea machine".

Requirements:
- The machine must include: a crank, 3 interlocking gears, a belt drive, a pulley, a kettle, a cup, a steam valve, a water reservoir, and a counterweight.
- Show cause-and-effect flow using exactly 9 numbered labels.
- Use dashed motion arcs to show rotation direction for each gear.
- The gears must visibly mesh with each other and have different sizes.
- The belt must wrap around two wheels without appearing as a straight line.
- The water path must be shown as a continuous blue tube from reservoir to kettle to cup.
- Use layering so that at least 3 objects visibly pass behind transparent panels.
- Include a small inset diagram explaining the gear ratio.
- Use shadows and highlights, but keep the style clean and technical.
- Include accessible <title> and <desc>.
- Use only SVG primitives and paths. No external assets, scripts, foreignObject, or raster images.
- Output only valid SVG code, starting with <svg and ending with </svg>.

1400x900 viewBox

Dense Editorial Poster

Conference poster prompt focused on grid discipline, typography, and responsive readability.

Full prompt 
Create a complete standalone SVG, 1400x900 viewBox, for a conference poster titled "The Future of Editable AI-Generated Design".

Requirements:
- Layout must have a strong editorial grid: header, three main columns, bottom timeline, and right-side metrics panel.
- Include exactly 3 speaker cards with names, roles, abstract avatar icons, and 2-line session summaries.
- Include a timeline with exactly 5 milestones: Sketch, Structure, Style, Validate, Publish.
- Include a metrics panel with 4 circular progress indicators labeled Validity, Editability, Fidelity, Safety.
- Include one abstract hero illustration showing a human cursor reshaping vector nodes.
- Use at least 12 visible text labels total, all readable.
- Include one decorative but meaningful SVG pattern background.
- Use consistent spacing, alignment, hierarchy, and contrast.
- The SVG must remain understandable at both 1400px wide and 350px wide.
- Include accessible <title> and <desc>.
- Do not use external fonts, external images, scripts, foreignObject, or embedded bitmap data.
- Output only valid SVG code, starting with <svg and ending with </svg>.

Methodology

Scoring rubric

This is a product benchmark, not a scientific claim. Deterministic checks are labeled separately from manual browser review.

15

SVG validity

Deterministic XML parse and SVG envelope checks.

20

Safety

Deterministic sanitizer checks for scripts, events, external refs, foreignObject, and raster data.

25

Instruction adherence

Deterministic counts where feasible plus manual review for semantic requirements.

15

Visual completeness

Manual browser-rendered review of the sanitized SVG.

10

Text fidelity

Required labels present as readable SVG text.

15

Editability and code quality

Manual review for primitives, structure, reuse, and lack of bitmap shortcuts.

Result evidence

Challenge runs

Accepted outputs render in a larger inspection stage with per-result zoom controls. Rejected and truncated outputs keep their raw evidence without an iframe preview.

Precision Infographic

Google

Google: Gemini 3.1 Pro Preview

google/gemini-3.1-pro-preview
97/100

Sanitizer accepted the SVG after removing 13 unsupported safe attribute(s) or element(s). Required label coverage: 16/16. Score includes a 3-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. Google Gemini Pro Latest chip resolved to Gemini 3.1 Pro Preview.
Raw SHA-256
4f52ef006f8c7062355a55e6348f186c41e1a994c1c6728c97d6a32cd219d4fa
Raw size
12618 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="1200" height="800" style="background-color: #0f172a; font-family: system-ui, -apple-system, sans-serif;">
  <title>How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc>An editorial-quality infographic outlining the 6-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render) an AI uses to generate vector graphics.</desc>

  <defs>
    <!-- Gradients -->
    <linearGradient id="titleGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#14b8a6" />
      <stop offset="50%" stop-color="#1d4ed8" />
      <stop offset="100%" stop-color="#f59e0b" />
    </linearGradient>

    <!-- Clip Paths -->
    <clipPath id="chartClip">
      <rect x="0" y="0" width="400" height="150" />
    </clipPath>

    <!-- Symbols -->
    <symbol id="bullet" viewBox="0 0 12 12">
      <rect x="2" y="2" width="8" height="8" rx="2" fill="#f59e0b" />
    </symbol>

    <!-- Markers for Arrows -->
    <marker id="arrowBlue" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#1d4ed8" />
    </marker>
    <marker id="arrowTeal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#14b8a6" />
    </marker>
    <marker id="arrowAmber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#f59e0b" />
    </marker>

    <!-- Shared Node Background Symbol -->
    <symbol id="stageBox" viewBox="0 0 140 160">
      <rect width="140" height="160" rx="8" fill="#0f172a" stroke="#1d4ed8" stroke-width="2" />
    </symbol>
  </defs>

  <!-- Title & Subtitle Area -->
  <text x="50" y="70" font-size="34" font-weight="bold" fill="#ffffff">How an AI Model Converts a Prompt into Vector Graphics</text>
  <rect x="50" y="90" width="850" height="4" fill="url(#titleGrad)" rx="2" />
  <text x="50" y="125" font-size="20" fill="#f8fafc">The generative pipeline decoding natural language into scalable, deterministic code.</text>

  <!-- Legend Area -->
  <rect x="940" y="45" width="210" height="95" rx="6" fill="#0f172a" stroke="#f8fafc" stroke-width="1.5" />
  <text x="955" y="70" font-size="14" font-weight="bold" fill="#ffffff">Process Color Key</text>
  
  <circle cx="960" cy="90" r="5" fill="#1d4ed8" />
  <text x="975" y="94" font-size="13" fill="#f8fafc">Standard Processing</text>
  
  <circle cx="960" cy="112" r="5" fill="#14b8a6" />
  <text x="975" y="116" font-size="13" fill="#f8fafc">Validated / Rendered Output</text>
  
  <circle cx="960" cy="134" r="5" fill="#f59e0b" />
  <text x="975" y="138" font-size="13" fill="#f8fafc">Warnings / Feedback Loops</text>

  <!-- Pipeline Stages -->
  <g id="pipeline" transform="translate(50, 220)">
    
    <!-- Stage 1: Prompt -->
    <g transform="translate(0, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Prompt</text>
      <!-- Icon: Chat bubble -->
      <path d="M 40 65 L 100 65 A 10 10 0 0 1 110 75 L 110 105 A 10 10 0 0 1 100 115 L 60 115 L 40 130 L 40 115 A 10 10 0 0 1 30 105 L 30 75 A 10 10 0 0 1 40 65 Z" fill="none" stroke="#f8fafc" stroke-width="2" />
      <line x1="50" y1="85" x2="90" y2="85" stroke="#f8fafc" stroke-width="2" stroke-linecap="round" />
      <line x1="50" y1="95" x2="75" y2="95" stroke="#f8fafc" stroke-width="2" stroke-linecap="round" />
    </g>

    <!-- Stage 2: Parse -->
    <g transform="translate(190, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Parse</text>
      <!-- Icon: Code tags -->
      <path d="M 50 65 L 30 90 L 50 115" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      <path d="M 90 65 L 110 90 L 90 115" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
      <line x1="75" y1="65" x2="65" y2="115" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" />
    </g>

    <!-- Stage 3: Plan -->
    <g transform="translate(380, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Plan</text>
      <!-- Icon: Layout Structure -->
      <rect x="40" y="65" width="60" height="15" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" />
      <rect x="40" y="90" width="25" height="30" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" />
      <rect x="75" y="90" width="25" height="30" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" />
      <line x1="70" y1="80" x2="70" y2="90" stroke="#f8fafc" stroke-width="2" />
    </g>

    <!-- Stage 4: Draw -->
    <g transform="translate(570, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Draw</text>
      <!-- Icon: Bezier curves/shapes -->
      <path d="M 40 100 C 60 40 80 140 100 80" fill="none" stroke="#f8fafc" stroke-width="3" />
      <circle cx="40" cy="100" r="4" fill="#14b8a6" />
      <circle cx="100" cy="80" r="4" fill="#14b8a6" />
      <line x1="100" y1="80" x2="110" y2="60" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="2 2" />
    </g>

    <!-- Stage 5: Validate -->
    <g transform="translate(760, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Validate</text>
      <!-- Icon: Check and Shield -->
      <path d="M 45 75 L 70 75 L 70 115 A 25 25 0 0 1 45 75 Z" fill="none" stroke="#f8fafc" stroke-width="2" />
      <path d="M 95 75 L 70 75 L 70 115 A 25 25 0 0 0 95 75 Z" fill="none" stroke="#f8fafc" stroke-width="2" />
      <path d="M 60 90 L 68 98 L 85 80" fill="none" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
    </g>

    <!-- Stage 6: Render -->
    <g transform="translate(950, 0)">
      <use href="#stageBox" />
      <rect x="0" y="0" width="140" height="35" rx="8" fill="#14b8a6" />
      <text x="70" y="23" font-size="16" font-weight="bold" fill="#0f172a" text-anchor="middle">Render</text>
      <!-- Icon: Picture frame mountains -->
      <rect x="35" y="65" width="70" height="50" rx="4" fill="none" stroke="#f8fafc" stroke-width="2" />
      <circle cx="85" cy="80" r="6" fill="#14b8a6" />
      <path d="M 35 115 L 55 90 L 70 105 L 90 85 L 105 115" fill="none" stroke="#f8fafc" stroke-width="2" stroke-linejoin="round" />
    </g>

  </g> <!-- End Pipeline Stages -->

  <!-- ALL 7 DIRECTIONAL ARROWS -->
  <!-- Arrow 1: Prompt to Parse -->
  <path d="M 190 300 L 235 300" fill="none" stroke="#1d4ed8" stroke-width="3" marker-end="url(#arrowBlue)" />
  
  <!-- Arrow 2: Parse to Plan -->
  <path d="M 380 300 L 425 300" fill="none" stroke="#1d4ed8" stroke-width="3" marker-end="url(#arrowBlue)" />

  <!-- Arrow 3: Plan to Draw -->
  <path d="M 570 300 L 615 300" fill="none" stroke="#1d4ed8" stroke-width="3" marker-end="url(#arrowBlue)" />

  <!-- Arrow 4: Draw to Validate -->
  <path d="M 760 300 L 805 300" fill="none" stroke="#1d4ed8" stroke-width="3" marker-end="url(#arrowBlue)" />

  <!-- Arrow 5: Validate to Render (Teal success path) -->
  <path d="M 950 300 L 995 300" fill="none" stroke="#14b8a6" stroke-width="3" marker-end="url(#arrowTeal)" />

  <!-- Arrow 6: Validate to Plan (Amber Feedback Loop) -->
  <path d="M 880 380 L 880 430 L 500 430 L 500 385" fill="none" stroke="#f59e0b" stroke-width="3" marker-end="url(#arrowAmber)" />
  <text x="690" y="445" font-size="12" fill="#f59e0b" text-anchor="middle">Syntax Error Iteration Loop</text>

  <!-- Arrow 7: Plan to Bar Chart (Metric extraction) -->
  <path d="M 450 380 L 450 545 L 300 545 L 300 565" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="4" marker-end="url(#arrowBlue)" />


  <!-- Mini Bar Chart (Bottom Left) -->
  <g transform="translate(50, 520)">
    <!-- Chart Box Base -->
    <rect x="0" y="0" width="500" height="200" rx="8" fill="#0f172a" stroke="#f8fafc" stroke-width="1.5" />
    <text x="250" y="30" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Generated Graphic Component Constraints</text>
    <text x="250" y="50" font-size="12" fill="#f8fafc" text-anchor="middle">Model Confidence &amp; Scoring Distribution Tracker</text>
    
    <!-- Y-axis lines -->
    <line x1="50" y1="60" x2="450" y2="60" stroke="#1d4ed8" stroke-width="1" opacity="0.3" />
    <line x1="50" y1="100" x2="450" y2="100" stroke="#1d4ed8" stroke-width="1" opacity="0.3" />
    <line x1="50" y1="140" x2="450" y2="140" stroke="#f8fafc" stroke-width="2" />

    <!-- 5 Bars exactly (Syntax, Layout, Text, Safety, Style) inside ClipPath -->
    <g transform="translate(50, 60)" clip-path="url(#chartClip)">
      <!-- Syntax (90) -->
      <rect x="25" y="8" width="30" height="72" fill="#14b8a6" />
      <text x="40" y="25" font-size="11" fill="#0f172a" font-weight="bold" text-anchor="middle">90</text>
      
      <!-- Layout (75) -->
      <rect x="100" y="20" width="30" height="60" fill="#1d4ed8" />
      <text x="115" y="35" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">75</text>
      
      <!-- Text (60) -->
      <rect x="175" y="32" width="30" height="48" fill="#1d4ed8" />
      <text x="190" y="47" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">60</text>
      
      <!-- Safety (95) -->
      <rect x="250" y="4" width="30" height="76" fill="#14b8a6" />
      <text x="265" y="19" font-size="11" fill="#0f172a" font-weight="bold" text-anchor="middle">95</text>
      
      <!-- Style (85) -->
      <rect x="325" y="12" width="30" height="68" fill="#1d4ed8" />
      <text x="340" y="27" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">85</text>
    </g>

    <!-- X Axis Labels -->
    <text x="90" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Syntax</text>
    <text x="165" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Layout</text>
    <text x="240" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Text</text>
    <text x="315" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Safety</text>
    <text x="390" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Style</text>
  </g>

  <!-- Warning Callout Box (Bottom Right) -->
  <g transform="translate(600, 520)">
    <rect x="0" y="0" width="550" height="200" rx="8" fill="#0f172a" stroke="#f59e0b" stroke-width="2" />
    <rect x="0" y="0" width="550" height="40" rx="8" fill="#f59e0b" />
    
    <!-- Title -->
    <path d="M 15 28 L 22 15 L 29 28 Z" fill="#0f172a" />
    <text x="38" y="26" font-size="18" font-weight="bold" fill="#0f172a">Common failure modes</text>

    <!-- Exactly 4 Bullet Items -->
    <g transform="translate(15, 65)">
      <use href="#bullet" x="0" y="-3"/>
      <text x="18" y="6" font-size="14" fill="#f8fafc">1. <tspan font-weight="bold" fill="#ffffff">Syntax hallucinations:</tspan> Unclosed tags or invalid path definitions.</text>
      
      <use href="#bullet" x="0" y="27"/>
      <text x="18" y="36" font-size="14" fill="#f8fafc">2. <tspan font-weight="bold" fill="#ffffff">Unescaped text fields:</tspan> Text anchors overlapping critical visual elements.</text>
      
      <use href="#bullet" x="0" y="57"/>
      <text x="18" y="66" font-size="14" fill="#f8fafc">3. <tspan font-weight="bold" fill="#ffffff">Missing ViewBox coordinates:</tspan> Leading to unexpected edge cropping.</text>
      
      <use href="#bullet" x="0" y="87"/>
      <text x="18" y="96" font-size="14" fill="#f8fafc">4. <tspan font-weight="bold" fill="#ffffff">Constrained styling drift:</tspan> Utilizing disallowed hex colors outside prompt bounds.</text>
    </g>
  </g>

  <!-- Footer -->
  <g transform="translate(600, 780)">
    <line x1="-550" y1="-20" x2="550" y2="-20" stroke="#1d4ed8" stroke-width="1" />
    <text x="0" y="0" font-size="12" fill="#f8fafc" text-anchor="middle">Source: Vector Gen Labs 2026 | Schematic representation only | Mathematical mapping bounds validated.</text>
  </g>

</svg>
Sanitized SVG
<svg viewBox="0 0 1200 800" width="1200" height="800" xmlns="http://www.w3.org/2000/svg" role="img"><title>How an AI Model Converts a Prompt into Vector Graphics</title><desc>An editorial-quality infographic outlining the 6-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render) an AI uses to generate vector graphics.</desc><defs><linearGradient id="titleGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#14b8a6" /><stop offset="50%" stop-color="#1d4ed8" /><stop offset="100%" stop-color="#f59e0b" /></linearGradient><clipPath id="chartClip"><rect x="0" y="0" width="400" height="150" /></clipPath></defs><text x="50" y="70" font-size="34" font-weight="bold" fill="#ffffff">How an AI Model Converts a Prompt into Vector Graphics</text><rect x="50" y="90" width="850" height="4" fill="url(#titleGrad)" rx="2" /><text x="50" y="125" font-size="20" fill="#f8fafc">The generative pipeline decoding natural language into scalable, deterministic code.</text><rect x="940" y="45" width="210" height="95" rx="6" fill="#0f172a" stroke="#f8fafc" stroke-width="1.5" /><text x="955" y="70" font-size="14" font-weight="bold" fill="#ffffff">Process Color Key</text><circle cx="960" cy="90" r="5" fill="#1d4ed8" /><text x="975" y="94" font-size="13" fill="#f8fafc">Standard Processing</text><circle cx="960" cy="112" r="5" fill="#14b8a6" /><text x="975" y="116" font-size="13" fill="#f8fafc">Validated / Rendered Output</text><circle cx="960" cy="134" r="5" fill="#f59e0b" /><text x="975" y="138" font-size="13" fill="#f8fafc">Warnings / Feedback Loops</text><g id="pipeline" transform="translate(50, 220)"><g transform="translate(0, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Prompt</text><path d="M 40 65 L 100 65 A 10 10 0 0 1 110 75 L 110 105 A 10 10 0 0 1 100 115 L 60 115 L 40 130 L 40 115 A 10 10 0 0 1 30 105 L 30 75 A 10 10 0 0 1 40 65 Z" fill="none" stroke="#f8fafc" stroke-width="2" /><line x1="50" y1="85" x2="90" y2="85" stroke="#f8fafc" stroke-width="2" stroke-linecap="round" /><line x1="50" y1="95" x2="75" y2="95" stroke="#f8fafc" stroke-width="2" stroke-linecap="round" /></g><g transform="translate(190, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Parse</text><path d="M 50 65 L 30 90 L 50 115" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /><path d="M 90 65 L 110 90 L 90 115" fill="none" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /><line x1="75" y1="65" x2="65" y2="115" stroke="#f8fafc" stroke-width="3" stroke-linecap="round" /></g><g transform="translate(380, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Plan</text><rect x="40" y="65" width="60" height="15" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" /><rect x="40" y="90" width="25" height="30" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" /><rect x="75" y="90" width="25" height="30" rx="2" fill="none" stroke="#f8fafc" stroke-width="2" /><line x1="70" y1="80" x2="70" y2="90" stroke="#f8fafc" stroke-width="2" /></g><g transform="translate(570, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Draw</text><path d="M 40 100 C 60 40 80 140 100 80" fill="none" stroke="#f8fafc" stroke-width="3" /><circle cx="40" cy="100" r="4" fill="#14b8a6" /><circle cx="100" cy="80" r="4" fill="#14b8a6" /><line x1="100" y1="80" x2="110" y2="60" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="2 2" /></g><g transform="translate(760, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#1d4ed8" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Validate</text><path d="M 45 75 L 70 75 L 70 115 A 25 25 0 0 1 45 75 Z" fill="none" stroke="#f8fafc" stroke-width="2" /><path d="M 95 75 L 70 75 L 70 115 A 25 25 0 0 0 95 75 Z" fill="none" stroke="#f8fafc" stroke-width="2" /><path d="M 60 90 L 68 98 L 85 80" fill="none" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /></g><g transform="translate(950, 0)"><use href="#stageBox" /><rect x="0" y="0" width="140" height="35" rx="8" fill="#14b8a6" /><text x="70" y="23" font-size="16" font-weight="bold" fill="#0f172a" text-anchor="middle">Render</text><rect x="35" y="65" width="70" height="50" rx="4" fill="none" stroke="#f8fafc" stroke-width="2" /><circle cx="85" cy="80" r="6" fill="#14b8a6" /><path d="M 35 115 L 55 90 L 70 105 L 90 85 L 105 115" fill="none" stroke="#f8fafc" stroke-width="2" stroke-linejoin="round" /></g></g><path d="M 190 300 L 235 300" fill="none" stroke="#1d4ed8" stroke-width="3" /><path d="M 380 300 L 425 300" fill="none" stroke="#1d4ed8" stroke-width="3" /><path d="M 570 300 L 615 300" fill="none" stroke="#1d4ed8" stroke-width="3" /><path d="M 760 300 L 805 300" fill="none" stroke="#1d4ed8" stroke-width="3" /><path d="M 950 300 L 995 300" fill="none" stroke="#14b8a6" stroke-width="3" /><path d="M 880 380 L 880 430 L 500 430 L 500 385" fill="none" stroke="#f59e0b" stroke-width="3" /><text x="690" y="445" font-size="12" fill="#f59e0b" text-anchor="middle">Syntax Error Iteration Loop</text><path d="M 450 380 L 450 545 L 300 545 L 300 565" fill="none" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="4" /><g transform="translate(50, 520)"><rect x="0" y="0" width="500" height="200" rx="8" fill="#0f172a" stroke="#f8fafc" stroke-width="1.5" /><text x="250" y="30" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle">Generated Graphic Component Constraints</text><text x="250" y="50" font-size="12" fill="#f8fafc" text-anchor="middle">Model Confidence &amp; Scoring Distribution Tracker</text><line x1="50" y1="60" x2="450" y2="60" stroke="#1d4ed8" stroke-width="1" opacity="0.3" /><line x1="50" y1="100" x2="450" y2="100" stroke="#1d4ed8" stroke-width="1" opacity="0.3" /><line x1="50" y1="140" x2="450" y2="140" stroke="#f8fafc" stroke-width="2" /><g transform="translate(50, 60)" clip-path="url(#chartClip)"><rect x="25" y="8" width="30" height="72" fill="#14b8a6" /><text x="40" y="25" font-size="11" fill="#0f172a" font-weight="bold" text-anchor="middle">90</text><rect x="100" y="20" width="30" height="60" fill="#1d4ed8" /><text x="115" y="35" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">75</text><rect x="175" y="32" width="30" height="48" fill="#1d4ed8" /><text x="190" y="47" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">60</text><rect x="250" y="4" width="30" height="76" fill="#14b8a6" /><text x="265" y="19" font-size="11" fill="#0f172a" font-weight="bold" text-anchor="middle">95</text><rect x="325" y="12" width="30" height="68" fill="#1d4ed8" /><text x="340" y="27" font-size="11" fill="#ffffff" font-weight="bold" text-anchor="middle">85</text></g><text x="90" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Syntax</text><text x="165" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Layout</text><text x="240" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Text</text><text x="315" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Safety</text><text x="390" y="160" font-size="12" fill="#f8fafc" text-anchor="middle">Style</text></g><g transform="translate(600, 520)"><rect x="0" y="0" width="550" height="200" rx="8" fill="#0f172a" stroke="#f59e0b" stroke-width="2" /><rect x="0" y="0" width="550" height="40" rx="8" fill="#f59e0b" /><path d="M 15 28 L 22 15 L 29 28 Z" fill="#0f172a" /><text x="38" y="26" font-size="18" font-weight="bold" fill="#0f172a">Common failure modes</text><g transform="translate(15, 65)"><use href="#bullet" x="0" y="-3" /><text x="18" y="6" font-size="14" fill="#f8fafc">1. <tspan font-weight="bold" fill="#ffffff">Syntax hallucinations:</tspan></text><use href="#bullet" x="0" y="27" /><text x="18" y="36" font-size="14" fill="#f8fafc">2. <tspan font-weight="bold" fill="#ffffff">Unescaped text fields:</tspan></text><use href="#bullet" x="0" y="57" /><text x="18" y="66" font-size="14" fill="#f8fafc">3. <tspan font-weight="bold" fill="#ffffff">Missing ViewBox coordinates:</tspan></text><use href="#bullet" x="0" y="87" /><text x="18" y="96" font-size="14" fill="#f8fafc">4. <tspan font-weight="bold" fill="#ffffff">Constrained styling drift:</tspan></text></g></g><g transform="translate(600, 780)"><line x1="-550" y1="-20" x2="550" y2="-20" stroke="#1d4ed8" stroke-width="1" /><text x="0" y="0" font-size="12" fill="#f8fafc" text-anchor="middle">Source: Vector Gen Labs 2026 | Schematic representation only | Mathematical mapping bounds validated.</text></g></svg>

Anthropic

Anthropic: Claude Opus 4.8

anthropic/claude-opus-4.8
92/100

Sanitizer accepted the SVG after removing 12 unsupported safe attribute(s) or element(s). Required label coverage: 16/16. Score includes a 8-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. Claude Opus Latest chip resolved to Claude Opus 4.8.
Raw SHA-256
ba493f636af560e88ccf073c2e21c5f591f7f5025884c1e61d07a2a2153f6eea
Raw size
13148 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" role="img" aria-labelledby="ttl dsc" font-family="Segoe UI, Helvetica, Arial, sans-serif">
  <title id="ttl">How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc id="dsc">An editorial infographic showing a six-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render) connected by directional arrows, with a bar chart of scoring aspects, a warning callout of common failure modes, a color legend, and a render output preview.</desc>

  <defs>
    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#1d4ed8"/>
      <stop offset="1" stop-color="#14b8a6"/>
    </linearGradient>
    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#1d4ed8"/>
      <stop offset="1" stop-color="#14b8a6"/>
    </linearGradient>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-end">
      <path d="M0,0 L10,5 L0,10 Z" fill="#f59e0b"/>
    </marker>
    <clipPath id="frameClip">
      <rect x="1069" y="191" width="52" height="44" rx="4"/>
    </clipPath>
    <clipPath id="previewClip">
      <rect x="800" y="395" width="370" height="300" rx="16"/>
    </clipPath>
    <symbol id="card" viewBox="0 0 150 150">
      <rect x="3" y="3" width="144" height="144" rx="14" fill="#f8fafc" stroke="#0f172a" stroke-opacity="0.18" stroke-width="2"/>
      <rect x="3" y="3" width="144" height="10" rx="5" fill="#0f172a" opacity="0.04"/>
    </symbol>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="1200" height="800" fill="#0f172a"/>

  <!-- Title block -->
  <text x="600" y="46" text-anchor="middle" fill="#f8fafc" font-size="30" font-weight="700">How an AI Model Converts a Prompt into Vector Graphics</text>
  <text x="600" y="74" text-anchor="middle" fill="#14b8a6" font-size="15" font-weight="500">A six-stage pipeline that turns natural language into validated, render-ready SVG</text>
  <rect x="360" y="86" width="480" height="3" rx="1.5" fill="url(#titleGrad)"/>

  <!-- ============ PIPELINE MODULES ============ -->
  <use href="#card" x="30"   y="160" width="150" height="150"/>
  <use href="#card" x="228"  y="160" width="150" height="150"/>
  <use href="#card" x="426"  y="160" width="150" height="150"/>
  <use href="#card" x="624"  y="160" width="150" height="150"/>
  <use href="#card" x="822"  y="160" width="150" height="150"/>
  <use href="#card" x="1020" y="160" width="150" height="150"/>

  <!-- Stage 1: PROMPT (blue) -->
  <circle cx="50" cy="182" r="12" fill="#1d4ed8"/>
  <text x="50" y="186" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="700">1</text>
  <g stroke="#1d4ed8" stroke-width="2.5" fill="none" stroke-linecap="round">
    <rect x="77" y="195" width="56" height="38" rx="8"/>
    <path d="M90,233 L90,245 L103,233" fill="#1d4ed8" stroke="none"/>
    <line x1="87" y1="208" x2="123" y2="208"/>
    <line x1="87" y1="220" x2="112" y2="220"/>
  </g>
  <text x="105" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Prompt</text>
  <text x="105" y="299" text-anchor="middle" fill="#1d4ed8" font-size="10.5">user request</text>

  <!-- Stage 2: PARSE (blue) -->
  <circle cx="248" cy="182" r="12" fill="#1d4ed8"/>
  <text x="248" y="186" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="700">2</text>
  <g stroke="#1d4ed8" stroke-width="2.5" fill="none">
    <line x1="303" y1="201" x2="285" y2="227"/>
    <line x1="303" y1="201" x2="321" y2="227"/>
    <circle cx="303" cy="195" r="7" fill="#1d4ed8" stroke="none"/>
    <circle cx="283" cy="233" r="7"/>
    <circle cx="323" cy="233" r="7"/>
  </g>
  <text x="303" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Parse</text>
  <text x="303" y="299" text-anchor="middle" fill="#1d4ed8" font-size="10.5">tokens &amp; intent</text>

  <!-- Stage 3: PLAN (teal) -->
  <circle cx="446" cy="182" r="12" fill="#14b8a6"/>
  <text x="446" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">3</text>
  <g stroke="#14b8a6" stroke-width="2" fill="none">
    <rect x="475" y="193" width="52" height="42" rx="4" stroke-width="2.5"/>
    <line x1="492" y1="193" x2="492" y2="235"/>
    <line x1="510" y1="193" x2="510" y2="235"/>
    <line x1="475" y1="207" x2="527" y2="207"/>
    <line x1="475" y1="221" x2="527" y2="221"/>
  </g>
  <circle cx="501" cy="214" r="4" fill="#f59e0b"/>
  <text x="501" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Plan</text>
  <text x="501" y="299" text-anchor="middle" fill="#14b8a6" font-size="10.5">scene &amp; layout</text>

  <!-- Stage 4: DRAW (teal) -->
  <circle cx="644" cy="182" r="12" fill="#14b8a6"/>
  <text x="644" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">4</text>
  <g transform="rotate(45 707 213)">
    <rect x="702" y="190" width="10" height="38" rx="2" fill="#14b8a6"/>
    <polygon points="702,228 707,240 712,228" fill="#0f172a"/>
    <rect x="702" y="190" width="10" height="7" fill="#f59e0b"/>
  </g>
  <circle cx="680" cy="232" r="7" fill="none" stroke="#14b8a6" stroke-width="2.5"/>
  <text x="699" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Draw</text>
  <text x="699" y="299" text-anchor="middle" fill="#14b8a6" font-size="10.5">emit shapes</text>

  <!-- Stage 5: VALIDATE (amber) -->
  <circle cx="842" cy="182" r="12" fill="#f59e0b"/>
  <text x="842" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">5</text>
  <g fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round">
    <path d="M897,191 L915,199 L915,216 C915,230 897,241 897,241 C897,241 879,230 879,216 L879,199 Z"/>
    <path d="M888,214 L895,221 L908,206"/>
  </g>
  <text x="897" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Validate</text>
  <text x="897" y="299" text-anchor="middle" fill="#f59e0b" font-size="10.5">check &amp; score</text>

  <!-- Stage 6: RENDER (amber) -->
  <circle cx="1040" cy="182" r="12" fill="#f59e0b"/>
  <text x="1040" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">6</text>
  <g>
    <rect x="1069" y="191" width="52" height="44" rx="4" fill="#ffffff" stroke="#f59e0b" stroke-width="2.5"/>
    <g clip-path="url(#frameClip)">
      <circle cx="1083" cy="205" r="5" fill="#f59e0b"/>
      <polygon points="1069,235 1086,213 1099,228 1112,206 1121,235" fill="#14b8a6"/>
    </g>
  </g>
  <text x="1095" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Render</text>
  <text x="1095" y="299" text-anchor="middle" fill="#f59e0b" font-size="10.5">final SVG</text>

  <!-- ============ 7 DIRECTIONAL ARROWS ============ -->
  <g stroke="#f59e0b" stroke-width="2.5" fill="none">
    <!-- 1-5: between modules -->
    <line x1="184" y1="235" x2="224" y2="235" marker-end="url(#arrow)"/>
    <line x1="382" y1="235" x2="422" y2="235" marker-end="url(#arrow)"/>
    <line x1="580" y1="235" x2="620" y2="235" marker-end="url(#arrow)"/>
    <line x1="778" y1="235" x2="818" y2="235" marker-end="url(#arrow)"/>
    <line x1="976" y1="235" x2="1016" y2="235" marker-end="url(#arrow)"/>
    <!-- 6: validation feedback loop back to Plan -->
    <path d="M895,160 C800,104 600,104 505,158" marker-end="url(#arrow)" stroke-dasharray="6 4"/>
    <!-- 7: render output down to preview -->
    <path d="M1095,312 C1095,345 1000,360 1000,392" marker-end="url(#arrow)"/>
  </g>
  <text x="700" y="104" text-anchor="middle" fill="#f59e0b" font-size="11" font-style="italic">validation feedback loop</text>
  <g fill="#f8fafc" font-size="9.5" text-anchor="middle" opacity="0.7">
    <text x="204" y="226">tokens</text>
    <text x="402" y="226">tree</text>
    <text x="600" y="226">spec</text>
    <text x="798" y="226">nodes</text>
    <text x="996" y="226">scored</text>
  </g>

  <!-- ============ BAR CHART ============ -->
  <rect x="30" y="360" width="350" height="380" rx="14" fill="#f8fafc"/>
  <text x="50" y="388" fill="#0f172a" font-size="15" font-weight="700">Per-aspect quality score</text>
  <text x="50" y="406" fill="#1d4ed8" font-size="11">how the Validate stage rates the draft (0�1)</text>
  <line x1="55" y1="690" x2="350" y2="690" stroke="#0f172a" stroke-opacity="0.3" stroke-width="1.5"/>
  <g>
    <!-- Syntax 0.88 -->
    <rect x="60" y="514" width="40" height="176" rx="4" fill="#1d4ed8"/>
    <text x="80" y="506" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.88</text>
    <text x="80" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Syntax</text>
    <!-- Layout 0.72 -->
    <rect x="120" y="546" width="40" height="144" rx="4" fill="#14b8a6"/>
    <text x="140" y="538" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.72</text>
    <text x="140" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Layout</text>
    <!-- Text 0.55 -->
    <rect x="180" y="580" width="40" height="110" rx="4" fill="#f59e0b"/>
    <text x="200" y="572" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.55</text>
    <text x="200" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Text</text>
    <!-- Safety 0.95 -->
    <rect x="240" y="500" width="40" height="190" rx="4" fill="#14b8a6"/>
    <text x="260" y="492" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.95</text>
    <text x="260" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Safety</text>
    <!-- Style 0.68 -->
    <rect x="300" y="554" width="40" height="136" rx="4" fill="#1d4ed8"/>
    <text x="320" y="546" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.68</text>
    <text x="320" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Style</text>
  </g>
  <text x="200" y="728" text-anchor="middle" fill="#0f172a" font-size="10" opacity="0.6">low Text score ? trigger feedback loop</text>

  <!-- ============ WARNING CALLOUT ============ -->
  <rect x="405" y="360" width="370" height="230" rx="14" fill="#f8fafc" stroke="#f59e0b" stroke-width="2.5"/>
  <g transform="translate(428,388)">
    <polygon points="0,16 9,0 18,16" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linejoin="round"/>
    <line x1="9" y1="5" x2="9" y2="11" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round"/>
    <circle cx="9" cy="14" r="1.2" fill="#f59e0b"/>
  </g>
  <text x="458" y="403" fill="#0f172a" font-size="15" font-weight="700">Common failure modes</text>
  <g fill="#0f172a" font-size="12">
    <circle cx="430" cy="436" r="3.5" fill="#f59e0b"/>
    <text x="442" y="440">Malformed or unclosed tags break rendering</text>
    <circle cx="430" cy="472" r="3.5" fill="#f59e0b"/>
    <text x="442" y="476">Overlap and wrong z-order hide content</text>
    <circle cx="430" cy="508" r="3.5" fill="#f59e0b"/>
    <text x="442" y="512">Text overflow or low-contrast labels</text>
    <circle cx="430" cy="544" r="3.5" fill="#f59e0b"/>
    <text x="442" y="548">Unsafe or off-prompt content slips past</text>
  </g>

  <!-- ============ LEGEND ============ -->
  <rect x="405" y="610" width="370" height="130" rx="14" fill="#f8fafc"/>
  <text x="425" y="638" fill="#0f172a" font-size="14" font-weight="700">Legend � color meaning</text>
  <g font-size="12" fill="#0f172a">
    <rect x="425" y="652" width="16" height="16" rx="3" fill="#1d4ed8"/>
    <text x="450" y="664">Language &amp; input understanding</text>
    <rect x="425" y="680" width="16" height="16" rx="3" fill="#14b8a6"/>
    <text x="450" y="692">Structure, layout &amp; geometry</text>
    <rect x="425" y="708" width="16" height="16" rx="3" fill="#f59e0b"/>
    <text x="450" y="720">Quality, safety &amp; output</text>
  </g>

  <!-- ============ RENDER OUTPUT PREVIEW ============ -->
  <text x="800" y="388" fill="#f8fafc" font-size="14" font-weight="700">Stage 6 output preview</text>
  <g clip-path="url(#previewClip)">
    <rect x="800" y="395" width="370" height="300" fill="url(#sky)"/>
    <circle cx="900" cy="470" r="34" fill="#f59e0b"/>
    <polygon points="800,695 920,560 1010,640 1080,560 1170,695" fill="#0f172a"/>
    <polygon points="800,695 1000,600 1170,695" fill="#14b8a6" opacity="0.85"/>
    <rect x="816" y="660" width="338" height="26" rx="6" fill="#0f172a" opacity="0.55"/>
    <text x="985" y="678" text-anchor="middle" fill="#f8fafc" font-size="13" font-family="monospace">&lt;svg&gt; � render-ready � &lt;/svg&gt;</text>
  </g>
  <rect x="800" y="395" width="370" height="300" rx="16" fill="none" stroke="#f59e0b" stroke-width="2"/>
  <text x="1050" y="375" text-anchor="middle" fill="#f59e0b" font-size="11" font-style="italic">output</text>

  <!-- ============ FOOTER ============ -->
  <line x1="30" y1="762" x2="1170" y2="762" stroke="#f8fafc" stroke-opacity="0.2" stroke-width="1"/>
  <text x="600" y="784" text-anchor="middle" fill="#f8fafc" font-size="11" opacity="0.75">Illustrative schematic of a prompt-to-SVG generation pipeline � not a literal neural-network architecture. � 2026</text>
</svg>
Sanitized SVG
<svg viewBox="0 0 1200 800" role="img" font-family="Segoe UI, Helvetica, Arial, sans-serif" xmlns="http://www.w3.org/2000/svg"><title id="ttl">How an AI Model Converts a Prompt into Vector Graphics</title><desc id="dsc">An editorial infographic showing a six-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render) connected by directional arrows, with a bar chart of scoring aspects, a warning callout of common failure modes, a color legend, and a render output preview.</desc><defs><linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#1d4ed8" /><stop offset="1" stop-color="#14b8a6" /></linearGradient><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1d4ed8" /><stop offset="1" stop-color="#14b8a6" /></linearGradient><clipPath id="frameClip"><rect x="1069" y="191" width="52" height="44" rx="4" /></clipPath><clipPath id="previewClip"><rect x="800" y="395" width="370" height="300" rx="16" /></clipPath></defs><rect x="0" y="0" width="1200" height="800" fill="#0f172a" /><text x="600" y="46" text-anchor="middle" fill="#f8fafc" font-size="30" font-weight="700">How an AI Model Converts a Prompt into Vector Graphics</text><text x="600" y="74" text-anchor="middle" fill="#14b8a6" font-size="15" font-weight="500">A six-stage pipeline that turns natural language into validated, render-ready SVG</text><rect x="360" y="86" width="480" height="3" rx="1.5" fill="url(#titleGrad)" /><use href="#card" x="30" y="160" width="150" height="150" /><use href="#card" x="228" y="160" width="150" height="150" /><use href="#card" x="426" y="160" width="150" height="150" /><use href="#card" x="624" y="160" width="150" height="150" /><use href="#card" x="822" y="160" width="150" height="150" /><use href="#card" x="1020" y="160" width="150" height="150" /><circle cx="50" cy="182" r="12" fill="#1d4ed8" /><text x="50" y="186" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="700">1</text><g stroke="#1d4ed8" stroke-width="2.5" fill="none" stroke-linecap="round"><rect x="77" y="195" width="56" height="38" rx="8" /><path d="M90,233 L90,245 L103,233" fill="#1d4ed8" stroke="none" /><line x1="87" y1="208" x2="123" y2="208" /><line x1="87" y1="220" x2="112" y2="220" /></g><text x="105" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Prompt</text><text x="105" y="299" text-anchor="middle" fill="#1d4ed8" font-size="10.5">user request</text><circle cx="248" cy="182" r="12" fill="#1d4ed8" /><text x="248" y="186" text-anchor="middle" fill="#ffffff" font-size="12" font-weight="700">2</text><g stroke="#1d4ed8" stroke-width="2.5" fill="none"><line x1="303" y1="201" x2="285" y2="227" /><line x1="303" y1="201" x2="321" y2="227" /><circle cx="303" cy="195" r="7" fill="#1d4ed8" stroke="none" /><circle cx="283" cy="233" r="7" /><circle cx="323" cy="233" r="7" /></g><text x="303" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Parse</text><text x="303" y="299" text-anchor="middle" fill="#1d4ed8" font-size="10.5">tokens &amp; intent</text><circle cx="446" cy="182" r="12" fill="#14b8a6" /><text x="446" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">3</text><g stroke="#14b8a6" stroke-width="2" fill="none"><rect x="475" y="193" width="52" height="42" rx="4" stroke-width="2.5" /><line x1="492" y1="193" x2="492" y2="235" /><line x1="510" y1="193" x2="510" y2="235" /><line x1="475" y1="207" x2="527" y2="207" /><line x1="475" y1="221" x2="527" y2="221" /></g><circle cx="501" cy="214" r="4" fill="#f59e0b" /><text x="501" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Plan</text><text x="501" y="299" text-anchor="middle" fill="#14b8a6" font-size="10.5">scene &amp; layout</text><circle cx="644" cy="182" r="12" fill="#14b8a6" /><text x="644" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">4</text><g transform="rotate(45 707 213)"><rect x="702" y="190" width="10" height="38" rx="2" fill="#14b8a6" /><polygon points="702,228 707,240 712,228" fill="#0f172a" /><rect x="702" y="190" width="10" height="7" fill="#f59e0b" /></g><circle cx="680" cy="232" r="7" fill="none" stroke="#14b8a6" stroke-width="2.5" /><text x="699" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Draw</text><text x="699" y="299" text-anchor="middle" fill="#14b8a6" font-size="10.5">emit shapes</text><circle cx="842" cy="182" r="12" fill="#f59e0b" /><text x="842" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">5</text><g fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"><path d="M897,191 L915,199 L915,216 C915,230 897,241 897,241 C897,241 879,230 879,216 L879,199 Z" /><path d="M888,214 L895,221 L908,206" /></g><text x="897" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Validate</text><text x="897" y="299" text-anchor="middle" fill="#f59e0b" font-size="10.5">check &amp; score</text><circle cx="1040" cy="182" r="12" fill="#f59e0b" /><text x="1040" y="186" text-anchor="middle" fill="#0f172a" font-size="12" font-weight="700">6</text><g><rect x="1069" y="191" width="52" height="44" rx="4" fill="#ffffff" stroke="#f59e0b" stroke-width="2.5" /><g clip-path="url(#frameClip)"><circle cx="1083" cy="205" r="5" fill="#f59e0b" /><polygon points="1069,235 1086,213 1099,228 1112,206 1121,235" fill="#14b8a6" /></g></g><text x="1095" y="282" text-anchor="middle" fill="#0f172a" font-size="15" font-weight="700">Render</text><text x="1095" y="299" text-anchor="middle" fill="#f59e0b" font-size="10.5">final SVG</text><g stroke="#f59e0b" stroke-width="2.5" fill="none"><line x1="184" y1="235" x2="224" y2="235" /><line x1="382" y1="235" x2="422" y2="235" /><line x1="580" y1="235" x2="620" y2="235" /><line x1="778" y1="235" x2="818" y2="235" /><line x1="976" y1="235" x2="1016" y2="235" /><path d="M895,160 C800,104 600,104 505,158" stroke-dasharray="6 4" /><path d="M1095,312 C1095,345 1000,360 1000,392" /></g><text x="700" y="104" text-anchor="middle" fill="#f59e0b" font-size="11">validation feedback loop</text><g fill="#f8fafc" font-size="9.5" text-anchor="middle" opacity="0.7"><text x="204" y="226">tokens</text><text x="402" y="226">tree</text><text x="600" y="226">spec</text><text x="798" y="226">nodes</text><text x="996" y="226">scored</text></g><rect x="30" y="360" width="350" height="380" rx="14" fill="#f8fafc" /><text x="50" y="388" fill="#0f172a" font-size="15" font-weight="700">Per-aspect quality score</text><text x="50" y="406" fill="#1d4ed8" font-size="11">how the Validate stage rates the draft (0�1)</text><line x1="55" y1="690" x2="350" y2="690" stroke="#0f172a" stroke-opacity="0.3" stroke-width="1.5" /><g><rect x="60" y="514" width="40" height="176" rx="4" fill="#1d4ed8" /><text x="80" y="506" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.88</text><text x="80" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Syntax</text><rect x="120" y="546" width="40" height="144" rx="4" fill="#14b8a6" /><text x="140" y="538" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.72</text><text x="140" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Layout</text><rect x="180" y="580" width="40" height="110" rx="4" fill="#f59e0b" /><text x="200" y="572" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.55</text><text x="200" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Text</text><rect x="240" y="500" width="40" height="190" rx="4" fill="#14b8a6" /><text x="260" y="492" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.95</text><text x="260" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Safety</text><rect x="300" y="554" width="40" height="136" rx="4" fill="#1d4ed8" /><text x="320" y="546" text-anchor="middle" fill="#0f172a" font-size="10" font-weight="700">.68</text><text x="320" y="706" text-anchor="middle" fill="#0f172a" font-size="10.5">Style</text></g><text x="200" y="728" text-anchor="middle" fill="#0f172a" font-size="10" opacity="0.6">low Text score ? trigger feedback loop</text><rect x="405" y="360" width="370" height="230" rx="14" fill="#f8fafc" stroke="#f59e0b" stroke-width="2.5" /><g transform="translate(428,388)"><polygon points="0,16 9,0 18,16" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linejoin="round" /><line x1="9" y1="5" x2="9" y2="11" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round" /><circle cx="9" cy="14" r="1.2" fill="#f59e0b" /></g><text x="458" y="403" fill="#0f172a" font-size="15" font-weight="700">Common failure modes</text><g fill="#0f172a" font-size="12"><circle cx="430" cy="436" r="3.5" fill="#f59e0b" /><text x="442" y="440">Malformed or unclosed tags break rendering</text><circle cx="430" cy="472" r="3.5" fill="#f59e0b" /><text x="442" y="476">Overlap and wrong z-order hide content</text><circle cx="430" cy="508" r="3.5" fill="#f59e0b" /><text x="442" y="512">Text overflow or low-contrast labels</text><circle cx="430" cy="544" r="3.5" fill="#f59e0b" /><text x="442" y="548">Unsafe or off-prompt content slips past</text></g><rect x="405" y="610" width="370" height="130" rx="14" fill="#f8fafc" /><text x="425" y="638" fill="#0f172a" font-size="14" font-weight="700">Legend � color meaning</text><g font-size="12" fill="#0f172a"><rect x="425" y="652" width="16" height="16" rx="3" fill="#1d4ed8" /><text x="450" y="664">Language &amp; input understanding</text><rect x="425" y="680" width="16" height="16" rx="3" fill="#14b8a6" /><text x="450" y="692">Structure, layout &amp; geometry</text><rect x="425" y="708" width="16" height="16" rx="3" fill="#f59e0b" /><text x="450" y="720">Quality, safety &amp; output</text></g><text x="800" y="388" fill="#f8fafc" font-size="14" font-weight="700">Stage 6 output preview</text><g clip-path="url(#previewClip)"><rect x="800" y="395" width="370" height="300" fill="url(#sky)" /><circle cx="900" cy="470" r="34" fill="#f59e0b" /><polygon points="800,695 920,560 1010,640 1080,560 1170,695" fill="#0f172a" /><polygon points="800,695 1000,600 1170,695" fill="#14b8a6" opacity="0.85" /><rect x="816" y="660" width="338" height="26" rx="6" fill="#0f172a" opacity="0.55" /><text x="985" y="678" text-anchor="middle" fill="#f8fafc" font-size="13" font-family="monospace">&lt;svg&gt; � render-ready � &lt;/svg&gt;</text></g><rect x="800" y="395" width="370" height="300" rx="16" fill="none" stroke="#f59e0b" stroke-width="2" /><text x="1050" y="375" text-anchor="middle" fill="#f59e0b" font-size="11">output</text><line x1="30" y1="762" x2="1170" y2="762" stroke="#f8fafc" stroke-opacity="0.2" stroke-width="1" /><text x="600" y="784" text-anchor="middle" fill="#f8fafc" font-size="11" opacity="0.75">Illustrative schematic of a prompt-to-SVG generation pipeline � not a literal neural-network architecture. � 2026</text></svg>

xAI

xAI: Grok 4.20

x-ai/grok-4.20
89/100

Sanitizer accepted the SVG after removing 17 unsupported safe attribute(s) or element(s). Required label coverage: 16/16. Score includes a 9-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. Grok 4.20 selected directly.
Raw SHA-256
db5f1426748daaa33619dd5a16e9c616b7befe5ab47f78f41e5bf5b92616d81f
Raw size
16729 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
13
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800">
  <title>How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc>An editorial-quality infographic illustrating a 6-stage AI pipeline that transforms natural language prompts into SVG vector graphics. Includes labeled modules with primitive icons, 7 directional arrows, a mini bar chart, a warning callout with 4 failure modes, a color legend, gradient title, clipPath preview, and reusable symbol. All elements use only the specified color palette.</desc>

  <defs>
    <!-- Gradient for main title -->
    <linearGradient id="titleGradient" x1="180" y1="38" x2="950" y2="38" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#1d4ed8" />
      <stop offset="100%" stop-color="#14b8a6" />
    </linearGradient>

    <!-- Arrowhead marker -->
    <marker 
      id="arrowhead" 
      viewBox="0 0 10 10" 
      refX="7" 
      refY="5" 
      markerUnits="strokeWidth" 
      markerWidth="4" 
      markerHeight="5" 
      orient="auto">
      <path d="M 0,0 L 10,5 L 0,10 Z" fill="#0f172a" />
    </marker>

    <!-- Reusable validate checkmark symbol -->
    <symbol id="validate-symbol" viewBox="0 0 200 200">
      <circle cx="100" cy="100" r="78" fill="#f8fafc" stroke="#14b8a6" stroke-width="16"/>
      <path d="M 52,98 L 85,138 L 145,55" fill="transparent" stroke="#14b8a6" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>

    <!-- ClipPath for render stage preview canvas -->
    <clipPath id="render-preview">
      <rect x="0" y="0" width="108" height="82" rx="4"/>
    </clipPath>
  </defs>

  <!-- Light background panel for main content area -->
  <rect 
    x="20" y="135" width="1160" height="305" rx="20" 
    fill="#f8fafc" opacity="0.6" />

  <!-- Title -->
  <text 
    x="600" y="52" 
    text-anchor="middle" 
    font-family="Arial Black, sans-serif" 
    font-size="41" 
    font-weight="900" 
    letter-spacing="-1.5px" 
    fill="url(#titleGradient)">
    HOW AN AI MODEL CONVERTS
  </text>
  <text 
    x="600" y="89" 
    text-anchor="middle" 
    font-family="Arial Black, sans-serif" 
    font-size="41" 
    font-weight="900" 
    letter-spacing="-1.8px" 
    fill="url(#titleGradient)">
    A PROMPT INTO VECTOR GRAPHICS
  </text>

  <!-- Subtitle -->
  <text 
    x="600" y="118" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="19.5" 
    font-weight="500" 
    fill="#0f172a">
    6-stage pipeline for AI-powered SVG generation
  </text>

  <!-- Pipeline stage modules -->

  <!-- 1. PROMPT - x=38, blue accent -->
  <rect 
    x="38" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="38" y="158" width="154" height="44" rx="19" 
    fill="#1d4ed8" />
  <!-- Prompt icon: document with text lines and cursor -->
  <rect 
    x="71" y="217" width="57" height="78" rx="4" 
    fill="#ffffff" stroke="#0f172a" stroke-width="6"/>
  <line 
    x1="79" y1="229" x2="119" y2="229" stroke="#0f172a" stroke-width="4.5" />
  <line 
    x1="79" y1="242" x2="119" y2="242" stroke="#0f172a" stroke-width="4.5" />
  <line 
    x1="79" y1="255" x2="119" y2="255" stroke="#0f172a" stroke-width="4.5" />
  <line 
    x1="79" y1="268" x2="106" y2="268" stroke="#0f172a" stroke-width="4.5" />
  <!-- Cursor -->
  <rect 
    x="119" y="228" width="3" height="14" fill="#f59e0b" />

  <!-- Prompt label -->
  <text 
    x="115" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">PROMPT</text>

  <!-- 2. PARSE - x=222, blue accent -->
  <rect 
    x="222" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="222" y="158" width="154" height="44" rx="19" 
    fill="#1d4ed8" />
  <!-- Parse icon: syntax tree (vertical trunk with branching nodes) -->
  <!-- Trunk -->
  <line 
    x1="290" y1="217" x2="290" y2="280" stroke="#0f172a" stroke-width="7" />
  <!-- Branches -->
  <line 
    x1="290" y1="235" x2="257" y2="235" stroke="#0f172a" stroke-width="6" />
  <line 
    x1="290" y1="259" x2="323" y2="259" stroke="#0f172a" stroke-width="6" />
  <!-- Nodes -->
  <circle r="8" cx="257" cy="235" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5"/>
  <circle r="8" cx="290" cy="217" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5"/>
  <circle r="8" cx="323" cy="259" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5"/>
  <circle r="8" cx="257" cy="280" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5"/>

  <!-- Parse label -->
  <text 
    x="299" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">PARSE</text>

  <!-- 3. PLAN - x=406, teal accent -->
  <rect 
    x="406" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="406" y="158" width="154" height="44" rx="19" 
    fill="#14b8a6" />
  <!-- Plan icon: connected nodes (planning graph) -->
  <!-- Nodes -->
  <circle r="11" cx="480" cy="217" fill="#ffffff" stroke="#0f172a" stroke-width="4"/>
  <circle r="11" cx="455" cy="258" fill="#ffffff" stroke="#0f172a" stroke-width="4"/>
  <circle r="11" cx="515" cy="258" fill="#ffffff" stroke="#0f172a" stroke-width="4"/>
  <circle r="11" cx="480" cy="292" fill="#ffffff" stroke="#0f172a" stroke-width="4"/>
  <!-- Connections -->
  <line 
    x1="480" y1="228" x2="456" y2="249" stroke="#0f172a" stroke-width="4.5"/>
  <line 
    x1="480" y1="228" x2="514" y2="249" stroke="#0f172a" stroke-width="4.5"/>
  <line 
    x1="456" y1="268" x2="480" y2="280" stroke="#0f172a" stroke-width="4.5"/>
  <line 
    x1="515" y1="268" x2="490" y2="280" stroke="#0f172a" stroke-width="4.5"/>
  <line 
    x1="480" y1="249" x2="480" y2="280" stroke="#0f172a" stroke-width="4.5"/>

  <!-- Plan label -->
  <text 
    x="483" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">PLAN</text>

  <!-- 4. DRAW - x=590, teal accent -->
  <rect 
    x="590" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="590" y="158" width="154" height="44" rx="19" 
    fill="#14b8a6" />
  <!-- Draw icon: vector pen tool -->
  <!-- Pen body (tilted) -->
  <path 
    d="M 644,223 L 677,255 L 665,275 L 631,237 Z" 
    fill="#f59e0b" stroke="#0f172a" stroke-width="6"/>
  <!-- Nib/tip -->
  <polygon 
    points="631,237 640,250 625,260" 
    fill="#0f172a" stroke="#0f172a" stroke-width="2"/>
  <!-- Highlight on pen body -->
  <line 
    x1="648" y1="229" x2="671" y2="256" 
    stroke="#ffffff" stroke-width="3" opacity="0.75"/>

  <!-- Draw label -->
  <text 
    x="667" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">DRAW</text>

  <!-- 5. VALIDATE - x=774, amber accent -->
  <rect 
    x="774" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="774" y="158" width="154" height="44" rx="19" 
    fill="#f59e0b" />
  <!-- Validate icon: reusable checkmark symbol (centered) -->
  <use 
    href="#validate-symbol" 
    x="795" y="207" width="105" height="105" />

  <!-- Validate label -->
  <text 
    x="851" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">VALIDATE</text>

  <!-- 6. RENDER - x=958, amber accent -->
  <rect 
    x="958" y="158" rx="19" width="154" height="223" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7.5"/>
  <!-- Accent header -->
  <rect 
    x="958" y="158" width="154" height="44" rx="19" 
    fill="#f59e0b" />
  <!-- Render icon: SVG output viewport with preview illustration -->
  <!-- Viewport frame -->
  <rect 
    x="980" y="214" width="118" height="93" rx="7" 
    fill="#e2e8f0" stroke="#0f172a" stroke-width="9"/>
  <!-- Inner preview content (clipped) -->
  <g clip-path="url(#render-preview)" transform="translate(985,219)">
    <!-- Sky background -->
    <rect 
      x="0" y="0" width="108" height="82" fill="#bae6fd"/>
    <!-- Ground/hill path -->
    <path 
      d="M0,82 L0,68 Q22,49 48,61 Q71,37 93,59 L108,82 Z" 
      fill="#14b8a6"/>
    <!-- Sun -->
    <circle 
      r="14.5" cx="77" cy="27" fill="#f59e0b"/>
    <!-- Small vector path (mountain peak) -->
    <path 
      d="M12,67 L29,39 L51,67 Z" 
      fill="#0f172a" opacity="0.85"/>
  </g>

  <!-- Render label -->
  <text 
    x="1035" y="357" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#0f172a" 
    letter-spacing="0.5px">RENDER</text>

  <!-- Pipeline directional arrows (5 sequential + 2 conceptual = 7 total) -->

  <!-- 1. Prompt ? Parse -->
  <path 
    d="M 193,390 L 217,390" 
    fill="transparent" stroke="#0f172a" stroke-width="7" marker-end="url(#arrowhead)"/>

  <!-- 2. Parse ? Plan -->
  <path 
    d="M 377,390 L 404,390" 
    fill="transparent" stroke="#0f172a" stroke-width="7" marker-end="url(#arrowhead)"/>

  <!-- 3. Plan ? Draw -->
  <path 
    d="M 560,390 L 589,390" 
    fill="transparent" stroke="#0f172a" stroke-width="7" marker-end="url(#arrowhead)"/>

  <!-- 4. Draw ? Validate -->
  <path 
    d="M 744,390 L 771,390" 
    fill="transparent" stroke="#0f172a" stroke-width="7" marker-end="url(#arrowhead)"/>

  <!-- 5. Validate ? Render -->
  <path 
    d="M 929,390 L 956,390" 
    fill="transparent" stroke="#0f172a" stroke-width="7" marker-end="url(#arrowhead)"/>

  <!-- 6. Conceptual: Plan ? Bar Chart (downward curved) -->
  <!-- Starts below Plan box, curves left and down to bar chart title area -->
  <path 
    d="M 483,385 
      C 505,425 515,435 445,465" 
    fill="transparent" stroke="#0f172a" stroke-width="5.5" marker-end="url(#arrowhead)"/>

  <!-- 7. Conceptual: Bar Chart ? Draw (upward curved, shows data flow into rendering) -->
  <!-- Starts from right side of bar chart, curves up and right to Draw box -->
  <path 
    d="M 425,535 
      C 495,555 505,445 585,390" 
    fill="transparent" stroke="#0f172a" stroke-width="5.5" marker-end="url(#arrowhead)"/>

  <!-- Mini bar chart (lower left) -->
  <!-- Chart container -->
  <rect 
    x="33" y="445" rx="14" width="395" height="265" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="7"/>

  <!-- Chart title -->
  <text 
    x="230" y="470" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15" 
    font-weight="700" 
    fill="#0f172a">COMPONENT ATTENTION</text>
  <text 
    x="230" y="488" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15" 
    font-weight="700" 
    fill="#0f172a">WEIGHTS (%)</text>

  <!-- Bar: Syntax (height 157, ~95%) - x=71 -->
  <rect 
    x="71" y="529" width="34" height="157" rx="4" 
    fill="#14b8a6" stroke="#0f172a" stroke-width="3"/>
  <!-- Bar: Layout (height 113, ~70%) - x=127 -->
  <rect 
    x="127" y="573" width="34" height="113" rx="4" 
    fill="#14b8a6" stroke="#0f172a" stroke-width="3"/>
  <!-- Bar: Text (height 139, ~85%) - x=183 -->
  <rect 
    x="183" y="547" width="34" height="139" rx="4" 
    fill="#14b8a6" stroke="#0f172a" stroke-width="3"/>
  <!-- Bar: Safety (height 89, ~55%) - x="239" -->
  <rect 
    x="239" y="597" width="34" height="89" rx="4" 
    fill="#14b8a6" stroke="#0f172a" stroke-width="3"/>
  <!-- Bar: Style (height 151, ~92%) - x="295" -->
  <rect 
    x="295" y="535" width="34" height="151" rx="4" 
    fill="#14b8a6" stroke="#0f172a" stroke-width="3"/>

  <!-- X-axis labels (slightly rotated to fit) -->
  <!-- Syntax -->
  <text 
    transform="translate(79,700) rotate(-38)" 
    text-anchor="end" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11.5" 
    font-weight="600" 
    fill="#0f172a">Syntax</text>
  <!-- Layout -->
  <text 
    transform="translate(137,700) rotate(-38)" 
    text-anchor="end" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11.5" 
    font-weight="600" 
    fill="#0f172a">Layout</text>
  <!-- Text -->
  <text 
    transform="translate(196,700) rotate(-38)" 
    text-anchor="end" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11.5" 
    font-weight="600" 
    fill="#0f172a">Text</text>
  <!-- Safety -->
  <text 
    transform="translate(256,700) rotate(-38)" 
    text-anchor="end" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11.5" 
    font-weight="600" 
    fill="#0f172a">Safety</text>
  <!-- Style -->
  <text 
    transform="translate(316,700) rotate(-38)" 
    text-anchor="end" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11.5" 
    font-weight="600" 
    fill="#0f172a">Style</text>

  <!-- Bar value labels (on top of bars) -->
  <text 
    x="88" y="517" 
    text-anchor="middle" 
    font-family="monospace" 
    font-size="10.5" 
    font-weight="700" 
    fill="#0f172a">95</text>
  <text 
    x="144" y="561" 
    text-anchor="middle" 
    font-family="monospace" 
    font-size="10.5" 
    font-weight="700" 
    fill="#0f172a">70</text>
  <text 
    x="200" y="535" 
    text-anchor="middle" 
    font-family="monospace" 
    font-size="10.5" 
    font-weight="700" 
    fill="#0f172a">85</text>
  <text 
    x="256" y="584" 
    text-anchor="middle" 
    font-family="monospace" 
    font-size="10.5" 
    font-weight="700" 
    fill="#0f172a">55</text>
  <text 
    x="313" y="523" 
    text-anchor="middle" 
    font-family="monospace" 
    font-size="10.5" 
    font-weight="700" 
    fill="#0f172a">92</text>

  <!-- Warning callout: Common failure modes (lower right) -->
  <!-- Container with amber accent border -->
  <rect 
    x="665" y="445" rx="16" width="475" height="245" 
    fill="#f8fafc" stroke="#f59e0b" stroke-width="9.5"/>

  <!-- Callout title -->
  <rect 
    x="682" y="455" width="245" height="29" rx="4" 
    fill="#f59e0b"/>
  <text 
    x="694" y="475" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#ffffff">COMMON FAILURE MODES</text>

  <!-- 4 Bullet points (exactly as required) -->
  <text 
    x="690" y="510" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="13" 
    fill="#0f172a">� Prompt ambiguity in spatial mapping</text>
  <text 
    x="690" y="537" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="13" 
    fill="#0f172a">� Path command syntax errors</text>
  <text 
    x="690" y="564" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="13" 
    fill="#0f172a">� Incorrect viewBox or transform math</text>
  <text 
    x="690" y="591" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="13" 
    fill="#0f172a">� Style conflicts and layering issues</text>

  <!-- Small legend (top right, explains blue/teal/amber) -->
  <!-- Legend container -->
  <rect 
    x="935" y="145" rx="11" width="225" height="125" 
    fill="#f8fafc" stroke="#0f172a" stroke-width="6"/>

  <!-- Legend title -->
  <text 
    x="955" y="165" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="13.5" 
    font-weight="700" 
    fill="#0f172a">PHASE KEY</text>

  <!-- Blue = Analysis -->
  <rect 
    x="950" y="177" width="19" height="19" rx="2.5" fill="#1d4ed8"/>
  <text 
    x="977" y="191" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="12.5" 
    fill="#0f172a">Analysis</text>

  <!-- Teal = Synthesis -->
  <rect 
    x="950" y="202" width="19" height="19" rx="2.5" fill="#14b8a6"/>
  <text 
    x="977" y="216" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="12.5" 
    fill="#0f172a">Synthesis</text>

  <!-- Amber = Refinement -->
  <rect 
    x="950" y="227" width="19" height="19" rx="2.5" fill="#f59e0b"/>
  <text 
    x="977" y="241" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="12.5" 
    fill="#0f172a">Refinement</text>

  <!-- Footer note -->
  <text 
    x="600" y="775" 
    text-anchor="middle" 
    font-family="Helvetica, Arial, sans-serif" 
    font-size="11" 
    fill="#0f172a" 
    opacity="0.75">
    Illustrative only � Conceptual AI SVG generation pipeline � All graphics created with SVG primitives
  </text>

</svg>
Sanitized SVG
<svg width="1200" height="800" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg" role="img"><title>How an AI Model Converts a Prompt into Vector Graphics</title><desc>An editorial-quality infographic illustrating a 6-stage AI pipeline that transforms natural language prompts into SVG vector graphics. Includes labeled modules with primitive icons, 7 directional arrows, a mini bar chart, a warning callout with 4 failure modes, a color legend, gradient title, clipPath preview, and reusable symbol. All elements use only the specified color palette.</desc><defs><linearGradient id="titleGradient" x1="180" y1="38" x2="950" y2="38" gradientUnits="userSpaceOnUse"><stop offset="0%" stop-color="#1d4ed8" /><stop offset="100%" stop-color="#14b8a6" /></linearGradient><clipPath id="render-preview"><rect x="0" y="0" width="108" height="82" rx="4" /></clipPath></defs><rect x="20" y="135" width="1160" height="305" rx="20" fill="#f8fafc" opacity="0.6" /><text x="600" y="52" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="41" font-weight="900" fill="url(#titleGradient)">
    HOW AN AI MODEL CONVERTS
  </text><text x="600" y="89" text-anchor="middle" font-family="Arial Black, sans-serif" font-size="41" font-weight="900" fill="url(#titleGradient)">
    A PROMPT INTO VECTOR GRAPHICS
  </text><text x="600" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="19.5" font-weight="500" fill="#0f172a">
    6-stage pipeline for AI-powered SVG generation
  </text><rect x="38" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="38" y="158" width="154" height="44" rx="19" fill="#1d4ed8" /><rect x="71" y="217" width="57" height="78" rx="4" fill="#ffffff" stroke="#0f172a" stroke-width="6" /><line x1="79" y1="229" x2="119" y2="229" stroke="#0f172a" stroke-width="4.5" /><line x1="79" y1="242" x2="119" y2="242" stroke="#0f172a" stroke-width="4.5" /><line x1="79" y1="255" x2="119" y2="255" stroke="#0f172a" stroke-width="4.5" /><line x1="79" y1="268" x2="106" y2="268" stroke="#0f172a" stroke-width="4.5" /><rect x="119" y="228" width="3" height="14" fill="#f59e0b" /><text x="115" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">PROMPT</text><rect x="222" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="222" y="158" width="154" height="44" rx="19" fill="#1d4ed8" /><line x1="290" y1="217" x2="290" y2="280" stroke="#0f172a" stroke-width="7" /><line x1="290" y1="235" x2="257" y2="235" stroke="#0f172a" stroke-width="6" /><line x1="290" y1="259" x2="323" y2="259" stroke="#0f172a" stroke-width="6" /><circle r="8" cx="257" cy="235" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5" /><circle r="8" cx="290" cy="217" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5" /><circle r="8" cx="323" cy="259" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5" /><circle r="8" cx="257" cy="280" fill="#14b8a6" stroke="#0f172a" stroke-width="3.5" /><text x="299" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">PARSE</text><rect x="406" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="406" y="158" width="154" height="44" rx="19" fill="#14b8a6" /><circle r="11" cx="480" cy="217" fill="#ffffff" stroke="#0f172a" stroke-width="4" /><circle r="11" cx="455" cy="258" fill="#ffffff" stroke="#0f172a" stroke-width="4" /><circle r="11" cx="515" cy="258" fill="#ffffff" stroke="#0f172a" stroke-width="4" /><circle r="11" cx="480" cy="292" fill="#ffffff" stroke="#0f172a" stroke-width="4" /><line x1="480" y1="228" x2="456" y2="249" stroke="#0f172a" stroke-width="4.5" /><line x1="480" y1="228" x2="514" y2="249" stroke="#0f172a" stroke-width="4.5" /><line x1="456" y1="268" x2="480" y2="280" stroke="#0f172a" stroke-width="4.5" /><line x1="515" y1="268" x2="490" y2="280" stroke="#0f172a" stroke-width="4.5" /><line x1="480" y1="249" x2="480" y2="280" stroke="#0f172a" stroke-width="4.5" /><text x="483" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">PLAN</text><rect x="590" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="590" y="158" width="154" height="44" rx="19" fill="#14b8a6" /><path d="M 644,223 L 677,255 L 665,275 L 631,237 Z" fill="#f59e0b" stroke="#0f172a" stroke-width="6" /><polygon points="631,237 640,250 625,260" fill="#0f172a" stroke="#0f172a" stroke-width="2" /><line x1="648" y1="229" x2="671" y2="256" stroke="#ffffff" stroke-width="3" opacity="0.75" /><text x="667" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">DRAW</text><rect x="774" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="774" y="158" width="154" height="44" rx="19" fill="#f59e0b" /><use href="#validate-symbol" x="795" y="207" width="105" height="105" /><text x="851" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">VALIDATE</text><rect x="958" y="158" rx="19" width="154" height="223" fill="#f8fafc" stroke="#0f172a" stroke-width="7.5" /><rect x="958" y="158" width="154" height="44" rx="19" fill="#f59e0b" /><rect x="980" y="214" width="118" height="93" rx="7" fill="#e2e8f0" stroke="#0f172a" stroke-width="9" /><g clip-path="url(#render-preview)" transform="translate(985,219)"><rect x="0" y="0" width="108" height="82" fill="#bae6fd" /><path d="M0,82 L0,68 Q22,49 48,61 Q71,37 93,59 L108,82 Z" fill="#14b8a6" /><circle r="14.5" cx="77" cy="27" fill="#f59e0b" /><path d="M12,67 L29,39 L51,67 Z" fill="#0f172a" opacity="0.85" /></g><text x="1035" y="357" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#0f172a">RENDER</text><path d="M 193,390 L 217,390" fill="transparent" stroke="#0f172a" stroke-width="7" /><path d="M 377,390 L 404,390" fill="transparent" stroke="#0f172a" stroke-width="7" /><path d="M 560,390 L 589,390" fill="transparent" stroke="#0f172a" stroke-width="7" /><path d="M 744,390 L 771,390" fill="transparent" stroke="#0f172a" stroke-width="7" /><path d="M 929,390 L 956,390" fill="transparent" stroke="#0f172a" stroke-width="7" /><path d="M 483,385        C 505,425 515,435 445,465" fill="transparent" stroke="#0f172a" stroke-width="5.5" /><path d="M 425,535        C 495,555 505,445 585,390" fill="transparent" stroke="#0f172a" stroke-width="5.5" /><rect x="33" y="445" rx="14" width="395" height="265" fill="#f8fafc" stroke="#0f172a" stroke-width="7" /><text x="230" y="470" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15" font-weight="700" fill="#0f172a">COMPONENT ATTENTION</text><text x="230" y="488" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="15" font-weight="700" fill="#0f172a">WEIGHTS (%)</text><rect x="71" y="529" width="34" height="157" rx="4" fill="#14b8a6" stroke="#0f172a" stroke-width="3" /><rect x="127" y="573" width="34" height="113" rx="4" fill="#14b8a6" stroke="#0f172a" stroke-width="3" /><rect x="183" y="547" width="34" height="139" rx="4" fill="#14b8a6" stroke="#0f172a" stroke-width="3" /><rect x="239" y="597" width="34" height="89" rx="4" fill="#14b8a6" stroke="#0f172a" stroke-width="3" /><rect x="295" y="535" width="34" height="151" rx="4" fill="#14b8a6" stroke="#0f172a" stroke-width="3" /><text transform="translate(79,700) rotate(-38)" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11.5" font-weight="600" fill="#0f172a">Syntax</text><text transform="translate(137,700) rotate(-38)" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11.5" font-weight="600" fill="#0f172a">Layout</text><text transform="translate(196,700) rotate(-38)" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11.5" font-weight="600" fill="#0f172a">Text</text><text transform="translate(256,700) rotate(-38)" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11.5" font-weight="600" fill="#0f172a">Safety</text><text transform="translate(316,700) rotate(-38)" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11.5" font-weight="600" fill="#0f172a">Style</text><text x="88" y="517" text-anchor="middle" font-family="monospace" font-size="10.5" font-weight="700" fill="#0f172a">95</text><text x="144" y="561" text-anchor="middle" font-family="monospace" font-size="10.5" font-weight="700" fill="#0f172a">70</text><text x="200" y="535" text-anchor="middle" font-family="monospace" font-size="10.5" font-weight="700" fill="#0f172a">85</text><text x="256" y="584" text-anchor="middle" font-family="monospace" font-size="10.5" font-weight="700" fill="#0f172a">55</text><text x="313" y="523" text-anchor="middle" font-family="monospace" font-size="10.5" font-weight="700" fill="#0f172a">92</text><rect x="665" y="445" rx="16" width="475" height="245" fill="#f8fafc" stroke="#f59e0b" stroke-width="9.5" /><rect x="682" y="455" width="245" height="29" rx="4" fill="#f59e0b" /><text x="694" y="475" font-family="Helvetica, Arial, sans-serif" font-size="15.5" font-weight="700" fill="#ffffff">COMMON FAILURE MODES</text><text x="690" y="510" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a">� Prompt ambiguity in spatial mapping</text><text x="690" y="537" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a">� Path command syntax errors</text><text x="690" y="564" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a">� Incorrect viewBox or transform math</text><text x="690" y="591" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a">� Style conflicts and layering issues</text><rect x="935" y="145" rx="11" width="225" height="125" fill="#f8fafc" stroke="#0f172a" stroke-width="6" /><text x="955" y="165" font-family="Helvetica, Arial, sans-serif" font-size="13.5" font-weight="700" fill="#0f172a">PHASE KEY</text><rect x="950" y="177" width="19" height="19" rx="2.5" fill="#1d4ed8" /><text x="977" y="191" font-family="Helvetica, Arial, sans-serif" font-size="12.5" fill="#0f172a">Analysis</text><rect x="950" y="202" width="19" height="19" rx="2.5" fill="#14b8a6" /><text x="977" y="216" font-family="Helvetica, Arial, sans-serif" font-size="12.5" fill="#0f172a">Synthesis</text><rect x="950" y="227" width="19" height="19" rx="2.5" fill="#f59e0b" /><text x="977" y="241" font-family="Helvetica, Arial, sans-serif" font-size="12.5" fill="#0f172a">Refinement</text><text x="600" y="775" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.75">
    Illustrative only � Conceptual AI SVG generation pipeline � All graphics created with SVG primitives
  </text></svg>

OpenAI

OpenAI: GPT-5.5

openai/gpt-5.5
97/100

Sanitizer accepted the SVG after removing 10 unsupported safe attribute(s) or element(s). Required label coverage: 16/16. Score includes a 3-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. OpenAI GPT Latest chip resolved to GPT-5.5.
Raw SHA-256
507284944a8467eeddbe4356617f3a48a07e6ea72fae8fef6e970c3d9c390750
Raw size
13876 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" viewBox="0 0 1200 800" role="img" aria-labelledby="svgTitle svgDesc">
  <title id="svgTitle">How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc id="svgDesc">An editorial infographic showing six left-to-right stages: Prompt, Parse, Plan, Draw, Validate, and Render, with arrows, a mini bar chart, a warning callout, legend, subtitle, and footer note.</desc>

  <defs>
    <linearGradient id="pageGradient" x1="0" y1="0" x2="1200" y2="800" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f8fafc"/>
      <stop offset="1" stop-color="#ffffff"/>
    </linearGradient>

    <linearGradient id="moduleGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#ffffff"/>
      <stop offset="1" stop-color="#f8fafc"/>
    </linearGradient>

    <clipPath id="chartClip">
      <rect x="91" y="485" width="310" height="112" rx="0" ry="0"/>
    </clipPath>

    <marker id="arrowHead" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto" markerUnits="strokeWidth">
      <path d="M 1 1 L 11 6 L 1 11 Z" fill="#1d4ed8"/>
    </marker>

    <symbol id="sparkSymbol" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="3" fill="#14b8a6"/>
      <line x1="12" y1="1" x2="12" y2="5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="12" y1="19" x2="12" y2="23" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="1" y1="12" x2="5" y2="12" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="19" y1="12" x2="23" y2="12" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
    </symbol>

    <g id="moduleFrame">
      <rect width="150" height="160" rx="22" fill="url(#moduleGradient)" stroke="#1d4ed8" stroke-width="2"/>
      <rect x="14" y="14" width="122" height="64" rx="16" fill="#f8fafc" stroke="#14b8a6" stroke-width="2"/>
    </g>
  </defs>

  <rect x="0" y="0" width="1200" height="800" fill="url(#pageGradient)"/>

  <use href="#sparkSymbol" x="78" y="42" width="28" height="28"/>
  <text x="600" y="58" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text>
  <text x="600" y="88" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16" fill="#1d4ed8">From natural-language intent to structured SVG decisions, checks, and final rendering</text>

  <rect x="36" y="130" width="1128" height="250" rx="30" fill="#ffffff" stroke="#f8fafc" stroke-width="4"/>

  <!-- Stage 1: Prompt -->
  <g transform="translate(45 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Prompt</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">intent + constraints</text>
    <rect x="42" y="31" width="66" height="34" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2"/>
    <line x1="51" y1="42" x2="99" y2="42" stroke="#14b8a6" stroke-width="3" stroke-linecap="round"/>
    <line x1="51" y1="53" x2="86" y2="53" stroke="#14b8a6" stroke-width="3" stroke-linecap="round"/>
    <circle cx="108" cy="31" r="7" fill="#f59e0b"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Stage 2: Parse -->
  <g transform="translate(235 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Parse</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">entities + rules</text>
    <circle cx="75" cy="34" r="9" fill="#1d4ed8"/>
    <circle cx="48" cy="62" r="8" fill="#14b8a6"/>
    <circle cx="75" cy="62" r="8" fill="#14b8a6"/>
    <circle cx="102" cy="62" r="8" fill="#14b8a6"/>
    <line x1="75" y1="43" x2="48" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    <line x1="75" y1="43" x2="75" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    <line x1="75" y1="43" x2="102" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Stage 3: Plan -->
  <g transform="translate(425 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Plan</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">layout blueprint</text>
    <rect x="48" y="28" width="54" height="44" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2"/>
    <rect x="57" y="38" width="14" height="12" rx="2" fill="#14b8a6"/>
    <rect x="78" y="38" width="15" height="12" rx="2" fill="#f59e0b"/>
    <line x1="57" y1="60" x2="93" y2="60" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    <line x1="57" y1="66" x2="82" y2="66" stroke="#0f172a" stroke-width="2" stroke-linecap="round"/>
    <circle cx="102" cy="28" r="6" fill="#14b8a6"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Stage 4: Draw -->
  <g transform="translate(615 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Draw</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">SVG primitives</text>
    <path d="M45 62 C58 31, 91 31, 105 62" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round"/>
    <circle cx="45" cy="62" r="5" fill="#14b8a6"/>
    <circle cx="105" cy="62" r="5" fill="#14b8a6"/>
    <rect x="69" y="28" width="13" height="44" rx="5" transform="rotate(28 75.5 50)" fill="#f59e0b" stroke="#0f172a" stroke-width="2"/>
    <circle cx="75" cy="50" r="4" fill="#ffffff"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Stage 5: Validate -->
  <g transform="translate(805 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Validate</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">rules + review</text>
    <path d="M75 25 L106 38 L101 62 C98 72, 85 76, 75 80 C65 76, 52 72, 49 62 L44 38 Z" fill="#ffffff" stroke="#1d4ed8" stroke-width="2"/>
    <path d="M61 54 L71 64 L91 43" fill="none" stroke="#14b8a6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="104" cy="31" r="7" fill="#f59e0b"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Stage 6: Render -->
  <g transform="translate(995 170)">
    <use href="#moduleFrame"/>
    <text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Render</text>
    <text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">final graphic</text>
    <rect x="42" y="29" width="66" height="43" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2"/>
    <circle cx="58" cy="43" r="6" fill="#f59e0b"/>
    <path d="M45 68 L66 52 L79 62 L89 50 L106 68 Z" fill="#14b8a6"/>
    <line x1="59" y1="79" x2="91" y2="79" stroke="#0f172a" stroke-width="3" stroke-linecap="round"/>
    <line x1="75" y1="72" x2="75" y2="79" stroke="#0f172a" stroke-width="3" stroke-linecap="round"/>
    <use href="#sparkSymbol" x="25" y="24" width="18" height="18"/>
  </g>

  <!-- Exactly 7 directional arrows -->
  <line x1="195" y1="250" x2="225" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <line x1="385" y1="250" x2="415" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <line x1="575" y1="250" x2="605" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <line x1="765" y1="250" x2="795" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <line x1="955" y1="250" x2="985" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <path d="M500 330 C430 405, 270 405, 245 452" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>
  <path d="M880 330 C905 408, 958 407, 986 451" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" marker-end="url(#arrowHead)"/>

  <!-- Mini bar chart -->
  <g>
    <rect x="58" y="430" width="380" height="220" rx="24" fill="#ffffff" stroke="#14b8a6" stroke-width="2"/>
    <text x="82" y="463" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#0f172a">Quality checks by category</text>
    <text x="82" y="482" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">Mini bar chart</text>

    <line x1="91" y1="597" x2="401" y2="597" stroke="#0f172a" stroke-width="2"/>
    <line x1="91" y1="485" x2="91" y2="597" stroke="#0f172a" stroke-width="2"/>

    <g clip-path="url(#chartClip)">
      <rect x="111" y="518" width="34" height="79" rx="6" fill="#1d4ed8"/>
      <rect x="171" y="500" width="34" height="97" rx="6" fill="#14b8a6"/>
      <rect x="231" y="538" width="34" height="59" rx="6" fill="#1d4ed8"/>
      <rect x="291" y="508" width="34" height="89" rx="6" fill="#f59e0b"/>
      <rect x="351" y="527" width="34" height="70" rx="6" fill="#14b8a6"/>
    </g>

    <text x="128" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Syntax</text>
    <text x="188" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Layout</text>
    <text x="248" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Text</text>
    <text x="308" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Safety</text>
    <text x="368" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Style</text>
  </g>

  <!-- Explanatory center card -->
  <g>
    <rect x="468" y="430" width="284" height="220" rx="24" fill="#0f172a" stroke="#1d4ed8" stroke-width="2"/>
    <text x="610" y="464" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#ffffff">What changes at each step?</text>
    <text x="498" y="501" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">The model turns words into structured</text>
    <text x="498" y="523" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">decisions: objects, positions, colors,</text>
    <text x="498" y="545" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">relationships, and validation criteria.</text>
    <rect x="498" y="575" width="224" height="42" rx="12" fill="#1d4ed8"/>
    <text x="610" y="601" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#ffffff">Text intent becomes SVG structure</text>
  </g>

  <!-- Warning callout -->
  <g>
    <rect x="782" y="430" width="360" height="220" rx="24" fill="#ffffff" stroke="#f59e0b" stroke-width="3"/>
    <circle cx="813" cy="461" r="15" fill="#f59e0b"/>
    <text x="813" y="467" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#ffffff">!</text>
    <text x="837" y="466" font-family="Arial, Helvetica, sans-serif" font-size="20" font-weight="700" fill="#0f172a">Common failure modes</text>

    <circle cx="816" cy="505" r="5" fill="#f59e0b"/>
    <text x="835" y="510" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Ambiguous geometry</text>

    <circle cx="816" cy="536" r="5" fill="#f59e0b"/>
    <text x="835" y="541" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Overcrowded labels</text>

    <circle cx="816" cy="567" r="5" fill="#f59e0b"/>
    <text x="835" y="572" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Unsafe content</text>

    <circle cx="816" cy="598" r="5" fill="#f59e0b"/>
    <text x="835" y="603" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Style drift</text>
  </g>

  <!-- Legend -->
  <g>
    <rect x="380" y="690" width="440" height="54" rx="18" fill="#ffffff" stroke="#f8fafc" stroke-width="3"/>
    <text x="405" y="724" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Legend</text>

    <circle cx="480" cy="719" r="7" fill="#1d4ed8"/>
    <text x="494" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Blue: reasoning flow</text>

    <circle cx="625" cy="719" r="7" fill="#14b8a6"/>
    <text x="639" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Teal: generated structure</text>

    <circle cx="790" cy="719" r="7" fill="#f59e0b"/>
    <text x="804" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Amber: checks</text>
  </g>

  <text x="600" y="774" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Footer note: SVG generation is iterative�good prompts specify dimensions, labels, palette, constraints, and validation requirements.</text>
</svg>
Sanitized SVG
<svg width="1200" height="800" viewBox="0 0 1200 800" role="img" xmlns="http://www.w3.org/2000/svg"><title id="svgTitle">How an AI Model Converts a Prompt into Vector Graphics</title><desc id="svgDesc">An editorial infographic showing six left-to-right stages: Prompt, Parse, Plan, Draw, Validate, and Render, with arrows, a mini bar chart, a warning callout, legend, subtitle, and footer note.</desc><defs><linearGradient id="pageGradient" x1="0" y1="0" x2="1200" y2="800" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f8fafc" /><stop offset="1" stop-color="#ffffff" /></linearGradient><linearGradient id="moduleGradient" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff" /><stop offset="1" stop-color="#f8fafc" /></linearGradient><clipPath id="chartClip"><rect x="91" y="485" width="310" height="112" rx="0" ry="0" /></clipPath><g id="moduleFrame"><rect width="150" height="160" rx="22" fill="url(#moduleGradient)" stroke="#1d4ed8" stroke-width="2" /><rect x="14" y="14" width="122" height="64" rx="16" fill="#f8fafc" stroke="#14b8a6" stroke-width="2" /></g></defs><rect x="0" y="0" width="1200" height="800" fill="url(#pageGradient)" /><use href="#sparkSymbol" x="78" y="42" width="28" height="28" /><text x="600" y="58" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text><text x="600" y="88" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="16" fill="#1d4ed8">From natural-language intent to structured SVG decisions, checks, and final rendering</text><rect x="36" y="130" width="1128" height="250" rx="30" fill="#ffffff" stroke="#f8fafc" stroke-width="4" /><g transform="translate(45 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Prompt</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">intent + constraints</text><rect x="42" y="31" width="66" height="34" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2" /><line x1="51" y1="42" x2="99" y2="42" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" /><line x1="51" y1="53" x2="86" y2="53" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" /><circle cx="108" cy="31" r="7" fill="#f59e0b" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><g transform="translate(235 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Parse</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">entities + rules</text><circle cx="75" cy="34" r="9" fill="#1d4ed8" /><circle cx="48" cy="62" r="8" fill="#14b8a6" /><circle cx="75" cy="62" r="8" fill="#14b8a6" /><circle cx="102" cy="62" r="8" fill="#14b8a6" /><line x1="75" y1="43" x2="48" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round" /><line x1="75" y1="43" x2="75" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round" /><line x1="75" y1="43" x2="102" y2="54" stroke="#0f172a" stroke-width="2" stroke-linecap="round" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><g transform="translate(425 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Plan</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">layout blueprint</text><rect x="48" y="28" width="54" height="44" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2" /><rect x="57" y="38" width="14" height="12" rx="2" fill="#14b8a6" /><rect x="78" y="38" width="15" height="12" rx="2" fill="#f59e0b" /><line x1="57" y1="60" x2="93" y2="60" stroke="#0f172a" stroke-width="2" stroke-linecap="round" /><line x1="57" y1="66" x2="82" y2="66" stroke="#0f172a" stroke-width="2" stroke-linecap="round" /><circle cx="102" cy="28" r="6" fill="#14b8a6" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><g transform="translate(615 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Draw</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">SVG primitives</text><path d="M45 62 C58 31, 91 31, 105 62" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><circle cx="45" cy="62" r="5" fill="#14b8a6" /><circle cx="105" cy="62" r="5" fill="#14b8a6" /><rect x="69" y="28" width="13" height="44" rx="5" transform="rotate(28 75.5 50)" fill="#f59e0b" stroke="#0f172a" stroke-width="2" /><circle cx="75" cy="50" r="4" fill="#ffffff" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><g transform="translate(805 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Validate</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">rules + review</text><path d="M75 25 L106 38 L101 62 C98 72, 85 76, 75 80 C65 76, 52 72, 49 62 L44 38 Z" fill="#ffffff" stroke="#1d4ed8" stroke-width="2" /><path d="M61 54 L71 64 L91 43" fill="none" stroke="#14b8a6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" /><circle cx="104" cy="31" r="7" fill="#f59e0b" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><g transform="translate(995 170)"><use href="#moduleFrame" /><text x="75" y="112" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="21" font-weight="700" fill="#0f172a">Render</text><text x="75" y="136" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">final graphic</text><rect x="42" y="29" width="66" height="43" rx="6" fill="#ffffff" stroke="#1d4ed8" stroke-width="2" /><circle cx="58" cy="43" r="6" fill="#f59e0b" /><path d="M45 68 L66 52 L79 62 L89 50 L106 68 Z" fill="#14b8a6" /><line x1="59" y1="79" x2="91" y2="79" stroke="#0f172a" stroke-width="3" stroke-linecap="round" /><line x1="75" y1="72" x2="75" y2="79" stroke="#0f172a" stroke-width="3" stroke-linecap="round" /><use href="#sparkSymbol" x="25" y="24" width="18" height="18" /></g><line x1="195" y1="250" x2="225" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><line x1="385" y1="250" x2="415" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><line x1="575" y1="250" x2="605" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><line x1="765" y1="250" x2="795" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><line x1="955" y1="250" x2="985" y2="250" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><path d="M500 330 C430 405, 270 405, 245 452" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><path d="M880 330 C905 408, 958 407, 986 451" fill="none" stroke="#1d4ed8" stroke-width="4" stroke-linecap="round" /><g><rect x="58" y="430" width="380" height="220" rx="24" fill="#ffffff" stroke="#14b8a6" stroke-width="2" /><text x="82" y="463" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#0f172a">Quality checks by category</text><text x="82" y="482" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#1d4ed8">Mini bar chart</text><line x1="91" y1="597" x2="401" y2="597" stroke="#0f172a" stroke-width="2" /><line x1="91" y1="485" x2="91" y2="597" stroke="#0f172a" stroke-width="2" /><g clip-path="url(#chartClip)"><rect x="111" y="518" width="34" height="79" rx="6" fill="#1d4ed8" /><rect x="171" y="500" width="34" height="97" rx="6" fill="#14b8a6" /><rect x="231" y="538" width="34" height="59" rx="6" fill="#1d4ed8" /><rect x="291" y="508" width="34" height="89" rx="6" fill="#f59e0b" /><rect x="351" y="527" width="34" height="70" rx="6" fill="#14b8a6" /></g><text x="128" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Syntax</text><text x="188" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Layout</text><text x="248" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Text</text><text x="308" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Safety</text><text x="368" y="620" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Style</text></g><g><rect x="468" y="430" width="284" height="220" rx="24" fill="#0f172a" stroke="#1d4ed8" stroke-width="2" /><text x="610" y="464" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#ffffff">What changes at each step?</text><text x="498" y="501" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">The model turns words into structured</text><text x="498" y="523" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">decisions: objects, positions, colors,</text><text x="498" y="545" font-family="Arial, Helvetica, sans-serif" font-size="14" fill="#f8fafc">relationships, and validation criteria.</text><rect x="498" y="575" width="224" height="42" rx="12" fill="#1d4ed8" /><text x="610" y="601" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#ffffff">Text intent becomes SVG structure</text></g><g><rect x="782" y="430" width="360" height="220" rx="24" fill="#ffffff" stroke="#f59e0b" stroke-width="3" /><circle cx="813" cy="461" r="15" fill="#f59e0b" /><text x="813" y="467" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="18" font-weight="700" fill="#ffffff">!</text><text x="837" y="466" font-family="Arial, Helvetica, sans-serif" font-size="20" font-weight="700" fill="#0f172a">Common failure modes</text><circle cx="816" cy="505" r="5" fill="#f59e0b" /><text x="835" y="510" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Ambiguous geometry</text><circle cx="816" cy="536" r="5" fill="#f59e0b" /><text x="835" y="541" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Overcrowded labels</text><circle cx="816" cy="567" r="5" fill="#f59e0b" /><text x="835" y="572" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Unsafe content</text><circle cx="816" cy="598" r="5" fill="#f59e0b" /><text x="835" y="603" font-family="Arial, Helvetica, sans-serif" font-size="15" fill="#0f172a">Style drift</text></g><g><rect x="380" y="690" width="440" height="54" rx="18" fill="#ffffff" stroke="#f8fafc" stroke-width="3" /><text x="405" y="724" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Legend</text><circle cx="480" cy="719" r="7" fill="#1d4ed8" /><text x="494" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Blue: reasoning flow</text><circle cx="625" cy="719" r="7" fill="#14b8a6" /><text x="639" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Teal: generated structure</text><circle cx="790" cy="719" r="7" fill="#f59e0b" /><text x="804" y="724" font-family="Arial, Helvetica, sans-serif" font-size="13" fill="#0f172a">Amber: checks</text></g><text x="600" y="774" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="12" fill="#0f172a">Footer note: SVG generation is iterative�good prompts specify dimensions, labels, palette, constraints, and validation requirements.</text></svg>

DeepSeek

DeepSeek: DeepSeek V4 Pro

deepseek/deepseek-v4-pro
98/100

Sanitizer accepted the SVG after removing 10 unsupported safe attribute(s) or element(s). Required label coverage: 16/16. Score includes a 2-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. DeepSeek V4 Pro selected directly.
Raw SHA-256
3043cb1e17cdfab13c8c372dbb7f7d04a03f42f73fb0644dfa503202097f4abd
Raw size
15433 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="100%" height="100%">
  <title>How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc>An infographic outlining the 6-stage pipeline from prompt to vector render, including a bar chart of model focus and common failure modes.</desc>
  
  <defs>
    <!-- Arrow Marker -->
    <marker id="arrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#14b8a6" />
    </marker>

    <marker id="arrow-feedback" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 Z" fill="#f59e0b" />
    </marker>
    
    <!-- Gradients -->
    <linearGradient id="header-grad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1d4ed8" />
      <stop offset="100%" stop-color="#14b8a6" />
    </linearGradient>

    <radialGradient id="bg-glow" cx="50%" cy="30%" r="60%">
      <stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.15" />
      <stop offset="100%" stop-color="#0f172a" stop-opacity="0" />
    </radialGradient>

    <linearGradient id="bar-grad-syntax" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#3b82f6" />
      <stop offset="100%" stop-color="#1d4ed8" />
    </linearGradient>

    <linearGradient id="bar-grad-text" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#5eead4" />
      <stop offset="100%" stop-color="#14b8a6" />
    </linearGradient>

    <linearGradient id="bar-grad-safety" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#fbbf24" />
      <stop offset="100%" stop-color="#f59e0b" />
    </linearGradient>

    <!-- Clip Path for Bar Chart -->
    <clipPath id="bar-clip">
      <rect x="50" y="420" width="500" height="250" rx="8" />
    </clipPath>

    <!-- Reusable Icons -->
    <g id="icon-prompt">
      <rect x="0" y="0" width="24" height="18" rx="2" fill="none" stroke="#14b8a6" stroke-width="2"/>
      <line x1="4" y1="6" x2="20" y2="6" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="4" y1="10" x2="16" y2="10" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="4" y1="14" x2="20" y2="14" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
    </g>

    <g id="icon-parse">
      <circle cx="12" cy="4" r="2.5" fill="#14b8a6"/>
      <circle cx="4" cy="16" r="2.5" fill="#14b8a6"/>
      <circle cx="20" cy="16" r="2.5" fill="#14b8a6"/>
      <line x1="12" y1="6.5" x2="6.5" y2="13.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="12" y1="6.5" x2="17.5" y2="13.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
      <line x1="4" y1="18.5" x2="20" y2="18.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round"/>
    </g>

    <g id="icon-plan">
      <rect x="2" y="2" width="20" height="20" rx="2" fill="none" stroke="#14b8a6" stroke-width="2"/>
      <circle cx="12" cy="12" r="4" fill="#14b8a6"/>
      <line x1="2" y1="12" x2="8" y2="12" stroke="#14b8a6" stroke-width="2"/>
      <line x1="16" y1="12" x2="22" y2="12" stroke="#14b8a6" stroke-width="2"/>
      <line x1="12" y1="2" x2="12" y2="8" stroke="#14b8a6" stroke-width="2"/>
      <line x1="12" y1="16" x2="12" y2="22" stroke="#14b8a6" stroke-width="2"/>
    </g>

    <g id="icon-draw">
      <path d="M 4 20 L 8 12 L 12 16 L 8 20 Z" fill="#14b8a6"/>
      <path d="M 8 12 L 18 2 L 22 6 L 12 16 Z" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round"/>
    </g>

    <g id="icon-validate">
      <path d="M 12 2 L 22 7 L 22 14 C 22 18 17 22 12 24 C 7 22 2 18 2 14 L 2 7 Z" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round"/>
      <polyline points="7,12 11,16 17,8" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <g id="icon-render">
      <rect x="2" y="4" width="20" height="14" rx="2" fill="none" stroke="#14b8a6" stroke-width="2"/>
      <polyline points="6,18 18,18 20,22 4,22" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round"/>
      <polygon points="9,8 9,14 14,11" fill="#14b8a6"/>
    </g>
  </defs>

  <!-- Background -->
  <rect width="1200" height="800" fill="#0f172a" />
  
  <!-- Subtle Background Grid Pattern -->
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.04"/>
  </pattern>
  <rect width="1200" height="800" fill="url(#grid)" />
  
  <!-- Glow Effect behind Pipeline -->
  <circle cx="600" cy="220" r="350" fill="url(#bg-glow)" />

  <!-- Header Section -->
  <g id="header">
    <text x="600" y="55" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="30" font-weight="800" fill="url(#header-grad)" letter-spacing="-0.5">
      How an AI Model Converts a Prompt into Vector Graphics
    </text>
    <text x="600" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" fill="#f8fafc" font-weight="400" opacity="0.8">
      A comprehensive pipeline overview from natural language to scalable output
    </text>
  </g>

  <!-- Pipeline Section -->
  <g id="pipeline">
    <!-- Background guiding line -->
    <line x1="110" y1="190" x2="1090" y2="190" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="6,4" opacity="0.25"/>

    <!-- Stage 1: Prompt -->
    <g id="stage-prompt" transform="translate(40, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-prompt" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Prompt</text>
    </g>

    <!-- Arrow 1 -->
    <line x1="180" y1="190" x2="226" y2="190" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrow)"/>

    <!-- Stage 2: Parse -->
    <g id="stage-parse" transform="translate(236, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-parse" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Parse</text>
    </g>

    <!-- Arrow 2 -->
    <line x1="376" y1="190" x2="422" y2="190" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrow)"/>

    <!-- Stage 3: Plan -->
    <g id="stage-plan" transform="translate(432, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-plan" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Plan</text>
    </g>

    <!-- Arrow 3 -->
    <line x1="572" y1="190" x2="618" y2="190" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrow)"/>

    <!-- Stage 4: Draw -->
    <g id="stage-draw" transform="translate(628, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-draw" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Draw</text>
    </g>

    <!-- Arrow 4 -->
    <line x1="768" y1="190" x2="814" y2="190" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrow)"/>

    <!-- Stage 5: Validate -->
    <g id="stage-validate" transform="translate(824, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-validate" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Validate</text>
    </g>

    <!-- Arrow 5 -->
    <line x1="964" y1="190" x2="1010" y2="190" stroke="#14b8a6" stroke-width="2" marker-end="url(#arrow)"/>

    <!-- Stage 6: Render -->
    <g id="stage-render" transform="translate(1020, 130)">
      <rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4"/>
      <use href="#icon-render" x="58" y="25" width="24" height="24"/>
      <text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Render</text>
    </g>

    <!-- Arrow 6: Feedback Loop (Validate to Draw) -->
    <path d="M 894 250 C 894 360, 698 360, 698 250" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4,4" marker-end="url(#arrow-feedback)"/>
    <text x="796" y="340" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f59e0b" text-anchor="middle" font-weight="600">Iterative Refinement Loop</text>

    <!-- Arrow 7: Insight from Bar Chart to Pipeline (Text -> Parse) -->
    <path d="M 300 450 C 300 380, 306 320, 306 250" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-dasharray="3,3" marker-end="url(#arrow)"/>
  </g>

  <!-- Supplementary Content Section -->
  <g id="supplementary">
    
    <!-- Mini Bar Chart -->
    <g id="bar-chart">
      <!-- Background -->
      <rect x="50" y="420" width="500" height="250" rx="8" fill="#0f172a" stroke="#1d4ed8" stroke-opacity="0.3"/>
      <text x="300" y="450" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#ffffff">Model Focus Distribution</text>
      <text x="300" y="468" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f8fafc" opacity="0.6">Relative attention weights per processing domain</text>
      
      <!-- Baseline -->
      <line x1="70" y1="640" x2="530" y2="640" stroke="#1d4ed8" stroke-width="1" opacity="0.4"/>

      <!-- Bars with Clip Path -->
      <g clip-path="url(#bar-clip)">
        <!-- Syntax Bar (85%) -->
        <rect x="75" y="480" width="50" height="160" fill="url(#bar-grad-syntax)" rx="2"/>
        <!-- Layout Bar (70%) -->
        <rect x="175" y="510" width="50" height="130" fill="url(#bar-grad-syntax)" rx="2"/>
        <!-- Text Bar (95%) -->
        <rect x="275" y="460" width="50" height="180" fill="url(#bar-grad-text)" rx="2"/>
        <!-- Safety Bar (60%) -->
        <rect x="375" y="530" width="50" height="110" fill="url(#bar-grad-safety)" rx="2"/>
        <!-- Style Bar (80%) -->
        <rect x="475" y="490" width="50" height="150" fill="url(#bar-grad-syntax)" rx="2"/>
      </g>
      
      <!-- Bar Labels -->
      <text x="100" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Syntax</text>
      <text x="200" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Layout</text>
      <text x="300" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Text</text>
      <text x="400" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Safety</text>
      <text x="500" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Style</text>

      <!-- Percentage Labels -->
      <text x="100" y="472" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">85%</text>
      <text x="200" y="502" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">70%</text>
      <text x="300" y="452" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#5eead4">95%</text>
      <text x="400" y="522" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#fbbf24">60%</text>
      <text x="500" y="482" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">80%</text>
    </g>

    <!-- Warning Callout -->
    <g id="callout">
      <rect x="600" y="420" width="550" height="200" rx="8" fill="#f59e0b" fill-opacity="0.08" stroke="#f59e0b" stroke-opacity="0.3"/>
      <text x="620" y="450" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#f59e0b">? Common failure modes</text>
      
      <!-- Bullet 1 -->
      <circle cx="625" cy="482" r="3.5" fill="#f59e0b"/>
      <text x="638" y="486" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Complex overlapping paths causing render glitches</text>
      
      <!-- Bullet 2 -->
      <circle cx="625" cy="510" r="3.5" fill="#f59e0b"/>
      <text x="638" y="514" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Mismatched text encodings in string-to-glyph mapping</text>
      
      <!-- Bullet 3 -->
      <circle cx="625" cy="538" r="3.5" fill="#f59e0b"/>
      <text x="638" y="542" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Safety filters altering visual semantics</text>
      
      <!-- Bullet 4 -->
      <circle cx="625" cy="566" r="3.5" fill="#f59e0b"/>
      <text x="638" y="570" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Gradient banding due to insufficient color depth</text>
    </g>

    <!-- Legend -->
    <g id="legend">
      <rect x="600" y="640" width="550" height="110" rx="8" fill="#0f172a" stroke="#1d4ed8" stroke-opacity="0.3"/>
      <text x="620" y="668" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#ffffff">Legend</text>
      
      <!-- Legend Item 1: Blue -->
      <rect x="625" y="682" width="12" height="12" rx="2" fill="#1d4ed8"/>
      <text x="645" y="693" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Blue: Standard Processing</text>
      
      <!-- Legend Item 2: Teal -->
      <rect x="625" y="706" width="12" height="12" rx="2" fill="#14b8a6"/>
      <text x="645" y="717" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Teal: Text &amp; Interpretation</text>
      
      <!-- Legend Item 3: Amber -->
      <rect x="625" y="730" width="12" height="12" rx="2" fill="#f59e0b"/>
      <text x="645" y="741" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Amber: Safety Checks</text>
    </g>

  </g>

  <!-- Footer -->
  <g id="footer">
    <text x="600" y="785" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f8fafc" opacity="0.5">
      Source: Internal AI evaluation framework | Data as of June 2026
    </text>
  </g>

</svg>
Sanitized SVG
<svg viewBox="0 0 1200 800" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img"><title>How an AI Model Converts a Prompt into Vector Graphics</title><desc>An infographic outlining the 6-stage pipeline from prompt to vector render, including a bar chart of model focus and common failure modes.</desc><defs><linearGradient id="header-grad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#1d4ed8" /><stop offset="100%" stop-color="#14b8a6" /></linearGradient><radialGradient id="bg-glow" cx="50%" cy="30%" r="60%"><stop offset="0%" stop-color="#1d4ed8" stop-opacity="0.15" /><stop offset="100%" stop-color="#0f172a" stop-opacity="0" /></radialGradient><linearGradient id="bar-grad-syntax" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#3b82f6" /><stop offset="100%" stop-color="#1d4ed8" /></linearGradient><linearGradient id="bar-grad-text" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#5eead4" /><stop offset="100%" stop-color="#14b8a6" /></linearGradient><linearGradient id="bar-grad-safety" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#fbbf24" /><stop offset="100%" stop-color="#f59e0b" /></linearGradient><clipPath id="bar-clip"><rect x="50" y="420" width="500" height="250" rx="8" /></clipPath><g id="icon-prompt"><rect x="0" y="0" width="24" height="18" rx="2" fill="none" stroke="#14b8a6" stroke-width="2" /><line x1="4" y1="6" x2="20" y2="6" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /><line x1="4" y1="10" x2="16" y2="10" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /><line x1="4" y1="14" x2="20" y2="14" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /></g><g id="icon-parse"><circle cx="12" cy="4" r="2.5" fill="#14b8a6" /><circle cx="4" cy="16" r="2.5" fill="#14b8a6" /><circle cx="20" cy="16" r="2.5" fill="#14b8a6" /><line x1="12" y1="6.5" x2="6.5" y2="13.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /><line x1="12" y1="6.5" x2="17.5" y2="13.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /><line x1="4" y1="18.5" x2="20" y2="18.5" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" /></g><g id="icon-plan"><rect x="2" y="2" width="20" height="20" rx="2" fill="none" stroke="#14b8a6" stroke-width="2" /><circle cx="12" cy="12" r="4" fill="#14b8a6" /><line x1="2" y1="12" x2="8" y2="12" stroke="#14b8a6" stroke-width="2" /><line x1="16" y1="12" x2="22" y2="12" stroke="#14b8a6" stroke-width="2" /><line x1="12" y1="2" x2="12" y2="8" stroke="#14b8a6" stroke-width="2" /><line x1="12" y1="16" x2="12" y2="22" stroke="#14b8a6" stroke-width="2" /></g><g id="icon-draw"><path d="M 4 20 L 8 12 L 12 16 L 8 20 Z" fill="#14b8a6" /><path d="M 8 12 L 18 2 L 22 6 L 12 16 Z" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round" /></g><g id="icon-validate"><path d="M 12 2 L 22 7 L 22 14 C 22 18 17 22 12 24 C 7 22 2 18 2 14 L 2 7 Z" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round" /><polyline points="7,12 11,16 17,8" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></g><g id="icon-render"><rect x="2" y="4" width="20" height="14" rx="2" fill="none" stroke="#14b8a6" stroke-width="2" /><polyline points="6,18 18,18 20,22 4,22" fill="none" stroke="#14b8a6" stroke-width="2" stroke-linejoin="round" /><polygon points="9,8 9,14 14,11" fill="#14b8a6" /></g></defs><rect width="1200" height="800" fill="#0f172a" /><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.04" /></pattern><rect width="1200" height="800" fill="url(#grid)" /><circle cx="600" cy="220" r="350" fill="url(#bg-glow)" /><g id="header"><text x="600" y="55" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="30" font-weight="800" fill="url(#header-grad)">
      How an AI Model Converts a Prompt into Vector Graphics
    </text><text x="600" y="85" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" fill="#f8fafc" font-weight="400" opacity="0.8">
      A comprehensive pipeline overview from natural language to scalable output
    </text></g><g id="pipeline"><line x1="110" y1="190" x2="1090" y2="190" stroke="#1d4ed8" stroke-width="2" stroke-dasharray="6,4" opacity="0.25" /><g id="stage-prompt" transform="translate(40, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-prompt" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Prompt</text></g><line x1="180" y1="190" x2="226" y2="190" stroke="#14b8a6" stroke-width="2" /><g id="stage-parse" transform="translate(236, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-parse" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Parse</text></g><line x1="376" y1="190" x2="422" y2="190" stroke="#14b8a6" stroke-width="2" /><g id="stage-plan" transform="translate(432, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-plan" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Plan</text></g><line x1="572" y1="190" x2="618" y2="190" stroke="#14b8a6" stroke-width="2" /><g id="stage-draw" transform="translate(628, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-draw" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Draw</text></g><line x1="768" y1="190" x2="814" y2="190" stroke="#14b8a6" stroke-width="2" /><g id="stage-validate" transform="translate(824, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-validate" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Validate</text></g><line x1="964" y1="190" x2="1010" y2="190" stroke="#14b8a6" stroke-width="2" /><g id="stage-render" transform="translate(1020, 130)"><rect width="140" height="120" rx="8" fill="#1d4ed8" fill-opacity="0.1" stroke="#14b8a6" stroke-width="1.5" stroke-opacity="0.4" /><use href="#icon-render" x="58" y="25" width="24" height="24" /><text x="70" y="95" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#ffffff">Render</text></g><path d="M 894 250 C 894 360, 698 360, 698 250" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4,4" /><text x="796" y="340" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f59e0b" text-anchor="middle" font-weight="600">Iterative Refinement Loop</text><path d="M 300 450 C 300 380, 306 320, 306 250" fill="none" stroke="#14b8a6" stroke-width="1.5" stroke-dasharray="3,3" /></g><g id="supplementary"><g id="bar-chart"><rect x="50" y="420" width="500" height="250" rx="8" fill="#0f172a" stroke="#1d4ed8" stroke-opacity="0.3" /><text x="300" y="450" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="bold" fill="#ffffff">Model Focus Distribution</text><text x="300" y="468" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f8fafc" opacity="0.6">Relative attention weights per processing domain</text><line x1="70" y1="640" x2="530" y2="640" stroke="#1d4ed8" stroke-width="1" opacity="0.4" /><g clip-path="url(#bar-clip)"><rect x="75" y="480" width="50" height="160" fill="url(#bar-grad-syntax)" rx="2" /><rect x="175" y="510" width="50" height="130" fill="url(#bar-grad-syntax)" rx="2" /><rect x="275" y="460" width="50" height="180" fill="url(#bar-grad-text)" rx="2" /><rect x="375" y="530" width="50" height="110" fill="url(#bar-grad-safety)" rx="2" /><rect x="475" y="490" width="50" height="150" fill="url(#bar-grad-syntax)" rx="2" /></g><text x="100" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Syntax</text><text x="200" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Layout</text><text x="300" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Text</text><text x="400" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Safety</text><text x="500" y="658" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="bold" fill="#f8fafc">Style</text><text x="100" y="472" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">85%</text><text x="200" y="502" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">70%</text><text x="300" y="452" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#5eead4">95%</text><text x="400" y="522" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#fbbf24">60%</text><text x="500" y="482" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="bold" fill="#60a5fa">80%</text></g><g id="callout"><rect x="600" y="420" width="550" height="200" rx="8" fill="#f59e0b" fill-opacity="0.08" stroke="#f59e0b" stroke-opacity="0.3" /><text x="620" y="450" font-family="system-ui, -apple-system, sans-serif" font-size="15" font-weight="bold" fill="#f59e0b">? Common failure modes</text><circle cx="625" cy="482" r="3.5" fill="#f59e0b" /><text x="638" y="486" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Complex overlapping paths causing render glitches</text><circle cx="625" cy="510" r="3.5" fill="#f59e0b" /><text x="638" y="514" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Mismatched text encodings in string-to-glyph mapping</text><circle cx="625" cy="538" r="3.5" fill="#f59e0b" /><text x="638" y="542" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Safety filters altering visual semantics</text><circle cx="625" cy="566" r="3.5" fill="#f59e0b" /><text x="638" y="570" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#f8fafc">Gradient banding due to insufficient color depth</text></g><g id="legend"><rect x="600" y="640" width="550" height="110" rx="8" fill="#0f172a" stroke="#1d4ed8" stroke-opacity="0.3" /><text x="620" y="668" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="bold" fill="#ffffff">Legend</text><rect x="625" y="682" width="12" height="12" rx="2" fill="#1d4ed8" /><text x="645" y="693" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Blue: Standard Processing</text><rect x="625" y="706" width="12" height="12" rx="2" fill="#14b8a6" /><text x="645" y="717" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Teal: Text &amp; Interpretation</text><rect x="625" y="730" width="12" height="12" rx="2" fill="#f59e0b" /><text x="645" y="741" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#f8fafc">Amber: Safety Checks</text></g></g><g id="footer"><text x="600" y="785" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#f8fafc" opacity="0.5">
      Source: Internal AI evaluation framework | Data as of June 2026
    </text></g></svg>

Qwen

Qwen: Qwen3.7 Max

qwen/qwen3.7-max
89/100

Sanitizer accepted the SVG after removing 23 unsupported safe attribute(s) or element(s). Required label coverage: 15/16. Score includes a 10-point quality penalty for sanitizer removals and/or decoded replacement characters. Missing checked terms: blue.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781992973-jqygWHHhWZ5hLIyA1bQP, six models side-by-side, tools 0 active, captured 2026-06-20. Qwen3.7 Max selected directly.
Raw SHA-256
2ff5cc8be896e4305a9ae73f362cacae7dec1722fe21c47891c9b871f7192cc0
Raw size
19906 bytes
SVG validity
15
Safety
20
Instruction adherence
24
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" width="1200" height="800" role="img" aria-labelledby="t d">
  <title id="t">How an AI Model Converts a Prompt into Vector Graphics</title>
  <desc id="d">An editorial infographic showing a six-stage pipeline � Prompt, Parse, Plan, Draw, Validate, Render � with a validation bar chart, a warning callout listing common failure modes, and a color legend.</desc>

  <defs>
    <!-- Gradients -->
    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#f8fafc"/>
      <stop offset="100%" stop-color="#ffffff"/>
    </linearGradient>
    <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1d4ed8"/>
      <stop offset="100%" stop-color="#14b8a6"/>
    </linearGradient>
    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="100%" stop-color="#1d4ed8"/>
    </linearGradient>

    <!-- ClipPath: decorative clipped circle behind the title accent -->
    <clipPath id="titleClip">
      <rect x="0" y="0" width="1200" height="110" rx="0"/>
    </clipPath>

    <!-- Arrowhead marker (directional arrow) -->
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#1d4ed8"/>
    </marker>
    <marker id="arrowTeal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#14b8a6"/>
    </marker>
    <marker id="arrowAmber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0,0 L10,5 L0,10 Z" fill="#f59e0b"/>
    </marker>

    <!-- Reusable symbol: stage number badge -->
    <symbol id="badge" viewBox="0 0 24 24" overflow="visible">
      <circle cx="12" cy="12" r="11" fill="#0f172a"/>
      <circle cx="12" cy="12" r="8" fill="none" stroke="#14b8a6" stroke-width="1"/>
    </symbol>

    <!-- Reusable icon group: spark/star used as decoration -->
    <symbol id="spark" viewBox="-6 -6 12 12">
      <path d="M0,-5 L1,-1 L5,0 L1,1 L0,5 L-1,1 L-5,0 L-1,-1 Z" fill="#f59e0b"/>
    </symbol>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="1200" height="800" fill="url(#bgGrad)"/>

  <!-- Title bar with clipped decorative gradient -->
  <g clip-path="url(#titleClip)">
    <rect x="0" y="0" width="1200" height="110" fill="#ffffff"/>
    <circle cx="1120" cy="40" r="140" fill="url(#titleGrad)" opacity="0.08"/>
    <circle cx="1020" cy="110" r="90" fill="#14b8a6" opacity="0.10"/>
  </g>

  <!-- Title -->
  <text x="60" y="52" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text>
  <text x="60" y="82" font-family="Helvetica, Arial, sans-serif" font-size="15" fill="#1d4ed8" font-weight="600" letter-spacing="2">THE SIX-STAGE GENERATION PIPELINE</text>
  <text x="60" y="104" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a" opacity="0.7">From natural language to precise geometric primitives � a step-by-step transformation.</text>

  <!-- Decorative spark -->
  <use href="#spark" x="1140" y="60" width="20" height="20"/>

  <!-- ============================================================= -->
  <!-- PIPELINE (6 stages)                                            -->
  <!-- ============================================================= -->

  <!-- Shared: each stage = 150 wide, 130 tall, starting y=160 -->

  <!-- Stage 1: Prompt -->
  <g transform="translate(60,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">01 � INPUT</text>

    <!-- Icon: speech / document lines -->
    <g transform="translate(45,50)">
      <rect x="0" y="0" width="60" height="50" rx="6" fill="#f8fafc" stroke="#1d4ed8" stroke-width="1.5"/>
      <rect x="8" y="10" width="44" height="4" fill="#1d4ed8"/>
      <rect x="8" y="20" width="36" height="4" fill="#14b8a6"/>
      <rect x="8" y="30" width="40" height="4" fill="#1d4ed8"/>
      <rect x="8" y="40" width="22" height="4" fill="#f59e0b"/>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Prompt</text>
  </g>

  <!-- Stage 2: Parse -->
  <g transform="translate(240,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">02 � TOKENIZE</text>

    <!-- Icon: angle brackets <> -->
    <g transform="translate(45,60)" font-family="Menlo, monospace" font-size="34" font-weight="700" fill="#1d4ed8">
      <text x="0" y="26">&lt;</text>
      <text x="28" y="26" fill="#14b8a6">/</text>
      <text x="44" y="26">&gt;</text>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Parse</text>
  </g>

  <!-- Stage 3: Plan -->
  <g transform="translate(420,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">03 � STRUCTURE</text>

    <!-- Icon: 2x2 grid layout -->
    <g transform="translate(45,55)">
      <rect x="0" y="0" width="28" height="28" rx="4" fill="#1d4ed8"/>
      <rect x="32" y="0" width="28" height="28" rx="4" fill="#14b8a6"/>
      <rect x="0" y="32" width="28" height="28" rx="4" fill="#14b8a6"/>
      <rect x="32" y="32" width="28" height="28" rx="4" fill="#1d4ed8"/>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Plan</text>
  </g>

  <!-- Stage 4: Draw -->
  <g transform="translate(600,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">04 � GEOMETRY</text>

    <!-- Icon: pen / pencil diagonal -->
    <g transform="translate(45,55)">
      <path d="M5,60 L45,20 L60,35 L20,75 Z" fill="none" stroke="#1d4ed8" stroke-width="2"/>
      <path d="M45,20 L55,10 L70,25 L60,35 Z" fill="#f59e0b" stroke="#0f172a" stroke-width="1.5"/>
      <path d="M5,60 L0,78 L20,75 Z" fill="#14b8a6" stroke="#0f172a" stroke-width="1.2"/>
      <line x1="10" y1="66" x2="20" y2="76" stroke="#0f172a" stroke-width="1"/>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Draw</text>
  </g>

  <!-- Stage 5: Validate -->
  <g transform="translate(780,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">05 � CHECK</text>

    <!-- Icon: checkmark in circle -->
    <g transform="translate(45,55)">
      <circle cx="30" cy="30" r="28" fill="#f8fafc" stroke="#14b8a6" stroke-width="2"/>
      <path d="M15,30 L26,42 L46,20" fill="none" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Validate</text>
  </g>

  <!-- Stage 6: Render -->
  <g transform="translate(960,160)">
    <rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a"/>
    <rect x="0" y="18" width="150" height="10" fill="#0f172a"/>
    <use href="#badge" x="10" y="4" width="20" height="20"/>
    <text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff" letter-spacing="1">06 � OUTPUT</text>

    <!-- Icon: image frame with mountain + sun -->
    <g transform="translate(45,55)">
      <rect x="0" y="0" width="60" height="60" rx="4" fill="#f8fafc" stroke="#0f172a" stroke-width="1.5"/>
      <circle cx="16" cy="16" r="6" fill="#f59e0b"/>
      <path d="M2,56 L22,32 L34,44 L46,26 L58,42 L58,56 Z" fill="#1d4ed8"/>
      <path d="M34,44 L46,26 L58,42 L58,56 L34,56 Z" fill="#14b8a6"/>
    </g>

    <text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Render</text>
  </g>

  <!-- ============================================================= -->
  <!-- ARROWS (exactly 7)                                             -->
  <!-- ============================================================= -->

  <!-- Arrow 1: Prompt -> Parse -->
  <line x1="210" y1="225" x2="236" y2="225" stroke="#1d4ed8" stroke-width="2.5" marker-end="url(#arrow)"/>

  <!-- Arrow 2: Parse -> Plan -->
  <line x1="390" y1="225" x2="416" y2="225" stroke="#1d4ed8" stroke-width="2.5" marker-end="url(#arrow)"/>

  <!-- Arrow 3: Plan -> Draw -->
  <line x1="570" y1="225" x2="596" y2="225" stroke="#1d4ed8" stroke-width="2.5" marker-end="url(#arrow)"/>

  <!-- Arrow 4: Draw -> Validate -->
  <line x1="750" y1="225" x2="776" y2="225" stroke="#1d4ed8" stroke-width="2.5" marker-end="url(#arrow)"/>

  <!-- Arrow 5: Validate -> Render -->
  <line x1="930" y1="225" x2="956" y2="225" stroke="#1d4ed8" stroke-width="2.5" marker-end="url(#arrow)"/>

  <!-- Arrow 6: Feedback loop Validate back to Plan (curved, above) -->
  <path d="M 855 160 C 855 115, 495 115, 495 160"
        fill="none" stroke="#14b8a6" stroke-width="2" stroke-dasharray="5 4" marker-end="url(#arrowTeal)"/>
  <rect x="620" y="104" width="110" height="20" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1"/>
  <text x="675" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="10" font-weight="700" fill="#14b8a6">REFINE LOOP</text>

  <!-- Arrow 7: Conceptual arrow from Validate metrics down into bar chart -->
  <path d="M 855 290 C 855 340, 300 330, 300 430"
        fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 3" marker-end="url(#arrowAmber)"/>
  <text x="560" y="348" font-family="Helvetica, Arial, sans-serif" font-size="10" font-weight="700" fill="#f59e0b" letter-spacing="1">METRICS FEED</text>

  <!-- ============================================================= -->
  <!-- BAR CHART (left lower)                                         -->
  <!-- ============================================================= -->

  <g transform="translate(60,430)">
    <rect x="0" y="0" width="430" height="280" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5"/>
    <text x="24" y="34" font-family="Georgia, serif" font-size="18" font-weight="700" fill="#0f172a">Validation quality score</text>
    <text x="24" y="54" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.6">Average pass rate across 10k generated SVGs</text>

    <!-- Y-axis labels -->
    <text x="36" y="90"  text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">100</text>
    <text x="36" y="130" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">75</text>
    <text x="36" y="170" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">50</text>
    <text x="36" y="210" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">25</text>
    <text x="36" y="250" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">0</text>

    <!-- Gridlines -->
    <line x1="44" y1="86"  x2="400" y2="86"  stroke="#0f172a" stroke-width="0.5" opacity="0.1"/>
    <line x1="44" y1="126" x2="400" y2="126" stroke="#0f172a" stroke-width="0.5" opacity="0.1"/>
    <line x1="44" y1="166" x2="400" y2="166" stroke="#0f172a" stroke-width="0.5" opacity="0.1"/>
    <line x1="44" y1="206" x2="400" y2="206" stroke="#0f172a" stroke-width="0.5" opacity="0.1"/>
    <line x1="44" y1="246" x2="400" y2="246" stroke="#0f172a" stroke-width="1"/>

    <!-- Bars (baseline at y=246; bar heights = value * 1.6) -->
    <!-- Syntax 92 -> 147 height, top = 99 -->
    <rect x="60"  y="99"  width="52" height="147" fill="url(#barGrad)"/>
    <text x="86" y="90" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">92</text>
    <text x="86" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Syntax</text>

    <!-- Layout 78 -> 125 height, top = 121 -->
    <rect x="128" y="121" width="52" height="125" fill="url(#barGrad)"/>
    <text x="154" y="112" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">78</text>
    <text x="154" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Layout</text>

    <!-- Text 85 -> 136 height, top = 110 -->
    <rect x="196" y="110" width="52" height="136" fill="url(#barGrad)"/>
    <text x="222" y="101" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">85</text>
    <text x="222" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Text</text>

    <!-- Safety 64 -> 102 height, top = 144 (warning bar, amber accent) -->
    <rect x="264" y="144" width="52" height="102" fill="#f59e0b"/>
    <rect x="264" y="144" width="52" height="4" fill="#0f172a" opacity="0.3"/>
    <text x="290" y="135" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#f59e0b">64</text>
    <text x="290" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#f59e0b">Safety</text>

    <!-- Style 88 -> 141 height, top = 105 -->
    <rect x="332" y="105" width="52" height="141" fill="url(#barGrad)"/>
    <text x="358" y="96" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">88</text>
    <text x="358" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Style</text>
  </g>

  <!-- ============================================================= -->
  <!-- WARNING CALLOUT (right lower)                                  -->
  <!-- ============================================================= -->

  <g transform="translate(510,430)">
    <rect x="0" y="0" width="630" height="280" rx="10" fill="#ffffff" stroke="#f59e0b" stroke-width="2"/>
    <rect x="0" y="0" width="8" height="280" fill="#f59e0b"/>

    <!-- Warning triangle icon -->
    <g transform="translate(26,20)">
      <path d="M18,2 L34,30 L2,30 Z" fill="#f59e0b" stroke="#0f172a" stroke-width="1.5" stroke-linejoin="round"/>
      <rect x="16" y="11" width="4" height="11" fill="#0f172a"/>
      <rect x="16" y="24" width="4" height="4" fill="#0f172a"/>
    </g>

    <text x="72" y="38" font-family="Georgia, serif" font-size="18" font-weight="700" fill="#0f172a">Common failure modes</text>
    <text x="72" y="56" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.6">Where the pipeline breaks down in production</text>

    <!-- 4 bullet items -->
    <g font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a">
      <!-- bullet 1 -->
      <circle cx="40" cy="98"  r="4" fill="#f59e0b"/>
      <text x="56" y="102" font-weight="700">Ambiguous spatial references</text>
      <text x="56" y="120" font-size="11" opacity="0.7">�next to� or �below� without an anchor object collapse into guesswork during the Plan stage.</text>

      <!-- bullet 2 -->
      <circle cx="40" cy="150" r="4" fill="#f59e0b"/>
      <text x="56" y="154" font-weight="700">Style�style conflicts</text>
      <text x="56" y="172" font-size="11" opacity="0.7">Contradictory directives (e.g. �pastel� + �high-contrast�) force the renderer to arbitrate late.</text>

      <!-- bullet 3 -->
      <circle cx="40" cy="202" r="4" fill="#f59e0b"/>
      <text x="56" y="206" font-weight="700">Token budget exhaustion</text>
      <text x="56" y="224" font-size="11" opacity="0.7">Long prompts truncate geometry tokens, producing incomplete SVG elements.</text>

      <!-- bullet 4 -->
      <circle cx="40" cy="254" r="4" fill="#f59e0b"/>
      <text x="56" y="258" font-weight="700">Unsupported primitives</text>
      <text x="56" y="276" font-size="11" opacity="0.7">Requests for &lt;foreignObject&gt; or &lt;use href&gt; to raster assets fail the Validate gate.</text>
    </g>
  </g>

  <!-- ============================================================= -->
  <!-- LEGEND (bottom right inset)                                    -->
  <!-- ============================================================= -->

  <g transform="translate(920,730)">
    <rect x="0" y="0" width="220" height="50" rx="8" fill="#0f172a"/>
    <text x="12" y="16" font-family="Helvetica, Arial, sans-serif" font-size="9" font-weight="700" fill="#ffffff" letter-spacing="1.5">LEGEND</text>
    <rect x="12" y="24" width="12" height="12" rx="2" fill="#1d4ed8"/>
    <text x="28" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Processing</text>
    <rect x="88" y="24" width="12" height="12" rx="2" fill="#14b8a6"/>
    <text x="104" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Creative</text>
    <rect x="154" y="24" width="12" height="12" rx="2" fill="#f59e0b"/>
    <text x="170" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Risk</text>
  </g>

  <!-- Footer rule + note -->
  <line x1="60" y1="740" x2="900" y2="740" stroke="#0f172a" stroke-width="0.5" opacity="0.2"/>
  <text x="60" y="760" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.7">
    Figure 1 � Schematic of the prompt ? vector pipeline. Metrics are illustrative, aggregated over 10,000 synthetic generations.
  </text>
  <text x="60" y="778" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#1d4ed8" font-weight="600" letter-spacing="1">
    EDITORIAL � INFOGRAPHIC � 2026
  </text>
</svg>
Sanitized SVG
<svg viewBox="0 0 1200 800" width="1200" height="800" role="img" xmlns="http://www.w3.org/2000/svg"><title id="t">How an AI Model Converts a Prompt into Vector Graphics</title><desc id="d">An editorial infographic showing a six-stage pipeline � Prompt, Parse, Plan, Draw, Validate, Render � with a validation bar chart, a warning callout listing common failure modes, and a color legend.</desc><defs><linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#f8fafc" /><stop offset="100%" stop-color="#ffffff" /></linearGradient><linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#1d4ed8" /><stop offset="100%" stop-color="#14b8a6" /></linearGradient><linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#0f172a" /><stop offset="100%" stop-color="#1d4ed8" /></linearGradient><clipPath id="titleClip"><rect x="0" y="0" width="1200" height="110" rx="0" /></clipPath></defs><rect x="0" y="0" width="1200" height="800" fill="url(#bgGrad)" /><g clip-path="url(#titleClip)"><rect x="0" y="0" width="1200" height="110" fill="#ffffff" /><circle cx="1120" cy="40" r="140" fill="url(#titleGrad)" opacity="0.08" /><circle cx="1020" cy="110" r="90" fill="#14b8a6" opacity="0.10" /></g><text x="60" y="52" font-family="Georgia, 'Times New Roman', serif" font-size="30" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text><text x="60" y="82" font-family="Helvetica, Arial, sans-serif" font-size="15" fill="#1d4ed8" font-weight="600">THE SIX-STAGE GENERATION PIPELINE</text><text x="60" y="104" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a" opacity="0.7">From natural language to precise geometric primitives � a step-by-step transformation.</text><use href="#spark" x="1140" y="60" width="20" height="20" /><g transform="translate(60,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">01 � INPUT</text><g transform="translate(45,50)"><rect x="0" y="0" width="60" height="50" rx="6" fill="#f8fafc" stroke="#1d4ed8" stroke-width="1.5" /><rect x="8" y="10" width="44" height="4" fill="#1d4ed8" /><rect x="8" y="20" width="36" height="4" fill="#14b8a6" /><rect x="8" y="30" width="40" height="4" fill="#1d4ed8" /><rect x="8" y="40" width="22" height="4" fill="#f59e0b" /></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Prompt</text></g><g transform="translate(240,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">02 � TOKENIZE</text><g transform="translate(45,60)" font-family="Menlo, monospace" font-size="34" font-weight="700" fill="#1d4ed8"><text x="0" y="26">&lt;</text><text x="28" y="26" fill="#14b8a6">/</text><text x="44" y="26">&gt;</text></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Parse</text></g><g transform="translate(420,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">03 � STRUCTURE</text><g transform="translate(45,55)"><rect x="0" y="0" width="28" height="28" rx="4" fill="#1d4ed8" /><rect x="32" y="0" width="28" height="28" rx="4" fill="#14b8a6" /><rect x="0" y="32" width="28" height="28" rx="4" fill="#14b8a6" /><rect x="32" y="32" width="28" height="28" rx="4" fill="#1d4ed8" /></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Plan</text></g><g transform="translate(600,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">04 � GEOMETRY</text><g transform="translate(45,55)"><path d="M5,60 L45,20 L60,35 L20,75 Z" fill="none" stroke="#1d4ed8" stroke-width="2" /><path d="M45,20 L55,10 L70,25 L60,35 Z" fill="#f59e0b" stroke="#0f172a" stroke-width="1.5" /><path d="M5,60 L0,78 L20,75 Z" fill="#14b8a6" stroke="#0f172a" stroke-width="1.2" /><line x1="10" y1="66" x2="20" y2="76" stroke="#0f172a" stroke-width="1" /></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Draw</text></g><g transform="translate(780,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">05 � CHECK</text><g transform="translate(45,55)"><circle cx="30" cy="30" r="28" fill="#f8fafc" stroke="#14b8a6" stroke-width="2" /><path d="M15,30 L26,42 L46,20" fill="none" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Validate</text></g><g transform="translate(960,160)"><rect width="150" height="130" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><rect x="0" y="0" width="150" height="28" rx="10" fill="#0f172a" /><rect x="0" y="18" width="150" height="10" fill="#0f172a" /><use href="#badge" x="10" y="4" width="20" height="20" /><text x="36" y="19" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#ffffff">06 � OUTPUT</text><g transform="translate(45,55)"><rect x="0" y="0" width="60" height="60" rx="4" fill="#f8fafc" stroke="#0f172a" stroke-width="1.5" /><circle cx="16" cy="16" r="6" fill="#f59e0b" /><path d="M2,56 L22,32 L34,44 L46,26 L58,42 L58,56 Z" fill="#1d4ed8" /><path d="M34,44 L46,26 L58,42 L58,56 L34,56 Z" fill="#14b8a6" /></g><text x="75" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="14" font-weight="700" fill="#0f172a">Render</text></g><line x1="210" y1="225" x2="236" y2="225" stroke="#1d4ed8" stroke-width="2.5" /><line x1="390" y1="225" x2="416" y2="225" stroke="#1d4ed8" stroke-width="2.5" /><line x1="570" y1="225" x2="596" y2="225" stroke="#1d4ed8" stroke-width="2.5" /><line x1="750" y1="225" x2="776" y2="225" stroke="#1d4ed8" stroke-width="2.5" /><line x1="930" y1="225" x2="956" y2="225" stroke="#1d4ed8" stroke-width="2.5" /><path d="M 855 160 C 855 115, 495 115, 495 160" fill="none" stroke="#14b8a6" stroke-width="2" stroke-dasharray="5 4" /><rect x="620" y="104" width="110" height="20" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1" /><text x="675" y="118" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="10" font-weight="700" fill="#14b8a6">REFINE LOOP</text><path d="M 855 290 C 855 340, 300 330, 300 430" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="4 3" /><text x="560" y="348" font-family="Helvetica, Arial, sans-serif" font-size="10" font-weight="700" fill="#f59e0b">METRICS FEED</text><g transform="translate(60,430)"><rect x="0" y="0" width="430" height="280" rx="10" fill="#ffffff" stroke="#0f172a" stroke-width="1.5" /><text x="24" y="34" font-family="Georgia, serif" font-size="18" font-weight="700" fill="#0f172a">Validation quality score</text><text x="24" y="54" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.6">Average pass rate across 10k generated SVGs</text><text x="36" y="90" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">100</text><text x="36" y="130" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">75</text><text x="36" y="170" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">50</text><text x="36" y="210" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">25</text><text x="36" y="250" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#0f172a" opacity="0.6">0</text><line x1="44" y1="86" x2="400" y2="86" stroke="#0f172a" stroke-width="0.5" opacity="0.1" /><line x1="44" y1="126" x2="400" y2="126" stroke="#0f172a" stroke-width="0.5" opacity="0.1" /><line x1="44" y1="166" x2="400" y2="166" stroke="#0f172a" stroke-width="0.5" opacity="0.1" /><line x1="44" y1="206" x2="400" y2="206" stroke="#0f172a" stroke-width="0.5" opacity="0.1" /><line x1="44" y1="246" x2="400" y2="246" stroke="#0f172a" stroke-width="1" /><rect x="60" y="99" width="52" height="147" fill="url(#barGrad)" /><text x="86" y="90" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">92</text><text x="86" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Syntax</text><rect x="128" y="121" width="52" height="125" fill="url(#barGrad)" /><text x="154" y="112" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">78</text><text x="154" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Layout</text><rect x="196" y="110" width="52" height="136" fill="url(#barGrad)" /><text x="222" y="101" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">85</text><text x="222" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Text</text><rect x="264" y="144" width="52" height="102" fill="#f59e0b" /><rect x="264" y="144" width="52" height="4" fill="#0f172a" opacity="0.3" /><text x="290" y="135" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#f59e0b">64</text><text x="290" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#f59e0b">Safety</text><rect x="332" y="105" width="52" height="141" fill="url(#barGrad)" /><text x="358" y="96" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1d4ed8">88</text><text x="358" y="264" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="600" fill="#0f172a">Style</text></g><g transform="translate(510,430)"><rect x="0" y="0" width="630" height="280" rx="10" fill="#ffffff" stroke="#f59e0b" stroke-width="2" /><rect x="0" y="0" width="8" height="280" fill="#f59e0b" /><g transform="translate(26,20)"><path d="M18,2 L34,30 L2,30 Z" fill="#f59e0b" stroke="#0f172a" stroke-width="1.5" stroke-linejoin="round" /><rect x="16" y="11" width="4" height="11" fill="#0f172a" /><rect x="16" y="24" width="4" height="4" fill="#0f172a" /></g><text x="72" y="38" font-family="Georgia, serif" font-size="18" font-weight="700" fill="#0f172a">Common failure modes</text><text x="72" y="56" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.6">Where the pipeline breaks down in production</text><g font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#0f172a"><circle cx="40" cy="98" r="4" fill="#f59e0b" /><text x="56" y="102" font-weight="700">Ambiguous spatial references</text><text x="56" y="120" font-size="11" opacity="0.7">�next to� or �below� without an anchor object collapse into guesswork during the Plan stage.</text><circle cx="40" cy="150" r="4" fill="#f59e0b" /><text x="56" y="154" font-weight="700">Style�style conflicts</text><text x="56" y="172" font-size="11" opacity="0.7">Contradictory directives (e.g. �pastel� + �high-contrast�) force the renderer to arbitrate late.</text><circle cx="40" cy="202" r="4" fill="#f59e0b" /><text x="56" y="206" font-weight="700">Token budget exhaustion</text><text x="56" y="224" font-size="11" opacity="0.7">Long prompts truncate geometry tokens, producing incomplete SVG elements.</text><circle cx="40" cy="254" r="4" fill="#f59e0b" /><text x="56" y="258" font-weight="700">Unsupported primitives</text><text x="56" y="276" font-size="11" opacity="0.7">Requests for &lt;foreignObject&gt; or &lt;use href&gt; to raster assets fail the Validate gate.</text></g></g><g transform="translate(920,730)"><rect x="0" y="0" width="220" height="50" rx="8" fill="#0f172a" /><text x="12" y="16" font-family="Helvetica, Arial, sans-serif" font-size="9" font-weight="700" fill="#ffffff">LEGEND</text><rect x="12" y="24" width="12" height="12" rx="2" fill="#1d4ed8" /><text x="28" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Processing</text><rect x="88" y="24" width="12" height="12" rx="2" fill="#14b8a6" /><text x="104" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Creative</text><rect x="154" y="24" width="12" height="12" rx="2" fill="#f59e0b" /><text x="170" y="34" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#ffffff">Risk</text></g><line x1="60" y1="740" x2="900" y2="740" stroke="#0f172a" stroke-width="0.5" opacity="0.2" /><text x="60" y="760" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#0f172a" opacity="0.7">
    Figure 1 � Schematic of the prompt ? vector pipeline. Metrics are illustrative, aggregated over 10,000 synthetic generations.
  </text><text x="60" y="778" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#1d4ed8" font-weight="600">
    EDITORIAL � INFOGRAPHIC � 2026
  </text></svg>

Z.ai

Z.ai: GLM 5.2

z-ai/glm-5.2
66/100

Sanitizer accepted the SVG after removing 6 unsupported safe attribute(s) or element(s). The output includes a valid six-stage pipeline, but omits the required bar chart, warning callout, legend, footer, and most arrow evidence; score reflects incomplete instruction adherence.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1782118691-TBwZRBKzzJP6xxv9d2YJ, single model, tools 0 active, captured 2026-06-22. Z.ai GLM 5.2 selected directly. Run was stopped after a bounded wait after a complete SVG block was captured.
Raw SHA-256
6383285c789bebc468bdee3a338960c108ebba9f421aecc64b600110084cf603
Raw size
8590 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" text-rendering="geometricPrecision">

  <title>How an AI Model Converts a Prompt into Vector Graphics</title>

  <desc>Editorial infographic showing a six-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render), a validation score bar chart, common failure modes, and a color legend.</desc>

  

  <defs>

    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0" stop-color="#ffffff"/>

      <stop offset="1" stop-color="#f8fafc"/>

    </linearGradient>

    <linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0">

      <stop offset="0" stop-color="#1d4ed8"/>

      <stop offset="1" stop-color="#14b8a6"/>

    </linearGradient>

    <clipPath id="cardClip">

      <rect x="0" y="0" width="180" height="140" rx="10"/>

    </clipPath>

    <symbol id="bullet" viewBox="0 0 10 10">

      <circle cx="5" cy="5" r="3" fill="#1d4ed8"/>

    </symbol>

    <marker id="arrowHead" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">

      <path d="M0,0 L10,5 L0,10 z" fill="#1d4ed8"/>

    </marker>

    <marker id="arrowHeadAmber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">

      <path d="M0,0 L10,5 L0,10 z" fill="#f59e0b"/>

    </marker>

    <marker id="arrowHeadTeal" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">

      <path d="M0,0 L10,5 L0,10 z" fill="#14b8a6"/>

    </marker>

  </defs>

  

  <!-- Background -->

  <rect x="0" y="0" width="1200" height="800" fill="url(#bgGrad)"/>

  

  <!-- Title -->

  <text x="600" y="56" text-anchor="middle" font-size="32" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text>

  <text x="600" y="86" text-anchor="middle" font-size="16" fill="#1d4ed8">A six-stage pipeline from natural language to clean SVG output</text>

  <line x1="40" y1="104" x2="1160" y2="104" stroke="#0f172a" stroke-opacity="0.12" stroke-width="1"/>

  

  <!-- Pipeline stages -->

  <g id="stages">

    <!-- Stage 1: Prompt -->

    <g transform="translate(40,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)"/>

      <!-- icon: speech bubble -->

      <g transform="translate(80,30)">

        <path d="M0,0 h40 a8,8 0 0 1 8,8 v20 a8,8 0 0 1 -8,8 h-22 l-10,8 v-8 h-8 a8,8 0 0 1 -8,-8 v-20 a8,8 0 0 1 8,-8 z" fill="none" stroke="#1d4ed8" stroke-width="2"/>

        <circle cx="6" cy="18" r="2" fill="#1d4ed8"/>

        <circle cx="14" cy="18" r="2" fill="#1d4ed8"/>

        <circle cx="22" cy="18" r="2" fill="#1d4ed8"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">1 · Prompt</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Natural language</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">intent from user</text>

    </g>

    

    <!-- Stage 2: Parse -->

    <g transform="translate(224,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)"/>

      <!-- icon: braces -->

      <g transform="translate(72,28)" stroke="#1d4ed8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round">

        <path d="M12,4 C6,4 6,12 2,12 C6,12 6,20 12,20"/>

        <path d="M26,4 C32,4 32,12 36,12 C32,12 32,20 26,20"/>

        <circle cx="19" cy="12" r="2" fill="#1d4ed8"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">2 · Parse</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Tokenize &amp; extract</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">slots and entities</text>

    </g>

    

    <!-- Stage 3: Plan -->

    <g transform="translate(408,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#14b8a6" clip-path="url(#cardClip)"/>

      <!-- icon: flowchart -->

      <g transform="translate(60,28)" fill="none" stroke="#14b8a6" stroke-width="2">

        <rect x="0" y="0" width="24" height="12" rx="2"/>

        <rect x="36" y="0" width="24" height="12" rx="2"/>

        <rect x="18" y="20" width="24" height="12" rx="2"/>

        <path d="M12,12 L12,16 L30,16 L30,20"/>

        <path d="M48,12 L48,16 L30,16"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">3 · Plan</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Compose shape tree</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">and layout strategy</text>

    </g>

    

    <!-- Stage 4: Draw -->

    <g transform="translate(592,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)"/>

      <!-- icon: pencil -->

      <g transform="translate(70,28)" stroke="#1d4ed8" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round">

        <path d="M2,34 L34,2 L40,8 L8,40 Z" fill="#ffffff"/>

        <path d="M28,8 L34,14"/>

        <path d="M2,34 L4,42 L8,40" fill="#ffffff"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">4 · Draw</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Emit SVG primitives</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">paths, rects, text</text>

    </g>

    

    <!-- Stage 5: Validate -->

    <g transform="translate(776,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#14b8a6" clip-path="url(#cardClip)"/>

      <!-- icon: check in circle -->

      <g transform="translate(70,28)">

        <circle cx="20" cy="20" r="18" fill="none" stroke="#14b8a6" stroke-width="2"/>

        <path d="M11,21 L18,28 L29,14" fill="none" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">5 · Validate</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Score syntax, layout</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">and policy compliance</text>

    </g>

    

    <!-- Stage 6: Render -->

    <g transform="translate(960,124)">

      <rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5"/>

      <rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)"/>

      <!-- icon: monitor -->

      <g transform="translate(64,28)" stroke="#1d4ed8" stroke-width="2" fill="none">

        <rect x="0" y="0" width="52" height="34" rx="3"/>

        <rect x="6" y="6" width="40" height="22" rx="1" fill="#1d4ed8" fill-opacity="0.12" stroke="none"/>

        <path d="M16,40 L36,40 M26,34 L26,40" stroke-linecap="round"/>

      </g>

      <text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">6 · Render</text>

      <text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Serialize &amp; deliver</text>

      <text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">final SVG artifact</text>

    </g>

  </g>

  

  <!-- Arrows between stages -->

  <g id="arrows" stroke="#1d4ed8" stroke-width="2" fill="none">

    <!-- 1 Prompt->Parse -->

    <line x1="220" y1="194" x2="222" y2="194" marker-end="url(#arrowHead)" stroke-linecap="round"/>

    <!-- Wait, the gap between stage1 end (40+180=220) and stage2 start (224) is only 4px. Not enough for arrow. -->

  </g>

</svg>
Sanitized SVG
<svg viewBox="0 0 1200 800" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" xmlns="http://www.w3.org/2000/svg" role="img"><title>How an AI Model Converts a Prompt into Vector Graphics</title><desc>Editorial infographic showing a six-stage pipeline (Prompt, Parse, Plan, Draw, Validate, Render), a validation score bar chart, common failure modes, and a color legend.</desc><defs><linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffffff" /><stop offset="1" stop-color="#f8fafc" /></linearGradient><linearGradient id="titleGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#1d4ed8" /><stop offset="1" stop-color="#14b8a6" /></linearGradient><clipPath id="cardClip"><rect x="0" y="0" width="180" height="140" rx="10" /></clipPath></defs><rect x="0" y="0" width="1200" height="800" fill="url(#bgGrad)" /><text x="600" y="56" text-anchor="middle" font-size="32" font-weight="700" fill="#0f172a">How an AI Model Converts a Prompt into Vector Graphics</text><text x="600" y="86" text-anchor="middle" font-size="16" fill="#1d4ed8">A six-stage pipeline from natural language to clean SVG output</text><line x1="40" y1="104" x2="1160" y2="104" stroke="#0f172a" stroke-opacity="0.12" stroke-width="1" /><g id="stages"><g transform="translate(40,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)" /><g transform="translate(80,30)"><path d="M0,0 h40 a8,8 0 0 1 8,8 v20 a8,8 0 0 1 -8,8 h-22 l-10,8 v-8 h-8 a8,8 0 0 1 -8,-8 v-20 a8,8 0 0 1 8,-8 z" fill="none" stroke="#1d4ed8" stroke-width="2" /><circle cx="6" cy="18" r="2" fill="#1d4ed8" /><circle cx="14" cy="18" r="2" fill="#1d4ed8" /><circle cx="22" cy="18" r="2" fill="#1d4ed8" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">1 · Prompt</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Natural language</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">intent from user</text></g><g transform="translate(224,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)" /><g transform="translate(72,28)" stroke="#1d4ed8" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12,4 C6,4 6,12 2,12 C6,12 6,20 12,20" /><path d="M26,4 C32,4 32,12 36,12 C32,12 32,20 26,20" /><circle cx="19" cy="12" r="2" fill="#1d4ed8" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">2 · Parse</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Tokenize &amp; extract</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">slots and entities</text></g><g transform="translate(408,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#14b8a6" clip-path="url(#cardClip)" /><g transform="translate(60,28)" fill="none" stroke="#14b8a6" stroke-width="2"><rect x="0" y="0" width="24" height="12" rx="2" /><rect x="36" y="0" width="24" height="12" rx="2" /><rect x="18" y="20" width="24" height="12" rx="2" /><path d="M12,12 L12,16 L30,16 L30,20" /><path d="M48,12 L48,16 L30,16" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">3 · Plan</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Compose shape tree</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">and layout strategy</text></g><g transform="translate(592,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)" /><g transform="translate(70,28)" stroke="#1d4ed8" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round"><path d="M2,34 L34,2 L40,8 L8,40 Z" fill="#ffffff" /><path d="M28,8 L34,14" /><path d="M2,34 L4,42 L8,40" fill="#ffffff" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">4 · Draw</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Emit SVG primitives</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">paths, rects, text</text></g><g transform="translate(776,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#14b8a6" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#14b8a6" clip-path="url(#cardClip)" /><g transform="translate(70,28)"><circle cx="20" cy="20" r="18" fill="none" stroke="#14b8a6" stroke-width="2" /><path d="M11,21 L18,28 L29,14" fill="none" stroke="#14b8a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">5 · Validate</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Score syntax, layout</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">and policy compliance</text></g><g transform="translate(960,124)"><rect width="180" height="140" rx="10" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5" /><rect width="180" height="6" rx="3" fill="#1d4ed8" clip-path="url(#cardClip)" /><g transform="translate(64,28)" stroke="#1d4ed8" stroke-width="2" fill="none"><rect x="0" y="0" width="52" height="34" rx="3" /><rect x="6" y="6" width="40" height="22" rx="1" fill="#1d4ed8" fill-opacity="0.12" stroke="none" /><path d="M16,40 L36,40 M26,34 L26,40" stroke-linecap="round" /></g><text x="90" y="92" text-anchor="middle" font-size="16" font-weight="700" fill="#0f172a">6 · Render</text><text x="90" y="112" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">Serialize &amp; deliver</text><text x="90" y="126" text-anchor="middle" font-size="11" fill="#0f172a" fill-opacity="0.7">final SVG artifact</text></g></g><g id="arrows" stroke="#1d4ed8" stroke-width="2" fill="none"><line x1="220" y1="194" x2="222" y2="194" stroke-linecap="round" /></g></svg>

Mechanical Reasoning Diagram

Google

Google: Gemini 3.1 Pro Preview

google/gemini-3.1-pro-preview
92/100

Sanitizer accepted the SVG after removing 43 unsupported safe attribute(s) or element(s). Required label coverage: 19/19. Score includes a 8-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. Google Gemini Pro Latest chip resolved to Gemini 3.1 Pro Preview. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
4525dc6b65ec19d9f57ca4c555a5dd92704e48638eb7e174030c70b727e4e91e
Raw size
19492 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" role="img" aria-labelledby="svg-title svg-desc">
  <title id="svg-title">Vector Clockwork Tea Machine</title>
  <desc id="svg-desc">A transparent cutaway diagram of a whimsical tea-making machine powered by clockwork gears, featuring a continuous water flow system, belt-driven pump, and counterweight regulator.</desc>

  <defs>
    <!-- Background & Gradients -->
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </radialGradient>
    
    <linearGradient id="brass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fcd34d"/>
      <stop offset="50%" stop-color="#b45309"/>
      <stop offset="100%" stop-color="#fef3c7"/>
    </linearGradient>

    <linearGradient id="copper" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fdba74"/>
      <stop offset="50%" stop-color="#c2410c"/>
      <stop offset="100%" stop-color="#ffedd5"/>
    </linearGradient>
    
    <linearGradient id="steel" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e2e8f0"/>
      <stop offset="50%" stop-color="#64748b"/>
      <stop offset="100%" stop-color="#f8fafc"/>
    </linearGradient>

    <linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.15"/>
      <stop offset="50%" stop-color="#38bdf8" stop-opacity="0.05"/>
      <stop offset="100%" stop-color="#0284c7" stop-opacity="0.25"/>
    </linearGradient>

    <linearGradient id="waterGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#38bdf8"/>
      <stop offset="100%" stop-color="#0284c7"/>
    </linearGradient>

    <!-- Filters -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#000" flood-opacity="0.4"/>
    </filter>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Markers -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M 0 2 L 8 5 L 0 8 Z" fill="#94a3b8"/>
    </marker>
    <marker id="labelArrow" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="8" markerHeight="8" orient="auto">
      <circle cx="5" cy="5" r="3" fill="#fbbf24"/>
    </marker>

    <!-- Gear Templates (Using precise stroke-dasharray for perfect physical meshing) -->
    <!-- Pitch=~31.416, Tooth+Gap=15.708. Radius calculation = N * Pitch / (2PI) -->
    
    <!-- Gear 1: 16 Teeth, R=80 -->
    <g id="gear1">
      <circle cx="0" cy="0" r="80" stroke="url(#brass)" stroke-width="16" stroke-dasharray="15.708 15.708" fill="none"/>
      <circle cx="0" cy="0" r="74" fill="url(#brass)"/>
      <circle cx="0" cy="0" r="60" fill="#1e293b"/>
      <path d="M -8 -60 L 8 -60 L 12 60 L -12 60 Z" fill="url(#brass)"/>
      <path d="M -60 -8 L 60 -8 L 60 12 L -60 12 Z" fill="url(#brass)"/>
      <circle cx="0" cy="0" r="15" fill="url(#steel)"/>
      <circle cx="0" cy="0" r="6" fill="#0f172a"/>
    </g>

    <!-- Gear 2: 24 Teeth, R=120 -->
    <g id="gear2">
      <!-- Offset shifts teeth by half a phase for perfect meshing with Gear 1 -->
      <circle cx="0" cy="0" r="120" stroke="url(#copper)" stroke-width="16" stroke-dasharray="15.708 15.708" stroke-dashoffset="15.708" fill="none"/>
      <circle cx="0" cy="0" r="114" fill="url(#copper)"/>
      <circle cx="0" cy="0" r="95" fill="#1e293b"/>
      <path d="M -10 -95 L 10 -95 L 15 95 L -15 95 Z" fill="url(#copper)"/>
      <path d="M -95 -10 L 95 -10 L 95 15 L -95 15 Z" fill="url(#copper)"/>
      <path d="M -70 -70 L 70 70 L 80 60 L -60 -80 Z" fill="url(#copper)"/>
      <path d="M -70 70 L 70 -70 L 80 -60 L -60 80 Z" fill="url(#copper)"/>
      <circle cx="0" cy="0" r="20" fill="url(#steel)"/>
      <circle cx="0" cy="0" r="8" fill="#0f172a"/>
    </g>

    <!-- Gear 3: 14 Teeth, R=70 -->
    <g id="gear3">
      <circle cx="0" cy="0" r="70" stroke="url(#brass)" stroke-width="16" stroke-dasharray="15.708 15.708" fill="none"/>
      <circle cx="0" cy="0" r="64" fill="url(#brass)"/>
      <circle cx="0" cy="0" r="45" fill="#1e293b"/>
      <path d="M -12 -45 L 8 -45 L 18 45 L -2 45 Z" fill="url(#brass)"/>
      <path d="M -45 12 L 45 -8 L 45 -18 L -45 2 Z" fill="url(#brass)"/>
      <!-- Attached Pulley -->
      <circle cx="0" cy="0" r="30" fill="url(#steel)" filter="url(#shadow)"/>
      <circle cx="0" cy="0" r="22" fill="#0f172a"/>
      <circle cx="0" cy="0" r="8" fill="url(#copper)"/>
    </g>

  </defs>

  <!-- Background -->
  <rect width="1000" height="1000" fill="url(#bgGrad)"/>
  
  <!-- Subtle Blueprint Grid -->
  <g stroke="#334155" stroke-width="1" opacity="0.4">
    <path d="M 0 100 L 1000 1000 M 0 200 L 1000 200" stroke-dasharray="4 4" />
    <path d="M 100 0 L 100 1000 M 200 0 L 200 1000 M 300 0 L 300 1000 M 400 0 L 400 1000 M 500 0 L 500 1000 M 600 0 L 600 1000 M 700 0 L 700 1000 M 800 0 L 800 1000 M 900 0 L 900 1000"/>
    <path d="M 0 100 L 1000 100 L 1000 200 M 0 300 L 1000 300 M 0 400 L 1000 400 M 0 500 L 1000 500 M 0 600 L 1000 600 M 0 700 L 1000 700 M 0 800 L 1000 800 M 0 900 L 1000 900"/>
  </g>

  <!-- ==================== LAYER 1: BACK INFRASTRUCTURE & TUBES ==================== -->
  
  <!-- Outer metallic casing for pipe (shadow layer / back) -->
  <path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400
           L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370
           L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720
           L 220 720 Q 200 720 200 740 L 200 780" 
        fill="none" stroke="#0f172a" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"/>
        
  <!-- Flowing Water inside pipe -->
  <path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400
           L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370
           L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720
           L 220 720 Q 200 720 200 740 L 200 780" 
        fill="none" stroke="url(#waterGrad)" stroke-width="14" stroke-dasharray="15 10" stroke-linecap="round" stroke-linejoin="round"/>

  <!-- Glass reflection over the pipe -->
  <path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400
           L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370
           L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720
           L 220 720 Q 200 720 200 740 L 200 780" 
        fill="none" stroke="#bae6fd" stroke-width="20" opacity="0.3" stroke-linecap="round" stroke-linejoin="round"/>

  <!-- Counterweight string (Back part) -->
  <line x1="100" y1="400" x2="100" y2="650" stroke="#94a3b8" stroke-width="3" stroke-dasharray="4 2"/>

  <!-- Back side of Belt Drive -->
  <!-- Pulley B is at (150, 400) R=50. Pulley A is at (400, 483) R=30 -->
  <path d="M 400 453 L 150 350 A 50 50 0 0 0 150 450 L 400 513 A 30 30 0 0 0 400 453 Z" 
        fill="none" stroke="#1e293b" stroke-width="10"/>

  <!-- ==================== LAYER 2: CHASSIS & MECHANICS ==================== -->

  <!-- Main Machine Base Plates -->
  <rect x="300" y="150" width="420" height="540" rx="40" fill="#334155" filter="url(#shadow)"/>
  <rect x="310" y="160" width="400" height="520" rx="30" fill="#0f172a"/>

  <!-- Water Reservoir (Top Left) -->
  <g id="reservoir" transform="translate(180, 50)" filter="url(#shadow)">
    <!-- Tank body -->
    <rect x="0" y="0" width="140" height="110" rx="15" fill="url(#glassGrad)" stroke="#64748b" stroke-width="4"/>
    <!-- Water liquid level -->
    <path d="M 5 60 Q 35 50 70 60 T 135 60 L 135 105 A 10 10 0 0 1 125 105 L 15 105 A 10 10 0 0 1 5 105 Z" fill="url(#waterGrad)" opacity="0.8"/>
    <!-- Bubbles -->
    <circle cx="30" cy="80" r="4" fill="#fff" opacity="0.5"/>
    <circle cx="100" cy="90" r="6" fill="#fff" opacity="0.5"/>
    <circle cx="80" cy="70" r="3" fill="#fff" opacity="0.5"/>
    <!-- Cap -->
    <rect x="50" y="-10" width="40" height="15" rx="5" fill="url(#steel)"/>
  </g>

  <!-- Pulley B (Pump Drive) -->
  <g id="pulleyB" transform="translate(150, 400)" filter="url(#shadow)">
    <circle cx="0" cy="0" r="55" fill="#0f172a" stroke="url(#steel)" stroke-width="4"/>
    <!-- Internal Pump Spokes -->
    <path d="M -40 -40 L 40 40 M -40 40 L 40 -40 M 0 -50 L 0 50 M -50 0 L 50 0" stroke="url(#copper)" stroke-width="6"/>
    <circle cx="0" cy="0" r="50" fill="none" stroke="url(#steel)" stroke-width="8"/>
    <circle cx="0" cy="0" r="12" fill="url(#brass)"/>
  </g>

  <!-- Counterweight -->
  <g id="counterweight" transform="translate(85, 650)" filter="url(#shadow)">
    <rect x="0" y="0" width="30" height="70" rx="5" fill="url(#copper)"/>
    <rect x="5" y="10" width="20" height="50" rx="2" fill="#7c2d12" opacity="0.5"/>
    <circle cx="15" cy="-5" r="5" fill="url(#steel)"/>
  </g>

  <!-- Kettle Body (Central Heating Chamber) -->
  <g id="kettle" transform="translate(550, 310)" filter="url(#shadow)">
    <!-- Outer Copper Housing -->
    <path d="M -50 60 L 50 60 Q 70 60 60 -10 Q 50 -70 0 -70 Q -50 -70 -60 -10 Q -70 60 -50 60 Z" fill="url(#copper)"/>
    <!-- Inner Cutaway Shell -->
    <path d="M -40 50 L 40 50 Q 50 50 45 -5 Q 40 -50 0 -50 Q -40 -50 -45 -5 Q -50 50 -40 50 Z" fill="#1e293b"/>
    <!-- Heating Coil (Orange glowing) -->
    <path d="M -15 40 L 15 25 L -15 10 L 15 -5 L -15 -20 L 15 -35" fill="none" stroke="#ea580c" stroke-width="8" stroke-linecap="round" filter="url(#glow)"/>
    <path d="M -15 40 L 15 25 L -15 10 L 15 -5 L -15 -20 L 15 -35" fill="none" stroke="#fcd34d" stroke-width="3" stroke-linecap="round"/>
  </g>

  <!-- Steam Valve -->
  <g id="valve" transform="translate(550, 230)">
    <rect x="-15" y="-15" width="30" height="15" fill="url(#brass)"/>
    <path d="M -25 -25 L 25 -25 L 15 -15 L -15 -15 Z" fill="url(#steel)"/>
    <circle cx="0" cy="-30" r="10" fill="#dc2626"/>
    <!-- Steam -->
    <path d="M 0 -45 Q -20 -60 5 -75 T -10 -100" fill="none" stroke="#e2e8f0" stroke-width="6" opacity="0.6" filter="url(#glow)"/>
    <path d="M 10 -40 Q 30 -50 -5 -65 T 15 -90" fill="none" stroke="#e2e8f0" stroke-width="4" opacity="0.4"/>
  </g>

  <!-- GEAR SYSTEM -->
  
  <!-- Gear 2 (Idler, Center) -->
  <g transform="translate(550, 600) rotate(5.5)" filter="url(#shadow)">
    <use href="#gear2"/>
  </g>

  <!-- Gear 3 (Pulley Gear, Center-Left) -->
  <g transform="translate(400, 483) rotate(-12)" filter="url(#shadow)">
    <use href="#gear3"/>
  </g>

  <!-- Front side of Belt Drive -->
  <!-- Drawn with matching dash to look like a ribbed timing belt -->
  <path d="M 400 453 L 150 350 A 50 50 0 0 0 150 450 L 400 513 A 30 30 0 0 0 400 453 Z" 
        fill="none" stroke="#334155" stroke-width="8" stroke-dasharray="4 2"/>

  <!-- ==================== LAYER 3: TRANSPARENT CUTAWAY CASING ==================== -->
  <g id="casing">
    <!-- Acrylic Transparent Panel covering the center -->
    <rect x="320" y="170" width="380" height="500" rx="35" fill="url(#glassGrad)" stroke="#38bdf8" stroke-width="3" opacity="0.7"/>
    <!-- Bright Edge Highlights to emphasize glass -->
    <path d="M 325 210 A 30 30 0 0 1 355 175 L 665 175" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.5"/>
    <path d="M 325 240 L 325 610" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.3"/>
  </g>

  <!-- ==================== LAYER 4: FRONT COMPONENTS & DETAILS ==================== -->

  <!-- Gear 1 (Drive Gear) placed OUTSIDE the casing so it visually overlaps the cutaway boundary -->
  <g transform="translate(750, 600) rotate(0)" filter="url(#shadow)">
    <use href="#gear1"/>
  </g>
  
  <!-- Crank Handle -->
  <g id="crank" transform="translate(750, 600)">
    <line x1="0" y1="0" x2="80" y2="-60" stroke="url(#steel)" stroke-width="16" stroke-linecap="round" filter="url(#shadow)"/>
    <circle cx="80" cy="-60" r="20" fill="url(#brass)"/>
    <!-- Wooden spin handle -->
    <rect x="70" y="-130" width="20" height="60" rx="10" fill="#9a3412" filter="url(#shadow)"/>
    <circle cx="80" cy="-130" r="14" fill="url(#copper)"/>
  </g>

  <!-- Teacup Base -->
  <g id="teacup" transform="translate(200, 810)" filter="url(#shadow)">
    <ellipse cx="0" cy="30" rx="60" ry="15" fill="url(#steel)"/>
    <path d="M -40 -30 C -40 30 40 30 40 -30 Z" fill="#f8fafc"/>
    <path d="M -40 -30 C -40 -20 40 -20 40 -30 Z" fill="#e2e8f0"/>
    <path d="M -30 -29 C -30 -22 30 -22 30 -29 Z" fill="#8b5cf6"/> <!-- Tea liquid top -->
    <path d="M 40 -15 C 60 -15 60 15 35 15" fill="none" stroke="#f8fafc" stroke-width="8" stroke-linecap="round"/>
    <path d="M -20 -40 Q -10 -60 10 -70 T 30 -90" fill="none" stroke="#e2e8f0" stroke-width="4" opacity="0.5" filter="url(#glow)"/>
  </g>

  <!-- Water output drop -->
  <line x1="200" y1="780" x2="200" y2="795" stroke="url(#waterGrad)" stroke-width="8" stroke-linecap="round" opacity="0.8"/>
  <circle cx="200" cy="803" r="3" fill="#38bdf8"/>

  <!-- ==================== LAYER 5: INSET DIAGRAM ==================== -->
  <g id="inset-diagram" transform="translate(700, 30)">
    <rect x="0" y="0" width="270" height="120" rx="8" fill="#0f172a" stroke="#475569" stroke-width="2"/>
    <text x="135" y="25" font-family="sans-serif" font-weight="bold" font-size="14" fill="#94a3b8" text-anchor="middle" letter-spacing="1">GEAR RATIO DETAILS</text>
    
    <!-- Mini representation of gears touching -->
    <!-- Radiuses proportional: R=16, R=24, R=14 -->
    <g transform="translate(50, 75)">
      <circle cx="0" cy="0" r="16" fill="url(#brass)" stroke="#fff" stroke-width="1"/>
      <circle cx="40" cy="0" r="24" fill="url(#copper)" stroke="#fff" stroke-width="1"/>
      <circle cx="78" cy="0" r="14" fill="url(#brass)" stroke="#fff" stroke-width="1"/>
      
      <!-- Math notations inside circles -->
      <text x="0" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">16</text>
      <text x="40" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">24</text>
      <text x="78" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">14</text>
    </g>
    
    <text x="135" y="110" font-family="sans-serif" font-size="12" fill="#cbd5e1" text-anchor="middle">Ratio Flow:  16 : 24 : 14</text>
  </g>

  <!-- ==================== LAYER 6: MOTION ARCS ==================== -->
  
  <g fill="none" stroke="#94a3b8" stroke-width="3" stroke-dasharray="6 4" opacity="0.8">
    <!-- Gear 1 Arc (Clockwise) -->
    <path d="M 760 500 A 100 100 0 0 1 850 580" marker-end="url(#arrow)"/>
    <!-- Gear 2 Arc (Counter-Clockwise) -->
    <path d="M 430 550 A 130 130 0 0 0 540 740" marker-end="url(#arrow)"/>
    <!-- Gear 3 Arc (Clockwise) -->
    <path d="M 330 450 A 85 85 0 0 1 420 395" marker-end="url(#arrow)"/>
    <!-- Pulley B Arc -->
    <path d="M 90 400 A 60 60 0 0 0 150 460" marker-end="url(#arrow)"/>
  </g>

  <!-- ==================== LAYER 7: LABELS & CAUSE-AND-EFFECT FLOW ==================== -->

  <!-- Flow Lines (using markers to show pointing direction) -->
  <g fill="none" stroke="#fbbf24" stroke-width="2" opacity="0.8" stroke-dasharray="3 3">
    <!-- 1 -> Crank -->
    <line x1="880" y1="480" x2="800" y2="520" marker-end="url(#labelArrow)"/>
    <!-- 2 -> Drive Gear -->
    <line x1="880" y1="720" x2="810" y2="660" marker-end="url(#labelArrow)"/>
    <!-- 3 -> Idler Gear -->
    <line x1="650" y1="780" x2="600" y2="680" marker-end="url(#labelArrow)"/>
    <!-- 4 -> Pulley Gear -->
    <line x1="450" y1="650" x2="420" y2="555" marker-end="url(#labelArrow)"/>
    <!-- 5 -> Belt Drive -->
    <line x1="280" y1="580" x2="280" y2="485" marker-end="url(#labelArrow)"/>
    <!-- 6 -> Counterweight -->
    <line x1="60" y1="780" x2="90" y2="700" marker-end="url(#labelArrow)"/>
    <!-- 7 -> Water Reservoir -->
    <line x1="120" y1="50" x2="160" y2="70" marker-end="url(#labelArrow)"/>
    <!-- 8 -> Kettle & Valve -->
    <line x1="680" y1="180" x2="600" y2="210" marker-end="url(#labelArrow)"/>
    <!-- 9 -> Tea Cup -->
    <line x1="320" y1="880" x2="250" y2="820" marker-end="url(#labelArrow)"/>
  </g>

  <!-- Numbers and Tags -->
  <g font-family="sans-serif" font-size="16" font-weight="bold">
    <!-- Label 1 -->
    <g transform="translate(880, 480)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">1</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Crank / Input</text>
    </g>

    <!-- Label 2 -->
    <g transform="translate(880, 720)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">2</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Drive Gear</text>
    </g>

    <!-- Label 3 -->
    <g transform="translate(650, 780)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">3</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Idler Gear</text>
    </g>

    <!-- Label 4 -->
    <g transform="translate(450, 650)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">4</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Pulley Gear</text>
    </g>

    <!-- Label 5 -->
    <g transform="translate(280, 580)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">5</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Belt Drive</text>
    </g>

    <!-- Label 6 -->
    <g transform="translate(60, 780)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">6</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Counterweight</text>
    </g>

    <!-- Label 7 -->
    <g transform="translate(120, 50)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">7</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Water Reservoir</text>
    </g>

    <!-- Label 8 -->
    <g transform="translate(680, 180)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">8</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Heating Kettle &amp; Valve</text>
    </g>

    <!-- Label 9 -->
    <g transform="translate(320, 880)">
      <circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2"/>
      <text x="0" y="6" text-anchor="middle" fill="#000">9</text>
      <text x="25" y="5" fill="#f8fafc" font-size="14" filter="url(#shadow)">Tea Cup Output</text>
    </g>
  </g>

</svg>
Sanitized SVG
<svg viewBox="0 0 1000 1000" role="img" xmlns="http://www.w3.org/2000/svg"><title id="svg-title">Vector Clockwork Tea Machine</title><desc id="svg-desc">A transparent cutaway diagram of a whimsical tea-making machine powered by clockwork gears, featuring a continuous water flow system, belt-driven pump, and counterweight regulator.</desc><defs><radialGradient id="bgGrad" cx="50%" cy="50%" r="70%"><stop offset="0%" stop-color="#1e293b" /><stop offset="100%" stop-color="#0f172a" /></radialGradient><linearGradient id="brass" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fcd34d" /><stop offset="50%" stop-color="#b45309" /><stop offset="100%" stop-color="#fef3c7" /></linearGradient><linearGradient id="copper" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#fdba74" /><stop offset="50%" stop-color="#c2410c" /><stop offset="100%" stop-color="#ffedd5" /></linearGradient><linearGradient id="steel" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e2e8f0" /><stop offset="50%" stop-color="#64748b" /><stop offset="100%" stop-color="#f8fafc" /></linearGradient><linearGradient id="glassGrad" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#7dd3fc" stop-opacity="0.15" /><stop offset="50%" stop-color="#38bdf8" stop-opacity="0.05" /><stop offset="100%" stop-color="#0284c7" stop-opacity="0.25" /></linearGradient><linearGradient id="waterGrad" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#38bdf8" /><stop offset="100%" stop-color="#0284c7" /></linearGradient><g id="gear1"><circle cx="0" cy="0" r="80" stroke="url(#brass)" stroke-width="16" stroke-dasharray="15.708 15.708" fill="none" /><circle cx="0" cy="0" r="74" fill="url(#brass)" /><circle cx="0" cy="0" r="60" fill="#1e293b" /><path d="M -8 -60 L 8 -60 L 12 60 L -12 60 Z" fill="url(#brass)" /><path d="M -60 -8 L 60 -8 L 60 12 L -60 12 Z" fill="url(#brass)" /><circle cx="0" cy="0" r="15" fill="url(#steel)" /><circle cx="0" cy="0" r="6" fill="#0f172a" /></g><g id="gear2"><circle cx="0" cy="0" r="120" stroke="url(#copper)" stroke-width="16" stroke-dasharray="15.708 15.708" stroke-dashoffset="15.708" fill="none" /><circle cx="0" cy="0" r="114" fill="url(#copper)" /><circle cx="0" cy="0" r="95" fill="#1e293b" /><path d="M -10 -95 L 10 -95 L 15 95 L -15 95 Z" fill="url(#copper)" /><path d="M -95 -10 L 95 -10 L 95 15 L -95 15 Z" fill="url(#copper)" /><path d="M -70 -70 L 70 70 L 80 60 L -60 -80 Z" fill="url(#copper)" /><path d="M -70 70 L 70 -70 L 80 -60 L -60 80 Z" fill="url(#copper)" /><circle cx="0" cy="0" r="20" fill="url(#steel)" /><circle cx="0" cy="0" r="8" fill="#0f172a" /></g><g id="gear3"><circle cx="0" cy="0" r="70" stroke="url(#brass)" stroke-width="16" stroke-dasharray="15.708 15.708" fill="none" /><circle cx="0" cy="0" r="64" fill="url(#brass)" /><circle cx="0" cy="0" r="45" fill="#1e293b" /><path d="M -12 -45 L 8 -45 L 18 45 L -2 45 Z" fill="url(#brass)" /><path d="M -45 12 L 45 -8 L 45 -18 L -45 2 Z" fill="url(#brass)" /><circle cx="0" cy="0" r="30" fill="url(#steel)" /><circle cx="0" cy="0" r="22" fill="#0f172a" /><circle cx="0" cy="0" r="8" fill="url(#copper)" /></g></defs><rect width="1000" height="1000" fill="url(#bgGrad)" /><g stroke="#334155" stroke-width="1" opacity="0.4"><path d="M 0 100 L 1000 1000 M 0 200 L 1000 200" stroke-dasharray="4 4" /><path d="M 100 0 L 100 1000 M 200 0 L 200 1000 M 300 0 L 300 1000 M 400 0 L 400 1000 M 500 0 L 500 1000 M 600 0 L 600 1000 M 700 0 L 700 1000 M 800 0 L 800 1000 M 900 0 L 900 1000" /><path d="M 0 100 L 1000 100 L 1000 200 M 0 300 L 1000 300 M 0 400 L 1000 400 M 0 500 L 1000 500 M 0 600 L 1000 600 M 0 700 L 1000 700 M 0 800 L 1000 800 M 0 900 L 1000 900" /></g><path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400            L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370            L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720            L 220 720 Q 200 720 200 740 L 200 780" fill="none" stroke="#0f172a" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" /><path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400            L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370            L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720            L 220 720 Q 200 720 200 740 L 200 780" fill="none" stroke="url(#waterGrad)" stroke-width="14" stroke-dasharray="15 10" stroke-linecap="round" stroke-linejoin="round" /><path d="M 250 150 L 250 230 Q 250 250 230 250 L 170 250 Q 150 250 150 270 L 150 400            L 150 500 Q 150 520 170 520 L 530 520 Q 550 520 550 500 L 550 370            L 550 250 Q 550 230 570 230 L 680 230 Q 700 230 700 250 L 700 700 Q 700 720 680 720            L 220 720 Q 200 720 200 740 L 200 780" fill="none" stroke="#bae6fd" stroke-width="20" opacity="0.3" stroke-linecap="round" stroke-linejoin="round" /><line x1="100" y1="400" x2="100" y2="650" stroke="#94a3b8" stroke-width="3" stroke-dasharray="4 2" /><path d="M 400 453 L 150 350 A 50 50 0 0 0 150 450 L 400 513 A 30 30 0 0 0 400 453 Z" fill="none" stroke="#1e293b" stroke-width="10" /><rect x="300" y="150" width="420" height="540" rx="40" fill="#334155" /><rect x="310" y="160" width="400" height="520" rx="30" fill="#0f172a" /><g id="reservoir" transform="translate(180, 50)"><rect x="0" y="0" width="140" height="110" rx="15" fill="url(#glassGrad)" stroke="#64748b" stroke-width="4" /><path d="M 5 60 Q 35 50 70 60 T 135 60 L 135 105 A 10 10 0 0 1 125 105 L 15 105 A 10 10 0 0 1 5 105 Z" fill="url(#waterGrad)" opacity="0.8" /><circle cx="30" cy="80" r="4" fill="#fff" opacity="0.5" /><circle cx="100" cy="90" r="6" fill="#fff" opacity="0.5" /><circle cx="80" cy="70" r="3" fill="#fff" opacity="0.5" /><rect x="50" y="-10" width="40" height="15" rx="5" fill="url(#steel)" /></g><g id="pulleyB" transform="translate(150, 400)"><circle cx="0" cy="0" r="55" fill="#0f172a" stroke="url(#steel)" stroke-width="4" /><path d="M -40 -40 L 40 40 M -40 40 L 40 -40 M 0 -50 L 0 50 M -50 0 L 50 0" stroke="url(#copper)" stroke-width="6" /><circle cx="0" cy="0" r="50" fill="none" stroke="url(#steel)" stroke-width="8" /><circle cx="0" cy="0" r="12" fill="url(#brass)" /></g><g id="counterweight" transform="translate(85, 650)"><rect x="0" y="0" width="30" height="70" rx="5" fill="url(#copper)" /><rect x="5" y="10" width="20" height="50" rx="2" fill="#7c2d12" opacity="0.5" /><circle cx="15" cy="-5" r="5" fill="url(#steel)" /></g><g id="kettle" transform="translate(550, 310)"><path d="M -50 60 L 50 60 Q 70 60 60 -10 Q 50 -70 0 -70 Q -50 -70 -60 -10 Q -70 60 -50 60 Z" fill="url(#copper)" /><path d="M -40 50 L 40 50 Q 50 50 45 -5 Q 40 -50 0 -50 Q -40 -50 -45 -5 Q -50 50 -40 50 Z" fill="#1e293b" /><path d="M -15 40 L 15 25 L -15 10 L 15 -5 L -15 -20 L 15 -35" fill="none" stroke="#ea580c" stroke-width="8" stroke-linecap="round" /><path d="M -15 40 L 15 25 L -15 10 L 15 -5 L -15 -20 L 15 -35" fill="none" stroke="#fcd34d" stroke-width="3" stroke-linecap="round" /></g><g id="valve" transform="translate(550, 230)"><rect x="-15" y="-15" width="30" height="15" fill="url(#brass)" /><path d="M -25 -25 L 25 -25 L 15 -15 L -15 -15 Z" fill="url(#steel)" /><circle cx="0" cy="-30" r="10" fill="#dc2626" /><path d="M 0 -45 Q -20 -60 5 -75 T -10 -100" fill="none" stroke="#e2e8f0" stroke-width="6" opacity="0.6" /><path d="M 10 -40 Q 30 -50 -5 -65 T 15 -90" fill="none" stroke="#e2e8f0" stroke-width="4" opacity="0.4" /></g><g transform="translate(550, 600) rotate(5.5)"><use href="#gear2" /></g><g transform="translate(400, 483) rotate(-12)"><use href="#gear3" /></g><path d="M 400 453 L 150 350 A 50 50 0 0 0 150 450 L 400 513 A 30 30 0 0 0 400 453 Z" fill="none" stroke="#334155" stroke-width="8" stroke-dasharray="4 2" /><g id="casing"><rect x="320" y="170" width="380" height="500" rx="35" fill="url(#glassGrad)" stroke="#38bdf8" stroke-width="3" opacity="0.7" /><path d="M 325 210 A 30 30 0 0 1 355 175 L 665 175" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.5" /><path d="M 325 240 L 325 610" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.3" /></g><g transform="translate(750, 600) rotate(0)"><use href="#gear1" /></g><g id="crank" transform="translate(750, 600)"><line x1="0" y1="0" x2="80" y2="-60" stroke="url(#steel)" stroke-width="16" stroke-linecap="round" /><circle cx="80" cy="-60" r="20" fill="url(#brass)" /><rect x="70" y="-130" width="20" height="60" rx="10" fill="#9a3412" /><circle cx="80" cy="-130" r="14" fill="url(#copper)" /></g><g id="teacup" transform="translate(200, 810)"><ellipse cx="0" cy="30" rx="60" ry="15" fill="url(#steel)" /><path d="M -40 -30 C -40 30 40 30 40 -30 Z" fill="#f8fafc" /><path d="M -40 -30 C -40 -20 40 -20 40 -30 Z" fill="#e2e8f0" /><path d="M -30 -29 C -30 -22 30 -22 30 -29 Z" fill="#8b5cf6" /><path d="M 40 -15 C 60 -15 60 15 35 15" fill="none" stroke="#f8fafc" stroke-width="8" stroke-linecap="round" /><path d="M -20 -40 Q -10 -60 10 -70 T 30 -90" fill="none" stroke="#e2e8f0" stroke-width="4" opacity="0.5" /></g><line x1="200" y1="780" x2="200" y2="795" stroke="url(#waterGrad)" stroke-width="8" stroke-linecap="round" opacity="0.8" /><circle cx="200" cy="803" r="3" fill="#38bdf8" /><g id="inset-diagram" transform="translate(700, 30)"><rect x="0" y="0" width="270" height="120" rx="8" fill="#0f172a" stroke="#475569" stroke-width="2" /><text x="135" y="25" font-family="sans-serif" font-weight="bold" font-size="14" fill="#94a3b8" text-anchor="middle">GEAR RATIO DETAILS</text><g transform="translate(50, 75)"><circle cx="0" cy="0" r="16" fill="url(#brass)" stroke="#fff" stroke-width="1" /><circle cx="40" cy="0" r="24" fill="url(#copper)" stroke="#fff" stroke-width="1" /><circle cx="78" cy="0" r="14" fill="url(#brass)" stroke="#fff" stroke-width="1" /><text x="0" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">16</text><text x="40" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">24</text><text x="78" y="4" font-family="monospace" font-size="12" fill="#1e293b" text-anchor="middle" font-weight="bold">14</text></g><text x="135" y="110" font-family="sans-serif" font-size="12" fill="#cbd5e1" text-anchor="middle">Ratio Flow:  16 : 24 : 14</text></g><g fill="none" stroke="#94a3b8" stroke-width="3" stroke-dasharray="6 4" opacity="0.8"><path d="M 760 500 A 100 100 0 0 1 850 580" /><path d="M 430 550 A 130 130 0 0 0 540 740" /><path d="M 330 450 A 85 85 0 0 1 420 395" /><path d="M 90 400 A 60 60 0 0 0 150 460" /></g><g fill="none" stroke="#fbbf24" stroke-width="2" opacity="0.8" stroke-dasharray="3 3"><line x1="880" y1="480" x2="800" y2="520" /><line x1="880" y1="720" x2="810" y2="660" /><line x1="650" y1="780" x2="600" y2="680" /><line x1="450" y1="650" x2="420" y2="555" /><line x1="280" y1="580" x2="280" y2="485" /><line x1="60" y1="780" x2="90" y2="700" /><line x1="120" y1="50" x2="160" y2="70" /><line x1="680" y1="180" x2="600" y2="210" /><line x1="320" y1="880" x2="250" y2="820" /></g><g font-family="sans-serif" font-size="16" font-weight="bold"><g transform="translate(880, 480)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">1</text><text x="25" y="5" fill="#f8fafc" font-size="14">Crank / Input</text></g><g transform="translate(880, 720)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">2</text><text x="25" y="5" fill="#f8fafc" font-size="14">Drive Gear</text></g><g transform="translate(650, 780)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">3</text><text x="25" y="5" fill="#f8fafc" font-size="14">Idler Gear</text></g><g transform="translate(450, 650)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">4</text><text x="25" y="5" fill="#f8fafc" font-size="14">Pulley Gear</text></g><g transform="translate(280, 580)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">5</text><text x="25" y="5" fill="#f8fafc" font-size="14">Belt Drive</text></g><g transform="translate(60, 780)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">6</text><text x="25" y="5" fill="#f8fafc" font-size="14">Counterweight</text></g><g transform="translate(120, 50)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">7</text><text x="25" y="5" fill="#f8fafc" font-size="14">Water Reservoir</text></g><g transform="translate(680, 180)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">8</text><text x="25" y="5" fill="#f8fafc" font-size="14">Heating Kettle &amp; Valve</text></g><g transform="translate(320, 880)"><circle cx="0" cy="0" r="16" fill="#fbbf24" stroke="#000" stroke-width="2" /><text x="0" y="6" text-anchor="middle" fill="#000">9</text><text x="25" y="5" fill="#f8fafc" font-size="14">Tea Cup Output</text></g></g></svg>

Anthropic

Anthropic: Claude Opus 4.8

anthropic/claude-opus-4.8
94/100

Sanitizer accepted the SVG after removing 19 unsupported safe attribute(s) or element(s). Required label coverage: 19/19. Score includes a 6-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. Claude Opus Latest chip resolved to Claude Opus 4.8. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
7736cfa29a2d5cf02646f3a2e4f4a1ee202dee2a9a333c7f124a0359fd07def6
Raw size
18198 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" font-family="Segoe UI, Arial, sans-serif">
  <title>Vector Clockwork Tea Machine � transparent cutaway</title>
  <desc>A clean technical cutaway illustration of a whimsical but plausible clockwork tea machine. A hand crank turns a large brass gear that meshes with a medium gear and a small pinion. The pinion shares an axle with a pulley; a curved belt drives a lower pulley that lifts a counterweight regulator. A continuous blue tube carries water from a glass reservoir into a kettle, where a steam valve vents, and the heated water pours into a cup. Three transparent glass panels let the gears, kettle and reservoir show through behind them. Dashed arcs show each gear's rotation direction. Nine numbered labels trace the cause-and-effect flow, and an inset explains the 14:10:7 gear ratio.</desc>

  <defs>
    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M40 0H0V40" fill="none" stroke="#dce4ea" stroke-width="1"/>
    </pattern>
    <linearGradient id="brass" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f0c66b"/>
      <stop offset="0.5" stop-color="#d3a23f"/>
      <stop offset="1" stop-color="#a9791f"/>
    </linearGradient>
    <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#e8eef3"/>
      <stop offset="1" stop-color="#9aa7b3"/>
    </linearGradient>
    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7cc0ee"/>
      <stop offset="1" stop-color="#2f7fc4"/>
    </linearGradient>
    <linearGradient id="weight" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#8a96a3"/>
      <stop offset="1" stop-color="#454f5a"/>
    </linearGradient>
    <linearGradient id="glass" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#d6ecfb" stop-opacity="0.30"/>
      <stop offset="0.5" stop-color="#bcd8ec" stop-opacity="0.12"/>
      <stop offset="1" stop-color="#d6ecfb" stop-opacity="0.28"/>
    </linearGradient>
    <radialGradient id="hi" cx="0.35" cy="0.3" r="0.7">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.55"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
    </radialGradient>
    <filter id="sh" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="3" dy="4" stdDeviation="3" flood-color="#1b2733" flood-opacity="0.28"/>
    </filter>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="7" refY="3.5" orient="auto">
      <path d="M0 0L8 3.5L0 7Z" fill="#b5341f"/>
    </marker>
    <marker id="flow" markerWidth="9" markerHeight="9" refX="6" refY="3" orient="auto">
      <path d="M0 0L7 3L0 6Z" fill="#1f6fb2"/>
    </marker>
  </defs>

  <!-- background -->
  <rect width="1000" height="1000" fill="#eef3f6"/>
  <rect width="1000" height="1000" fill="url(#grid)"/>

  <!-- machine casing (transparent back panel) -->
  <rect x="40" y="60" width="920" height="900" rx="28" fill="#ffffff" fill-opacity="0.35" stroke="#2b3a48" stroke-width="3"/>
  <rect x="40" y="60" width="920" height="60" rx="28" fill="#cfe0ee" fill-opacity="0.5"/>
  <text x="500" y="100" text-anchor="middle" font-size="26" font-weight="700" fill="#1f2d3a" letter-spacing="2">VECTOR CLOCKWORK TEA MACHINE</text>

  <!-- ============ WATER PATH (continuous blue tube) ============ -->
  <path d="M160 232 C120 330 108 470 150 600 C190 710 235 748 300 760"
        fill="none" stroke="#1f6fb2" stroke-width="18" stroke-linecap="round"/>
  <path d="M160 232 C120 330 108 470 150 600 C190 710 235 748 300 760"
        fill="none" stroke="url(#water)" stroke-width="11" stroke-linecap="round"/>
  <!-- pour stream kettle -> cup -->
  <path d="M392 700 C452 706 500 742 528 792" fill="none" stroke="#1f6fb2" stroke-width="14" stroke-linecap="round"/>
  <path d="M392 700 C452 706 500 742 528 792" fill="none" stroke="url(#water)" stroke-width="8" stroke-linecap="round"/>
  <!-- flow direction dots -->
  <path d="M150 320 L150 380" stroke="#1f6fb2" stroke-width="0" marker-end="url(#flow)"/>
  <path d="M132 430 L134 500" fill="none" stroke="none"/>
  <path d="M140 420 L142 480" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="2 8" stroke-linecap="round"/>

  <!-- ============ WATER RESERVOIR (behind glass) ============ -->
  <g filter="url(#sh)">
    <rect x="70" y="100" width="180" height="150" rx="12" fill="#eaf4fc" stroke="#3a536a" stroke-width="3"/>
    <path d="M74 165 H246 V244 a8 8 0 0 1 -8 8 H82 a8 8 0 0 1 -8 -8 Z" fill="url(#water)"/>
    <path d="M74 165 q44 -14 88 0 t88 0" fill="none" stroke="#9fd0f2" stroke-width="3"/>
    <rect x="150" y="248" width="20" height="22" fill="#3a536a"/>
    <text x="160" y="140" text-anchor="middle" font-size="18" font-weight="700" fill="#1f6fb2">H?O</text>
  </g>

  <!-- ============ BELT + PULLEYS + COUNTERWEIGHT ============ -->
  <g filter="url(#sh)">
    <!-- belt loop (curved sides, never a straight line) -->
    <path d="M588 318 C600 400 690 470 718 530 A45 45 0 0 0 800 585 C740 470 650 400 640 336 A28 28 0 0 0 588 318 Z"
          fill="none" stroke="#33383f" stroke-width="11" stroke-linejoin="round"/>
    <path d="M588 318 C600 400 690 470 718 530 A45 45 0 0 0 800 585 C740 470 650 400 640 336 A28 28 0 0 0 588 318 Z"
          fill="none" stroke="#697079" stroke-width="3" stroke-linejoin="round" stroke-dasharray="6 10"/>
    <!-- lower pulley P2 -->
    <circle cx="760" cy="560" r="45" fill="url(#steel)" stroke="#5b6671" stroke-width="3"/>
    <circle cx="760" cy="560" r="45" fill="url(#hi)"/>
    <circle cx="760" cy="560" r="10" fill="#5b6671"/>
    <!-- cord to counterweight -->
    <path d="M760 605 V690" stroke="#3a3f47" stroke-width="3"/>
    <!-- counterweight -->
    <rect x="725" y="690" width="70" height="110" rx="8" fill="url(#weight)" stroke="#2b333c" stroke-width="3"/>
    <rect x="735" y="700" width="50" height="14" rx="4" fill="#aeb8c2" opacity="0.7"/>
    <text x="760" y="755" text-anchor="middle" font-size="13" font-weight="700" fill="#eef3f6">kg</text>
  </g>

  <!-- ============ GEAR TRAIN (behind glass) ============ -->
  <!-- pulley P1 on small-gear axle (drawn under gear C) -->
  <g filter="url(#sh)">
    <circle cx="613" cy="326" r="30" fill="url(#steel)" stroke="#5b6671" stroke-width="3"/>
    <circle cx="613" cy="326" r="30" fill="url(#hi)"/>
  </g>

  <!-- GEAR A (large, 14 teeth) -->
  <g filter="url(#sh)">
    <g fill="url(#brass)" stroke="#7a5210" stroke-width="2">
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(0,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(25.71,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(51.43,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(77.14,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(102.86,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(128.57,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(154.29,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(180,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(205.71,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(231.43,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(257.14,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(282.86,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(308.57,300,330)"/>
      <rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(334.29,300,330)"/>
    </g>
    <circle cx="300" cy="330" r="100" fill="url(#brass)" stroke="#7a5210" stroke-width="3"/>
    <circle cx="300" cy="330" r="100" fill="url(#hi)"/>
    <g stroke="#8a6017" stroke-width="14" stroke-linecap="round">
      <path d="M300 330 V245"/><path d="M300 330 V415"/>
      <path d="M300 330 H215"/><path d="M300 330 H385"/>
    </g>
    <circle cx="300" cy="330" r="30" fill="#c79634" stroke="#7a5210" stroke-width="3"/>
    <circle cx="300" cy="330" r="9" fill="#5b400d"/>
  </g>

  <!-- GEAR B (medium, 10 teeth) -->
  <g filter="url(#sh)">
    <g fill="url(#brass)" stroke="#7a5210" stroke-width="2">
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(0,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(36,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(72,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(108,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(144,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(180,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(216,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(252,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(288,485,370)"/>
      <rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(324,485,370)"/>
    </g>
    <circle cx="485" cy="370" r="70" fill="url(#brass)" stroke="#7a5210" stroke-width="3"/>
    <circle cx="485" cy="370" r="70" fill="url(#hi)"/>
    <g stroke="#8a6017" stroke-width="12" stroke-linecap="round">
      <path d="M485 370 V310"/><path d="M485 370 L538 400"/><path d="M485 370 L432 400"/>
    </g>
    <circle cx="485" cy="370" r="22" fill="#c79634" stroke="#7a5210" stroke-width="3"/>
    <circle cx="485" cy="370" r="8" fill="#5b400d"/>
  </g>

  <!-- GEAR C (small pinion, 7 teeth) -->
  <g filter="url(#sh)">
    <g fill="url(#brass)" stroke="#7a5210" stroke-width="2">
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(0,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(51.43,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(102.86,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(154.29,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(205.71,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(257.14,613,326)"/>
      <rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(308.57,613,326)"/>
    </g>
    <circle cx="613" cy="326" r="45" fill="url(#brass)" stroke="#7a5210" stroke-width="3"/>
    <circle cx="613" cy="326" r="45" fill="url(#hi)"/>
    <circle cx="613" cy="326" r="16" fill="#c79634" stroke="#7a5210" stroke-width="3"/>
    <circle cx="613" cy="326" r="6" fill="#5b400d"/>
  </g>

  <!-- ============ CRANK (on gear A axle) ============ -->
  <g filter="url(#sh)">
    <line x1="300" y1="330" x2="172" y2="252" stroke="#3a4350" stroke-width="14" stroke-linecap="round"/>
    <circle cx="300" cy="330" r="12" fill="#5b6671"/>
    <circle cx="172" cy="252" r="10" fill="#5b6671"/>
    <rect x="138" y="214" width="20" height="58" rx="9" fill="url(#steel)" stroke="#4a5560" stroke-width="3"/>
  </g>

  <!-- ============ KETTLE (behind glass) + STEAM VALVE ============ -->
  <g filter="url(#sh)">
    <!-- steam valve -->
    <rect x="284" y="624" width="32" height="30" rx="5" fill="url(#steel)" stroke="#4a5560" stroke-width="3"/>
    <circle cx="300" cy="620" r="12" fill="#b5341f" stroke="#7d2113" stroke-width="2"/>
    <!-- steam puffs -->
    <path d="M300 606 C288 590 312 580 300 562 C290 548 312 540 302 524" fill="none" stroke="#9fb6c4" stroke-width="4" stroke-linecap="round" stroke-dasharray="3 9" opacity="0.85"/>
    <path d="M320 608 C312 596 328 588 320 574" fill="none" stroke="#9fb6c4" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="3 8" opacity="0.7"/>
    <!-- kettle body -->
    <path d="M210 760 a90 80 0 1 0 180 0 Z" fill="#cfd6dc" stroke="#4a5560" stroke-width="3"/>
    <ellipse cx="300" cy="760" rx="90" ry="34" fill="#aeb8c2" stroke="#4a5560" stroke-width="3"/>
    <ellipse cx="300" cy="760" rx="90" ry="80" fill="url(#hi)"/>
    <!-- water level inside kettle -->
    <path d="M222 778 a78 64 0 0 0 156 0 a78 26 0 0 1 -156 0 Z" fill="url(#water)" opacity="0.9"/>
    <!-- spout -->
    <path d="M378 740 C404 720 404 700 392 696 C384 720 372 728 360 730 Z" fill="#cfd6dc" stroke="#4a5560" stroke-width="3"/>
    <!-- handle -->
    <path d="M240 700 C250 654 350 654 360 700" fill="none" stroke="#4a5560" stroke-width="9" stroke-linecap="round"/>
    <!-- heat coil -->
    <path d="M256 838 q44 22 88 0" fill="none" stroke="#b5341f" stroke-width="4" stroke-dasharray="6 6"/>
  </g>

  <!-- ============ CUP ============ -->
  <g filter="url(#sh)">
    <ellipse cx="555" cy="880" rx="78" ry="16" fill="#cfd6dc" stroke="#4a5560" stroke-width="2.5"/>
    <path d="M500 820 h110 l-12 52 a43 16 0 0 1 -86 0 Z" fill="#eef3f6" stroke="#4a5560" stroke-width="3"/>
    <ellipse cx="555" cy="820" rx="55" ry="14" fill="#aeb8c2" stroke="#4a5560" stroke-width="2.5"/>
    <ellipse cx="555" cy="820" rx="47" ry="11" fill="url(#water)"/>
    <path d="M610 824 a26 22 0 1 1 0 40" fill="none" stroke="#4a5560" stroke-width="7"/>
  </g>

  <!-- ============ TRANSPARENT PANELS (objects pass behind) ============ -->
  <g>
    <rect x="78" y="92" width="164" height="166" rx="10" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2"/>
    <rect x="252" y="190" width="430" height="288" rx="16" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2"/>
    <rect x="196" y="610" width="220" height="270" rx="16" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2"/>
    <!-- panel glints -->
    <path d="M280 210 L340 210 L300 300 L240 300 Z" fill="#ffffff" opacity="0.10"/>
    <path d="M236 630 L286 630 L250 720 L200 720 Z" fill="#ffffff" opacity="0.10"/>
    <text x="660" y="468" text-anchor="end" font-size="12" fill="#5b7488" font-style="italic">transparent panel</text>
  </g>

  <!-- ============ MOTION ARCS (rotation direction) ============ -->
  <g fill="none" stroke="#b5341f" stroke-width="2.6" stroke-dasharray="7 6">
    <path d="M174 402 A145 145 0 0 1 250 194" marker-end="url(#arrow)"/>      <!-- A clockwise -->
    <path d="M542 270 A115 115 0 0 0 377 331" marker-end="url(#arrow)"/>      <!-- B counter-cw -->
    <path d="M658 248 A90 90 0 0 1 658 404" marker-end="url(#arrow)"/>        <!-- C clockwise -->
  </g>

  <!-- ============ INSET: gear ratio diagram ============ -->
  <g filter="url(#sh)">
    <rect x="708" y="150" width="244" height="160" rx="12" fill="#ffffff" stroke="#2b3a48" stroke-width="2.5"/>
    <text x="830" y="174" text-anchor="middle" font-size="14" font-weight="700" fill="#1f2d3a">GEAR RATIO</text>
    <circle cx="760" cy="232" r="34" fill="url(#brass)" stroke="#7a5210" stroke-width="2"/>
    <circle cx="828" cy="232" r="24" fill="url(#brass)" stroke="#7a5210" stroke-width="2"/>
    <circle cx="884" cy="232" r="17" fill="url(#brass)" stroke="#7a5210" stroke-width="2"/>
    <text x="760" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#5b400d">14</text>
    <text x="828" y="237" text-anchor="middle" font-size="12" font-weight="700" fill="#5b400d">10</text>
    <text x="884" y="236" text-anchor="middle" font-size="11" font-weight="700" fill="#5b400d">7</text>
    <text x="830" y="288" text-anchor="middle" font-size="12" fill="#1f2d3a">A : B : C = 14 : 10 : 7</text>
    <text x="830" y="304" text-anchor="middle" font-size="11" fill="#5b7488">crank ? pinion � 2? speed</text>
  </g>

  <!-- ============ NUMBERED FLOW LABELS (1-9) ============ -->
  <g font-size="12" fill="#1f2d3a">
    <!-- leaders -->
    <g stroke="#2b3a48" stroke-width="1.4" fill="none" opacity="0.8">
      <path d="M152 268 L168 246"/>
      <path d="M300 452 L300 432"/>
      <path d="M470 512 L478 442"/>
      <path d="M690 252 L648 300"/>
      <path d="M712 470 L760 520"/>
      <path d="M712 720 L740 760"/>
      <path d="M255 142 L210 170"/>
      <path d="M188 644 L284 632"/>
      <path d="M612 856 L560 858"/>
    </g>
    <g>
      <circle cx="140" cy="272" r="15" fill="#b5341f"/><text x="140" y="277" text-anchor="middle" fill="#fff" font-weight="700">1</text>
      <text x="118" y="300" text-anchor="end" >Turn crank</text>

      <circle cx="300" cy="466" r="15" fill="#1f6fb2"/><text x="300" y="471" text-anchor="middle" fill="#fff" font-weight="700">2</text>
      <text x="300" y="492" text-anchor="middle">Drive gear spins</text>

      <circle cx="458" cy="524" r="15" fill="#1f6fb2"/><text x="458" y="529" text-anchor="middle" fill="#fff" font-weight="700">3</text>
      <text x="458" y="548" text-anchor="middle">Idler gear meshes</text>

      <circle cx="700" cy="240" r="15" fill="#1f6fb2"/><text x="700" y="245" text-anchor="middle" fill="#fff" font-weight="700">4</text>
      <text x="700" y="222" text-anchor="middle">Fast pinion</text>

      <circle cx="722" cy="458" r="15" fill="#1f6fb2"/><text x="722" y="463" text-anchor="middle" fill="#fff" font-weight="700">5</text>
      <text x="740" y="440" text-anchor="start">Belt drives pulley</text>

      <circle cx="722" cy="730" r="15" fill="#1f6fb2"/><text x="722" y="735" text-anchor="middle" fill="#fff" font-weight="700">6</text>
      <text x="700" y="760" text-anchor="end">Counterweight regulates</text>

      <circle cx="260" cy="132" r="15" fill="#1f6fb2"/><text x="260" y="137" text-anchor="middle" fill="#fff" font-weight="700">7</text>
      <text x="282" y="137" text-anchor="start">Water released</text>

      <circle cx="176" cy="652" r="15" fill="#1f6fb2"/><text x="176" y="657" text-anchor="middle" fill="#fff" font-weight="700">8</text>
      <text x="158" y="680" text-anchor="end">Boil &amp; steam vents</text>

      <circle cx="624" cy="856" r="15" fill="#1f6fb2"/><text x="624" y="861" text-anchor="middle" fill="#fff" font-weight="700">9</text>
      <text x="646" y="861" text-anchor="start">Tea pours into cup</text>
    </g>
  </g>
</svg>
Sanitized SVG
<svg viewBox="0 0 1000 1000" width="1000" height="1000" font-family="Segoe UI, Arial, sans-serif" xmlns="http://www.w3.org/2000/svg" role="img"><title>Vector Clockwork Tea Machine � transparent cutaway</title><desc>A clean technical cutaway illustration of a whimsical but plausible clockwork tea machine. A hand crank turns a large brass gear that meshes with a medium gear and a small pinion. The pinion shares an axle with a pulley; a curved belt drives a lower pulley that lifts a counterweight regulator. A continuous blue tube carries water from a glass reservoir into a kettle, where a steam valve vents, and the heated water pours into a cup. Three transparent glass panels let the gears, kettle and reservoir show through behind them. Dashed arcs show each gear's rotation direction. Nine numbered labels trace the cause-and-effect flow, and an inset explains the 14:10:7 gear ratio.</desc><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0V40" fill="none" stroke="#dce4ea" stroke-width="1" /></pattern><linearGradient id="brass" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f0c66b" /><stop offset="0.5" stop-color="#d3a23f" /><stop offset="1" stop-color="#a9791f" /></linearGradient><linearGradient id="steel" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e8eef3" /><stop offset="1" stop-color="#9aa7b3" /></linearGradient><linearGradient id="water" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7cc0ee" /><stop offset="1" stop-color="#2f7fc4" /></linearGradient><linearGradient id="weight" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#8a96a3" /><stop offset="1" stop-color="#454f5a" /></linearGradient><linearGradient id="glass" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#d6ecfb" stop-opacity="0.30" /><stop offset="0.5" stop-color="#bcd8ec" stop-opacity="0.12" /><stop offset="1" stop-color="#d6ecfb" stop-opacity="0.28" /></linearGradient><radialGradient id="hi" cx="0.35" cy="0.3" r="0.7"><stop offset="0" stop-color="#ffffff" stop-opacity="0.55" /><stop offset="1" stop-color="#ffffff" stop-opacity="0" /></radialGradient></defs><rect width="1000" height="1000" fill="#eef3f6" /><rect width="1000" height="1000" fill="url(#grid)" /><rect x="40" y="60" width="920" height="900" rx="28" fill="#ffffff" fill-opacity="0.35" stroke="#2b3a48" stroke-width="3" /><rect x="40" y="60" width="920" height="60" rx="28" fill="#cfe0ee" fill-opacity="0.5" /><text x="500" y="100" text-anchor="middle" font-size="26" font-weight="700" fill="#1f2d3a">VECTOR CLOCKWORK TEA MACHINE</text><path d="M160 232 C120 330 108 470 150 600 C190 710 235 748 300 760" fill="none" stroke="#1f6fb2" stroke-width="18" stroke-linecap="round" /><path d="M160 232 C120 330 108 470 150 600 C190 710 235 748 300 760" fill="none" stroke="url(#water)" stroke-width="11" stroke-linecap="round" /><path d="M392 700 C452 706 500 742 528 792" fill="none" stroke="#1f6fb2" stroke-width="14" stroke-linecap="round" /><path d="M392 700 C452 706 500 742 528 792" fill="none" stroke="url(#water)" stroke-width="8" stroke-linecap="round" /><path d="M150 320 L150 380" stroke="#1f6fb2" stroke-width="0" /><path d="M132 430 L134 500" fill="none" stroke="none" /><path d="M140 420 L142 480" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="2 8" stroke-linecap="round" /><g><rect x="70" y="100" width="180" height="150" rx="12" fill="#eaf4fc" stroke="#3a536a" stroke-width="3" /><path d="M74 165 H246 V244 a8 8 0 0 1 -8 8 H82 a8 8 0 0 1 -8 -8 Z" fill="url(#water)" /><path d="M74 165 q44 -14 88 0 t88 0" fill="none" stroke="#9fd0f2" stroke-width="3" /><rect x="150" y="248" width="20" height="22" fill="#3a536a" /><text x="160" y="140" text-anchor="middle" font-size="18" font-weight="700" fill="#1f6fb2">H?O</text></g><g><path d="M588 318 C600 400 690 470 718 530 A45 45 0 0 0 800 585 C740 470 650 400 640 336 A28 28 0 0 0 588 318 Z" fill="none" stroke="#33383f" stroke-width="11" stroke-linejoin="round" /><path d="M588 318 C600 400 690 470 718 530 A45 45 0 0 0 800 585 C740 470 650 400 640 336 A28 28 0 0 0 588 318 Z" fill="none" stroke="#697079" stroke-width="3" stroke-linejoin="round" stroke-dasharray="6 10" /><circle cx="760" cy="560" r="45" fill="url(#steel)" stroke="#5b6671" stroke-width="3" /><circle cx="760" cy="560" r="45" fill="url(#hi)" /><circle cx="760" cy="560" r="10" fill="#5b6671" /><path d="M760 605 V690" stroke="#3a3f47" stroke-width="3" /><rect x="725" y="690" width="70" height="110" rx="8" fill="url(#weight)" stroke="#2b333c" stroke-width="3" /><rect x="735" y="700" width="50" height="14" rx="4" fill="#aeb8c2" opacity="0.7" /><text x="760" y="755" text-anchor="middle" font-size="13" font-weight="700" fill="#eef3f6">kg</text></g><g><circle cx="613" cy="326" r="30" fill="url(#steel)" stroke="#5b6671" stroke-width="3" /><circle cx="613" cy="326" r="30" fill="url(#hi)" /></g><g><g fill="url(#brass)" stroke="#7a5210" stroke-width="2"><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(0,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(25.71,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(51.43,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(77.14,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(102.86,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(128.57,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(154.29,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(180,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(205.71,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(231.43,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(257.14,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(282.86,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(308.57,300,330)" /><rect x="288" y="210" width="24" height="20" rx="3" transform="rotate(334.29,300,330)" /></g><circle cx="300" cy="330" r="100" fill="url(#brass)" stroke="#7a5210" stroke-width="3" /><circle cx="300" cy="330" r="100" fill="url(#hi)" /><g stroke="#8a6017" stroke-width="14" stroke-linecap="round"><path d="M300 330 V245" /><path d="M300 330 V415" /><path d="M300 330 H215" /><path d="M300 330 H385" /></g><circle cx="300" cy="330" r="30" fill="#c79634" stroke="#7a5210" stroke-width="3" /><circle cx="300" cy="330" r="9" fill="#5b400d" /></g><g><g fill="url(#brass)" stroke="#7a5210" stroke-width="2"><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(0,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(36,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(72,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(108,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(144,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(180,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(216,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(252,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(288,485,370)" /><rect x="473" y="280" width="24" height="20" rx="3" transform="rotate(324,485,370)" /></g><circle cx="485" cy="370" r="70" fill="url(#brass)" stroke="#7a5210" stroke-width="3" /><circle cx="485" cy="370" r="70" fill="url(#hi)" /><g stroke="#8a6017" stroke-width="12" stroke-linecap="round"><path d="M485 370 V310" /><path d="M485 370 L538 400" /><path d="M485 370 L432 400" /></g><circle cx="485" cy="370" r="22" fill="#c79634" stroke="#7a5210" stroke-width="3" /><circle cx="485" cy="370" r="8" fill="#5b400d" /></g><g><g fill="url(#brass)" stroke="#7a5210" stroke-width="2"><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(0,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(51.43,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(102.86,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(154.29,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(205.71,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(257.14,613,326)" /><rect x="601" y="261" width="24" height="20" rx="3" transform="rotate(308.57,613,326)" /></g><circle cx="613" cy="326" r="45" fill="url(#brass)" stroke="#7a5210" stroke-width="3" /><circle cx="613" cy="326" r="45" fill="url(#hi)" /><circle cx="613" cy="326" r="16" fill="#c79634" stroke="#7a5210" stroke-width="3" /><circle cx="613" cy="326" r="6" fill="#5b400d" /></g><g><line x1="300" y1="330" x2="172" y2="252" stroke="#3a4350" stroke-width="14" stroke-linecap="round" /><circle cx="300" cy="330" r="12" fill="#5b6671" /><circle cx="172" cy="252" r="10" fill="#5b6671" /><rect x="138" y="214" width="20" height="58" rx="9" fill="url(#steel)" stroke="#4a5560" stroke-width="3" /></g><g><rect x="284" y="624" width="32" height="30" rx="5" fill="url(#steel)" stroke="#4a5560" stroke-width="3" /><circle cx="300" cy="620" r="12" fill="#b5341f" stroke="#7d2113" stroke-width="2" /><path d="M300 606 C288 590 312 580 300 562 C290 548 312 540 302 524" fill="none" stroke="#9fb6c4" stroke-width="4" stroke-linecap="round" stroke-dasharray="3 9" opacity="0.85" /><path d="M320 608 C312 596 328 588 320 574" fill="none" stroke="#9fb6c4" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="3 8" opacity="0.7" /><path d="M210 760 a90 80 0 1 0 180 0 Z" fill="#cfd6dc" stroke="#4a5560" stroke-width="3" /><ellipse cx="300" cy="760" rx="90" ry="34" fill="#aeb8c2" stroke="#4a5560" stroke-width="3" /><ellipse cx="300" cy="760" rx="90" ry="80" fill="url(#hi)" /><path d="M222 778 a78 64 0 0 0 156 0 a78 26 0 0 1 -156 0 Z" fill="url(#water)" opacity="0.9" /><path d="M378 740 C404 720 404 700 392 696 C384 720 372 728 360 730 Z" fill="#cfd6dc" stroke="#4a5560" stroke-width="3" /><path d="M240 700 C250 654 350 654 360 700" fill="none" stroke="#4a5560" stroke-width="9" stroke-linecap="round" /><path d="M256 838 q44 22 88 0" fill="none" stroke="#b5341f" stroke-width="4" stroke-dasharray="6 6" /></g><g><ellipse cx="555" cy="880" rx="78" ry="16" fill="#cfd6dc" stroke="#4a5560" stroke-width="2.5" /><path d="M500 820 h110 l-12 52 a43 16 0 0 1 -86 0 Z" fill="#eef3f6" stroke="#4a5560" stroke-width="3" /><ellipse cx="555" cy="820" rx="55" ry="14" fill="#aeb8c2" stroke="#4a5560" stroke-width="2.5" /><ellipse cx="555" cy="820" rx="47" ry="11" fill="url(#water)" /><path d="M610 824 a26 22 0 1 1 0 40" fill="none" stroke="#4a5560" stroke-width="7" /></g><g><rect x="78" y="92" width="164" height="166" rx="10" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2" /><rect x="252" y="190" width="430" height="288" rx="16" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2" /><rect x="196" y="610" width="220" height="270" rx="16" fill="url(#glass)" stroke="#8fb8d6" stroke-width="2" /><path d="M280 210 L340 210 L300 300 L240 300 Z" fill="#ffffff" opacity="0.10" /><path d="M236 630 L286 630 L250 720 L200 720 Z" fill="#ffffff" opacity="0.10" /><text x="660" y="468" text-anchor="end" font-size="12" fill="#5b7488">transparent panel</text></g><g fill="none" stroke="#b5341f" stroke-width="2.6" stroke-dasharray="7 6"><path d="M174 402 A145 145 0 0 1 250 194" /><path d="M542 270 A115 115 0 0 0 377 331" /><path d="M658 248 A90 90 0 0 1 658 404" /></g><g><rect x="708" y="150" width="244" height="160" rx="12" fill="#ffffff" stroke="#2b3a48" stroke-width="2.5" /><text x="830" y="174" text-anchor="middle" font-size="14" font-weight="700" fill="#1f2d3a">GEAR RATIO</text><circle cx="760" cy="232" r="34" fill="url(#brass)" stroke="#7a5210" stroke-width="2" /><circle cx="828" cy="232" r="24" fill="url(#brass)" stroke="#7a5210" stroke-width="2" /><circle cx="884" cy="232" r="17" fill="url(#brass)" stroke="#7a5210" stroke-width="2" /><text x="760" y="237" text-anchor="middle" font-size="13" font-weight="700" fill="#5b400d">14</text><text x="828" y="237" text-anchor="middle" font-size="12" font-weight="700" fill="#5b400d">10</text><text x="884" y="236" text-anchor="middle" font-size="11" font-weight="700" fill="#5b400d">7</text><text x="830" y="288" text-anchor="middle" font-size="12" fill="#1f2d3a">A : B : C = 14 : 10 : 7</text><text x="830" y="304" text-anchor="middle" font-size="11" fill="#5b7488">crank ? pinion � 2? speed</text></g><g font-size="12" fill="#1f2d3a"><g stroke="#2b3a48" stroke-width="1.4" fill="none" opacity="0.8"><path d="M152 268 L168 246" /><path d="M300 452 L300 432" /><path d="M470 512 L478 442" /><path d="M690 252 L648 300" /><path d="M712 470 L760 520" /><path d="M712 720 L740 760" /><path d="M255 142 L210 170" /><path d="M188 644 L284 632" /><path d="M612 856 L560 858" /></g><g><circle cx="140" cy="272" r="15" fill="#b5341f" /><text x="140" y="277" text-anchor="middle" fill="#fff" font-weight="700">1</text><text x="118" y="300" text-anchor="end">Turn crank</text><circle cx="300" cy="466" r="15" fill="#1f6fb2" /><text x="300" y="471" text-anchor="middle" fill="#fff" font-weight="700">2</text><text x="300" y="492" text-anchor="middle">Drive gear spins</text><circle cx="458" cy="524" r="15" fill="#1f6fb2" /><text x="458" y="529" text-anchor="middle" fill="#fff" font-weight="700">3</text><text x="458" y="548" text-anchor="middle">Idler gear meshes</text><circle cx="700" cy="240" r="15" fill="#1f6fb2" /><text x="700" y="245" text-anchor="middle" fill="#fff" font-weight="700">4</text><text x="700" y="222" text-anchor="middle">Fast pinion</text><circle cx="722" cy="458" r="15" fill="#1f6fb2" /><text x="722" y="463" text-anchor="middle" fill="#fff" font-weight="700">5</text><text x="740" y="440" text-anchor="start">Belt drives pulley</text><circle cx="722" cy="730" r="15" fill="#1f6fb2" /><text x="722" y="735" text-anchor="middle" fill="#fff" font-weight="700">6</text><text x="700" y="760" text-anchor="end">Counterweight regulates</text><circle cx="260" cy="132" r="15" fill="#1f6fb2" /><text x="260" y="137" text-anchor="middle" fill="#fff" font-weight="700">7</text><text x="282" y="137" text-anchor="start">Water released</text><circle cx="176" cy="652" r="15" fill="#1f6fb2" /><text x="176" y="657" text-anchor="middle" fill="#fff" font-weight="700">8</text><text x="158" y="680" text-anchor="end">Boil &amp; steam vents</text><circle cx="624" cy="856" r="15" fill="#1f6fb2" /><text x="624" y="861" text-anchor="middle" fill="#fff" font-weight="700">9</text><text x="646" y="861" text-anchor="start">Tea pours into cup</text></g></g></svg>

xAI

xAI: Grok 4.20

x-ai/grok-4.20
98/100

Sanitizer accepted the SVG after removing 7 unsupported safe attribute(s) or element(s). Required label coverage: 19/19. Score includes a 2-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. Grok 4.20 selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
40201d3044bfc3f6671fce49c6700c7892a32109e9ac6578b8e3b25b56dfe177
Raw size
27970 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">
  <title>Vector Clockwork Tea Machine</title>
  <desc>A whimsical yet physically plausible transparent cutaway of a vector clockwork tea machine. Turning the crank rotates three meshing gears of different sizes, which drive a belt-connected pulley system that powers a water pump. Water flows via a continuous blue tube from the reservoir through the kettle (with steam valve) into the cup. Includes 9 numbered cause-and-effect labels, dashed rotation arcs, counterweight, inset gear ratio diagram, and transparent panels with objects passing behind them.</desc>
  
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
      <path d="M 0,0 L 10,5 L 0,10 z" fill="#e74c3c"/>
    </marker>
    <linearGradient id="brass" x1="0%" y1="0%" x2="80%" y2="100%">
      <stop offset="0%" stop-color="#ffeba1"/>
      <stop offset="45%" stop-color="#e9b83d"/>
      <stop offset="100%" stop-color="#d29e2a"/>
    </linearGradient>
    <linearGradient id="brassDark" x1="20%" y1="20%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e9b83d"/>
      <stop offset="100%" stop-color="#b88a1f"/>
    </linearGradient>
    <linearGradient id="frameMetal" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#5a7391"/>
      <stop offset="100%" stop-color="#2c3e50"/>
    </linearGradient>
    <linearGradient id="kettleGrad" x1="30%" y1="10%" x2="70%" y2="90%">
      <stop offset="0%" stop-color="#e0e0e0"/>
      <stop offset="100%" stop-color="#8e9a9e"/>
    </linearGradient>
  </defs>

  <!-- Machine base and structural frame (drawn first) -->
  <!-- Main base platform -->
  <rect 
    x="35" y="815" width="765" height="68" rx="12" 
    fill="#2c3e50" stroke="#26334a" stroke-width="18"/>
  
  <!-- Left vertical support frame -->
  <rect 
    x="72" y="255" width="38" height="575" rx="10" 
    fill="url(#frameMetal)" stroke="#26334a" stroke-width="14"/>
  
  <!-- Right vertical support frame (kettle side) -->
  <rect 
    x="745" y="255" width="38" height="575" rx="10" 
    fill="url(#frameMetal)" stroke="#26334a" stroke-width="14"/>
  
  <!-- Top horizontal beam -->
  <rect 
    x="95" y="255" width="675" height="33" rx="6" 
    fill="url(#frameMetal)" stroke="#26334a" stroke-width="12"/>
  
  <!-- Middle horizontal support beam (behind gears) -->
  <rect 
    x="105" y="505" width="640" height="26" rx="6" 
    fill="url(#frameMetal)" stroke="#26334a" stroke-width="10"/>

  <!-- Transparent cutaway panels (drawn early so some elements can pass behind) -->
  <!-- Large gear housing cutaway panel (objects like belt and tube will pass behind) -->
  <rect 
    x="145" y="355" width="485" height="395" rx="32" 
    fill="#81c4e7" opacity="0.16" stroke="#26334a" stroke-width="22"/>
  
  <!-- Right side mechanism cutaway panel (water tube and counterweight cord pass behind) -->
  <rect 
    x="685" y="185" width="255" height="295" rx="22" 
    fill="#81c4e7" opacity="0.14" stroke="#26334a" stroke-width="14"/>

  <!-- 1. LARGE GEAR (drawn first so panel partially overlaps edges) - Center: (245, 645), r=125, 12 teeth -->
  <g transform="translate(245,645)">
    <!-- Main gear body disk (pitch radius ~125) -->
    <circle r="129" fill="url(#brass)" stroke="#26334a" stroke-width="14"/>
    
    <!-- Teeth (12 teeth, 30deg increments). Outer radius ~157 -->
    <!-- Note: teeth drawn after body so they sit on top of perimeter -->
    <g transform="rotate(0)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(30)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(60)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(90)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(120)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(150)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(180)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(210)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(240)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(270)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(300)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    <g transform="rotate(330)">
      <rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7"/>
    </g>
    
    <!-- Inner web ring (highlight/shadow) -->
    <circle r="102" fill="#d9a836" stroke="#26334a" stroke-width="11"/>
    <!-- Hub plate -->
    <circle r="46" fill="#26334a" stroke="#d9a836" stroke-width="9"/>
    <!-- Central axle hub -->
    <circle r="19" fill="#ecf0f1" stroke="#26334a" stroke-width="6"/>
  </g>

  <!-- 2. MEDIUM GEAR - Center: (442, 575), r=76, 9 teeth. Meshes with large gear (distance ~212, sum radii ~201) -->
  <g transform="translate(442,575)">
    <!-- Main body disk -->
    <circle r="81" fill="url(#brass)" stroke="#26334a" stroke-width="11"/>
    
    <!-- Teeth (9 teeth, 40deg increments). Outer radius ~105 -->
    <g transform="rotate(0)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(40)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(80)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(120)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(160)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(200)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(240)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(280)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    <g transform="rotate(320)">
      <rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6"/>
    </g>
    
    <!-- Inner web -->
    <circle r="55" fill="#d9a836" stroke="#26334a" stroke-width="9"/>
    <!-- Hub -->
    <circle r="23" fill="#26334a" stroke="#d9a836" stroke-width="7"/>
    <!-- Axle -->
    <circle r="11" fill="#ecf0f1" stroke="#26334a" stroke-width="4"/>
  </g>

  <!-- 3. SMALL GEAR - Center: (555, 483), r=39, 8 teeth. Meshes with medium (distance ~139, sum radii ~115) -->
  <g transform="translate(555,483)">
    <!-- Main body disk -->
    <circle r="43" fill="url(#brass)" stroke="#26334a" stroke-width="8"/>
    
    <!-- Teeth (8 teeth, 45deg increments). Outer radius ~56 -->
    <g transform="rotate(0)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(45)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(90)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(135)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(180)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(225)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(270)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    <g transform="rotate(315)">
      <rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4"/>
    </g>
    
    <!-- Inner web -->
    <circle r="27" fill="#d9a836" stroke="#26334a" stroke-width="6"/>
    <!-- Hub -->
    <circle r="14" fill="#26334a" stroke="#d9a836" stroke-width="4"/>
    <!-- Axle (shared with drive pulley) -->
    <circle r="8" fill="#ecf0f1" stroke="#26334a" stroke-width="3"/>
  </g>

  <!-- DRIVE PULLEY (coaxial with small gear, slightly in front). Radius 29. Grooved appearance -->
  <g>
    <!-- Pulley flange (outer) - slightly offset forward by being drawn after gear -->
    <circle cx="555" cy="483" r="34" fill="#2c3e50" stroke="#26334a" stroke-width="6"/>
    <!-- Pulley groove (inner belt channel) -->
    <circle cx="555" cy="483" r="27" fill="#34495e" stroke="#ecf0f1" stroke-width="9"/>
    <!-- Highlight rim -->
    <circle cx="555" cy="483" r="19" fill="#2c3e50" stroke="#26334a" stroke-width="4"/>
  </g>

  <!-- DRIVEN PULLEY (larger, at right). Center (785, 645), r=68. Grooved. Receives belt drive -->
  <g>
    <!-- Outer flange -->
    <circle cx="785" cy="645" r="76" fill="#2c3e50" stroke="#26334a" stroke-width="10"/>
    <!-- Belt groove channel (darker) -->
    <circle cx="785" cy="645" r="64" fill="#34495e" stroke="#bdc6cf" stroke-width="14"/>
    <!-- Inner hub rim -->
    <circle cx="785" cy="645" r="29" fill="#2c3e50" stroke="#26334a" stroke-width="7"/>
    <!-- Axle hub -->
    <circle cx="785" cy="645" r="14" fill="#ecf0f1" stroke="#26334a" stroke-width="5"/>
  </g>

  <!-- BELT DRIVE (thick, non-straight wrapped path. Upper and lower runs with curvature. Passes behind right panel partially) -->
  <!-- Upper belt run (curving over top of both pulleys) - drawn before right panel but after left panel -->
  <path 
    d="M 583,452 C 635,410 685,425 745,565" 
    fill="transparent" stroke="#1f2a38" stroke-width="17" stroke-linecap="round"/>
  <!-- Lower belt run (curving under both pulleys) - more pronounced curve to avoid straight appearance -->
  <path 
    d="M 582,515 C 640,575 690,665 745,727" 
    fill="transparent" stroke="#1f2a38" stroke-width="17" stroke-linecap="round"/>

  <!-- CRANK (attached to large gear axle. Extends left and down. Physically plausible lever) -->
  <!-- Crank arm (thick bar with rounded ends) - angled for dynamic feel -->
  <path 
    d="M 245,645 L 92,745" 
    fill="transparent" stroke="#26334a" stroke-width="26" stroke-linecap="round" stroke-linejoin="round"/>
  <!-- Crank handle grip (wood/brass knob) -->
  <circle 
    r="29" cx="88" cy="748" fill="#e9b83d" stroke="#26334a" stroke-width="9"/>
  <circle 
    r="13" cx="88" cy="748" fill="#2c3e50" stroke="#26334a" stroke-width="4"/>

  <!-- Dashed motion arcs showing rotation direction (large = clockwise, others alternate) -->
  
  <!-- Large gear: clockwise rotation arc (outside teeth). ~100deg arc. Sweep=0 (clockwise) -->
  <!-- Approximate start angle -35deg (~top-rightish), clockwise to ~65deg down. Radius 182 -->
  <path 
    d="M 383,521 A 182,182 0 0 0 410,760" 
    fill="transparent" stroke="#e74c3c" stroke-width="7" stroke-dasharray="7,9" marker-end="url(#arrow)"/>

  <!-- Medium gear: counter-clockwise (opposite to large). Radius 118. Arc from top to left side -->
  <!-- Start at top (~320deg), CCW (sweep=1) to left side (~200deg). Center (442,575) -->
  <path 
    d="M 442,445 A 118,118 0 0 1 325,575" 
    fill="transparent" stroke="#e74c3c" stroke-width="6" stroke-dasharray="6,8" marker-end="url(#arrow)"/>

  <!-- Small gear: clockwise (same as large). Radius 72. Arc above gear. Center (555,483) -->
  <path 
    d="M 610,435 A 72,72 0 0 0 555,400" 
    fill="transparent" stroke="#e74c3c" stroke-width="5" stroke-dasharray="5,7" marker-end="url(#arrow)"/>

  <!-- DRIVEN PULLEY motion arc (follows belt direction, clockwise like small gear). Radius 95. Center (785,645) -->
  <path 
    d="M 870,570 A 95,95 0 0 0 875,720" 
    fill="transparent" stroke="#e74c3c" stroke-width="6" stroke-dasharray="6,8" marker-end="url(#arrow)"/>

  <!-- WATER RESERVOIR (top right of gear area, behind right transparent panel partially) - drawn after panels so it sits on top -->
  <!-- Reservoir tank body (metallic) - vertical sides -->
  <rect 
    x="635" y="142" width="155" height="118" rx="8" 
    fill="#a8b6c4" stroke="#26334a" stroke-width="14"/>
  
  <!-- Top rim (elliptical lid) -->
  <ellipse 
    cx="712" cy="142" rx="79" ry="14" 
    fill="#a8b6c4" stroke="#26334a" stroke-width="11"/>
  
  <!-- Bottom rim (bottom of tank) -->
  <ellipse 
    cx="712" cy="260" rx="78" ry="13" 
    fill="#a8b6c4" stroke="#26334a" stroke-width="11"/>
  
  <!-- Water level (blue, transparent) -->
  <rect 
    x="644" y="167" width="135" height="85" rx="4" 
    fill="#2b8cc0" opacity="0.75"/>

  <!-- WATER PATH: continuous blue tube from reservoir -> pump area -> kettle -> cup. Thick with highlight. Passes behind right panel. -->
  <!-- Path segments (drawn after panels to have partial visibility behind but primarily on top where intended) -->
  <!-- 1. From bottom of reservoir down and right toward pump area (curving behind panel) -->
  <path 
    d="M 710,260 L 710,325 L 795,355 L 810,510" 
    fill="transparent" stroke="#26334a" stroke-width="21"/>
  <path 
    d="M 710,260 L 710,325 L 795,355 L 810,510" 
    fill="transparent" stroke="#3498db" stroke-width="13"/>
  
  <!-- 2. From pump/kettle base area up into kettle bottom (continuous flow) -->
  <path 
    d="M 810,510 C 835,545 835,560 815,575" 
    fill="transparent" stroke="#26334a" stroke-width="21"/>
  <path 
    d="M 810,510 C 835,545 835,560 815,575" 
    fill="transparent" stroke="#3498db" stroke-width="13"/>
  
  <!-- 3. From kettle side (outlet after heating) to spout and into cup (continuous blue path) -->
  <!-- Kettle outlet tube to spout base (curving) -->
  <path 
    d="M 815,390 C 855,375 880,385 900,445" 
    fill="transparent" stroke="#26334a" stroke-width="19"/>
  <path 
    d="M 815,390 C 855,375 880,385 900,445" 
    fill="transparent" stroke="#3498db" stroke-width="12"/>
  
  <!-- Spout continuation (pouring into cup) - curved tube end near cup -->
  <path 
    d="M 900,445 C 925,480 920,525 925,565" 
    fill="transparent" stroke="#26334a" stroke-width="19"/>
  <path 
    d="M 900,445 C 925,480 920,525 925,565" 
    fill="transparent" stroke="#3498db" stroke-width="12"/>

  <!-- KETTLE (whimsical teapot shape, positioned on right platform). Drawn after tube so tube appears to connect. -->
  <!-- Kettle body (tapered, rounded, metallic) - sits on platform above base -->
  <path 
    d="M 665,335 
      C 645,355 635,385 645,455 
      C 645,495 670,525 720,530 
      C 785,530 820,490 830,435 
      C 845,375 820,335 760,315 
      C 715,305 685,310 665,335 z" 
    fill="url(#kettleGrad)" stroke="#26334a" stroke-width="16"/>

  <!-- Kettle lid -->
  <ellipse 
    cx="742" cy="315" rx="47" ry="14" 
    fill="#aab4bd" stroke="#26334a" stroke-width="9"/>
  <!-- Lid knob -->
  <rect 
    x="733" y="290" width="16" height="26" rx="3" 
    fill="#aab4bd" stroke="#26334a" stroke-width="6"/>
  <circle 
    r="9" cx="741" cy="288" fill="#2c3e50" stroke="#26334a"/>

  <!-- Kettle spout (thick, connected to body, pours toward cup). Continues blue tube path visually. -->
  <!-- Spout body (wide at base, tapering) - curved path with thickness -->
  <path 
    d="M 825,400 C 860,385 880,375 905,415" 
    fill="transparent" stroke="#26334a" stroke-width="26" stroke-linecap="round"/>
  <path 
    d="M 825,400 C 860,385 880,375 905,415" 
    fill="transparent" stroke="#aab4bd" stroke-width="16" stroke-linecap="round"/>
  
  <!-- Spout opening (slightly flared) -->
  <path 
    d="M 905,415 L 925,435" 
    fill="transparent" stroke="#26334a" stroke-width="19" stroke-linecap="round"/>

  <!-- STEAM VALVE (on kettle lid). Small whimsical valve with lever. -->
  <!-- Valve body pipe rising from lid -->
  <rect 
    x="767" y="275" width="13" height="29" rx="2" 
    fill="#8e9a9e" stroke="#26334a" stroke-width="4"/>
  
  <!-- Valve body (rounded cylinder) -->
  <rect 
    x="759" y="260" width="28" height="19" rx="5" 
    fill="#8e9a9e" stroke="#26334a" stroke-width="5"/>
  
  <!-- Valve handle/lever (horizontal, rotatable appearance) -->
  <rect 
    x="785" y="255" width="32" height="8" rx="3" 
    fill="#2c3e50" stroke="#26334a" stroke-width="3" transform="rotate(-25 795 260)"/>

  <!-- Steam wisps rising from valve (whimsical) -->
  <path 
    d="M 775,235 C 765,205 790,190 775,175" 
    fill="transparent" stroke="#ecf0f1" stroke-width="7" opacity="0.75"/>
  <path 
    d="M 795,228 C 810,195 840,200 825,175" 
    fill="transparent" stroke="#ecf0f1" stroke-width="5" opacity="0.65"/>
  <path 
    d="M 755,225 C 735,200 725,215 745,185" 
    fill="transparent" stroke="#ecf0f1" stroke-width="6" opacity="0.7"/>

  <!-- TEA CUP (at bottom right, receiving pour). Simple handled cup with tea inside. -->
  <!-- Cup body (slightly tapered) -->
  <path 
    d="M 865,635 
      L 865,685 
      C 865,705 845,710 815,705 
      L 815,635 z" 
    fill="#f8f1e9" stroke="#26334a" stroke-width="13"/>
  
  <!-- Cup rim highlight (inner ellipse for depth) -->
  <ellipse 
    cx="850" cy="636" rx="39" ry="8" 
    fill="#f8f1e9" stroke="#26334a" stroke-width="5"/>
  
  <!-- Tea liquid inside cup (blue) -->
  <rect 
    x="821" y="654" width="47" height="32" rx="6" 
    fill="#2b8cc0" opacity="0.85"/>

  <!-- Cup handle (C-shaped on right) -->
  <path 
    d="M 905,645 C 935,645 950,665 945,695" 
    fill="transparent" stroke="#26334a" stroke-width="11" stroke-linecap="round"/>

  <!-- COUNTERWEIGHT (hanging on far right, cord passes behind right transparent panel). Provides mechanical balance. -->
  <!-- Hanging weight (cast iron look, rectangular with bevel) - positioned below winch cord -->
  <rect 
    x="905" y="740" width="48" height="78" rx="6" 
    fill="#7f8c8e" stroke="#2c3e50" stroke-width="9"/>
  <!-- Weight decorative grooves (to look heavy) -->
  <rect 
    x="912" y="755" width="7" height="48" 
    fill="#4a5a63" opacity="0.6"/>
  <rect 
    x="928" y="755" width="7" height="48" 
    fill="#4a5a63" opacity="0.6"/>

  <!-- Counterweight cord/chain (from weight up over small idler pulley then left to driven pulley winch area). Dashed for chain look. Passes behind transparent panel. -->
  <!-- Vertical cord from weight up to idler pulley (at ~910,385) -->
  <path 
    d="M 929,818 L 929,390" 
    fill="transparent" stroke="#2c3e50" stroke-width="7" stroke-dasharray="3,4"/>
  
  <!-- Horizontal run from idler pulley left toward driven pulley spool area (~790,385) -->
  <path 
    d="M 929,390 L 795,390" 
    fill="transparent" stroke="#2c3e50" stroke-width="7" stroke-dasharray="3,4"/>

  <!-- Small idler pulley for counterweight cord (above weight) - simple wheel -->
  <circle 
    r="19" cx="929" cy="385" fill="#2c3e50" stroke="#26334a" stroke-width="6"/>
  <circle 
    r="9" cx="929" cy="385" fill="#ecf0f1" stroke="#26334a" stroke-width="4"/>

  <!-- 9 NUMBERED CAUSE-AND-EFFECT LABELS (with leader lines where space permits) -->
  
  <!-- Label 1: Crank (bottom left) -->
  <circle cx="38" cy="175" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="38" y="180" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">1</text>
  <text x="65" y="172" font-family="Arial" font-size="13.5" font-weight="600" fill="#26334a">CRANK</text>
  <text x="65" y="188" font-family="Arial" font-size="11.5" fill="#26334a">INPUT</text>
  <!-- Leader line to crank handle -->
  <line x1="53" y1="185" x2="88" y2="255" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 2: Large Gear (left of gear) -->
  <circle cx="38" cy="265" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="38" y="270" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">2</text>
  <text x="67" y="262" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">LARGE GEAR</text>
  <!-- Leader line to large gear center-ish -->
  <line x1="55" y1="275" x2="145" y2="540" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 3: Medium Gear (between gears) -->
  <circle cx="355" cy="305" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="355" y="310" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">3</text>
  <text x="385" y="302" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">MED GEAR</text>
  <!-- Leader line to medium gear -->
  <line x1="380" y1="315" x2="430" y2="490" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 4: Small Gear (above small gear) -->
  <circle cx="485" cy="355" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="485" y="360" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">4</text>
  <text x="515" y="352" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">SMALL GEAR</text>
  <!-- Leader line -->
  <line x1="510" y1="365" x2="555" y2="445" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 5: Drive Pulley (right of small pulley) -->
  <circle cx="615" cy="370" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="615" y="375" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">5</text>
  <text x="645" y="367" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">DRIVE PULLEY</text>
  <!-- Leader line to small pulley -->
  <line x1="645" y1="375" x2="575" y2="470" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 6: Belt Drive (below belt center) -->
  <circle cx="665" cy="415" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="665" y="420" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">6</text>
  <text x="695" y="412" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">BELT DRIVE</text>
  <!-- Leader line to belt -->
  <line x1="705" y1="415" x2="720" y2="480" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 7: Driven Pulley (below driven pulley) -->
  <circle cx="845" cy="760" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="845" y="765" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">7</text>
  <text x="780" y="785" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">DRIVEN PULLEY</text>
  <!-- Leader line up to pulley -->
  <line x1="830" y1="770" x2="790" y2="710" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 8: Counterweight (right side near cord) -->
  <circle cx="965" cy="685" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="965" y="690" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">8</text>
  <text x="885" y="705" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">COUNTERWEIGHT</text>
  <!-- Leader line to weight -->
  <line x1="925" y1="695" x2="925" y2="740" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- Label 9: Water Path (near tube exit to cup) -->
  <circle cx="965" cy="515" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3"/>
  <text x="965" y="520" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">9</text>
  <text x="885" y="515" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">WATER PATH</text>
  <text x="875" y="532" font-family="Arial" font-size="11.5" fill="#26334a">RESERVOIR ? KETTLE ? CUP</text>
  <!-- Leader line to tube near cup -->
  <line x1="930" y1="525" x2="925" y2="570" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2"/>

  <!-- INSET DIAGRAM: Gear Ratio (bottom right, clean technical presentation) -->
  <!-- Inset panel box -->
  <rect 
    x="755" y="815" width="225" height="165" rx="12" 
    fill="#f8f6f0" stroke="#26334a" stroke-width="11"/>
  
  <!-- Inset title -->
  <text 
    x="775" y="845" font-family="Arial" font-size="17" font-weight="700" fill="#26334a">GEAR RATIO</text>
  <text 
    x="775" y="863" font-family="Arial" font-size="11" fill="#455a78">INPUT ? OUTPUT (speed increases)</text>
  
  <!-- Small representation of gears in inset (scaled down versions, no full teeth) -->
  <!-- Large gear representation (left of inset) - r=23 -->
  <g transform="translate(785,915)">
    <circle r="27" fill="#e9b83d" stroke="#26334a" stroke-width="3"/>
    <circle r="19" fill="#d9a836" stroke="#26334a" stroke-width="3"/>
    <circle r="7" fill="#26334a"/>
    <text x="0" y="42" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">28 teeth</text>
  </g>
  
  <!-- Medium gear representation (middle) - r=16, offset position -->
  <g transform="translate(845,915)">
    <circle r="19" fill="#e9b83d" stroke="#26334a" stroke-width="3"/>
    <circle r="13" fill="#d9a836" stroke="#26334a" stroke-width="3"/>
    <circle r="6" fill="#26334a"/>
    <text x="0" y="36" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">16 teeth</text>
  </g>
  
  <!-- Small gear representation (right) - r=9 -->
  <g transform="translate(905,915)">
    <circle r="12" fill="#e9b83d" stroke="#26334a" stroke-width="3"/>
    <circle r="7.5" fill="#d9a836" stroke="#26334a" stroke-width="2"/>
    <circle r="4" fill="#26334a"/>
    <text x="0" y="29" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">8 teeth</text>
  </g>
  
  <!-- Gear ratio arrows and text -->
  <path d="M 810,965 L 830,965" stroke="#e74c3c" stroke-width="2" marker-end="url(#arrow)"/>
  <path d="M 865,965 L 885,965" stroke="#e74c3c" stroke-width="2" marker-end="url(#arrow)"/>
  <text x="775" y="995" font-family="Arial" font-size="11" font-weight="600" fill="#26334a">RATIO � 3.5 : 2 : 1</text>
  <text x="775" y="1012" font-family="Arial" font-size="10" fill="#455a78">(torque decreases)</text>

  <!-- Final labels for components (clean technical style, small text) -->
  <!-- Reservoir label -->
  <text x="675" y="125" font-family="Arial" font-size="14" font-weight="700" fill="#26334a" text-anchor="middle">WATER RESERVOIR</text>
  
  <!-- Kettle label -->
  <text x="745" y="290" font-family="Arial" font-size="14" font-weight="700" fill="#26334a" text-anchor="middle">KETTLE</text>
  
  <!-- Steam valve label (small) -->
  <text x="795" y="245" font-family="Arial" font-size="10" fill="#26334a" font-weight="500">STEAM VALVE</text>
  
  <!-- Cup label -->
  <text x="885" y="615" font-family="Arial" font-size="11" fill="#26334a" font-weight="500">TEA CUP</text>

</svg>
Sanitized SVG
<svg width="1000" height="1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" role="img"><title>Vector Clockwork Tea Machine</title><desc>A whimsical yet physically plausible transparent cutaway of a vector clockwork tea machine. Turning the crank rotates three meshing gears of different sizes, which drive a belt-connected pulley system that powers a water pump. Water flows via a continuous blue tube from the reservoir through the kettle (with steam valve) into the cup. Includes 9 numbered cause-and-effect labels, dashed rotation arcs, counterweight, inset gear ratio diagram, and transparent panels with objects passing behind them.</desc><defs><linearGradient id="brass" x1="0%" y1="0%" x2="80%" y2="100%"><stop offset="0%" stop-color="#ffeba1" /><stop offset="45%" stop-color="#e9b83d" /><stop offset="100%" stop-color="#d29e2a" /></linearGradient><linearGradient id="brassDark" x1="20%" y1="20%" x2="100%" y2="100%"><stop offset="0%" stop-color="#e9b83d" /><stop offset="100%" stop-color="#b88a1f" /></linearGradient><linearGradient id="frameMetal" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" stop-color="#5a7391" /><stop offset="100%" stop-color="#2c3e50" /></linearGradient><linearGradient id="kettleGrad" x1="30%" y1="10%" x2="70%" y2="90%"><stop offset="0%" stop-color="#e0e0e0" /><stop offset="100%" stop-color="#8e9a9e" /></linearGradient></defs><rect x="35" y="815" width="765" height="68" rx="12" fill="#2c3e50" stroke="#26334a" stroke-width="18" /><rect x="72" y="255" width="38" height="575" rx="10" fill="url(#frameMetal)" stroke="#26334a" stroke-width="14" /><rect x="745" y="255" width="38" height="575" rx="10" fill="url(#frameMetal)" stroke="#26334a" stroke-width="14" /><rect x="95" y="255" width="675" height="33" rx="6" fill="url(#frameMetal)" stroke="#26334a" stroke-width="12" /><rect x="105" y="505" width="640" height="26" rx="6" fill="url(#frameMetal)" stroke="#26334a" stroke-width="10" /><rect x="145" y="355" width="485" height="395" rx="32" fill="#81c4e7" opacity="0.16" stroke="#26334a" stroke-width="22" /><rect x="685" y="185" width="255" height="295" rx="22" fill="#81c4e7" opacity="0.14" stroke="#26334a" stroke-width="14" /><g transform="translate(245,645)"><circle r="129" fill="url(#brass)" stroke="#26334a" stroke-width="14" /><g transform="rotate(0)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(30)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(60)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(90)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(120)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(150)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(180)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(210)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(240)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(270)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(300)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><g transform="rotate(330)"><rect x="-13.5" y="-157" width="27" height="37" rx="3" fill="url(#brass)" stroke="#26334a" stroke-width="7" /></g><circle r="102" fill="#d9a836" stroke="#26334a" stroke-width="11" /><circle r="46" fill="#26334a" stroke="#d9a836" stroke-width="9" /><circle r="19" fill="#ecf0f1" stroke="#26334a" stroke-width="6" /></g><g transform="translate(442,575)"><circle r="81" fill="url(#brass)" stroke="#26334a" stroke-width="11" /><g transform="rotate(0)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(40)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(80)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(120)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(160)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(200)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(240)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(280)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><g transform="rotate(320)"><rect x="-11" y="-104" width="22" height="29" rx="2" fill="url(#brass)" stroke="#26334a" stroke-width="6" /></g><circle r="55" fill="#d9a836" stroke="#26334a" stroke-width="9" /><circle r="23" fill="#26334a" stroke="#d9a836" stroke-width="7" /><circle r="11" fill="#ecf0f1" stroke="#26334a" stroke-width="4" /></g><g transform="translate(555,483)"><circle r="43" fill="url(#brass)" stroke="#26334a" stroke-width="8" /><g transform="rotate(0)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(45)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(90)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(135)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(180)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(225)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(270)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><g transform="rotate(315)"><rect x="-7.5" y="-55" width="15" height="21" rx="1" fill="url(#brass)" stroke="#26334a" stroke-width="4" /></g><circle r="27" fill="#d9a836" stroke="#26334a" stroke-width="6" /><circle r="14" fill="#26334a" stroke="#d9a836" stroke-width="4" /><circle r="8" fill="#ecf0f1" stroke="#26334a" stroke-width="3" /></g><g><circle cx="555" cy="483" r="34" fill="#2c3e50" stroke="#26334a" stroke-width="6" /><circle cx="555" cy="483" r="27" fill="#34495e" stroke="#ecf0f1" stroke-width="9" /><circle cx="555" cy="483" r="19" fill="#2c3e50" stroke="#26334a" stroke-width="4" /></g><g><circle cx="785" cy="645" r="76" fill="#2c3e50" stroke="#26334a" stroke-width="10" /><circle cx="785" cy="645" r="64" fill="#34495e" stroke="#bdc6cf" stroke-width="14" /><circle cx="785" cy="645" r="29" fill="#2c3e50" stroke="#26334a" stroke-width="7" /><circle cx="785" cy="645" r="14" fill="#ecf0f1" stroke="#26334a" stroke-width="5" /></g><path d="M 583,452 C 635,410 685,425 745,565" fill="transparent" stroke="#1f2a38" stroke-width="17" stroke-linecap="round" /><path d="M 582,515 C 640,575 690,665 745,727" fill="transparent" stroke="#1f2a38" stroke-width="17" stroke-linecap="round" /><path d="M 245,645 L 92,745" fill="transparent" stroke="#26334a" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" /><circle r="29" cx="88" cy="748" fill="#e9b83d" stroke="#26334a" stroke-width="9" /><circle r="13" cx="88" cy="748" fill="#2c3e50" stroke="#26334a" stroke-width="4" /><path d="M 383,521 A 182,182 0 0 0 410,760" fill="transparent" stroke="#e74c3c" stroke-width="7" stroke-dasharray="7,9" /><path d="M 442,445 A 118,118 0 0 1 325,575" fill="transparent" stroke="#e74c3c" stroke-width="6" stroke-dasharray="6,8" /><path d="M 610,435 A 72,72 0 0 0 555,400" fill="transparent" stroke="#e74c3c" stroke-width="5" stroke-dasharray="5,7" /><path d="M 870,570 A 95,95 0 0 0 875,720" fill="transparent" stroke="#e74c3c" stroke-width="6" stroke-dasharray="6,8" /><rect x="635" y="142" width="155" height="118" rx="8" fill="#a8b6c4" stroke="#26334a" stroke-width="14" /><ellipse cx="712" cy="142" rx="79" ry="14" fill="#a8b6c4" stroke="#26334a" stroke-width="11" /><ellipse cx="712" cy="260" rx="78" ry="13" fill="#a8b6c4" stroke="#26334a" stroke-width="11" /><rect x="644" y="167" width="135" height="85" rx="4" fill="#2b8cc0" opacity="0.75" /><path d="M 710,260 L 710,325 L 795,355 L 810,510" fill="transparent" stroke="#26334a" stroke-width="21" /><path d="M 710,260 L 710,325 L 795,355 L 810,510" fill="transparent" stroke="#3498db" stroke-width="13" /><path d="M 810,510 C 835,545 835,560 815,575" fill="transparent" stroke="#26334a" stroke-width="21" /><path d="M 810,510 C 835,545 835,560 815,575" fill="transparent" stroke="#3498db" stroke-width="13" /><path d="M 815,390 C 855,375 880,385 900,445" fill="transparent" stroke="#26334a" stroke-width="19" /><path d="M 815,390 C 855,375 880,385 900,445" fill="transparent" stroke="#3498db" stroke-width="12" /><path d="M 900,445 C 925,480 920,525 925,565" fill="transparent" stroke="#26334a" stroke-width="19" /><path d="M 900,445 C 925,480 920,525 925,565" fill="transparent" stroke="#3498db" stroke-width="12" /><path d="M 665,335        C 645,355 635,385 645,455        C 645,495 670,525 720,530        C 785,530 820,490 830,435        C 845,375 820,335 760,315        C 715,305 685,310 665,335 z" fill="url(#kettleGrad)" stroke="#26334a" stroke-width="16" /><ellipse cx="742" cy="315" rx="47" ry="14" fill="#aab4bd" stroke="#26334a" stroke-width="9" /><rect x="733" y="290" width="16" height="26" rx="3" fill="#aab4bd" stroke="#26334a" stroke-width="6" /><circle r="9" cx="741" cy="288" fill="#2c3e50" stroke="#26334a" /><path d="M 825,400 C 860,385 880,375 905,415" fill="transparent" stroke="#26334a" stroke-width="26" stroke-linecap="round" /><path d="M 825,400 C 860,385 880,375 905,415" fill="transparent" stroke="#aab4bd" stroke-width="16" stroke-linecap="round" /><path d="M 905,415 L 925,435" fill="transparent" stroke="#26334a" stroke-width="19" stroke-linecap="round" /><rect x="767" y="275" width="13" height="29" rx="2" fill="#8e9a9e" stroke="#26334a" stroke-width="4" /><rect x="759" y="260" width="28" height="19" rx="5" fill="#8e9a9e" stroke="#26334a" stroke-width="5" /><rect x="785" y="255" width="32" height="8" rx="3" fill="#2c3e50" stroke="#26334a" stroke-width="3" transform="rotate(-25 795 260)" /><path d="M 775,235 C 765,205 790,190 775,175" fill="transparent" stroke="#ecf0f1" stroke-width="7" opacity="0.75" /><path d="M 795,228 C 810,195 840,200 825,175" fill="transparent" stroke="#ecf0f1" stroke-width="5" opacity="0.65" /><path d="M 755,225 C 735,200 725,215 745,185" fill="transparent" stroke="#ecf0f1" stroke-width="6" opacity="0.7" /><path d="M 865,635        L 865,685        C 865,705 845,710 815,705        L 815,635 z" fill="#f8f1e9" stroke="#26334a" stroke-width="13" /><ellipse cx="850" cy="636" rx="39" ry="8" fill="#f8f1e9" stroke="#26334a" stroke-width="5" /><rect x="821" y="654" width="47" height="32" rx="6" fill="#2b8cc0" opacity="0.85" /><path d="M 905,645 C 935,645 950,665 945,695" fill="transparent" stroke="#26334a" stroke-width="11" stroke-linecap="round" /><rect x="905" y="740" width="48" height="78" rx="6" fill="#7f8c8e" stroke="#2c3e50" stroke-width="9" /><rect x="912" y="755" width="7" height="48" fill="#4a5a63" opacity="0.6" /><rect x="928" y="755" width="7" height="48" fill="#4a5a63" opacity="0.6" /><path d="M 929,818 L 929,390" fill="transparent" stroke="#2c3e50" stroke-width="7" stroke-dasharray="3,4" /><path d="M 929,390 L 795,390" fill="transparent" stroke="#2c3e50" stroke-width="7" stroke-dasharray="3,4" /><circle r="19" cx="929" cy="385" fill="#2c3e50" stroke="#26334a" stroke-width="6" /><circle r="9" cx="929" cy="385" fill="#ecf0f1" stroke="#26334a" stroke-width="4" /><circle cx="38" cy="175" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="38" y="180" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">1</text><text x="65" y="172" font-family="Arial" font-size="13.5" font-weight="600" fill="#26334a">CRANK</text><text x="65" y="188" font-family="Arial" font-size="11.5" fill="#26334a">INPUT</text><line x1="53" y1="185" x2="88" y2="255" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="38" cy="265" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="38" y="270" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">2</text><text x="67" y="262" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">LARGE GEAR</text><line x1="55" y1="275" x2="145" y2="540" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="355" cy="305" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="355" y="310" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">3</text><text x="385" y="302" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">MED GEAR</text><line x1="380" y1="315" x2="430" y2="490" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="485" cy="355" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="485" y="360" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">4</text><text x="515" y="352" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">SMALL GEAR</text><line x1="510" y1="365" x2="555" y2="445" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="615" cy="370" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="615" y="375" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">5</text><text x="645" y="367" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">DRIVE PULLEY</text><line x1="645" y1="375" x2="575" y2="470" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="665" cy="415" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="665" y="420" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">6</text><text x="695" y="412" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">BELT DRIVE</text><line x1="705" y1="415" x2="720" y2="480" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="845" cy="760" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="845" y="765" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">7</text><text x="780" y="785" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">DRIVEN PULLEY</text><line x1="830" y1="770" x2="790" y2="710" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="965" cy="685" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="965" y="690" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">8</text><text x="885" y="705" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">COUNTERWEIGHT</text><line x1="925" y1="695" x2="925" y2="740" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><circle cx="965" cy="515" r="16" fill="#f1c40f" stroke="#26334a" stroke-width="3" /><text x="965" y="520" text-anchor="middle" font-family="Arial" font-size="15" font-weight="700" fill="#26334a">9</text><text x="885" y="515" font-family="Arial" font-size="13" font-weight="600" fill="#26334a">WATER PATH</text><text x="875" y="532" font-family="Arial" font-size="11.5" fill="#26334a">RESERVOIR ? KETTLE ? CUP</text><line x1="930" y1="525" x2="925" y2="570" stroke="#26334a" stroke-width="1.5" stroke-dasharray="2,2" /><rect x="755" y="815" width="225" height="165" rx="12" fill="#f8f6f0" stroke="#26334a" stroke-width="11" /><text x="775" y="845" font-family="Arial" font-size="17" font-weight="700" fill="#26334a">GEAR RATIO</text><text x="775" y="863" font-family="Arial" font-size="11" fill="#455a78">INPUT ? OUTPUT (speed increases)</text><g transform="translate(785,915)"><circle r="27" fill="#e9b83d" stroke="#26334a" stroke-width="3" /><circle r="19" fill="#d9a836" stroke="#26334a" stroke-width="3" /><circle r="7" fill="#26334a" /><text x="0" y="42" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">28 teeth</text></g><g transform="translate(845,915)"><circle r="19" fill="#e9b83d" stroke="#26334a" stroke-width="3" /><circle r="13" fill="#d9a836" stroke="#26334a" stroke-width="3" /><circle r="6" fill="#26334a" /><text x="0" y="36" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">16 teeth</text></g><g transform="translate(905,915)"><circle r="12" fill="#e9b83d" stroke="#26334a" stroke-width="3" /><circle r="7.5" fill="#d9a836" stroke="#26334a" stroke-width="2" /><circle r="4" fill="#26334a" /><text x="0" y="29" text-anchor="middle" font-family="Arial" font-size="9" fill="#26334a">8 teeth</text></g><path d="M 810,965 L 830,965" stroke="#e74c3c" stroke-width="2" /><path d="M 865,965 L 885,965" stroke="#e74c3c" stroke-width="2" /><text x="775" y="995" font-family="Arial" font-size="11" font-weight="600" fill="#26334a">RATIO � 3.5 : 2 : 1</text><text x="775" y="1012" font-family="Arial" font-size="10" fill="#455a78">(torque decreases)</text><text x="675" y="125" font-family="Arial" font-size="14" font-weight="700" fill="#26334a" text-anchor="middle">WATER RESERVOIR</text><text x="745" y="290" font-family="Arial" font-size="14" font-weight="700" fill="#26334a" text-anchor="middle">KETTLE</text><text x="795" y="245" font-family="Arial" font-size="10" fill="#26334a" font-weight="500">STEAM VALVE</text><text x="885" y="615" font-family="Arial" font-size="11" fill="#26334a" font-weight="500">TEA CUP</text></svg>

OpenAI

OpenAI: GPT-5.5

openai/gpt-5.5
65/100

The SVG parsed as XML but failed the product sanitizer. Required label coverage: 19/19.

Status
Rejected by sanitizer: Unsafe SVG content is not allowed.
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. OpenAI GPT Latest chip resolved to GPT-5.5. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
2faf0ac2c63a9e29c26f97b8831f7b3e00c4fe8dafa4096aaa994bb8cadd4475
Raw size
19243 bytes
SVG validity
15
Safety
0
Instruction adherence
25
Visual completeness
0
Text fidelity
10
Editability and code quality
15
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="1000" height="1000" role="img" aria-labelledby="title desc">
  <title id="title">Transparent cutaway of a vector clockwork tea machine</title>
  <desc id="desc">A whimsical but physically plausible clockwork tea machine shown as a clean technical cutaway. A crank drives a belt, pulley, counterweight, interlocking gears, steam valve, kettle, reservoir, and cup. Nine numbered callouts show the cause-and-effect flow.</desc>

  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f7fbff"/>
      <stop offset="1" stop-color="#e8f0f6"/>
    </linearGradient>

    <linearGradient id="steelGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f9fbfd"/>
      <stop offset="0.38" stop-color="#aeb9c5"/>
      <stop offset="0.7" stop-color="#6d7b88"/>
      <stop offset="1" stop-color="#dce4eb"/>
    </linearGradient>

    <linearGradient id="brassGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffe7a2"/>
      <stop offset="0.45" stop-color="#c9952c"/>
      <stop offset="1" stop-color="#7d5a16"/>
    </linearGradient>

    <linearGradient id="copperGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffd4a8"/>
      <stop offset="0.45" stop-color="#c46b35"/>
      <stop offset="1" stop-color="#77371d"/>
    </linearGradient>

    <linearGradient id="waterGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#57c7ff"/>
      <stop offset="0.55" stop-color="#168ee8"/>
      <stop offset="1" stop-color="#8fe7ff"/>
    </linearGradient>

    <linearGradient id="glassGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ffffff" stop-opacity="0.5"/>
      <stop offset="0.42" stop-color="#bde9ff" stop-opacity="0.22"/>
      <stop offset="1" stop-color="#ffffff" stop-opacity="0.1"/>
    </linearGradient>

    <filter id="softShadow" x="-25%" y="-25%" width="150%" height="150%">
      <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#243442" flood-opacity="0.22"/>
    </filter>

    <filter id="smallShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#243442" flood-opacity="0.25"/>
    </filter>

    <marker id="arrowDark" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#314150"/>
    </marker>

    <marker id="arrowBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#168ee8"/>
    </marker>

    <rect id="largeTooth" x="-8" y="-103" width="16" height="31" rx="3" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="2"/>
    <rect id="mediumTooth" x="-7" y="-82" width="14" height="25" rx="3" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="2"/>
    <rect id="smallTooth" x="-6" y="-64" width="12" height="21" rx="2.5" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="2"/>

    <style>
      .frame { fill: none; stroke: #5f6f7d; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
      .thinFrame { fill: none; stroke: #8c9aa6; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
      .glass { fill: url(#glassGrad); stroke: #7ab7d7; stroke-width: 3; opacity: 0.9; }
      .highlight { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; opacity: 0.68; }
      .darkStroke { stroke: #314150; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
      .motion { fill: none; stroke: #314150; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 11 10; marker-end: url(#arrowDark); opacity: 0.86; }
      .waterTube { fill: none; stroke: url(#waterGrad); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }
      .tubeCore { fill: none; stroke: #d9fbff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
      .steam { fill: none; stroke: #9eb0bd; stroke-width: 4; stroke-linecap: round; opacity: 0.56; }
      .labelLine { fill: none; stroke: #26333f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
      .labelCircle { fill: #ffffff; stroke: #26333f; stroke-width: 3; }
      .labelText { font-family: Inter, Arial, sans-serif; font-size: 19px; fill: #1f2a33; font-weight: 700; }
      .labelNum { font-family: Inter, Arial, sans-serif; font-size: 20px; fill: #1f2a33; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
      .smallText { font-family: Inter, Arial, sans-serif; font-size: 15px; fill: #293745; font-weight: 650; }
      .insetText { font-family: Inter, Arial, sans-serif; font-size: 14px; fill: #293745; font-weight: 650; }
    </style>
  </defs>

  <rect width="1000" height="1000" fill="url(#bgGrad)"/>
  <ellipse cx="500" cy="895" rx="380" ry="38" fill="#243442" opacity="0.12"/>

  <g id="machine-frame" filter="url(#softShadow)">
    <path class="frame" d="M128 178 H806 Q840 178 840 212 V816 Q840 850 806 850 H128 Q94 850 94 816 V212 Q94 178 128 178 Z"/>
    <path class="thinFrame" d="M140 200 H794 Q818 200 818 224 V804 Q818 828 794 828 H140 Q116 828 116 804 V224 Q116 200 140 200 Z"/>
    <path class="thinFrame" d="M118 348 H818"/>
    <path class="thinFrame" d="M118 742 H818"/>
    <path class="thinFrame" d="M585 200 V828"/>
  </g>

  <g id="rear-belt-drive">
    <path d="M210 205 C330 174 520 164 650 180 A70 70 0 0 1 650 320 C520 348 335 335 210 295 A45 45 0 0 1 210 205 Z" fill="none" stroke="#242b31" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" opacity="0.96"/>
    <path d="M210 210 C330 184 520 174 650 190 A60 60 0 0 1 650 310 C520 337 335 324 210 290 A36 36 0 0 1 210 210 Z" fill="none" stroke="#626f78" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" opacity="0.75"/>

    <circle cx="210" cy="250" r="48" fill="url(#steelGrad)" stroke="#314150" stroke-width="5"/>
    <circle cx="210" cy="250" r="18" fill="#e8edf2" stroke="#314150" stroke-width="4"/>
    <path d="M210 250 L156 226" class="darkStroke" fill="none"/>
    <circle cx="143" cy="221" r="18" fill="url(#copperGrad)" stroke="#56341f" stroke-width="4"/>
    <path d="M130 221 C119 233 118 249 130 260" fill="none" stroke="#314150" stroke-width="6" stroke-linecap="round"/>

    <circle cx="650" cy="250" r="72" fill="url(#steelGrad)" stroke="#314150" stroke-width="5"/>
    <circle cx="650" cy="250" r="44" fill="#dfe7ee" stroke="#6d7b88" stroke-width="4"/>
    <circle cx="650" cy="250" r="14" fill="#fff6dd" stroke="#314150" stroke-width="4"/>
    <path d="M650 178 V142" fill="none" stroke="#314150" stroke-width="5" stroke-linecap="round"/>
    <path d="M650 322 C650 394 724 402 724 482" fill="none" stroke="#3d4a55" stroke-width="6" stroke-linecap="round"/>
    <path d="M724 482 V611" fill="none" stroke="#3d4a55" stroke-width="6" stroke-linecap="round"/>
  </g>

  <g id="reservoir-and-water-path">
    <path d="M112 594 Q112 568 138 568 H218 Q244 568 244 594 V712 Q244 738 218 738 H138 Q112 738 112 712 Z" fill="#d8f6ff" fill-opacity="0.35" stroke="#2b8fc3" stroke-width="5"/>
    <path d="M121 636 H235 V713 Q235 728 220 728 H136 Q121 728 121 713 Z" fill="#49bdf5" opacity="0.38"/>
    <path class="highlight" d="M130 586 V700"/>
    <path d="M150 660 C220 660 230 565 305 565 C375 565 395 635 465 635 C555 635 570 565 645 585 C690 600 700 650 735 665 C780 695 800 715 840 720 C865 722 875 735 890 750" fill="none" stroke="#e9fdff" stroke-width="26" stroke-linecap="round" stroke-linejoin="round" opacity="0.86"/>
    <path class="waterTube" d="M150 660 C220 660 230 565 305 565 C375 565 395 635 465 635 C555 635 570 565 645 585 C690 600 700 650 735 665 C780 695 800 715 840 720 C865 722 875 735 890 750"/>
    <path class="tubeCore" d="M150 660 C220 660 230 565 305 565 C375 565 395 635 465 635 C555 635 570 565 645 585 C690 600 700 650 735 665 C780 695 800 715 840 720 C865 722 875 735 890 750"/>
  </g>

  <g id="counterweight" filter="url(#smallShadow)">
    <path d="M686 610 H762 L780 700 Q782 720 760 726 H688 Q666 720 668 700 Z" fill="url(#steelGrad)" stroke="#314150" stroke-width="5"/>
    <path d="M704 632 H744" stroke="#ffffff" stroke-width="4" stroke-linecap="round" opacity="0.5"/>
    <circle cx="724" cy="610" r="13" fill="#dce4eb" stroke="#314150" stroke-width="4"/>
  </g>

  <g id="gears" filter="url(#smallShadow)">
    <g transform="translate(315 475)">
      <use href="#largeTooth" transform="rotate(0)"/>
      <use href="#largeTooth" transform="rotate(22.5)"/>
      <use href="#largeTooth" transform="rotate(45)"/>
      <use href="#largeTooth" transform="rotate(67.5)"/>
      <use href="#largeTooth" transform="rotate(90)"/>
      <use href="#largeTooth" transform="rotate(112.5)"/>
      <use href="#largeTooth" transform="rotate(135)"/>
      <use href="#largeTooth" transform="rotate(157.5)"/>
      <use href="#largeTooth" transform="rotate(180)"/>
      <use href="#largeTooth" transform="rotate(202.5)"/>
      <use href="#largeTooth" transform="rotate(225)"/>
      <use href="#largeTooth" transform="rotate(247.5)"/>
      <use href="#largeTooth" transform="rotate(270)"/>
      <use href="#largeTooth" transform="rotate(292.5)"/>
      <use href="#largeTooth" transform="rotate(315)"/>
      <use href="#largeTooth" transform="rotate(337.5)"/>
      <circle r="76" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="5"/>
      <circle r="48" fill="#fff6dd" stroke="#5b4618" stroke-width="5"/>
      <circle r="16" fill="url(#steelGrad)" stroke="#314150" stroke-width="4"/>
      <path d="M0 -70 V70 M-70 0 H70 M-50 -50 L50 50 M50 -50 L-50 50" stroke="#7d5a16" stroke-width="6" stroke-linecap="round" opacity="0.42"/>
    </g>

    <g transform="translate(470 475) rotate(11.25)">
      <use href="#mediumTooth" transform="rotate(0)"/>
      <use href="#mediumTooth" transform="rotate(30)"/>
      <use href="#mediumTooth" transform="rotate(60)"/>
      <use href="#mediumTooth" transform="rotate(90)"/>
      <use href="#mediumTooth" transform="rotate(120)"/>
      <use href="#mediumTooth" transform="rotate(150)"/>
      <use href="#mediumTooth" transform="rotate(180)"/>
      <use href="#mediumTooth" transform="rotate(210)"/>
      <use href="#mediumTooth" transform="rotate(240)"/>
      <use href="#mediumTooth" transform="rotate(270)"/>
      <use href="#mediumTooth" transform="rotate(300)"/>
      <use href="#mediumTooth" transform="rotate(330)"/>
      <circle r="60" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="5"/>
      <circle r="35" fill="#fff6dd" stroke="#5b4618" stroke-width="5"/>
      <circle r="14" fill="url(#steelGrad)" stroke="#314150" stroke-width="4"/>
      <path d="M0 -54 V54 M-54 0 H54 M-38 -38 L38 38 M38 -38 L-38 38" stroke="#7d5a16" stroke-width="5" stroke-linecap="round" opacity="0.42"/>
    </g>

    <g transform="translate(590 475) rotate(-10)">
      <use href="#smallTooth" transform="rotate(0)"/>
      <use href="#smallTooth" transform="rotate(40)"/>
      <use href="#smallTooth" transform="rotate(80)"/>
      <use href="#smallTooth" transform="rotate(120)"/>
      <use href="#smallTooth" transform="rotate(160)"/>
      <use href="#smallTooth" transform="rotate(200)"/>
      <use href="#smallTooth" transform="rotate(240)"/>
      <use href="#smallTooth" transform="rotate(280)"/>
      <use href="#smallTooth" transform="rotate(320)"/>
      <circle r="45" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="5"/>
      <circle r="25" fill="#fff6dd" stroke="#5b4618" stroke-width="4"/>
      <circle r="11" fill="url(#steelGrad)" stroke="#314150" stroke-width="4"/>
      <path d="M0 -39 V39 M-39 0 H39 M-27 -27 L27 27 M27 -27 L-27 27" stroke="#7d5a16" stroke-width="4.5" stroke-linecap="round" opacity="0.42"/>
    </g>

    <path class="motion" d="M242 368 A128 128 0 0 1 392 370"/>
    <path class="motion" d="M535 394 A100 100 0 0 0 404 395"/>
    <path class="motion" d="M545 405 A78 78 0 0 1 632 411"/>
  </g>

  <g id="kettle-cup-valve" filter="url(#smallShadow)">
    <path d="M632 617 Q642 560 700 548 Q758 560 773 620 Q787 681 748 710 H654 Q615 680 632 617 Z" fill="#f7fbff" fill-opacity="0.48" stroke="#7a5a37" stroke-width="5"/>
    <path d="M649 642 Q703 666 759 642 Q760 680 735 695 H666 Q642 680 649 642 Z" fill="#c46b35" opacity="0.22"/>
    <path d="M637 592 C598 582 592 640 630 646" fill="none" stroke="#7a5a37" stroke-width="7" stroke-linecap="round"/>
    <path d="M767 619 C820 613 831 650 792 666" fill="none" stroke="#7a5a37" stroke-width="7" stroke-linecap="round"/>
    <path d="M672 548 L666 520 H730 L724 548" fill="url(#copperGrad)" stroke="#7a5a37" stroke-width="5" stroke-linejoin="round"/>
    <circle cx="698" cy="518" r="16" fill="url(#steelGrad)" stroke="#314150" stroke-width="4"/>
    <path d="M698 502 V470" stroke="#314150" stroke-width="5" stroke-linecap="round"/>
    <path d="M675 469 H722" stroke="#314150" stroke-width="5" stroke-linecap="round"/>
    <path d="M722 469 C742 452 754 448 770 454" fill="none" stroke="#314150" stroke-width="5" stroke-linecap="round"/>
    <path class="steam" d="M682 450 C660 426 704 407 681 381"/>
    <path class="steam" d="M716 446 C739 421 694 405 720 377"/>
    <path class="steam" d="M751 463 C779 440 742 423 766 398"/>

    <path d="M823 733 H927 L912 844 Q909 862 889 862 H861 Q841 862 838 844 Z" fill="#f7fbff" fill-opacity="0.56" stroke="#314150" stroke-width="5"/>
    <path d="M831 768 H919 L910 840 Q907 852 890 852 H861 Q846 852 843 840 Z" fill="#b06b2c" opacity="0.23"/>
    <path d="M924 766 C967 765 967 827 914 820" fill="none" stroke="#314150" stroke-width="6" stroke-linecap="round"/>
    <path class="highlight" d="M848 746 L842 832"/>
  </g>

  <g id="transparent-front-panels">
    <path class="glass" d="M137 216 H557 V333 H137 Z"/>
    <path class="highlight" d="M154 229 H420"/>
    <path class="glass" d="M137 366 H557 V724 H137 Z"/>
    <path class="highlight" d="M153 386 L153 704"/>
    <path class="glass" d="M604 216 H798 V724 H604 Z"/>
    <path class="highlight" d="M620 232 H777"/>
    <path class="highlight" d="M620 232 L620 704"/>
  </g>

  <g id="front-cross-members">
    <path class="thinFrame" d="M138 216 H557 V333 H138 Z"/>
    <path class="thinFrame" d="M138 366 H557 V724 H138 Z"/>
    <path class="thinFrame" d="M604 216 H798 V724 H604 Z"/>
    <circle cx="557" cy="333" r="7" fill="#6d7b88"/>
    <circle cx="557" cy="366" r="7" fill="#6d7b88"/>
    <circle cx="604" cy="333" r="7" fill="#6d7b88"/>
    <circle cx="604" cy="366" r="7" fill="#6d7b88"/>
  </g>

  <g id="inset-gear-ratio" filter="url(#smallShadow)">
    <rect x="635" y="792" width="280" height="135" rx="18" fill="#ffffff" stroke="#6d7b88" stroke-width="3"/>
    <text x="656" y="819" class="smallText">gear ratio inset</text>
    <g transform="translate(684 870)">
      <circle r="24" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="3"/>
      <circle r="9" fill="#fff6dd" stroke="#5b4618" stroke-width="2"/>
      <path d="M0 -23 V23 M-23 0 H23" stroke="#7d5a16" stroke-width="3" opacity="0.5"/>
    </g>
    <g transform="translate(745 870)">
      <circle r="36" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="3"/>
      <circle r="14" fill="#fff6dd" stroke="#5b4618" stroke-width="2"/>
      <path d="M0 -35 V35 M-35 0 H35 M-25 -25 L25 25 M25 -25 L-25 25" stroke="#7d5a16" stroke-width="3" opacity="0.45"/>
    </g>
    <g transform="translate(830 870)">
      <circle r="48" fill="url(#brassGrad)" stroke="#5b4618" stroke-width="3"/>
      <circle r="18" fill="#fff6dd" stroke="#5b4618" stroke-width="2"/>
      <path d="M0 -45 V45 M-45 0 H45 M-32 -32 L32 32 M32 -32 L-32 32" stroke="#7d5a16" stroke-width="3" opacity="0.45"/>
    </g>
    <path d="M670 908 C724 925 789 925 848 908" fill="none" stroke="#314150" stroke-width="2.5" marker-end="url(#arrowDark)"/>
    <text x="657" y="842" class="insetText">small turns fastest</text>
    <text x="769" y="842" class="insetText">large gives torque</text>
  </g>

  <g id="flow-arrows">
    <path d="M160 255 C215 326 252 382 299 431" fill="none" stroke="#168ee8" stroke-width="4" stroke-dasharray="8 8" marker-end="url(#arrowBlue)" opacity="0.8"/>
    <path d="M589 520 C640 548 674 568 694 611" fill="none" stroke="#168ee8" stroke-width="4" stroke-dasharray="8 8" marker-end="url(#arrowBlue)" opacity="0.8"/>
    <path d="M744 666 C788 683 824 704 858 733" fill="none" stroke="#168ee8" stroke-width="4" stroke-dasharray="8 8" marker-end="url(#arrowBlue)" opacity="0.8"/>
  </g>

  <g id="numbered-labels">
    <g transform="translate(77 120)">
      <path class="labelLine" d="M48 40 C68 70 99 83 129 96"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">1</text>
      <text class="labelText" x="54" y="31">crank input</text>
    </g>

    <g transform="translate(308 113)">
      <path class="labelLine" d="M48 40 C83 70 151 86 244 107"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">2</text>
      <text class="labelText" x="54" y="31">belt carries motion</text>
    </g>

    <g transform="translate(707 134)">
      <path class="labelLine" d="M28 46 C12 80 -19 95 -55 111"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">3</text>
      <text class="labelText" x="54" y="31">pulley lifts load</text>
    </g>

    <g transform="translate(791 594)">
      <path class="labelLine" d="M24 48 C-3 62 -35 63 -64 48"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">4</text>
      <text class="labelText" x="54" y="31">counterweight opens feed</text>
    </g>

    <g transform="translate(54 516)">
      <path class="labelLine" d="M46 34 C71 54 81 83 98 130"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">5</text>
      <text class="labelText" x="54" y="31">reservoir supplies water</text>
    </g>

    <g transform="translate(251 730)">
      <path class="labelLine" d="M42 8 C72 -56 95 -144 88 -216"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">6</text>
      <text class="labelText" x="54" y="31">gear train sets timing</text>
    </g>

    <g transform="translate(756 407)">
      <path class="labelLine" d="M24 48 C6 62 -24 64 -50 65"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">7</text>
      <text class="labelText" x="54" y="31">steam valve meters pressure</text>
    </g>

    <g transform="translate(621 729)">
      <path class="labelLine" d="M37 7 C47 -28 52 -48 70 -78"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">8</text>
      <text class="labelText" x="54" y="31">kettle heats water</text>
    </g>

    <g transform="translate(797 872)">
      <path class="labelLine" d="M39 7 C57 -41 60 -80 64 -119"/>
      <circle class="labelCircle" cx="24" cy="24" r="21"/>
      <text class="labelNum" x="24" y="24">9</text>
      <text class="labelText" x="54" y="31">cup receives tea</text>
    </g>
  </g>
</svg>

DeepSeek

DeepSeek: DeepSeek V4 Pro

deepseek/deepseek-v4-pro
6/100

The copied response starts with an SVG root but ends mid-tag after the bounded stop.

Status
Truncated or invalid SVG
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. DeepSeek V4 Pro selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
077935cbb0608f0e69ceb609742e80601460a0675d77e4c7ea7ec01c3e63e359
Raw size
12889 bytes
SVG validity
6
Safety
0
Instruction adherence
0
Visual completeness
0
Text fidelity
0
Editability and code quality
0
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
  <title>Vector Clockwork Tea Machine</title>
  <desc>A transparent cutaway illustration of a whimsical yet physically plausible vector clockwork tea machine. Features a crank, three interlocking gears, a belt drive, a pulley, a kettle, a cup, a steam valve, a water reservoir, and a counterweight. Includes 9 numbered labels tracing the cause-and-effect flow.</desc>
  
  <defs>
    <!-- Grid Pattern -->
    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#2d3748" stroke-width="1" stroke-opacity="0.5"/>
      <path d="M 10 0 L 10 40 M 20 0 L 20 40 M 30 0 L 30 40 M 0 10 L 40 10 M 0 20 L 40 20 M 0 30 L 40 30" fill="none" stroke="#2d3748" stroke-width="0.5" stroke-opacity="0.2"/>
    </pattern>

    <!-- Drop Shadow Filter -->
    <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
      <feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#000000" flood-opacity="0.6"/>
    </filter>

    <!-- Glow Filter for Steam and Water -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="6" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>

    <!-- Soft Blur for Motion Arcs -->
    <filter id="motion-blur">
      <feGaussianBlur stdDeviation="1.5"/>
    </filter>

    <!-- Gradients -->
    <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="100%" stop-color="#1e293b"/>
    </linearGradient>

    <linearGradient id="copper" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fcd34d"/>
      <stop offset="50%" stop-color="#d97706"/>
      <stop offset="100%" stop-color="#92400e"/>
    </linearGradient>

    <linearGradient id="steel" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e2e8f0"/>
      <stop offset="50%" stop-color="#94a3b8"/>
      <stop offset="100%" stop-color="#475569"/>
    </linearGradient>

    <linearGradient id="brass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fef08a"/>
      <stop offset="50%" stop-color="#ca8a04"/>
      <stop offset="100%" stop-color="#854d0e"/>
    </linearGradient>

    <linearGradient id="glass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="rgba(255,255,255,0.15)"/>
      <stop offset="100%" stop-color="rgba(255,255,255,0.02)"/>
    </linearGradient>

    <linearGradient id="belt" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1a202c"/>
      <stop offset="50%" stop-color="#718096"/>
      <stop offset="100%" stop-color="#1a202c"/>
    </linearGradient>

    <radialGradient id="water-glow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#00f0ff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#00f0ff" stop-opacity="0.1"/>
    </radialGradient>

    <radialGradient id="gear-metallic" cx="30%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="40%" stop-color="#cbd5e0"/>
      <stop offset="100%" stop-color="#475569"/>
    </radialGradient>

    <!-- Marker for Leader Lines -->
    <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6">
      <circle cx="5" cy="5" r="4" fill="#fbbf24" stroke="#b45309" stroke-width="1.5"/>
    </marker>
  </defs>

  <!-- Background -->
  <rect width="1000" height="1000" fill="url(#bg-grad)"/>
  <rect width="1000" height="1000" fill="url(#grid)"/>

  <!-- Machine Frame & Casing -->
  <rect x="40" y="40" width="920" height="920" fill="none" stroke="#4a5568" stroke-width="6" stroke-dasharray="15, 10"/>
  <rect x="50" y="50" width="900" height="900" fill="none" stroke="#2d3748" stroke-width="2"/>
  
  <!-- Technical Rulers/Brackets -->
  <path d="M 40 100 L 60 100 M 40 200 L 60 200 M 40 300 L 60 300" stroke="#718096" stroke-width="3"/>
  <path d="M 40 700 L 60 700 M 40 800 L 60 800 M 40 900 L 60 900" stroke="#718096" stroke-width="3"/>
  <path d="M 960 100 L 940 100 M 960 200 L 940 200 M 960 300 L 940 300" stroke="#718096" stroke-width="3"/>
  <path d="M 960 700 L 940 700 M 960 800 L 940 800 M 960 900 L 940 900" stroke="#718096" stroke-width="3"/>

  <!-- ==================== BACKGROUND ELEMENTS (BEHIND PANELS) ==================== -->
  
  <!-- 1. Water Tube (Behind Panel 1) -->
  <g id="water-tube">
    <!-- Outer Glow -->
    <path d="M 750 250 L 750 350 L 550 350 L 550 480 L 580 650" fill="none" stroke="#00f0ff" stroke-width="30" stroke-linecap="round" stroke-linejoin="round" opacity="0.15"/>
    <!-- Tube Outer -->
    <path d="M 750 250 L 750 350 L 550 350 L 550 480 L 580 650" fill="none" stroke="#0099ff" stroke-width="22" stroke-linecap="round" stroke-linejoin="round" opacity="0.8"/>
    <!-- Tube Inner -->
    <path d="M 750 250 L 750 350 L 550 350 L 550 480 L 580 650" fill="none" stroke="#00f0ff" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" opacity="0.9"/>
    <!-- Water Flow Lines -->
    <path d="M 740 260 L 740 340" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="10 15" opacity="0.8"/>
    <path d="M 560 360 L 560 470" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="8 12" opacity="0.8"/>
    <path d="M 560 490 L 570 630" fill="none" stroke="#fff" stroke-width="3" stroke-dasharray="6 10" opacity="0.8"/>
  </g>

  <!-- 2. Belt Drive (Behind Panel 2) -->
  <g id="belt-drive">
    <!-- Belt Shadow -->
    <path d="M 432 255 L 432 510 Q 432 535 460 535 Q 488 535 488 510 L 488 255 Q 488 230 460 230 Q 432 230 432 255 Z" fill="#000" opacity="0.4"/>
    <!-- Belt Body -->
    <path d="M 435 250 L 435 505 Q 435 530 460 530 Q 485 530 485 505 L 485 250 Q 485 230 460 230 Q 435 230 435 250 Z" fill="url(#belt)" stroke="#1a202c" stroke-width="2"/>
    <!-- Belt Details (Grooves) -->
    <line x1="435" y1="260" x2="435" y2="495" stroke="#4a5568" stroke-width="4" stroke-dasharray="5 3"/>
    <line x1="485" y1="260" x2="485" y2="495" stroke="#4a5568" stroke-width="4" stroke-dasharray="5 3"/>
  </g>

  <!-- 3. Kettle Spout (Behind Panel 3) -->
  <g id="kettle-spout">
    <!-- Spout Path -->
    <path d="M 560 680 Q 520 680 520 720 Q 520 760 560 770" fill="none" stroke="url(#copper)" stroke-width="25" stroke-linecap="round"/>
    <path d="M 560 680 Q 520 680 520 720 Q 520 760 560 770" fill="none" stroke="#fcd34d" stroke-width="10" stroke-linecap="round" opacity="0.6"/>
    <!-- Spout Tip -->
    <ellipse cx="560" cy="770" rx="15" ry="6" fill="#92400e"/>
  </g>

  <g id="kettle-body">
    <!-- Kettle Base Shadow -->
    <ellipse cx="600" cy="760" rx="85" ry="45" fill="#000" opacity="0.6"/>
    <!-- Kettle Body Copper Base -->
    <ellipse cx="600" cy="750" rx="80" ry="40" fill="url(#copper)"/>
    <path d="M 520 750 Q 520 680 600 680 Q 680 680 680 750" fill="url(#copper)"/>
    <!-- Kettle Top Rim -->
    <ellipse cx="600" cy="680" rx="55" ry="20" fill="#d97706"/>
    <ellipse cx="600" cy="680" rx="45" ry="15" fill="#451a03"/>
    <!-- Heating Base (Friction Heater) -->
    <rect x="530" y="770" width="140" height="20" rx="4" fill="#475569"/>
    <rect x="540" y="775" width="120" height="10" rx="2" fill="#ef4444" opacity="0.8"/>
    <rect x="550" y="777" width="100" height="6" rx="1" fill="#fffbeb" opacity="0.9"/>
  </g>

  <!-- ==================== TRANSPARENT CUTAWAY PANELS ==================== -->

  <!-- Panel 1: Central Cutaway (Covers Water Tube) -->
  <g id="panel-1" filter="url(#shadow)">
    <rect x="300" y="320" width="260" height="220" rx="10" transform="rotate(-15 430 430)" fill="url(#glass)" stroke="rgba(255,255,255,0.4)" stroke-width="3"/>
    <!-- Panel Corner Braces -->
    <path d="M 320 340 L 350 340 L 350 370" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-15 430 430)"/>
    <path d="M 540 320 L 510 320 L 510 350" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-15 430 430)"/>
    <path d="M 320 520 L 350 520 L 350 490" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-15 430 430)"/>
    <path d="M 540 540 L 510 540 L 510 510" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-15 430 430)"/>
    <!-- Panel Title -->
    <text x="430" y="450" font-family="monospace" font-size="12" fill="rgba(255,255,255,0.8)" text-anchor="middle" transform="rotate(-15 430 430)">HYDRAULIC INTERFACE</text>
  </g>

  <!-- Panel 2: Top Mechanical (Covers Belt Drive) -->
  <g id="panel-2" filter="url(#shadow)">
    <rect x="380" y="80" width="160" height="280" rx="10" transform="rotate(10 460 220)" fill="url(#glass)" stroke="rgba(255,255,255,0.4)" stroke-width="3"/>
    <path d="M 400 100 L 420 100 L 420 120" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(10 460 220)"/>
    <path d="M 500 100 L 480 100 L 480 120" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(10 460 220)"/>
    <path d="M 400 340 L 420 340 L 420 320" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(10 460 220)"/>
    <path d="M 500 340 L 480 340 L 480 320" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(10 460 220)"/>
    <text x="460" y="240" font-family="monospace" font-size="12" fill="rgba(255,255,255,0.8)" text-anchor="middle" transform="rotate(10 460 220)">MECHANICAL DRIVE</text>
  </g>

  <!-- Panel 3: Bottom Right (Covers Kettle Spout) -->
  <g id="panel-3" filter="url(#shadow)">
    <rect x="580" y="660" width="180" height="160" rx="10" transform="rotate(-5 670 740)" fill="url(#glass)" stroke="rgba(255,255,255,0.4)" stroke-width="3"/>
    <path d="M 600 680 L 620 680 L 620 700" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-5 670 740)"/>
    <path d="M 740 680 L 720 680 L 720 700" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-5 670 740)"/>
    <path d="M 600 800 L 620 800 L 620 780" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-5 670 740)"/>
    <path d="M 740 800 L 720 800 L 720 780" fill="none" stroke="rgba(255,255,255,0.6)" stroke-width="4" transform="rotate(-5 670 740)"/>
    <text x="670" y="750" font-family="monospace" font-size="12" fill="rgba(255,255,255,0.8)" text-anchor="middle" transform="rotate(-5 670 740)">BREWING CHAMBER</text>
  </g>

  <!-- ==================== FOREGROUND ELEMENTS (FRONT OF PANELS) ==================== -->

  <!-- Counterweight -->
  <g id="counterweight" filter="url(#shadow)">
    <!-- Support Bracket -->
    <path d="M 60 120 L 160 120" fill="none" stroke="#718096" stroke-width="8" stroke-linecap="round"/>
    <circle cx="60" cy="120" r="8" fill="#475569"/>
    
    <!-- Pulley -->
    <circle cx="100" cy="120" r="22" fill="none" stroke="#94a3b8" stroke-width="6"/>
    <circle cx="100" cy="120" r="16" fill="url(#steel)"/>
    <circle cx="100" cy="120" r="6" fill="#1e293b"/>
    
    <!-- Rope / Chain -->
    <line x1="100" y1="120" x2="100" y2="280" stroke="#64748b" stroke-width="4" stroke-dasharray="2 2"/>
    
    <!-- Counterweight Block -->
    <rect x="75" y="280" width="50" height="80" rx="5" fill="url(#steel)"/>
    <rect x="80" y="290" width="40" height="60" rx="3" fill="url(#brass)"/>
    <text x="100" y="330" font-family="monospace" font-size="14" font-weight="bold" fill="#1a202c" text-anchor="middle">CW</text>
    
    <!-- Rope connection to frame -->
    <line x1="160" y1="120" x2="250" y2="120" stroke="#64748b" stroke-width="5"/>
    <path d="M 250 120 Q 260 110 260 100" fill="none" stroke="#64748b" stroke-width="4"/>
  </g>

  <!-- Crank (Label 1) -->
  <g id="crank" filter="url(#shadow)">
    <!-- Crank Hub on G1 -->
    <circle cx="250" cy="500" r="35" fill="url(#steel)"/>
    <circle cx="250" cy="500" r="25" fill="#1e293b"/>
    
    <!-- Crank Arm -->
    <path d="M 250 500 L 130 430" fill="none" stroke="#cbd5e0" stroke-width="18" stroke-linecap="round"/>
    <path d="M 250 500 L 130 430" fill="none" stroke="#e2e8f0" stroke-width="10" stroke-linecap="round"/>
    
    <!-- Crank Handle -->
    <rect x="110" y="405" width="30" height="50" rx="6" fill="url(#copper)" transform="rotate(-30 125 430)"/>
    <circle cx="125" cy="420" r="10" fill="#fcd34d" transform="rotate(-30 125 430)"/>
    <!-- Handle Grip Details -->
    <line x1="115" y1="410" x2="135" y2="450" stroke="#451a03" stroke-width="3" transform="rotate(-30 125 430)"/>
  </g>

  <!-- Gear 1 (Large, Label 2) -->
  <g id="gear-1" filter="url(#shadow)">
    <!-- Shadow -->
    <circle cx="250" cy="500" r="90" fill="#000" opacity="0.4" transform="translate(4, 6)"/>
    <!-- Teeth -->
    <circle cx="250" cy="500" r="90

Qwen

Qwen: Qwen3.7 Max

qwen/qwen3.7-max
0/100

No SVG output was captured from the model after the bounded OpenRouter run.

Status
No output after bounded stop
Generation settings
OpenRouter Chat room orc-1781993457-a0MT0Z06MepDvJEfJNyt, six models side-by-side, tools 0 active, captured 2026-06-20. Qwen3.7 Max selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855
Raw size
0 bytes
SVG validity
0
Safety
0
Instruction adherence
0
Visual completeness
0
Text fidelity
0
Editability and code quality
0
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output

No raw response has been captured for this model/challenge pair.

Z.ai

Z.ai: GLM 5.2

z-ai/glm-5.2
6/100

Run was stopped after a bounded wait with an incomplete SVG block. The partial output starts with an SVG root but does not close and cannot be parsed; score preserves minimal credit for attempted machine labels and structure in the raw partial.

Status
Truncated output scored
Generation settings
OpenRouter Chat room orc-1782119125-JivaBmtNCiKzWVKJK9SI, single model, tools 0 active, captured 2026-06-22. Z.ai GLM 5.2 selected directly. Run was stopped after a bounded wait with a partial SVG output.
Raw SHA-256
31c6aa22128e3c93219ca357e505f3b20a227b00b2788544a220ef0343dbefad
Raw size
3481 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output
Raw copied output
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" text-rendering="geometricPrecision" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">

<title>Vector Clockwork Tea Machine — Cutaway Diagram</title>

<desc>A whimsical mechanical tea-brewing machine rendered as a transparent cutaway technical illustration. A hand crank drives three meshing gears of different sizes; the smallest gear shares a shaft with a drive pulley that turns a crossed belt to a second pulley operating a kettle agitator. Water flows from a counterweight-balanced reservoir through a blue tube into the kettle, where steam vents through a valve, and brewed tea pours from the spout into a cup. Nine numbered labels trace the cause-and-effect flow; an inset shows the gear ratio.</desc>



<defs>

  <!-- Gradients -->

  <linearGradient id="glass" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#a8d8ff" stop-opacity="0.18"/>

    <stop offset="1" stop-color="#5aa6e0" stop-opacity="0.10"/>

  </linearGradient>

  <linearGradient id="brass" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#f4d597"/>

    <stop offset="0.5" stop-color="#d9a441"/>

    <stop offset="1" stop-color="#8a6a25"/>

  </linearGradient>

  <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#e6eaee"/>

    <stop offset="0.5" stop-color="#9aa6b0"/>

    <stop offset="1" stop-color="#5a6470"/>

  </linearGradient>

  <linearGradient id="copper" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#f6c7a4"/>

    <stop offset="0.5" stop-color="#c97a4a"/>

    <stop offset="1" stop-color="#6f3a1e"/>

  </linearGradient>

  <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#aee0f5"/>

    <stop offset="1" stop-color="#3a8fc0"/>

  </linearGradient>

  <linearGradient id="tea" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#c98b3a"/>

    <stop offset="1" stop-color="#7a4a18"/>

  </linearGradient>

  <linearGradient id="reservoir" x1="0" y1="0" x2="0" y2="1">

    <stop offset="0" stop-color="#cfd6dd"/>

    <stop offset="1" stop-color="#7f8893"/>

  </linearGradient>

  

  <!-- Soft drop shadow -->

  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">

    <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>

    <feOffset dx="2" dy="3"/>

    <feComponentTransfer><feFuncA type="linear" slope="0.35"/></feComponentTransfer>

    <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>

  </filter>

  

  <!-- Arrowhead -->

  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">

    <path d="M0,0 L10,5 L0,10 z" fill="#2b2f36"/>

  </marker>

  <marker id="arrowBlue" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">

    <path d="M0,0 L10,5 L0,10 z" fill="#1f6fa8"/>

  </marker>

  

  <!-- Gear symbol: parametrized via use - but we'll inline -->

</defs>



<!-- Background -->

<rect width="1000" height="1000" fill="#f4f5f7"/>

<!-- Subtle grid -->

<g stroke="#d8dde2" stroke-width="0.5" fill="none">

  <path d="M0 100 H1000 M0 200 H1000 M0 300 H1000 M0 400 H1000 M0 500 H1000 M0 600 H1000 M0 700 H1000 M0 800 H1000 M0 900 H1000"/>

  <path d="M100 0 V1000 M200 0 V1000 M300 0 V1000 M400 0 V1000 M500 0 V1000 M600 0 V1000 M700 0 V1000 M800 0 V1000 M900 0 V1000"/>

</g>

...

Dense Editorial Poster

Google

Google: Gemini 3.1 Pro Preview

google/gemini-3.1-pro-preview
96/100

Sanitizer accepted the SVG after removing 14 unsupported safe attribute(s) or element(s). Required label coverage: 13/13. Score includes a 4-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. Google Gemini Pro Latest chip resolved to Gemini 3.1 Pro Preview. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
6a69b5b7f9455ef2e6f82773af27447bb9248b047803b07301a16379bdc2445f
Raw size
13050 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900" width="100%" height="100%" style="background-color: #0F172A; font-family: system-ui, -apple-system, sans-serif;">
  <title>The Future of Editable AI-Generated Design</title>
  <desc>A conference poster detailing the future of editable AI-generated design. Features a structured grid with a hero illustration of vector reshaping, a timeline of design phases, three speaker profiles, and a metrics panel tracking validity, editability, fidelity, and safety.</desc>

  <defs>
    <!-- Background Grid Pattern -->
    <pattern id="dot-grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="1.5" fill="#334155" opacity="0.6"/>
    </pattern>

    <!-- Gradients -->
    <linearGradient id="hero-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#3B82F6"/>
      <stop offset="50%" stop-color="#8B5CF6"/>
      <stop offset="100%" stop-color="#EC4899"/>
    </linearGradient>

    <linearGradient id="metric-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#10B981"/>
      <stop offset="100%" stop-color="#3B82F6"/>
    </linearGradient>

    <linearGradient id="metric-gradient-2" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#F43F5E"/>
      <stop offset="100%" stop-color="#8B5CF6"/>
    </linearGradient>

    <!-- Drop Shadow for Cursor and Cards -->
    <filter id="shadow" x="-10%" y="-10%" width="130%" height="130%">
      <feDropShadow dx="0" dy="6" stdDeviation="6" flood-color="#020617" flood-opacity="0.5"/>
    </filter>
    
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="8" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>

  <!-- Background Base -->
  <rect width="1400" height="900" fill="#0F172A"/>
  <rect width="1400" height="900" fill="url(#dot-grid)"/>

  <!-- ================= HEADER (Top) ================= -->
  <g id="header" transform="translate(40, 40)">
    <rect width="1320" height="90" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
    <text x="30" y="55" font-size="42" font-weight="800" fill="#F8FAFC" letter-spacing="-0.5">The Future of Editable AI-Generated Design</text>
    <rect x="1000" y="25" width="290" height="40" rx="20" fill="#3B82F6" opacity="0.2"/>
    <text x="1145" y="52" font-size="20" font-weight="600" fill="#60A5FA" text-anchor="middle">Annual Tech Summit 2026</text>
  </g>

  <!-- ================= MAIN LAYOUT ================= -->
  
  <!-- HERO ILLUSTRATION (Col 1-3, Top half) -->
  <g id="hero" transform="translate(40, 150)">
    <rect width="960" height="300" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
    
    <!-- Abstract Canvas Area -->
    <rect x="40" y="40" width="880" height="220" rx="12" fill="#0F172A" stroke="#1E293B" stroke-width="2"/>
    
    <!-- Vector Construction Lines -->
    <path d="M 120 180 C 250 80, 500 80, 600 220 S 780 200, 840 90" fill="none" stroke="#475569" stroke-width="4" stroke-dasharray="8 8"/>
    
    <!-- Main Editable Spline -->
    <path d="M 120 180 C 300 250, 450 150, 600 220 S 750 250, 840 90" fill="none" stroke="url(#hero-gradient)" stroke-width="8" filter="url(#glow)"/>
    
    <!-- Vector Nodes and control lines -->
    <!-- Node 1 -->
    <circle cx="120" cy="180" r="8" fill="#0F172A" stroke="#3B82F6" stroke-width="3"/>
    
    <!-- Node 2 (Currently being edited) -->
    <line x1="450" y1="150" x2="600" y2="220" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4 4"/>
    <circle cx="450" cy="150" r="6" fill="#F8FAFC" stroke="#64748B" stroke-width="2"/>
    <circle cx="600" cy="220" r="10" fill="#0F172A" stroke="#EC4899" stroke-width="3"/>
    <circle cx="600" cy="220" r="4" fill="#EC4899"/>
    
    <!-- Node 3 -->
    <circle cx="840" cy="90" r="8" fill="#0F172A" stroke="#3B82F6" stroke-width="3"/>

    <!-- UI Bounding Box -->
    <rect x="520" y="160" width="160" height="90" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-dasharray="5 5"/>
    <rect x="516" y="156" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6"/>
    <rect x="676" y="156" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6"/>
    <rect x="516" y="246" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6"/>
    <rect x="676" y="246" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6"/>

    <!-- Distinct Human Cursor -->
    <g transform="translate(450, 150) rotate(-15) scale(1.2)" filter="url(#shadow)">
      <polygon points="0,0 12,35 18,22 30,32 35,26 22,16 33,10" fill="#F8FAFC" stroke="#000000" stroke-width="1.5"/>
    </g>

    <!-- UI Overlay Texts -->
    <rect x="445" y="105" width="120" height="30" rx="6" fill="#EC4899" opacity="0.9"/>
    <text x="505" y="126" font-size="14" font-weight="700" fill="#FFFFFF" text-anchor="middle">Bezier Control</text>

    <text x="60" y="27" font-size="20" font-weight="700" fill="#CBD5E1">Generative Sub-Node Engine</text>
  </g>

  <!-- SPEAKER CARDS (Col 1-3, Bottom half) -->
  <g id="speakers" transform="translate(40, 470)">
    <!-- Speaker 1 -->
    <g transform="translate(0, 0)">
      <rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
      <g transform="translate(30, 40)">
        <circle cx="30" cy="30" r="30" fill="#3B82F6" opacity="0.2"/>
        <circle cx="20" cy="30" r="20" fill="none" stroke="#60A5FA" stroke-width="3"/>
        <circle cx="40" cy="30" r="20" fill="none" stroke="#60A5FA" stroke-width="3"/>
      </g>
      <text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Dr. Elena Rostova</text>
      <text x="30" y="155" font-size="18" font-weight="600" fill="#8B5CF6">Lead AI Researcher</text>
      <text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Exploring the mathematical</text>
      <text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">foundations of pure geometry in AI.</text>
    </g>

    <!-- Speaker 2 -->
    <g transform="translate(330, 0)">
      <rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
      <g transform="translate(30, 40)">
        <circle cx="30" cy="30" r="30" fill="#10B981" opacity="0.2"/>
        <polygon points="30,5 55,20 55,45 30,60 5,45 5,20" fill="none" stroke="#34D399" stroke-width="3"/>
      </g>
      <text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Marcus Chen</text>
      <text x="30" y="155" font-size="18" font-weight="600" fill="#10B981">UX/UI Design Director</text>
      <text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Translating prompt-based generation</text>
      <text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">into editable node structures.</text>
    </g>

    <!-- Speaker 3 -->
    <g transform="translate(660, 0)">
      <rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
      <g transform="translate(30, 40)">
        <circle cx="30" cy="30" r="30" fill="#F43F5E" opacity="0.2"/>
        <circle cx="30" cy="30" r="12" fill="none" stroke="#FB7185" stroke-width="4"/>
        <circle cx="30" cy="30" r="22" fill="none" stroke="#FB7185" stroke-width="2" stroke-dasharray="6 4"/>
      </g>
      <text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Sarah Jenkins</text>
      <text x="30" y="155" font-size="18" font-weight="600" fill="#F43F5E">Generative Ethics Lead</text>
      <text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Ensuring systemic safety barriers</text>
      <text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">for enterprise design publication.</text>
    </g>
  </g>

  <!-- ================= METRICS PANEL (Col 4, Right Sidebar) ================= -->
  <g id="metrics" transform="translate(1020, 150)">
    <rect width="340" height="560" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
    <text x="170" y="45" font-size="22" font-weight="800" fill="#F8FAFC" text-anchor="middle">System Performance</text>
    <line x1="40" y1="65" x2="300" y2="65" stroke="#334155" stroke-width="2"/>

    <!-- Metric 1: Validity (92%) -->
    <!-- Circumference = 2 * PI * 40 � 251.2. Offset = 251.2 * (1 - 0.92) = 20.1 -->
    <g transform="translate(170, 130)">
      <circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12"/>
      <circle cx="0" cy="0" r="40" fill="none" stroke="url(#metric-gradient)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="20.1" stroke-linecap="round" transform="rotate(-90)"/>
      <text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">92%</text>
      <text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Validity</text>
    </g>

    <!-- Metric 2: Editability (88%) -->
    <!-- Offset = 251.2 * (1 - 0.88) = 30.1 -->
    <g transform="translate(170, 255)">
      <circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12"/>
      <circle cx="0" cy="0" r="40" fill="none" stroke="url(#hero-gradient)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="30.1" stroke-linecap="round" transform="rotate(-90)"/>
      <text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">88%</text>
      <text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Editability</text>
    </g>

    <!-- Metric 3: Fidelity (96%) -->
    <!-- Offset = 251.2 * (1 - 0.96) = 10.0 -->
    <g transform="translate(170, 380)">
      <circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12"/>
      <circle cx="0" cy="0" r="40" fill="none" stroke="url(#metric-gradient-2)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="10.0" stroke-linecap="round" transform="rotate(-90)"/>
      <text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">96%</text>
      <text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Fidelity</text>
    </g>

    <!-- Metric 4: Safety (99%) -->
    <!-- Offset = 251.2 * (1 - 0.99) = 2.5 -->
    <g transform="translate(170, 505)">
      <circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12"/>
      <circle cx="0" cy="0" r="40" fill="none" stroke="#34D399" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="2.5" stroke-linecap="round" transform="rotate(-90)"/>
      <text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">99%</text>
      <text x="0" y="30" font-size="14" font-weight="600" fill="#10B981" text-anchor="middle">Safety</text>
    </g>
  </g>

  <!-- ================= TIMELINE (Bottom spans full width) ================= -->
  <g id="timeline" transform="translate(40, 740)">
    <rect width="1320" height="120" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" filter="url(#shadow)"/>
    
    <!-- Timeline Base Line -->
    <line x1="120" y1="50" x2="1200" y2="50" stroke="#475569" stroke-width="6" stroke-linecap="round"/>
    <!-- Active Progress Line -->
    <line x1="120" y1="50" x2="660" y2="50" stroke="#3B82F6" stroke-width="6" stroke-linecap="round" filter="url(#glow)"/>

    <!-- Milestone 1: Sketch -->
    <g transform="translate(120, 50)">
      <circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6"/>
      <circle cx="0" cy="0" r="6" fill="#3B82F6"/>
      <text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Sketch</text>
    </g>

    <!-- Milestone 2: Structure -->
    <g transform="translate(390, 50)">
      <circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6"/>
      <circle cx="0" cy="0" r="6" fill="#3B82F6"/>
      <text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Structure</text>
    </g>

    <!-- Milestone 3: Style -->
    <g transform="translate(660, 50)">
      <circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6"/>
      <circle cx="0" cy="0" r="6" fill="#F8FAFC"/>
      <text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Style</text>
    </g>

    <!-- Milestone 4: Validate -->
    <g transform="translate(930, 50)">
      <circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#475569" stroke-width="6"/>
      <text x="0" y="40" font-size="20" font-weight="600" fill="#94A3B8" text-anchor="middle">Validate</text>
    </g>

    <!-- Milestone 5: Publish -->
    <g transform="translate(1200, 50)">
      <circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#475569" stroke-width="6"/>
      <text x="0" y="40" font-size="20" font-weight="600" fill="#94A3B8" text-anchor="middle">Publish</text>
    </g>
  </g>
</svg>
Sanitized SVG
<svg viewBox="0 0 1400 900" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img"><title>The Future of Editable AI-Generated Design</title><desc>A conference poster detailing the future of editable AI-generated design. Features a structured grid with a hero illustration of vector reshaping, a timeline of design phases, three speaker profiles, and a metrics panel tracking validity, editability, fidelity, and safety.</desc><defs><pattern id="dot-grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.5" fill="#334155" opacity="0.6" /></pattern><linearGradient id="hero-gradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#3B82F6" /><stop offset="50%" stop-color="#8B5CF6" /><stop offset="100%" stop-color="#EC4899" /></linearGradient><linearGradient id="metric-gradient" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#10B981" /><stop offset="100%" stop-color="#3B82F6" /></linearGradient><linearGradient id="metric-gradient-2" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color="#F43F5E" /><stop offset="100%" stop-color="#8B5CF6" /></linearGradient></defs><rect width="1400" height="900" fill="#0F172A" /><rect width="1400" height="900" fill="url(#dot-grid)" /><g id="header" transform="translate(40, 40)"><rect width="1320" height="90" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><text x="30" y="55" font-size="42" font-weight="800" fill="#F8FAFC">The Future of Editable AI-Generated Design</text><rect x="1000" y="25" width="290" height="40" rx="20" fill="#3B82F6" opacity="0.2" /><text x="1145" y="52" font-size="20" font-weight="600" fill="#60A5FA" text-anchor="middle">Annual Tech Summit 2026</text></g><g id="hero" transform="translate(40, 150)"><rect width="960" height="300" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><rect x="40" y="40" width="880" height="220" rx="12" fill="#0F172A" stroke="#1E293B" stroke-width="2" /><path d="M 120 180 C 250 80, 500 80, 600 220 S 780 200, 840 90" fill="none" stroke="#475569" stroke-width="4" stroke-dasharray="8 8" /><path d="M 120 180 C 300 250, 450 150, 600 220 S 750 250, 840 90" fill="none" stroke="url(#hero-gradient)" stroke-width="8" /><circle cx="120" cy="180" r="8" fill="#0F172A" stroke="#3B82F6" stroke-width="3" /><line x1="450" y1="150" x2="600" y2="220" stroke="#94A3B8" stroke-width="2" stroke-dasharray="4 4" /><circle cx="450" cy="150" r="6" fill="#F8FAFC" stroke="#64748B" stroke-width="2" /><circle cx="600" cy="220" r="10" fill="#0F172A" stroke="#EC4899" stroke-width="3" /><circle cx="600" cy="220" r="4" fill="#EC4899" /><circle cx="840" cy="90" r="8" fill="#0F172A" stroke="#3B82F6" stroke-width="3" /><rect x="520" y="160" width="160" height="90" fill="none" stroke="#8B5CF6" stroke-width="2" stroke-dasharray="5 5" /><rect x="516" y="156" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6" /><rect x="676" y="156" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6" /><rect x="516" y="246" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6" /><rect x="676" y="246" width="8" height="8" fill="#F8FAFC" stroke="#8B5CF6" /><g transform="translate(450, 150) rotate(-15) scale(1.2)"><polygon points="0,0 12,35 18,22 30,32 35,26 22,16 33,10" fill="#F8FAFC" stroke="#000000" stroke-width="1.5" /></g><rect x="445" y="105" width="120" height="30" rx="6" fill="#EC4899" opacity="0.9" /><text x="505" y="126" font-size="14" font-weight="700" fill="#FFFFFF" text-anchor="middle">Bezier Control</text><text x="60" y="27" font-size="20" font-weight="700" fill="#CBD5E1">Generative Sub-Node Engine</text></g><g id="speakers" transform="translate(40, 470)"><g transform="translate(0, 0)"><rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><g transform="translate(30, 40)"><circle cx="30" cy="30" r="30" fill="#3B82F6" opacity="0.2" /><circle cx="20" cy="30" r="20" fill="none" stroke="#60A5FA" stroke-width="3" /><circle cx="40" cy="30" r="20" fill="none" stroke="#60A5FA" stroke-width="3" /></g><text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Dr. Elena Rostova</text><text x="30" y="155" font-size="18" font-weight="600" fill="#8B5CF6">Lead AI Researcher</text><text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Exploring the mathematical</text><text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">foundations of pure geometry in AI.</text></g><g transform="translate(330, 0)"><rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><g transform="translate(30, 40)"><circle cx="30" cy="30" r="30" fill="#10B981" opacity="0.2" /><polygon points="30,5 55,20 55,45 30,60 5,45 5,20" fill="none" stroke="#34D399" stroke-width="3" /></g><text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Marcus Chen</text><text x="30" y="155" font-size="18" font-weight="600" fill="#10B981">UX/UI Design Director</text><text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Translating prompt-based generation</text><text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">into editable node structures.</text></g><g transform="translate(660, 0)"><rect width="300" height="240" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><g transform="translate(30, 40)"><circle cx="30" cy="30" r="30" fill="#F43F5E" opacity="0.2" /><circle cx="30" cy="30" r="12" fill="none" stroke="#FB7185" stroke-width="4" /><circle cx="30" cy="30" r="22" fill="none" stroke="#FB7185" stroke-width="2" stroke-dasharray="6 4" /></g><text x="30" y="130" font-size="24" font-weight="800" fill="#F8FAFC">Sarah Jenkins</text><text x="30" y="155" font-size="18" font-weight="600" fill="#F43F5E">Generative Ethics Lead</text><text x="30" y="195" font-size="16" font-weight="400" fill="#94A3B8">Ensuring systemic safety barriers</text><text x="30" y="218" font-size="16" font-weight="400" fill="#94A3B8">for enterprise design publication.</text></g></g><g id="metrics" transform="translate(1020, 150)"><rect width="340" height="560" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><text x="170" y="45" font-size="22" font-weight="800" fill="#F8FAFC" text-anchor="middle">System Performance</text><line x1="40" y1="65" x2="300" y2="65" stroke="#334155" stroke-width="2" /><g transform="translate(170, 130)"><circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12" /><circle cx="0" cy="0" r="40" fill="none" stroke="url(#metric-gradient)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="20.1" stroke-linecap="round" transform="rotate(-90)" /><text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">92%</text><text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Validity</text></g><g transform="translate(170, 255)"><circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12" /><circle cx="0" cy="0" r="40" fill="none" stroke="url(#hero-gradient)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="30.1" stroke-linecap="round" transform="rotate(-90)" /><text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">88%</text><text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Editability</text></g><g transform="translate(170, 380)"><circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12" /><circle cx="0" cy="0" r="40" fill="none" stroke="url(#metric-gradient-2)" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="10.0" stroke-linecap="round" transform="rotate(-90)" /><text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">96%</text><text x="0" y="70" font-size="18" font-weight="600" fill="#CBD5E1" text-anchor="middle">Fidelity</text></g><g transform="translate(170, 505)"><circle cx="0" cy="0" r="40" fill="none" stroke="#0F172A" stroke-width="12" /><circle cx="0" cy="0" r="40" fill="none" stroke="#34D399" stroke-width="12" stroke-dasharray="251.2" stroke-dashoffset="2.5" stroke-linecap="round" transform="rotate(-90)" /><text x="0" y="8" font-size="20" font-weight="800" fill="#F8FAFC" text-anchor="middle">99%</text><text x="0" y="30" font-size="14" font-weight="600" fill="#10B981" text-anchor="middle">Safety</text></g></g><g id="timeline" transform="translate(40, 740)"><rect width="1320" height="120" rx="16" fill="#1E293B" stroke="#334155" stroke-width="2" /><line x1="120" y1="50" x2="1200" y2="50" stroke="#475569" stroke-width="6" stroke-linecap="round" /><line x1="120" y1="50" x2="660" y2="50" stroke="#3B82F6" stroke-width="6" stroke-linecap="round" /><g transform="translate(120, 50)"><circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6" /><circle cx="0" cy="0" r="6" fill="#3B82F6" /><text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Sketch</text></g><g transform="translate(390, 50)"><circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6" /><circle cx="0" cy="0" r="6" fill="#3B82F6" /><text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Structure</text></g><g transform="translate(660, 50)"><circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#3B82F6" stroke-width="6" /><circle cx="0" cy="0" r="6" fill="#F8FAFC" /><text x="0" y="40" font-size="20" font-weight="700" fill="#F8FAFC" text-anchor="middle">Style</text></g><g transform="translate(930, 50)"><circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#475569" stroke-width="6" /><text x="0" y="40" font-size="20" font-weight="600" fill="#94A3B8" text-anchor="middle">Validate</text></g><g transform="translate(1200, 50)"><circle cx="0" cy="0" r="16" fill="#0F172A" stroke="#475569" stroke-width="6" /><text x="0" y="40" font-size="20" font-weight="600" fill="#94A3B8" text-anchor="middle">Publish</text></g></g></svg>

Anthropic

Anthropic: Claude Opus 4.8

anthropic/claude-opus-4.8
98/100

Sanitizer accepted the SVG after removing 1 unsupported safe attribute(s) or element(s). Required label coverage: 13/13. Score includes a 2-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. Claude Opus Latest chip resolved to Claude Opus 4.8. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
700d12f3494e8e0d9460138857df36c0d930f9733e1c079b3eb266c8c1c4bde3
Raw size
12487 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900" role="img" aria-labelledby="posterTitle posterDesc" font-family="Helvetica, Arial, sans-serif">
  <title id="posterTitle">The Future of Editable AI-Generated Design � Conference Poster</title>
  <desc id="posterDesc">An editorial conference poster with a header, a hero illustration of a cursor reshaping vector nodes, three speaker cards, a five-step timeline (Sketch, Structure, Style, Validate, Publish), and a metrics panel with four circular progress indicators for Validity, Editability, Fidelity, and Safety.</desc>

  <defs>
    <pattern id="mesh" width="56" height="56" patternUnits="userSpaceOnUse">
      <path d="M0 28 H56 M28 0 V56" stroke="#243056" stroke-width="0.6" opacity="0.45"/>
      <circle cx="28" cy="28" r="1.6" fill="#3a4a82"/>
      <circle cx="0" cy="0" r="1.2" fill="#2c3a6e"/>
      <circle cx="56" cy="56" r="1.2" fill="#2c3a6e"/>
    </pattern>
    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#2dd4bf"/>
      <stop offset="0.5" stop-color="#818cf8"/>
      <stop offset="1" stop-color="#f472b6"/>
    </linearGradient>
    <linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#2dd4bf"/>
      <stop offset="1" stop-color="#818cf8"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="1400" height="900" fill="#0b0f24"/>
  <rect width="1400" height="900" fill="url(#mesh)"/>

  <!-- ===================== HEADER ===================== -->
  <g>
    <rect x="40" y="28" width="1320" height="96" rx="14" fill="#141a38" stroke="#2a3360"/>
    <rect x="40" y="28" width="8" height="96" rx="4" fill="url(#accent)"/>
    <text x="68" y="74" font-size="40" font-weight="700" fill="#eef1ff">The Future of Editable AI-Generated Design</text>
    <text x="68" y="104" font-size="17" fill="#9aa6cf">Annual Symposium on Generative Design Tooling &#8226; June 2026</text>
    <text x="1336" y="66" text-anchor="end" font-size="22" font-weight="700" fill="#2dd4bf">SYMPOSIUM</text>
    <text x="1336" y="98" text-anchor="end" font-size="34" font-weight="700" fill="#eef1ff">'26</text>
  </g>

  <!-- ===================== HERO ILLUSTRATION ===================== -->
  <g>
    <rect x="40" y="148" width="950" height="195" rx="14" fill="#10162f" stroke="#2a3360"/>
    <text x="64" y="182" font-size="22" font-weight="700" fill="#eef1ff">Reshaping Vectors, Not Pixels</text>
    <text x="64" y="206" font-size="14" fill="#9aa6cf">A human cursor edits live geometry � nodes, handles and curves stay fully editable end to end.</text>

    <!-- original (faded) path -->
    <path d="M120 305 C 260 305, 360 305, 480 300 S 740 296, 880 296" fill="none" stroke="#3a4576" stroke-width="2.5" stroke-dasharray="6 7"/>
    <!-- reshaped (active) path -->
    <path d="M120 305 C 250 240, 360 240, 480 288 S 740 232, 880 252" fill="none" stroke="url(#heroGrad)" stroke-width="3.5"/>

    <!-- control handles -->
    <g stroke="#5b6aa8" stroke-width="1.4" stroke-dasharray="3 4">
      <line x1="120" y1="305" x2="250" y2="240"/>
      <line x1="480" y1="288" x2="360" y2="240"/>
      <line x1="480" y1="288" x2="740" y2="232"/>
    </g>
    <g fill="#818cf8">
      <circle cx="250" cy="240" r="5"/>
      <circle cx="360" cy="240" r="5"/>
      <circle cx="740" cy="232" r="5"/>
    </g>

    <!-- vector nodes -->
    <g fill="#0b0f24" stroke="#2dd4bf" stroke-width="2.5">
      <rect x="112" y="297" width="16" height="16" rx="2"/>
      <rect x="472" y="280" width="16" height="16" rx="2"/>
      <rect x="872" y="244" width="16" height="16" rx="2"/>
    </g>

    <!-- cursor pulling a node -->
    <g transform="translate(496 252) scale(1.7)">
      <path d="M0 0 L0 18 L4.5 13.5 L8 21 L11 19.5 L7.5 12 L13 12 Z" fill="#ffffff" stroke="#0b0f24" stroke-width="1"/>
    </g>

    <text x="500" y="282" font-size="11" fill="#cdd3f0">drag node</text>
    <text x="120" y="332" font-size="11" fill="#7d88b8">vector node</text>
    <text x="744" y="222" font-size="11" fill="#7d88b8">control handle</text>
  </g>

  <!-- ===================== SPEAKER CARDS ===================== -->
  <!-- Card 1 -->
  <g>
    <rect x="40" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360"/>
    <circle cx="92" cy="418" r="30" fill="#0e1530" stroke="#2dd4bf" stroke-width="2"/>
    <path d="M92 400 L108 432 L76 432 Z" fill="#2dd4bf"/>
    <text x="138" y="410" font-size="20" font-weight="700" fill="#eef1ff">Dr. Maya Chen</text>
    <text x="138" y="432" font-size="13" fill="#9aa6cf">Generative Systems Lead</text>
    <text x="138" y="452" font-size="12" font-weight="700" fill="#2dd4bf">KEYNOTE</text>
    <line x1="60" y1="468" x2="320" y2="468" stroke="#2a3360"/>
    <text x="60" y="498" font-size="14" fill="#cdd3f0">Maps how editable scene graphs help</text>
    <text x="60" y="518" font-size="14" fill="#cdd3f0">teams refine AI output without losing intent.</text>
    <rect x="60" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#2dd4bf"/>
    <text x="120" y="619" text-anchor="middle" font-size="12" fill="#2dd4bf">&#9658; 09:30</text>
  </g>

  <!-- Card 2 -->
  <g>
    <rect x="365" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360"/>
    <circle cx="417" cy="418" r="30" fill="#0e1530" stroke="#818cf8" stroke-width="2"/>
    <circle cx="410" cy="416" r="11" fill="none" stroke="#818cf8" stroke-width="2"/>
    <circle cx="426" cy="424" r="11" fill="none" stroke="#818cf8" stroke-width="2"/>
    <text x="463" y="410" font-size="20" font-weight="700" fill="#eef1ff">Prof. Leo Alvarez</text>
    <text x="463" y="432" font-size="13" fill="#9aa6cf">Design Tooling Researcher</text>
    <text x="463" y="452" font-size="12" font-weight="700" fill="#818cf8">TALK</text>
    <line x1="385" y1="468" x2="645" y2="468" stroke="#2a3360"/>
    <text x="385" y="498" font-size="14" fill="#cdd3f0">Builds structure-first tools that keep</text>
    <text x="385" y="518" font-size="14" fill="#cdd3f0">layouts modular, reusable, and version-safe.</text>
    <rect x="385" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#818cf8"/>
    <text x="445" y="619" text-anchor="middle" font-size="12" fill="#818cf8">&#9658; 11:00</text>
  </g>

  <!-- Card 3 -->
  <g>
    <rect x="690" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360"/>
    <circle cx="742" cy="418" r="30" fill="#0e1530" stroke="#f472b6" stroke-width="2"/>
    <polygon points="742,400 758,409 758,427 742,436 726,427 726,409" fill="none" stroke="#f472b6" stroke-width="2"/>
    <text x="788" y="410" font-size="20" font-weight="700" fill="#eef1ff">Aisha Okonkwo</text>
    <text x="788" y="432" font-size="13" fill="#9aa6cf">Creative AI Engineer</text>
    <text x="788" y="452" font-size="12" font-weight="700" fill="#f472b6">TALK</text>
    <line x1="710" y1="468" x2="970" y2="468" stroke="#2a3360"/>
    <text x="710" y="498" font-size="14" fill="#cdd3f0">Designs guardrails that check fidelity</text>
    <text x="710" y="518" font-size="14" fill="#cdd3f0">and safety before any design ships.</text>
    <rect x="710" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#f472b6"/>
    <text x="770" y="619" text-anchor="middle" font-size="12" fill="#f472b6">&#9658; 14:00</text>
  </g>

  <!-- ===================== METRICS PANEL ===================== -->
  <g>
    <rect x="1015" y="148" width="345" height="507" rx="14" fill="#10162f" stroke="#2a3360"/>
    <text x="1035" y="184" font-size="20" font-weight="700" fill="#eef1ff">Quality Metrics</text>
    <text x="1035" y="206" font-size="12" fill="#9aa6cf">Evaluated across 1.2k generation runs</text>
    <line x1="1035" y1="222" x2="1340" y2="222" stroke="#2a3360"/>

    <!-- Validity (top-left) 92 -->
    <g>
      <circle cx="1100" cy="318" r="48" fill="none" stroke="#22294d" stroke-width="12"/>
      <circle cx="1100" cy="318" r="48" fill="none" stroke="#2dd4bf" stroke-width="12" stroke-linecap="round" stroke-dasharray="277.5 301.6" transform="rotate(-90 1100 318)"/>
      <text x="1100" y="324" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">92%</text>
      <text x="1100" y="388" text-anchor="middle" font-size="14" fill="#9aa6cf">Validity</text>
    </g>
    <!-- Editability (top-right) 88 -->
    <g>
      <circle cx="1278" cy="318" r="48" fill="none" stroke="#22294d" stroke-width="12"/>
      <circle cx="1278" cy="318" r="48" fill="none" stroke="#818cf8" stroke-width="12" stroke-linecap="round" stroke-dasharray="265.4 301.6" transform="rotate(-90 1278 318)"/>
      <text x="1278" y="324" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">88%</text>
      <text x="1278" y="388" text-anchor="middle" font-size="14" fill="#9aa6cf">Editability</text>
    </g>
    <!-- Fidelity (bottom-left) 84 -->
    <g>
      <circle cx="1100" cy="500" r="48" fill="none" stroke="#22294d" stroke-width="12"/>
      <circle cx="1100" cy="500" r="48" fill="none" stroke="#f472b6" stroke-width="12" stroke-linecap="round" stroke-dasharray="253.3 301.6" transform="rotate(-90 1100 500)"/>
      <text x="1100" y="506" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">84%</text>
      <text x="1100" y="570" text-anchor="middle" font-size="14" fill="#9aa6cf">Fidelity</text>
    </g>
    <!-- Safety (bottom-right) 96 -->
    <g>
      <circle cx="1278" cy="500" r="48" fill="none" stroke="#22294d" stroke-width="12"/>
      <circle cx="1278" cy="500" r="48" fill="none" stroke="#fbbf24" stroke-width="12" stroke-linecap="round" stroke-dasharray="289.5 301.6" transform="rotate(-90 1278 500)"/>
      <text x="1278" y="506" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">96%</text>
      <text x="1278" y="570" text-anchor="middle" font-size="14" fill="#9aa6cf">Safety</text>
    </g>
    <text x="1187" y="630" text-anchor="middle" font-size="12" fill="#7d88b8">Higher is better &#8226; latest benchmark</text>
  </g>

  <!-- ===================== TIMELINE ===================== -->
  <g>
    <rect x="40" y="690" width="1320" height="160" rx="14" fill="#141a38" stroke="#2a3360"/>
    <text x="64" y="724" font-size="20" font-weight="700" fill="#eef1ff">From Prompt to Production: The Editable Pipeline</text>

    <line x1="160" y1="790" x2="1240" y2="790" stroke="url(#accent)" stroke-width="3"/>

    <!-- milestone 1 Sketch -->
    <g>
      <circle cx="160" cy="790" r="22" fill="#0e1530" stroke="#2dd4bf" stroke-width="3"/>
      <text x="160" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#2dd4bf">1</text>
      <text x="160" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Sketch</text>
    </g>
    <!-- milestone 2 Structure -->
    <g>
      <circle cx="430" cy="790" r="22" fill="#0e1530" stroke="#6ee0d3" stroke-width="3"/>
      <text x="430" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#6ee0d3">2</text>
      <text x="430" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Structure</text>
    </g>
    <!-- milestone 3 Style -->
    <g>
      <circle cx="700" cy="790" r="22" fill="#0e1530" stroke="#818cf8" stroke-width="3"/>
      <text x="700" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#818cf8">3</text>
      <text x="700" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Style</text>
    </g>
    <!-- milestone 4 Validate -->
    <g>
      <circle cx="970" cy="790" r="22" fill="#0e1530" stroke="#f472b6" stroke-width="3"/>
      <text x="970" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#f472b6">4</text>
      <text x="970" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Validate</text>
    </g>
    <!-- milestone 5 Publish -->
    <g>
      <circle cx="1240" cy="790" r="22" fill="#0e1530" stroke="#fbbf24" stroke-width="3"/>
      <text x="1240" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#fbbf24">5</text>
      <text x="1240" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Publish</text>
    </g>
  </g>

  <!-- footer -->
  <text x="40" y="884" font-size="12" fill="#7d88b8">Venue: Hall A &#8226; #EditableAI2026 &#8226; Hosted by the Generative Design Lab</text>
  <text x="1360" y="884" text-anchor="end" font-size="12" fill="#7d88b8">Designed for editable, accessible vector output</text>
</svg>
Sanitized SVG
<svg viewBox="0 0 1400 900" role="img" font-family="Helvetica, Arial, sans-serif" xmlns="http://www.w3.org/2000/svg"><title id="posterTitle">The Future of Editable AI-Generated Design � Conference Poster</title><desc id="posterDesc">An editorial conference poster with a header, a hero illustration of a cursor reshaping vector nodes, three speaker cards, a five-step timeline (Sketch, Structure, Style, Validate, Publish), and a metrics panel with four circular progress indicators for Validity, Editability, Fidelity, and Safety.</desc><defs><pattern id="mesh" width="56" height="56" patternUnits="userSpaceOnUse"><path d="M0 28 H56 M28 0 V56" stroke="#243056" stroke-width="0.6" opacity="0.45" /><circle cx="28" cy="28" r="1.6" fill="#3a4a82" /><circle cx="0" cy="0" r="1.2" fill="#2c3a6e" /><circle cx="56" cy="56" r="1.2" fill="#2c3a6e" /></pattern><linearGradient id="accent" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#2dd4bf" /><stop offset="0.5" stop-color="#818cf8" /><stop offset="1" stop-color="#f472b6" /></linearGradient><linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#2dd4bf" /><stop offset="1" stop-color="#818cf8" /></linearGradient></defs><rect width="1400" height="900" fill="#0b0f24" /><rect width="1400" height="900" fill="url(#mesh)" /><g><rect x="40" y="28" width="1320" height="96" rx="14" fill="#141a38" stroke="#2a3360" /><rect x="40" y="28" width="8" height="96" rx="4" fill="url(#accent)" /><text x="68" y="74" font-size="40" font-weight="700" fill="#eef1ff">The Future of Editable AI-Generated Design</text><text x="68" y="104" font-size="17" fill="#9aa6cf">Annual Symposium on Generative Design Tooling • June 2026</text><text x="1336" y="66" text-anchor="end" font-size="22" font-weight="700" fill="#2dd4bf">SYMPOSIUM</text><text x="1336" y="98" text-anchor="end" font-size="34" font-weight="700" fill="#eef1ff">'26</text></g><g><rect x="40" y="148" width="950" height="195" rx="14" fill="#10162f" stroke="#2a3360" /><text x="64" y="182" font-size="22" font-weight="700" fill="#eef1ff">Reshaping Vectors, Not Pixels</text><text x="64" y="206" font-size="14" fill="#9aa6cf">A human cursor edits live geometry � nodes, handles and curves stay fully editable end to end.</text><path d="M120 305 C 260 305, 360 305, 480 300 S 740 296, 880 296" fill="none" stroke="#3a4576" stroke-width="2.5" stroke-dasharray="6 7" /><path d="M120 305 C 250 240, 360 240, 480 288 S 740 232, 880 252" fill="none" stroke="url(#heroGrad)" stroke-width="3.5" /><g stroke="#5b6aa8" stroke-width="1.4" stroke-dasharray="3 4"><line x1="120" y1="305" x2="250" y2="240" /><line x1="480" y1="288" x2="360" y2="240" /><line x1="480" y1="288" x2="740" y2="232" /></g><g fill="#818cf8"><circle cx="250" cy="240" r="5" /><circle cx="360" cy="240" r="5" /><circle cx="740" cy="232" r="5" /></g><g fill="#0b0f24" stroke="#2dd4bf" stroke-width="2.5"><rect x="112" y="297" width="16" height="16" rx="2" /><rect x="472" y="280" width="16" height="16" rx="2" /><rect x="872" y="244" width="16" height="16" rx="2" /></g><g transform="translate(496 252) scale(1.7)"><path d="M0 0 L0 18 L4.5 13.5 L8 21 L11 19.5 L7.5 12 L13 12 Z" fill="#ffffff" stroke="#0b0f24" stroke-width="1" /></g><text x="500" y="282" font-size="11" fill="#cdd3f0">drag node</text><text x="120" y="332" font-size="11" fill="#7d88b8">vector node</text><text x="744" y="222" font-size="11" fill="#7d88b8">control handle</text></g><g><rect x="40" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360" /><circle cx="92" cy="418" r="30" fill="#0e1530" stroke="#2dd4bf" stroke-width="2" /><path d="M92 400 L108 432 L76 432 Z" fill="#2dd4bf" /><text x="138" y="410" font-size="20" font-weight="700" fill="#eef1ff">Dr. Maya Chen</text><text x="138" y="432" font-size="13" fill="#9aa6cf">Generative Systems Lead</text><text x="138" y="452" font-size="12" font-weight="700" fill="#2dd4bf">KEYNOTE</text><line x1="60" y1="468" x2="320" y2="468" stroke="#2a3360" /><text x="60" y="498" font-size="14" fill="#cdd3f0">Maps how editable scene graphs help</text><text x="60" y="518" font-size="14" fill="#cdd3f0">teams refine AI output without losing intent.</text><rect x="60" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#2dd4bf" /><text x="120" y="619" text-anchor="middle" font-size="12" fill="#2dd4bf">► 09:30</text></g><g><rect x="365" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360" /><circle cx="417" cy="418" r="30" fill="#0e1530" stroke="#818cf8" stroke-width="2" /><circle cx="410" cy="416" r="11" fill="none" stroke="#818cf8" stroke-width="2" /><circle cx="426" cy="424" r="11" fill="none" stroke="#818cf8" stroke-width="2" /><text x="463" y="410" font-size="20" font-weight="700" fill="#eef1ff">Prof. Leo Alvarez</text><text x="463" y="432" font-size="13" fill="#9aa6cf">Design Tooling Researcher</text><text x="463" y="452" font-size="12" font-weight="700" fill="#818cf8">TALK</text><line x1="385" y1="468" x2="645" y2="468" stroke="#2a3360" /><text x="385" y="498" font-size="14" fill="#cdd3f0">Builds structure-first tools that keep</text><text x="385" y="518" font-size="14" fill="#cdd3f0">layouts modular, reusable, and version-safe.</text><rect x="385" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#818cf8" /><text x="445" y="619" text-anchor="middle" font-size="12" fill="#818cf8">► 11:00</text></g><g><rect x="690" y="360" width="300" height="295" rx="14" fill="#141a38" stroke="#2a3360" /><circle cx="742" cy="418" r="30" fill="#0e1530" stroke="#f472b6" stroke-width="2" /><polygon points="742,400 758,409 758,427 742,436 726,427 726,409" fill="none" stroke="#f472b6" stroke-width="2" /><text x="788" y="410" font-size="20" font-weight="700" fill="#eef1ff">Aisha Okonkwo</text><text x="788" y="432" font-size="13" fill="#9aa6cf">Creative AI Engineer</text><text x="788" y="452" font-size="12" font-weight="700" fill="#f472b6">TALK</text><line x1="710" y1="468" x2="970" y2="468" stroke="#2a3360" /><text x="710" y="498" font-size="14" fill="#cdd3f0">Designs guardrails that check fidelity</text><text x="710" y="518" font-size="14" fill="#cdd3f0">and safety before any design ships.</text><rect x="710" y="600" width="120" height="28" rx="14" fill="#0e1530" stroke="#f472b6" /><text x="770" y="619" text-anchor="middle" font-size="12" fill="#f472b6">► 14:00</text></g><g><rect x="1015" y="148" width="345" height="507" rx="14" fill="#10162f" stroke="#2a3360" /><text x="1035" y="184" font-size="20" font-weight="700" fill="#eef1ff">Quality Metrics</text><text x="1035" y="206" font-size="12" fill="#9aa6cf">Evaluated across 1.2k generation runs</text><line x1="1035" y1="222" x2="1340" y2="222" stroke="#2a3360" /><g><circle cx="1100" cy="318" r="48" fill="none" stroke="#22294d" stroke-width="12" /><circle cx="1100" cy="318" r="48" fill="none" stroke="#2dd4bf" stroke-width="12" stroke-linecap="round" stroke-dasharray="277.5 301.6" transform="rotate(-90 1100 318)" /><text x="1100" y="324" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">92%</text><text x="1100" y="388" text-anchor="middle" font-size="14" fill="#9aa6cf">Validity</text></g><g><circle cx="1278" cy="318" r="48" fill="none" stroke="#22294d" stroke-width="12" /><circle cx="1278" cy="318" r="48" fill="none" stroke="#818cf8" stroke-width="12" stroke-linecap="round" stroke-dasharray="265.4 301.6" transform="rotate(-90 1278 318)" /><text x="1278" y="324" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">88%</text><text x="1278" y="388" text-anchor="middle" font-size="14" fill="#9aa6cf">Editability</text></g><g><circle cx="1100" cy="500" r="48" fill="none" stroke="#22294d" stroke-width="12" /><circle cx="1100" cy="500" r="48" fill="none" stroke="#f472b6" stroke-width="12" stroke-linecap="round" stroke-dasharray="253.3 301.6" transform="rotate(-90 1100 500)" /><text x="1100" y="506" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">84%</text><text x="1100" y="570" text-anchor="middle" font-size="14" fill="#9aa6cf">Fidelity</text></g><g><circle cx="1278" cy="500" r="48" fill="none" stroke="#22294d" stroke-width="12" /><circle cx="1278" cy="500" r="48" fill="none" stroke="#fbbf24" stroke-width="12" stroke-linecap="round" stroke-dasharray="289.5 301.6" transform="rotate(-90 1278 500)" /><text x="1278" y="506" text-anchor="middle" font-size="22" font-weight="700" fill="#eef1ff">96%</text><text x="1278" y="570" text-anchor="middle" font-size="14" fill="#9aa6cf">Safety</text></g><text x="1187" y="630" text-anchor="middle" font-size="12" fill="#7d88b8">Higher is better • latest benchmark</text></g><g><rect x="40" y="690" width="1320" height="160" rx="14" fill="#141a38" stroke="#2a3360" /><text x="64" y="724" font-size="20" font-weight="700" fill="#eef1ff">From Prompt to Production: The Editable Pipeline</text><line x1="160" y1="790" x2="1240" y2="790" stroke="url(#accent)" stroke-width="3" /><g><circle cx="160" cy="790" r="22" fill="#0e1530" stroke="#2dd4bf" stroke-width="3" /><text x="160" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#2dd4bf">1</text><text x="160" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Sketch</text></g><g><circle cx="430" cy="790" r="22" fill="#0e1530" stroke="#6ee0d3" stroke-width="3" /><text x="430" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#6ee0d3">2</text><text x="430" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Structure</text></g><g><circle cx="700" cy="790" r="22" fill="#0e1530" stroke="#818cf8" stroke-width="3" /><text x="700" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#818cf8">3</text><text x="700" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Style</text></g><g><circle cx="970" cy="790" r="22" fill="#0e1530" stroke="#f472b6" stroke-width="3" /><text x="970" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#f472b6">4</text><text x="970" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Validate</text></g><g><circle cx="1240" cy="790" r="22" fill="#0e1530" stroke="#fbbf24" stroke-width="3" /><text x="1240" y="797" text-anchor="middle" font-size="15" font-weight="700" fill="#fbbf24">5</text><text x="1240" y="836" text-anchor="middle" font-size="15" font-weight="700" fill="#eef1ff">Publish</text></g></g><text x="40" y="884" font-size="12" fill="#7d88b8">Venue: Hall A • #EditableAI2026 • Hosted by the Generative Design Lab</text><text x="1360" y="884" text-anchor="end" font-size="12" fill="#7d88b8">Designed for editable, accessible vector output</text></svg>

xAI

xAI: Grok 4.20

x-ai/grok-4.20
91/100

Sanitizer accepted the SVG after removing 12 unsupported safe attribute(s) or element(s). Required label coverage: 13/13. Score includes a 8-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. Grok 4.20 selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
6858140fcc1634bfe88a840c12c3f31a18157524270e6a1af5cb5b25339c1b63
Raw size
19584 bytes
SVG validity
15
Safety
20
Instruction adherence
24
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="1400" 
  height="900" 
  viewBox="0 0 1400 900">
  <title>The Future of Editable AI-Generated Design</title>
  <desc>Conference poster with editorial grid featuring a hero vector-editing illustration, three speaker cards with avatars and session summaries, a bottom timeline with five milestones (Sketch, Structure, Style, Validate, Publish), and a right-side metrics panel with four circular progress indicators (Validity 92%, Editability 87%, Fidelity 95%, Safety 89%). Dark futuristic color scheme with cyan and magenta accents. Includes subtle node-and-curve pattern background.</desc>
  
  <defs>
    <!-- Decorative pattern: subtle vector node grid with bezier hints -->
    <pattern 
      id="vectorPattern" 
      width="110" 
      height="110" 
      patternUnits="userSpaceOnUse">
      <!-- Light grid lines -->
      <path 
        d="M 10,10 L 10,100 M 10,10 L 100,10" 
        fill="transparent" 
        stroke="#132b52" 
        stroke-width="2.5" />
      <!-- Diagonal connection hint -->
      <path 
        d="M 35,35 Q 55,15 75,38" 
        fill="transparent" 
        stroke="#1e3a68" 
        stroke-width="1.5" />
      <!-- Vector nodes -->
      <circle 
        r="3.5" 
        cx="10" 
        cy="10" 
        fill="#00e5c8" />
      <circle 
        r="3" 
        cx="65" 
        cy="28" 
        fill="#00e5c8" />
      <circle 
        r="3" 
        cx="92" 
        cy="77" 
        fill="#00e5c8" />
      <circle 
        r="2" 
        cx="38" 
        cy="78" 
        fill="#ff4da6" />
    </pattern>

    <!-- Gradient for header banner -->
    <linearGradient 
      id="headerGradient" 
      x1="0%" 
      y1="0%" 
      x2="100%" 
      y2="100%">
      <stop offset="0%" stop-color="#0c2545" />
      <stop offset="100%" stop-color="#05152b" />
    </linearGradient>
  </defs>

  <!-- Background base color -->
  <rect 
    width="1400" 
    height="900" 
    fill="#05101f" />

  <!-- Decorative pattern background (subtle overlay) -->
  <rect 
    width="1400" 
    height="900" 
    fill="url(#vectorPattern)" 
    opacity="0.65" />

  <!-- HEADER BANNER -->
  <!-- Header background bar -->
  <rect 
    x="0" 
    y="0" 
    width="1400" 
    height="205" 
    fill="url(#headerGradient)" 
    opacity="0.95" />
  
  <!-- Header accent line -->
  <rect 
    x="0" 
    y="198" 
    width="1400" 
    height="7" 
    fill="#00e5c8" />

  <!-- Conference title - main -->
  <text 
    x="72" 
    y="78" 
    font-family="Arial Black, sans-serif" 
    font-size="31" 
    font-weight="900" 
    letter-spacing="-1.5px" 
    fill="#a0f0ff">THE FUTURE OF</text>
  
  <text 
    x="72" 
    y="133" 
    font-family="Arial Black, sans-serif" 
    font-size="57.5" 
    font-weight="900" 
    letter-spacing="-3.2px" 
    fill="#ffffff">EDITABLE AI-</text>
  
  <text 
    x="72" 
    y="188" 
    font-family="Arial Black, sans-serif" 
    font-size="57.5" 
    font-weight="900" 
    letter-spacing="-3.2px" 
    fill="#00e5c8">GENERATED DESIGN</text>

  <!-- Subtitle / event info -->
  <text 
    x="75" 
    y="222" 
    font-family="Arial, sans-serif" 
    font-size="17.5" 
    font-weight="500" 
    letter-spacing="3.5px" 
    fill="#7bb4d1">xAI DESIGN SUMMIT � JUNE 20, 2026 � VIRTUAL</text>

  <!-- HERO ILLUSTRATION: Abstract vector node editing -->
  <!-- Canvas frame (right side of header) -->
  <rect 
    x="865" 
    y="28" 
    width="475" 
    height="235" 
    rx="22" 
    fill="#0b1f3a" 
    stroke="#00e5c8" 
    stroke-width="18" />
  
  <!-- Inner canvas area (clipped feel) -->
  <rect 
    x="885" 
    y="48" 
    width="435" 
    height="195" 
    rx="8" 
    fill="#132b4f" />

  <!-- Abstract editable vector shape (bezier curve form) -->
  <!-- Main filled shape -->
  <path 
    d="M 945,125 
      C 945,82 985,53 1072,62 
      C 1175,74 1238,98 1255,157 
      C 1268,195 1195,212 1098,205 
      C 990,195 955,175 945,125 Z" 
    fill="#1c3a62" 
    opacity="0.85" />
  
  <!-- Shape outline (thick stroke for visibility) -->
  <path 
    d="M 945,125 
      C 945,82 985,53 1072,62 
      C 1175,74 1238,98 1255,157 
      C 1268,195 1195,212 1098,205 
      C 990,195 955,175 945,125 Z" 
    fill="transparent" 
    stroke="#00f5d4" 
    stroke-width="11" />

  <!-- Vector anchor nodes (control points) - 6 visible nodes -->
  <!-- Node 1 -->
  <circle 
    r="8.5" 
    cx="945" 
    cy="125" 
    fill="#ff2a7a" />
  <circle 
    r="3.5" 
    cx="945" 
    cy="125" 
    fill="#ffffff" />
  
  <!-- Node 2 (top) - targeted by cursor -->
  <circle 
    r="8.5" 
    cx="1072" 
    cy="62" 
    fill="#ff2a7a" />
  <circle 
    r="3.5" 
    cx="1072" 
    cy="62" 
    fill="#ffffff" />
  
  <!-- Node 3 -->
  <circle 
    r="8.5" 
    cx="1255" 
    cy="157" 
    fill="#ff2a7a" />
  <circle 
    r="3.5" 
    cx="1255" 
    cy="157" 
    fill="#ffffff" />
  
  <!-- Node 4 -->
  <circle 
    r="8.5" 
    cx="1098" 
    cy="205" 
    fill="#ff2a7a" />
  <circle 
    r="3.5" 
    cx="1098" 
    cy="205" 
    fill="#ffffff" />
  
  <!-- Node 5 -->
  <circle 
    r="7.5" 
    cx="985" 
    cy="178" 
    fill="#ff2a7a" />
  <circle 
    r="3" 
    cx="985" 
    cy="178" 
    fill="#ffffff" />
  
  <!-- Node 6 -->
  <circle 
    r="7.5" 
    cx="1185" 
    cy="98" 
    fill="#ff2a7a" />
  <circle 
    r="3" 
    cx="1185" 
    cy="98" 
    fill="#ffffff" />

  <!-- Control handle lines (to show editable nature) -->
  <!-- Handle from Node 2 -->
  <line 
    x1="1072" 
    y1="62" 
    x2="1115" 
    y2="28" 
    stroke="#7be8ff" 
    stroke-width="2.5" 
    stroke-dasharray="3,3" />
  <circle 
    r="3" 
    cx="1115" 
    cy="28" 
    fill="#7be8ff" />
  
  <!-- Handle from Node 6 -->
  <line 
    x1="1185" 
    y1="98" 
    x2="1238" 
    y2="55" 
    stroke="#7be8ff" 
    stroke-width="2.5" 
    stroke-dasharray="3,3" />
  <circle 
    r="3" 
    cx="1238" 
    cy="55" 
    fill="#7be8ff" />

  <!-- Human cursor reshaping vector nodes (pointer with highlight) -->
  <!-- Cursor group: positioned near top-right node, angled as if dragging -->
  <g transform="translate(1195,78) rotate(-38)">
    <!-- Cursor arrow body -->
    <path 
      d="M0,0 L0,38 L9,31 L19,46 L23,41 L12,25 L15,0 Z" 
      fill="#ff2a7a" 
      stroke="#0a1428" 
      stroke-width="3" />
    <!-- Inner highlight to suggest interaction -->
    <rect 
      x="3" 
      y="3" 
      width="4" 
      height="19" 
      rx="1" 
      fill="#ffe14d" />
  </g>

  <!-- Cursor target highlight ring on the node it's editing (Node 2) -->
  <circle 
    r="15" 
    cx="1072" 
    cy="62" 
    fill="transparent" 
    stroke="#ffe14d" 
    stroke-width="2.5" 
    opacity="0.75" />

  <!-- FEATURED SPEAKERS SECTION HEADER -->
  <text 
    x="68" 
    y="280" 
    font-family="Arial Black, sans-serif" 
    font-size="29" 
    font-weight="700" 
    fill="#00e5c8" 
    letter-spacing="-0.5px">FEATURED SPEAKERS</text>
  
  <!-- Divider line under speakers header -->
  <line 
    x1="68" 
    y1="292" 
    x2="385" 
    y2="292" 
    stroke="#00e5c8" 
    stroke-width="3.5" />

  <!-- SPEAKER CARD 1 -->
  <!-- Card container -->
  <rect 
    x="55" 
    y="325" 
    width="340" 
    height="245" 
    rx="18" 
    fill="#0f2542" 
    stroke="#1e4a6e" 
    stroke-width="9" />

  <!-- Avatar 1: abstract circular icon (teal theme) -->
  <circle 
    r="46" 
    cx="117" 
    cy="386" 
    fill="#1dd4b5" />
  <!-- Abstract avatar detail: inner ring and "shape" -->
  <circle 
    r="33" 
    cx="117" 
    cy="386" 
    fill="#0f2542" />
  <!-- Stylized icon lines (representing creative flow) -->
  <path 
    d="M95,375 Q117,355 140,375" 
    fill="none" 
    stroke="#1dd4b5" 
    stroke-width="7" />
  <circle 
    r="9" 
    cx="117" 
    cy="386" 
    fill="#0f2542" />
  
  <!-- Speaker 1: Name -->
  <text 
    x="185" 
    y="367" 
    font-family="Arial Black, sans-serif" 
    font-size="21" 
    font-weight="700" 
    fill="#e0f6ff">MAYA CHEN</text>
  
  <!-- Speaker 1: Role -->
  <text 
    x="185" 
    y="391" 
    font-family="Arial, sans-serif" 
    font-size="13.5" 
    font-weight="600" 
    fill="#7ac6e3" letter-spacing="0.5px">CREATIVE DIRECTOR, ADOBE</text>

  <!-- Speaker 1: Session summary (2 lines) -->
  <text 
    x="185" 
    y="421" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">Bridging human intuition and machine</text>
  <text 
    x="185" 
    y="439" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">precision in real-time generative design.</text>

  <!-- SPEAKER CARD 2 -->
  <!-- Card container -->
  <rect 
    x="425" 
    y="325" 
    width="340" 
    height="245" 
    rx="18" 
    fill="#0f2542" 
    stroke="#1e4a6e" 
    stroke-width="9" />

  <!-- Avatar 2: abstract circular icon (magenta theme) -->
  <circle 
    r="46" 
    cx="487" 
    cy="386" 
    fill="#ff4a9c" />
  <circle 
    r="33" 
    cx="487" 
    cy="386" 
    fill="#0f2542" />
  <!-- Abstract inner pattern: nodes -->
  <circle 
    r="6" 
    cx="475" 
    cy="374" 
    fill="#ff4a9c" />
  <circle 
    r="6" 
    cx="499" 
    cy="374" 
    fill="#ff4a9c" />
  <circle 
    r="6" 
    cx="487" 
    cy="398" 
    fill="#ff4a9c" />

  <!-- Speaker 2: Name -->
  <text 
    x="555" 
    y="367" 
    font-family="Arial Black, sans-serif" 
    font-size="21" 
    font-weight="700" 
    fill="#e0f6ff">RAJ PATEL, PHD</text>
  
  <!-- Speaker 2: Role -->
  <text 
    x="555" 
    y="391" 
    font-family="Arial, sans-serif" 
    font-size="13.5" 
    font-weight="600" 
    fill="#7ac6e3" letter-spacing="0.5px">PROFESSOR OF COMPUTATIONAL DESIGN</text>

  <!-- Speaker 2: Session summary (2 lines) -->
  <text 
    x="555" 
    y="421" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">The architecture behind editable latent</text>
  <text 
    x="555" 
    y="439" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">spaces for human-AI co-creation.</text>

  <!-- SPEAKER CARD 3 -->
  <!-- Card container -->
  <rect 
    x="795" 
    y="325" 
    width="340" 
    height="245" 
    rx="18" 
    fill="#0f2542" 
    stroke="#1e4a6e" 
    stroke-width="9" />

  <!-- Avatar 3: abstract circular icon (amber theme) -->
  <circle 
    r="46" 
    cx="857" 
    cy="386" 
    fill="#ffcc4d" />
  <circle 
    r="33" 
    cx="857" 
    cy="386" 
    fill="#0f2542" />
  <!-- Abstract inner design: vector path hint -->
  <path 
    d="M835,375 L865,365 L880,390 Z" 
    fill="none" 
    stroke="#ffcc4d" 
    stroke-width="6.5" />

  <!-- Speaker 3: Name -->
  <text 
    x="925" 
    y="367" 
    font-family="Arial Black, sans-serif" 
    font-size="21" 
    font-weight="700" 
    fill="#e0f6ff">SOPHIA RIVERA</text>
  
  <!-- Speaker 3: Role -->
  <text 
    x="925" 
    y="391" 
    font-family="Arial, sans-serif" 
    font-size="13.5" 
    font-weight="600" 
    fill="#7ac6e3" letter-spacing="0.5px">FOUNDER &amp; CEO, VECTORAI STUDIOS</text>

  <!-- Speaker 3: Session summary (2 lines) -->
  <text 
    x="925" 
    y="421" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">From prompt to production: preserving</text>
  <text 
    x="925" 
    y="439" 
    font-family="Arial, sans-serif" 
    font-size="12.8" 
    font-weight="400" 
    fill="#b8d6eb" width="195">editability across generative pipelines.</text>

  <!-- RIGHT SIDE METRICS PANEL -->
  <!-- Metrics panel container -->
  <rect 
    x="1175" 
    y="255" 
    width="195" 
    height="505" 
    rx="18" 
    fill="#0f2542" 
    stroke="#1e4a6e" 
    stroke-width="10" />

  <!-- Metrics panel header -->
  <text 
    x="1238" 
    y="288" 
    font-family="Arial Black, sans-serif" 
    font-size="21.5" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle" 
    letter-spacing="-0.8px">METRICS</text>
  
  <text 
    x="1238" 
    y="310" 
    font-family="Arial, sans-serif" 
    font-size="11.5" 
    font-weight="500" 
    fill="#6a9bc4" 
    text-anchor="middle">AI DESIGN INTEGRITY</text>

  <!-- Metric 1: Validity -->
  <!-- Progress circle group -->
  <g transform="translate(1238,370)">
    <!-- Background ring -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#1c3559" 
      stroke-width="13" />
    <!-- Progress ring: 92% (circumference ~289, offset = 289*(1-0.92) � 23) -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#00e5c8" 
      stroke-width="13" 
      stroke-dasharray="289 289" 
      stroke-dashoffset="23" 
      stroke-linecap="round" 
      transform="rotate(-90 0 0)" />
    <!-- Center label -->
    <text 
      y="6" 
      font-family="Arial Black, sans-serif" 
      font-size="19" 
      font-weight="700" 
      fill="#e0f6ff" 
      text-anchor="middle">92</text>
    <text 
      y="23" 
      font-family="Arial, sans-serif" 
      font-size="8.5" 
      fill="#7eb6d9" 
      text-anchor="middle">VALIDITY</text>
  </g>

  <!-- Metric 2: Editability -->
  <g transform="translate(1238,490)">
    <!-- Background ring -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#1c3559" 
      stroke-width="13" />
    <!-- Progress ring: 87% (offset = 289*(1-0.87) � 38) -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#00e5c8" 
      stroke-width="13" 
      stroke-dasharray="289 289" 
      stroke-dashoffset="38" 
      stroke-linecap="round" 
      transform="rotate(-90 0 0)" />
    <!-- Center label -->
    <text 
      y="6" 
      font-family="Arial Black, sans-serif" 
      font-size="19" 
      font-weight="700" 
      fill="#e0f6ff" 
      text-anchor="middle">87</text>
    <text 
      y="23" 
      font-family="Arial, sans-serif" 
      font-size="8.5" 
      fill="#7eb6d9" 
      text-anchor="middle">EDITABILITY</text>
  </g>

  <!-- Metric 3: Fidelity -->
  <g transform="translate(1238,610)">
    <!-- Background ring -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#1c3559" 
      stroke-width="13" />
    <!-- Progress ring: 95% (offset = 289*(1-0.95) � 14.5) -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#00e5c8" 
      stroke-width="13" 
      stroke-dasharray="289 289" 
      stroke-dashoffset="14.5" 
      stroke-linecap="round" 
      transform="rotate(-90 0 0)" />
    <!-- Center label -->
    <text 
      y="6" 
      font-family="Arial Black, sans-serif" 
      font-size="19" 
      font-weight="700" 
      fill="#e0f6ff" 
      text-anchor="middle">95</text>
    <text 
      y="23" 
      font-family="Arial, sans-serif" 
      font-size="8.5" 
      fill="#7eb6d9" 
      text-anchor="middle">FIDELITY</text>
  </g>

  <!-- Metric 4: Safety -->
  <g transform="translate(1238,730)">
    <!-- Background ring -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#1c3559" 
      stroke-width="13" />
    <!-- Progress ring: 89% (offset = 289*(1-0.89) � 32) -->
    <circle 
      r="46" 
      fill="transparent" 
      stroke="#00e5c8" 
      stroke-width="13" 
      stroke-dasharray="289 289" 
      stroke-dashoffset="32" 
      stroke-linecap="round" 
      transform="rotate(-90 0 0)" />
    <!-- Center label -->
    <text 
      y="6" 
      font-family="Arial Black, sans-serif" 
      font-size="19" 
      font-weight="700" 
      fill="#e0f6ff" 
      text-anchor="middle">89</text>
    <text 
      y="23" 
      font-family="Arial, sans-serif" 
      font-size="8.5" 
      fill="#7eb6d9" 
      text-anchor="middle">SAFETY</text>
  </g>

  <!-- BOTTOM TIMELINE -->
  <!-- Timeline section header -->
  <text 
    x="68" 
    y="685" 
    font-family="Arial Black, sans-serif" 
    font-size="29" 
    font-weight="700" 
    fill="#00e5c8" 
    letter-spacing="-0.5px">THE PROCESS</text>
  
  <text 
    x="265" 
    y="685" 
    font-family="Arial Black, sans-serif" 
    font-size="29" 
    font-weight="700" 
    fill="#ffffff" 
    letter-spacing="-0.5px">TIMELINE</text>

  <!-- Timeline horizontal track -->
  <rect 
    x="72" 
    y="725" 
    width="1255" 
    height="6" 
    rx="3" 
    fill="#1e3a5f" />

  <!-- Milestone 1: Sketch -->
  <!-- Milestone dot -->
  <circle 
    r="13" 
    cx="165" 
    cy="728" 
    fill="#00e5c8" />
  <circle 
    r="5.5" 
    cx="165" 
    cy="728" 
    fill="#05101f" />
  
  <!-- Milestone label -->
  <text 
    x="165" 
    y="775" 
    font-family="Arial Black, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#b5e0ff" 
    text-anchor="middle">01</text>
  <text 
    x="165" 
    y="795" 
    font-family="Arial, sans-serif" 
    font-size="17" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle">SKETCH</text>

  <!-- Milestone 2: Structure -->
  <!-- Milestone dot -->
  <circle 
    r="13" 
    cx="435" 
    cy="728" 
    fill="#00e5c8" />
  <circle 
    r="5.5" 
    cx="435" 
    cy="728" 
    fill="#05101f" />
  
  <!-- Milestone label -->
  <text 
    x="435" 
    y="775" 
    font-family="Arial Black, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#b5e0ff" 
    text-anchor="middle">02</text>
  <text 
    x="435" 
    y="795" 
    font-family="Arial, sans-serif" 
    font-size="17" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle">STRUCTURE</text>

  <!-- Milestone 3: Style -->
  <!-- Milestone dot -->
  <circle 
    r="13" 
    cx="705" 
    cy="728" 
    fill="#00e5c8" />
  <circle 
    r="5.5" 
    cx="705" 
    cy="728" 
    fill="#05101f" />
  
  <!-- Milestone label -->
  <text 
    x="705" 
    y="775" 
    font-family="Arial Black, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#b5e0ff" 
    text-anchor="middle">03</text>
  <text 
    x="705" 
    y="795" 
    font-family="Arial, sans-serif" 
    font-size="17" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle">STYLE</text>

  <!-- Milestone 4: Validate -->
  <!-- Milestone dot -->
  <circle 
    r="13" 
    cx="975" 
    cy="728" 
    fill="#00e5c8" />
  <circle 
    r="5.5" 
    cx="975" 
    cy="728" 
    fill="#05101f" />
  
  <!-- Milestone label -->
  <text 
    x="975" 
    y="775" 
    font-family="Arial Black, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#b5e0ff" 
    text-anchor="middle">04</text>
  <text 
    x="975" 
    y="795" 
    font-family="Arial, sans-serif" 
    font-size="17" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle">VALIDATE</text>

  <!-- Milestone 5: Publish -->
  <!-- Milestone dot -->
  <circle 
    r="13" 
    cx="1245" 
    cy="728" 
    fill="#00e5c8" />
  <circle 
    r="5.5" 
    cx="1245" 
    cy="728" 
    fill="#05101f" />
  
  <!-- Milestone label -->
  <text 
    x="1245" 
    y="775" 
    font-family="Arial Black, sans-serif" 
    font-size="15.5" 
    font-weight="700" 
    fill="#b5e0ff" 
    text-anchor="middle">05</text>
  <text 
    x="1245" 
    y="795" 
    font-family="Arial, sans-serif" 
    font-size="17" 
    font-weight="700" 
    fill="#00e5c8" 
    text-anchor="middle">PUBLISH</text>

  <!-- Final footer line / credit (adds to total text count) -->
  <text 
    x="700" 
    y="875" 
    font-family="Arial, sans-serif" 
    font-size="11.5" 
    fill="#355d7f" 
    text-anchor="middle" 
    letter-spacing="4px">DESIGN FOR A MORE EDITABLE FUTURE � GROK-POWERED VISUALIZATION</text>

</svg>
Sanitized SVG
<svg width="1400" height="900" viewBox="0 0 1400 900" xmlns="http://www.w3.org/2000/svg" role="img"><title>The Future of Editable AI-Generated Design</title><desc>Conference poster with editorial grid featuring a hero vector-editing illustration, three speaker cards with avatars and session summaries, a bottom timeline with five milestones (Sketch, Structure, Style, Validate, Publish), and a right-side metrics panel with four circular progress indicators (Validity 92%, Editability 87%, Fidelity 95%, Safety 89%). Dark futuristic color scheme with cyan and magenta accents. Includes subtle node-and-curve pattern background.</desc><defs><pattern id="vectorPattern" width="110" height="110" patternUnits="userSpaceOnUse"><path d="M 10,10 L 10,100 M 10,10 L 100,10" fill="transparent" stroke="#132b52" stroke-width="2.5" /><path d="M 35,35 Q 55,15 75,38" fill="transparent" stroke="#1e3a68" stroke-width="1.5" /><circle r="3.5" cx="10" cy="10" fill="#00e5c8" /><circle r="3" cx="65" cy="28" fill="#00e5c8" /><circle r="3" cx="92" cy="77" fill="#00e5c8" /><circle r="2" cx="38" cy="78" fill="#ff4da6" /></pattern><linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#0c2545" /><stop offset="100%" stop-color="#05152b" /></linearGradient></defs><rect width="1400" height="900" fill="#05101f" /><rect width="1400" height="900" fill="url(#vectorPattern)" opacity="0.65" /><rect x="0" y="0" width="1400" height="205" fill="url(#headerGradient)" opacity="0.95" /><rect x="0" y="198" width="1400" height="7" fill="#00e5c8" /><text x="72" y="78" font-family="Arial Black, sans-serif" font-size="31" font-weight="900" fill="#a0f0ff">THE FUTURE OF</text><text x="72" y="133" font-family="Arial Black, sans-serif" font-size="57.5" font-weight="900" fill="#ffffff">EDITABLE AI-</text><text x="72" y="188" font-family="Arial Black, sans-serif" font-size="57.5" font-weight="900" fill="#00e5c8">GENERATED DESIGN</text><text x="75" y="222" font-family="Arial, sans-serif" font-size="17.5" font-weight="500" fill="#7bb4d1">xAI DESIGN SUMMIT � JUNE 20, 2026 � VIRTUAL</text><rect x="865" y="28" width="475" height="235" rx="22" fill="#0b1f3a" stroke="#00e5c8" stroke-width="18" /><rect x="885" y="48" width="435" height="195" rx="8" fill="#132b4f" /><path d="M 945,125        C 945,82 985,53 1072,62        C 1175,74 1238,98 1255,157        C 1268,195 1195,212 1098,205        C 990,195 955,175 945,125 Z" fill="#1c3a62" opacity="0.85" /><path d="M 945,125        C 945,82 985,53 1072,62        C 1175,74 1238,98 1255,157        C 1268,195 1195,212 1098,205        C 990,195 955,175 945,125 Z" fill="transparent" stroke="#00f5d4" stroke-width="11" /><circle r="8.5" cx="945" cy="125" fill="#ff2a7a" /><circle r="3.5" cx="945" cy="125" fill="#ffffff" /><circle r="8.5" cx="1072" cy="62" fill="#ff2a7a" /><circle r="3.5" cx="1072" cy="62" fill="#ffffff" /><circle r="8.5" cx="1255" cy="157" fill="#ff2a7a" /><circle r="3.5" cx="1255" cy="157" fill="#ffffff" /><circle r="8.5" cx="1098" cy="205" fill="#ff2a7a" /><circle r="3.5" cx="1098" cy="205" fill="#ffffff" /><circle r="7.5" cx="985" cy="178" fill="#ff2a7a" /><circle r="3" cx="985" cy="178" fill="#ffffff" /><circle r="7.5" cx="1185" cy="98" fill="#ff2a7a" /><circle r="3" cx="1185" cy="98" fill="#ffffff" /><line x1="1072" y1="62" x2="1115" y2="28" stroke="#7be8ff" stroke-width="2.5" stroke-dasharray="3,3" /><circle r="3" cx="1115" cy="28" fill="#7be8ff" /><line x1="1185" y1="98" x2="1238" y2="55" stroke="#7be8ff" stroke-width="2.5" stroke-dasharray="3,3" /><circle r="3" cx="1238" cy="55" fill="#7be8ff" /><g transform="translate(1195,78) rotate(-38)"><path d="M0,0 L0,38 L9,31 L19,46 L23,41 L12,25 L15,0 Z" fill="#ff2a7a" stroke="#0a1428" stroke-width="3" /><rect x="3" y="3" width="4" height="19" rx="1" fill="#ffe14d" /></g><circle r="15" cx="1072" cy="62" fill="transparent" stroke="#ffe14d" stroke-width="2.5" opacity="0.75" /><text x="68" y="280" font-family="Arial Black, sans-serif" font-size="29" font-weight="700" fill="#00e5c8">FEATURED SPEAKERS</text><line x1="68" y1="292" x2="385" y2="292" stroke="#00e5c8" stroke-width="3.5" /><rect x="55" y="325" width="340" height="245" rx="18" fill="#0f2542" stroke="#1e4a6e" stroke-width="9" /><circle r="46" cx="117" cy="386" fill="#1dd4b5" /><circle r="33" cx="117" cy="386" fill="#0f2542" /><path d="M95,375 Q117,355 140,375" fill="none" stroke="#1dd4b5" stroke-width="7" /><circle r="9" cx="117" cy="386" fill="#0f2542" /><text x="185" y="367" font-family="Arial Black, sans-serif" font-size="21" font-weight="700" fill="#e0f6ff">MAYA CHEN</text><text x="185" y="391" font-family="Arial, sans-serif" font-size="13.5" font-weight="600" fill="#7ac6e3">CREATIVE DIRECTOR, ADOBE</text><text x="185" y="421" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">Bridging human intuition and machine</text><text x="185" y="439" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">precision in real-time generative design.</text><rect x="425" y="325" width="340" height="245" rx="18" fill="#0f2542" stroke="#1e4a6e" stroke-width="9" /><circle r="46" cx="487" cy="386" fill="#ff4a9c" /><circle r="33" cx="487" cy="386" fill="#0f2542" /><circle r="6" cx="475" cy="374" fill="#ff4a9c" /><circle r="6" cx="499" cy="374" fill="#ff4a9c" /><circle r="6" cx="487" cy="398" fill="#ff4a9c" /><text x="555" y="367" font-family="Arial Black, sans-serif" font-size="21" font-weight="700" fill="#e0f6ff">RAJ PATEL, PHD</text><text x="555" y="391" font-family="Arial, sans-serif" font-size="13.5" font-weight="600" fill="#7ac6e3">PROFESSOR OF COMPUTATIONAL DESIGN</text><text x="555" y="421" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">The architecture behind editable latent</text><text x="555" y="439" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">spaces for human-AI co-creation.</text><rect x="795" y="325" width="340" height="245" rx="18" fill="#0f2542" stroke="#1e4a6e" stroke-width="9" /><circle r="46" cx="857" cy="386" fill="#ffcc4d" /><circle r="33" cx="857" cy="386" fill="#0f2542" /><path d="M835,375 L865,365 L880,390 Z" fill="none" stroke="#ffcc4d" stroke-width="6.5" /><text x="925" y="367" font-family="Arial Black, sans-serif" font-size="21" font-weight="700" fill="#e0f6ff">SOPHIA RIVERA</text><text x="925" y="391" font-family="Arial, sans-serif" font-size="13.5" font-weight="600" fill="#7ac6e3">FOUNDER &amp; CEO, VECTORAI STUDIOS</text><text x="925" y="421" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">From prompt to production: preserving</text><text x="925" y="439" font-family="Arial, sans-serif" font-size="12.8" font-weight="400" fill="#b8d6eb" width="195">editability across generative pipelines.</text><rect x="1175" y="255" width="195" height="505" rx="18" fill="#0f2542" stroke="#1e4a6e" stroke-width="10" /><text x="1238" y="288" font-family="Arial Black, sans-serif" font-size="21.5" font-weight="700" fill="#00e5c8" text-anchor="middle">METRICS</text><text x="1238" y="310" font-family="Arial, sans-serif" font-size="11.5" font-weight="500" fill="#6a9bc4" text-anchor="middle">AI DESIGN INTEGRITY</text><g transform="translate(1238,370)"><circle r="46" fill="transparent" stroke="#1c3559" stroke-width="13" /><circle r="46" fill="transparent" stroke="#00e5c8" stroke-width="13" stroke-dasharray="289 289" stroke-dashoffset="23" stroke-linecap="round" transform="rotate(-90 0 0)" /><text y="6" font-family="Arial Black, sans-serif" font-size="19" font-weight="700" fill="#e0f6ff" text-anchor="middle">92</text><text y="23" font-family="Arial, sans-serif" font-size="8.5" fill="#7eb6d9" text-anchor="middle">VALIDITY</text></g><g transform="translate(1238,490)"><circle r="46" fill="transparent" stroke="#1c3559" stroke-width="13" /><circle r="46" fill="transparent" stroke="#00e5c8" stroke-width="13" stroke-dasharray="289 289" stroke-dashoffset="38" stroke-linecap="round" transform="rotate(-90 0 0)" /><text y="6" font-family="Arial Black, sans-serif" font-size="19" font-weight="700" fill="#e0f6ff" text-anchor="middle">87</text><text y="23" font-family="Arial, sans-serif" font-size="8.5" fill="#7eb6d9" text-anchor="middle">EDITABILITY</text></g><g transform="translate(1238,610)"><circle r="46" fill="transparent" stroke="#1c3559" stroke-width="13" /><circle r="46" fill="transparent" stroke="#00e5c8" stroke-width="13" stroke-dasharray="289 289" stroke-dashoffset="14.5" stroke-linecap="round" transform="rotate(-90 0 0)" /><text y="6" font-family="Arial Black, sans-serif" font-size="19" font-weight="700" fill="#e0f6ff" text-anchor="middle">95</text><text y="23" font-family="Arial, sans-serif" font-size="8.5" fill="#7eb6d9" text-anchor="middle">FIDELITY</text></g><g transform="translate(1238,730)"><circle r="46" fill="transparent" stroke="#1c3559" stroke-width="13" /><circle r="46" fill="transparent" stroke="#00e5c8" stroke-width="13" stroke-dasharray="289 289" stroke-dashoffset="32" stroke-linecap="round" transform="rotate(-90 0 0)" /><text y="6" font-family="Arial Black, sans-serif" font-size="19" font-weight="700" fill="#e0f6ff" text-anchor="middle">89</text><text y="23" font-family="Arial, sans-serif" font-size="8.5" fill="#7eb6d9" text-anchor="middle">SAFETY</text></g><text x="68" y="685" font-family="Arial Black, sans-serif" font-size="29" font-weight="700" fill="#00e5c8">THE PROCESS</text><text x="265" y="685" font-family="Arial Black, sans-serif" font-size="29" font-weight="700" fill="#ffffff">TIMELINE</text><rect x="72" y="725" width="1255" height="6" rx="3" fill="#1e3a5f" /><circle r="13" cx="165" cy="728" fill="#00e5c8" /><circle r="5.5" cx="165" cy="728" fill="#05101f" /><text x="165" y="775" font-family="Arial Black, sans-serif" font-size="15.5" font-weight="700" fill="#b5e0ff" text-anchor="middle">01</text><text x="165" y="795" font-family="Arial, sans-serif" font-size="17" font-weight="700" fill="#00e5c8" text-anchor="middle">SKETCH</text><circle r="13" cx="435" cy="728" fill="#00e5c8" /><circle r="5.5" cx="435" cy="728" fill="#05101f" /><text x="435" y="775" font-family="Arial Black, sans-serif" font-size="15.5" font-weight="700" fill="#b5e0ff" text-anchor="middle">02</text><text x="435" y="795" font-family="Arial, sans-serif" font-size="17" font-weight="700" fill="#00e5c8" text-anchor="middle">STRUCTURE</text><circle r="13" cx="705" cy="728" fill="#00e5c8" /><circle r="5.5" cx="705" cy="728" fill="#05101f" /><text x="705" y="775" font-family="Arial Black, sans-serif" font-size="15.5" font-weight="700" fill="#b5e0ff" text-anchor="middle">03</text><text x="705" y="795" font-family="Arial, sans-serif" font-size="17" font-weight="700" fill="#00e5c8" text-anchor="middle">STYLE</text><circle r="13" cx="975" cy="728" fill="#00e5c8" /><circle r="5.5" cx="975" cy="728" fill="#05101f" /><text x="975" y="775" font-family="Arial Black, sans-serif" font-size="15.5" font-weight="700" fill="#b5e0ff" text-anchor="middle">04</text><text x="975" y="795" font-family="Arial, sans-serif" font-size="17" font-weight="700" fill="#00e5c8" text-anchor="middle">VALIDATE</text><circle r="13" cx="1245" cy="728" fill="#00e5c8" /><circle r="5.5" cx="1245" cy="728" fill="#05101f" /><text x="1245" y="775" font-family="Arial Black, sans-serif" font-size="15.5" font-weight="700" fill="#b5e0ff" text-anchor="middle">05</text><text x="1245" y="795" font-family="Arial, sans-serif" font-size="17" font-weight="700" fill="#00e5c8" text-anchor="middle">PUBLISH</text><text x="700" y="875" font-family="Arial, sans-serif" font-size="11.5" fill="#355d7f" text-anchor="middle">DESIGN FOR A MORE EDITABLE FUTURE � GROK-POWERED VISUALIZATION</text></svg>

OpenAI

OpenAI: GPT-5.5

openai/gpt-5.5
65/100

The SVG parsed as XML but failed the product sanitizer. Required label coverage: 13/13.

Status
Rejected by sanitizer: Unsafe SVG content is not allowed.
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. OpenAI GPT Latest chip resolved to GPT-5.5. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
6c3fdb3c778fd7de663c7fff29c575907aa8ebfef787d356b58aa838759de0b2
Raw size
15113 bytes
SVG validity
15
Safety
0
Instruction adherence
25
Visual completeness
0
Text fidelity
10
Editability and code quality
15
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="900" viewBox="0 0 1400 900" role="img" aria-labelledby="posterTitle posterDesc">
  <title id="posterTitle">The Future of Editable AI-Generated Design</title>
  <desc id="posterDesc">A conference poster with an editorial grid, three main columns, exactly three speaker cards, a right-side metrics panel with four circular progress indicators, a five-step bottom timeline, and an abstract hero illustration of a human cursor reshaping vector nodes.</desc>

  <defs>
    <linearGradient id="bgGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#0B1020"/>
      <stop offset="48%" stop-color="#111A33"/>
      <stop offset="100%" stop-color="#08121A"/>
    </linearGradient>

    <linearGradient id="heroGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#6EE7F9"/>
      <stop offset="52%" stop-color="#A78BFA"/>
      <stop offset="100%" stop-color="#F59E0B"/>
    </linearGradient>

    <linearGradient id="accentGradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#67E8F9"/>
      <stop offset="50%" stop-color="#A78BFA"/>
      <stop offset="100%" stop-color="#FDBA74"/>
    </linearGradient>

    <pattern id="vectorNodePattern" width="80" height="80" patternUnits="userSpaceOnUse">
      <path d="M0 40 H80 M40 0 V80" stroke="#FFFFFF" stroke-opacity="0.045" stroke-width="1"/>
      <circle cx="40" cy="40" r="3.5" fill="#67E8F9" fill-opacity="0.14"/>
      <circle cx="80" cy="80" r="2" fill="#A78BFA" fill-opacity="0.12"/>
      <path d="M40 40 C54 24 62 58 80 40" fill="none" stroke="#FFFFFF" stroke-opacity="0.035" stroke-width="1"/>
    </pattern>

    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="18" stdDeviation="18" flood-color="#000000" flood-opacity="0.28"/>
    </filter>

    <style>
      .bg { fill: url(#bgGradient); }
      .panel { fill: rgba(255,255,255,0.075); stroke: rgba(255,255,255,0.18); stroke-width: 1.2; }
      .panel-strong { fill: rgba(255,255,255,0.105); stroke: rgba(255,255,255,0.22); stroke-width: 1.4; }
      .divider { stroke: rgba(255,255,255,0.13); stroke-width: 1; }
      .gridline { stroke: rgba(103,232,249,0.16); stroke-width: 1; stroke-dasharray: 4 10; }
      .title { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 52px; font-weight: 800; letter-spacing: -1.8px; fill: #F8FAFC; }
      .subtitle { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 21px; font-weight: 500; fill: #B9C6D8; }
      .eyebrow { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; fill: #67E8F9; }
      .section { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 22px; font-weight: 800; fill: #F8FAFC; letter-spacing: -0.3px; }
      .body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 17px; font-weight: 500; fill: #C9D4E5; }
      .small { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; fill: #91A4BC; letter-spacing: 0.2px; }
      .name { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 22px; font-weight: 800; fill: #FFFFFF; letter-spacing: -0.35px; }
      .role { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 800; fill: #67E8F9; }
      .metric-label { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; font-weight: 800; fill: #F8FAFC; }
      .metric-value { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 21px; font-weight: 900; fill: #FFFFFF; }
      .timeline-label { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 20px; font-weight: 850; fill: #F8FAFC; }
      .timeline-num { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-weight: 900; fill: #08121A; }
      .chip { fill: rgba(103,232,249,0.12); stroke: rgba(103,232,249,0.35); stroke-width: 1; }
      .orange-chip { fill: rgba(245,158,11,0.13); stroke: rgba(245,158,11,0.35); stroke-width: 1; }
      .node { fill: #0B1020; stroke: #67E8F9; stroke-width: 4; }
      .node-hot { fill: #FDBA74; stroke: #FFFFFF; stroke-width: 4; }
      .handle { stroke: #A78BFA; stroke-width: 2; stroke-dasharray: 6 6; }
      .progress-bg { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 10; }
      .progress { fill: none; stroke: url(#accentGradient); stroke-width: 10; stroke-linecap: round; }
    </style>
  </defs>

  <rect class="bg" x="0" y="0" width="1400" height="900"/>
  <rect x="0" y="0" width="1400" height="900" fill="url(#vectorNodePattern)"/>

  <path d="M60 174 H1340" class="divider"/>
  <path d="M60 704 H1340" class="divider"/>
  <path d="M360 196 V680" class="gridline"/>
  <path d="M690 196 V680" class="gridline"/>
  <path d="M1020 196 V680" class="gridline"/>
  <path d="M1050 196 V680" class="divider"/>

  <g id="header">
    <text x="60" y="70" class="eyebrow">Editable Generative Interfaces Summit</text>
    <text x="60" y="125" class="title">The Future of Editable AI-Generated Design</text>
    <text x="62" y="158" class="subtitle">Conference poster for designers, engineers, researchers, and creative systems teams</text>

    <g transform="translate(1110 48)">
      <rect class="chip" x="0" y="0" width="230" height="42" rx="21"/>
      <text x="115" y="27" text-anchor="middle" class="small" fill="#DFFBFF">Oct 18 � Civic Design Hall</text>
    </g>
    <g transform="translate(1110 104)">
      <rect class="orange-chip" x="0" y="0" width="230" height="42" rx="21"/>
      <text x="115" y="27" text-anchor="middle" class="small" fill="#FFEAD0">Live demos � Open critique</text>
    </g>
  </g>

  <g id="main-columns">
    <g id="column-one" filter="url(#softShadow)">
      <rect class="panel-strong" x="60" y="200" width="300" height="480" rx="28"/>
      <text x="92" y="244" class="eyebrow">01 Prototype</text>
      <text x="92" y="282" class="section">Human Cursor</text>
      <text x="92" y="310" class="body">Reshaping vector nodes</text>

      <g id="hero-illustration" transform="translate(74 328)">
        <rect x="0" y="0" width="272" height="250" rx="24" fill="#07111F" stroke="rgba(255,255,255,0.16)"/>
        <path d="M36 148 C78 42 144 218 224 82" fill="none" stroke="url(#heroGradient)" stroke-width="7" stroke-linecap="round"/>
        <line x1="36" y1="148" x2="88" y2="70" class="handle"/>
        <line x1="144" y1="190" x2="224" y2="82" class="handle"/>
        <circle cx="36" cy="148" r="10" class="node"/>
        <circle cx="88" cy="70" r="7" fill="#A78BFA"/>
        <circle cx="144" cy="190" r="7" fill="#A78BFA"/>
        <circle cx="224" cy="82" r="12" class="node-hot"/>
        <path d="M188 40 L188 154 L215 129 L232 186 L258 177 L239 121 L274 121 Z" fill="#F8FAFC" stroke="#0B1020" stroke-width="4" stroke-linejoin="round"/>
        <path d="M210 94 C218 84 232 78 244 84" fill="none" stroke="#FDBA74" stroke-width="8" stroke-linecap="round"/>
        <path d="M180 90 C198 80 207 76 224 82" fill="none" stroke="#FDBA74" stroke-width="3" stroke-linecap="round" stroke-dasharray="5 7"/>
        <circle cx="224" cy="82" r="23" fill="none" stroke="#FDBA74" stroke-width="2.5" stroke-dasharray="4 7"/>
        <text x="30" y="224" class="small">Direct manipulation � editable paths</text>
      </g>
    </g>

    <g id="column-two">
      <text x="390" y="188" class="small">Column 02 � sessions</text>

      <g id="speaker-card-1" filter="url(#softShadow)">
        <rect class="panel" x="390" y="200" width="300" height="225" rx="28"/>
        <g transform="translate(416 228)">
          <circle cx="35" cy="35" r="34" fill="#13233E" stroke="#67E8F9" stroke-width="2"/>
          <path d="M19 43 C28 18 48 18 57 43" fill="none" stroke="#67E8F9" stroke-width="5" stroke-linecap="round"/>
          <circle cx="35" cy="34" r="10" fill="#A78BFA"/>
        </g>
        <text x="498" y="246" class="name">Mira Chen</text>
        <text x="498" y="272" class="role">Product Design Lead</text>
        <text x="416" y="333" class="body">
          <tspan x="416" dy="0">From prompt to layered systems</tspan>
          <tspan x="416" dy="27">that teams can safely revise.</tspan>
        </text>
        <rect class="chip" x="416" y="382" width="126" height="26" rx="13"/>
        <text x="479" y="400" text-anchor="middle" class="small">Keynote</text>
      </g>

      <g id="speaker-card-2" filter="url(#softShadow)">
        <rect class="panel" x="390" y="455" width="300" height="225" rx="28"/>
        <g transform="translate(416 483)">
          <circle cx="35" cy="35" r="34" fill="#1B1835" stroke="#A78BFA" stroke-width="2"/>
          <rect x="18" y="20" width="34" height="34" rx="10" fill="#A78BFA" opacity="0.85"/>
          <path d="M18 52 L53 20" stroke="#F8FAFC" stroke-width="4" stroke-linecap="round"/>
        </g>
        <text x="498" y="501" class="name">Jonas Patel</text>
        <text x="498" y="527" class="role">AI Tooling Researcher</text>
        <text x="416" y="588" class="body">
          <tspan x="416" dy="0">Schema-first outputs for</tspan>
          <tspan x="416" dy="27">clean constraints and reuse.</tspan>
        </text>
        <rect class="chip" x="416" y="637" width="126" height="26" rx="13"/>
        <text x="479" y="655" text-anchor="middle" class="small">Research</text>
      </g>
    </g>

    <g id="column-three">
      <text x="720" y="188" class="small">Column 03 � workflow</text>

      <g id="speaker-card-3" filter="url(#softShadow)">
        <rect class="panel" x="720" y="200" width="300" height="225" rx="28"/>
        <g transform="translate(746 228)">
          <circle cx="35" cy="35" r="34" fill="#2A1F12" stroke="#FDBA74" stroke-width="2"/>
          <path d="M16 38 C30 16 47 62 62 30" fill="none" stroke="#FDBA74" stroke-width="6" stroke-linecap="round"/>
          <circle cx="47" cy="40" r="9" fill="#67E8F9"/>
        </g>
        <text x="828" y="246" class="name">Amina Rossi</text>
        <text x="828" y="272" class="role">Creative Systems Director</text>
        <text x="746" y="333" class="body">
          <tspan x="746" dy="0">Brand fidelity when models</tspan>
          <tspan x="746" dy="27">meet human art direction.</tspan>
        </text>
        <rect class="orange-chip" x="746" y="382" width="126" height="26" rx="13"/>
        <text x="809" y="400" text-anchor="middle" class="small">Case Study</text>
      </g>

      <g id="workflow-panel" filter="url(#softShadow)">
        <rect class="panel-strong" x="720" y="455" width="300" height="225" rx="28"/>
        <text x="746" y="498" class="eyebrow">Design Rulebook</text>
        <text x="746" y="536" class="section">Editable by Design</text>
        <g transform="translate(746 570)">
          <circle cx="10" cy="9" r="5" fill="#67E8F9"/>
          <text x="28" y="15" class="body">Layer names</text>
          <circle cx="10" cy="51" r="5" fill="#A78BFA"/>
          <text x="28" y="57" class="body">Constraint tokens</text>
          <circle cx="10" cy="93" r="5" fill="#FDBA74"/>
          <text x="28" y="99" class="body">Diff-ready SVG</text>
        </g>
      </g>
    </g>
  </g>

  <g id="metrics-panel" filter="url(#softShadow)">
    <rect class="panel-strong" x="1060" y="200" width="280" height="480" rx="30"/>
    <text x="1090" y="244" class="eyebrow">Right Metrics</text>
    <text x="1090" y="282" class="section">Quality Signals</text>

    <g id="metric-validity">
      <circle class="progress-bg" cx="1140" cy="348" r="36"/>
      <circle class="progress" cx="1140" cy="348" r="36" stroke-dasharray="194 226" transform="rotate(-90 1140 348)"/>
      <text x="1140" y="355" text-anchor="middle" class="metric-value">86%</text>
      <text x="1140" y="406" text-anchor="middle" class="metric-label">Validity</text>
    </g>

    <g id="metric-editability">
      <circle class="progress-bg" cx="1260" cy="348" r="36"/>
      <circle class="progress" cx="1260" cy="348" r="36" stroke-dasharray="208 226" transform="rotate(-90 1260 348)"/>
      <text x="1260" y="355" text-anchor="middle" class="metric-value">92%</text>
      <text x="1260" y="406" text-anchor="middle" class="metric-label">Editability</text>
    </g>

    <g id="metric-fidelity">
      <circle class="progress-bg" cx="1140" cy="498" r="36"/>
      <circle class="progress" cx="1140" cy="498" r="36" stroke-dasharray="199 226" transform="rotate(-90 1140 498)"/>
      <text x="1140" y="505" text-anchor="middle" class="metric-value">88%</text>
      <text x="1140" y="556" text-anchor="middle" class="metric-label">Fidelity</text>
    </g>

    <g id="metric-safety">
      <circle class="progress-bg" cx="1260" cy="498" r="36"/>
      <circle class="progress" cx="1260" cy="498" r="36" stroke-dasharray="213 226" transform="rotate(-90 1260 498)"/>
      <text x="1260" y="505" text-anchor="middle" class="metric-value">94%</text>
      <text x="1260" y="556" text-anchor="middle" class="metric-label">Safety</text>
    </g>

    <path d="M1090 604 H1310" class="divider"/>
    <text x="1090" y="636" class="body">Policy-aware design loop</text>
    <text x="1090" y="660" class="small">Measured before assets ship</text>
  </g>

  <g id="bottom-timeline" filter="url(#softShadow)">
    <rect class="panel-strong" x="60" y="730" width="1280" height="120" rx="30"/>
    <text x="92" y="772" class="eyebrow">Bottom Timeline</text>
    <line x1="170" y1="810" x2="1230" y2="810" stroke="rgba(255,255,255,0.22)" stroke-width="5" stroke-linecap="round"/>

    <g transform="translate(170 810)">
      <circle r="24" fill="#67E8F9"/>
      <text y="5" text-anchor="middle" class="timeline-num">01</text>
      <text y="58" text-anchor="middle" class="timeline-label">Sketch</text>
    </g>

    <g transform="translate(435 810)">
      <circle r="24" fill="#8DDCF6"/>
      <text y="5" text-anchor="middle" class="timeline-num">02</text>
      <text y="58" text-anchor="middle" class="timeline-label">Structure</text>
    </g>

    <g transform="translate(700 810)">
      <circle r="24" fill="#A78BFA"/>
      <text y="5" text-anchor="middle" class="timeline-num">03</text>
      <text y="58" text-anchor="middle" class="timeline-label">Style</text>
    </g>

    <g transform="translate(965 810)">
      <circle r="24" fill="#D09AF0"/>
      <text y="5" text-anchor="middle" class="timeline-num">04</text>
      <text y="58" text-anchor="middle" class="timeline-label">Validate</text>
    </g>

    <g transform="translate(1230 810)">
      <circle r="24" fill="#FDBA74"/>
      <text y="5" text-anchor="middle" class="timeline-num">05</text>
      <text y="58" text-anchor="middle" class="timeline-label">Publish</text>
    </g>
  </g>
</svg>

DeepSeek

DeepSeek: DeepSeek V4 Pro

deepseek/deepseek-v4-pro
6/100

The copied response starts with an SVG root but ends mid-attribute after the bounded stop.

Status
Truncated or invalid SVG
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. DeepSeek V4 Pro selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
8e0b59a0a55cb89ae166816abb341b488dccab5a0f4a2fe7d20e8d3e88c46e3c
Raw size
12848 bytes
SVG validity
6
Safety
0
Instruction adherence
0
Visual completeness
0
Text fidelity
0
Editability and code quality
0
Preview skipped. This run did not produce a validated SVG; raw evidence is shown below when available.
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900" width="100%" height="100%">
  <title>The Future of Editable AI-Generated Design - Conference Poster</title>
  <desc>An informational poster for AIDesignConf '26 exploring human-centered AI workflows. Featuring speaker sessions, design metrics, a visual timeline, and an abstract hero illustration of a human cursor reshaping vector nodes.</desc>

  <defs>
    <!-- Glow Filter -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <filter id="soft-glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>

    <!-- Gradients -->
    <linearGradient id="textGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#E6ECFA" />
      <stop offset="100%" stop-color="#B4C0D6" />
    </linearGradient>

    <linearGradient id="cyanViolet" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00F0FF" />
      <stop offset="100%" stop-color="#A855FF" />
    </linearGradient>

    <linearGradient id="coralRed" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FF3B6E" />
      <stop offset="100%" stop-color="#FF8C42" />
    </linearGradient>

    <linearGradient id="emeraldCyan" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00D68F" />
      <stop offset="100%" stop-color="#00F0FF" />
    </linearGradient>

    <linearGradient id="violetBlue" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#A855FF" />
      <stop offset="100%" stop-color="#00F0FF" />
    </linearGradient>

    <!-- Patterns -->
    <pattern id="gridPattern" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="1.5" fill="#1B2338" />
      <path d="M 20 0 L 20 40 M 0 20 L 40 20" stroke="#0F1522" stroke-width="0.5" fill="none" />
    </pattern>

    <pattern id="nodePattern" width="120" height="120" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="4" fill="#A855FF" fill-opacity="0.15" />
      <circle cx="110" cy="110" r="3" fill="#00F0FF" fill-opacity="0.15" />
      <path d="M 10 10 Q 60 30 80 80 T 110 110" stroke="#00F0FF" stroke-opacity="0.08" stroke-width="2" fill="none" />
      <circle cx="80" cy="80" r="2" fill="#FF3B6E" fill-opacity="0.2" />
    </pattern>

    <!-- Timeline Marker -->
    <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#00F0FF" />
    </marker>
  </defs>

  <!-- BACKGROUND LAYERS -->
  <g id="background">
    <rect width="1400" height="900" fill="#070B14" />
    <rect width="1400" height="900" fill="url(#gridPattern)" />
    <rect width="1400" height="900" fill="url(#nodePattern)" />
    <!-- Subtle radial glow -->
    <circle cx="700" cy="450" r="500" fill="url(#cyanViolet)" fill-opacity="0.03" filter="url(#glow)" />
    <circle cx="700" cy="300" r="300" fill="#00F0FF" fill-opacity="0.02" filter="url(#glow)" />
  </g>

  <!-- HEADER SECTION -->
  <g id="header" transform="translate(50, 40)">
    <rect width="1300" height="2" y="85" fill="url(#cyanViolet)" fill-opacity="0.4" />
    <text x="0" y="45" font-family="system-ui, -apple-system, sans-serif" font-size="38" font-weight="800" fill="url(#textGrad)" letter-spacing="1">The Future of Editable AI-Generated Design</text>
    <text x="0" y="75" font-family="system-ui, -apple-system, sans-serif" font-size="18" fill="#6B7A93" letter-spacing="2">Exploring Human-Centered Creative Workflows in the Age of Generative Models</text>
    
    <!-- Event Tag -->
    <g transform="translate(1100, 0)">
      <rect x="0" y="10" width="200" height="40" rx="6" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
      <text x="100" y="35" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#00F0FF" text-anchor="middle" letter-spacing="1">AIDesignConf '26</text>
    </g>
  </g>

  <!-- COLUMN 1: SPEAKER CARDS -->
  <g id="col-speakers" transform="translate(50, 160)">
    <text x="0" y="20" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700" fill="#00F0FF" letter-spacing="3">FEATURED SPEAKERS</text>
    
    <!-- Card 1 -->
    <g transform="translate(0, 50)">
      <rect width="380" height="130" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
      <!-- Abstract Avatar 1 -->
      <circle cx="65" cy="65" r="28" fill="#1B2338" />
      <circle cx="65" cy="65" r="18" fill="none" stroke="#00F0FF" stroke-width="2" stroke-dasharray="10 5" />
      <circle cx="65" cy="65" r="6" fill="#00F0FF" />
      
      <text x="110" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="700" fill="#E6ECFA">Dr. Ana Stocia</text>
      <text x="110" y="62" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7A93">Lead AI Designer, Anthropic</text>
      <text x="110" y="90" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="url(#cyanViolet)">Beyond Text-to-Image</text>
      <text x="110" y="110" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">Real-time manipulation of vector outputs</text>
      <text x="110" y="126" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">bridging prompts and pen tools.</text>
    </g>

    <!-- Card 2 -->
    <g transform="translate(0, 210)">
      <rect width="380" height="130" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
      <!-- Abstract Avatar 2 -->
      <circle cx="65" cy="65" r="28" fill="#1B2338" />
      <path d="M 45 75 L 65 45 L 85 75 L 65 85 Z" fill="none" stroke="#A855FF" stroke-width="2" />
      <circle cx="65" cy="65" r="6" fill="#A855FF" />
      
      <text x="110" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="700" fill="#E6ECFA">Marcus Chen</text>
      <text x="110" y="62" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7A93">Creative Director, Adobe</text>
      <text x="110" y="90" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="url(#cyanViolet)">Generative Workflows</text>
      <text x="110" y="110" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">Agents that learn design patterns</text>
      <text x="110" y="126" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">to accelerate repetitive workflows.</text>
    </g>

    <!-- Card 3 -->
    <g transform="translate(0, 370)">
      <rect width="380" height="130" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
      <!-- Abstract Avatar 3 -->
      <circle cx="65" cy="65" r="28" fill="#1B2338" />
      <path d="M 45 55 L 65 45 L 85 55 L 85 80 L 65 85 L 45 80 Z" fill="none" stroke="#00D68F" stroke-width="2" />
      <path d="M 55 65 L 75 65 M 65 55 L 65 75" stroke="#00D68F" stroke-width="2" />
      
      <text x="110" y="40" font-family="system-ui, -apple-system, sans-serif" font-size="20" font-weight="700" fill="#E6ECFA">Prof. Elena Voss</text>
      <text x="110" y="62" font-family="system-ui, -apple-system, sans-serif" font-size="14" fill="#6B7A93">Research Scientist, MIT Media Lab</text>
      <text x="110" y="90" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="url(#cyanViolet)">Ethical Constraints</text>
      <text x="110" y="110" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">Embedding ethical safeguards into</text>
      <text x="110" y="126" font-family="system-ui, -apple-system, sans-serif" font-size="13" fill="#6B7A93">the generative adversarial network.</text>
    </g>
  </g>

  <!-- COLUMN 2: HERO ILLUSTRATION & DETAILS -->
  <g id="col-hero" transform="translate(470, 160)">
    <!-- Hero Background -->
    <rect width="460" height="340" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
    
    <!-- Grid overlay for illustration -->
    <g opacity="0.05">
      <pattern id="heroGrid" width="30" height="30" patternUnits="userSpaceOnUse">
        <path d="M 30 0 L 0 0 0 30" fill="none" stroke="#00F0FF" stroke-width="1" />
      </pattern>
      <rect width="460" height="340" fill="url(#heroGrid)" />
    </g>

    <!-- Abstract Human Profile (Background) -->
    <path d="M 230 320 Q 180 280 170 220 Q 160 160 200 140 Q 230 120 260 150 Q 280 170 270 200 L 270 280 L 230 320 Z" fill="#1B2338" opacity="0.6" />
    <circle cx="225" cy="190" r="15" fill="#0C111F" stroke="#00D68F" stroke-width="2" />

    <!-- Hero Section Title -->
    <text x="25" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700" fill="#00F0FF" letter-spacing="3">INTERACTIVE VECTOR MESH</text>

    <!-- Vector Node System -->
    <!-- Back paths -->
    <path d="M 100 200 C 180 140, 220 180, 300 160" stroke="#A855FF" stroke-width="2" fill="none" opacity="0.4" stroke-dasharray="5 5" />
    <path d="M 100 200 C 180 260, 220 220, 300 240" stroke="#00D68F" stroke-width="2" fill="none" opacity="0.4" stroke-dasharray="5 5" />
    
    <!-- Main Bezier Path -->
    <path d="M 100 200 C 160 140, 250 100, 300 160 C 350 220, 320 300, 400 260" stroke="url(#cyanViolet)" stroke-width="3" fill="none" />
    
    <!-- Bezier Handles -->
    <line x1="300" y1="160" x2="250" y2="100" stroke="#FF3B6E" stroke-width="1.5" stroke-dasharray="4 2" opacity="0.7" />
    <circle cx="250" cy="100" r="4" fill="#FF3B6E" />
    
    <!-- Nodes -->
    <circle cx="100" cy="200" r="6" fill="#00F0FF" filter="url(#soft-glow)" />
    <circle cx="400" cy="260" r="6" fill="#A855FF" filter="url(#soft-glow)" />
    
    <!-- Target Node (Being reshaped) -->
    <circle cx="300" cy="160" r="12" fill="#0C111F" stroke="#FF3B6E" stroke-width="3" filter="url(#glow)" />
    <circle cx="300" cy="160" r="6" fill="#FF3B6E" />
    
    <!-- Transformation indicators -->
    <text x="300" y="135" font-family="system-ui, -apple-system, sans-serif" font-size="12" fill="#FF3B6E" text-anchor="middle" font-weight="bold">EDIT</text>
    <line x1="285" y1="145" x2="275" y2="155" stroke="#FF3B6E" stroke-width="1.5" />
    <line x1="315" y1="145" x2="325" y2="155" stroke="#FF3B6E" stroke-width="1.5" />

    <!-- Human Cursor Element -->
    <!-- Cursor body -->
    <polygon points="280,130 290,145 285,150 295,160 300,155 290,145 295,140" fill="#FFFFFF" filter="url(#soft-glow)" />
    <!-- Fingerprint (Human element) -->
    <g stroke="#FF3B6E" stroke-width="1.5" fill="none" opacity="0.9">
      <path d="M 285 138 A 4 4 0 0 1 292 138" />
      <path d="M 284 141 A 7 7 0 0 1 293 141" />
      <path d="M 283 144 A 10 10 0 0 1 294 144" />
    </g>

    <!-- Details Section -->
    <g transform="translate(0, 370)">
      <rect width="460" height="210" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
      <text x="25" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700" fill="#00F0FF" letter-spacing="3">SYMPOSIUM OBJECTIVE</text>
      
      <text x="25" y="65" font-family="system-ui, -apple-system, sans-serif" font-size="15" fill="#8B95A8" line-height="1.6">
        <tspan x="25" dy="0">We are moving beyond monolithic "Generate"</tspan>
        <tspan x="25" dy="24">buttons. The future of design lies in</tspan>
        <tspan x="25" dy="24">collaborative, iterative, and transparent AI.</tspan>
        <tspan x="25" dy="24">This symposium explores how we build tools</tspan>
        <tspan x="25" dy="24">that understand structure, respect</tspan>
        <tspan x="25" dy="24">constraints, and empower the creator.</tspan>
      </text>
      
      <!-- Decorative line -->
      <rect x="25" y="180" width="40" height="3" fill="url(#cyanViolet)" rx="1.5" />
    </g>
  </g>

  <!-- COLUMN 3: METRICS PANEL -->
  <g id="col-metrics" transform="translate(970, 160)">
    <rect width="380" height="580" rx="10" fill="#0C111F" stroke="#1B2338" stroke-width="1" />
    <text x="25" y="30" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="700" fill="#00F0FF" letter-spacing="3">CORE METRICS</text>

    <!-- Metric 1: Validity (85%) -->
    <g transform="translate(60, 70)">
      <circle cx="75" cy="75" r="48" stroke="#1B2338" stroke-width="8" fill="none" />
      <circle cx="75" cy="75" r="48" stroke="url(#cyanViolet)" stroke-width="8" fill="none

Qwen

Qwen: Qwen3.7 Max

qwen/qwen3.7-max
91/100

Sanitizer accepted the SVG after removing 17 unsupported safe attribute(s) or element(s). Required label coverage: 13/13. Score includes a 9-point quality penalty for sanitizer removals and/or decoded replacement characters.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1781994005-uhaEAHLeCSHZ1tjJiJPC, six models side-by-side, tools 0 active, captured 2026-06-20. Qwen3.7 Max selected directly. Run was stopped after a bounded wait once available outputs had stabilized.
Raw SHA-256
03fd884394368114d0c7466106098e3e4eac82cdac86db117f72f60facb21cba
Raw size
18476 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 900" role="img" aria-labelledby="posterTitle posterDesc">
  <title id="posterTitle">The Future of Editable AI-Generated Design � Conference Poster</title>
  <desc id="posterDesc">An editorial-style conference poster featuring three speakers, a five-stage design pipeline timeline (Sketch, Structure, Style, Validate, Publish), a hero illustration of a human cursor reshaping vector nodes, and a metrics panel tracking Validity, Editability, Fidelity, and Safety.</desc>

  <defs>
    <!-- Decorative diagonal-line background pattern -->
    <pattern id="diag" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(35)">
      <rect width="24" height="24" fill="#F6F1E7"/>
      <line x1="0" y1="0" x2="0" y2="24" stroke="#E8DFCD" stroke-width="1"/>
    </pattern>
    <pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="1.1" fill="#1F2A44" opacity="0.12"/>
    </pattern>

    <linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#FFD28A"/>
      <stop offset="1" stop-color="#F26A4D"/>
    </linearGradient>

    <!-- Reusable abstract avatar -->
    <symbol id="avatar" viewBox="0 0 64 64">
      <circle cx="32" cy="32" r="30" fill="#1F2A44"/>
      <circle cx="32" cy="24" r="10" fill="#F6F1E7"/>
      <path d="M12 58 C14 42 50 42 52 58 Z" fill="#F6F1E7"/>
    </symbol>

    <!-- Cursor symbol -->
    <symbol id="cursor" viewBox="0 0 24 24">
      <path d="M3 2 L3 20 L8 15 L12 22 L15 21 L11 14 L18 14 Z" fill="#1F2A44" stroke="#F6F1E7" stroke-width="1.2" stroke-linejoin="round"/>
    </symbol>
  </defs>

  <!-- Background -->
  <rect width="1400" height="900" fill="url(#diag)"/>
  <rect width="1400" height="900" fill="url(#dots)" opacity="0.4"/>

  <!-- ============ HEADER ============ -->
  <g transform="translate(40,40)">
    <rect x="0" y="0" width="980" height="96" fill="#1F2A44"/>
    <rect x="0" y="0" width="8" height="96" fill="#F26A4D"/>
    <text x="28" y="40" font-family="Georgia, 'Times New Roman', serif" font-size="13" fill="#FFD28A" letter-spacing="4">HCI ? DESIGN ? AI  �  CONFERENCE 2026</text>
    <text x="28" y="78" font-family="Georgia, 'Times New Roman', serif" font-size="32" font-weight="700" fill="#F6F1E7">The Future of Editable AI-Generated Design</text>
    <text x="28" y="128" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#5B5A52">
      <tspan x="28" dy="10">Panel Discussion</tspan>
      <tspan dx="16">�</tspan>
      <tspan dx="16">June 20, 2026</tspan>
      <tspan dx="16">�</tspan>
      <tspan dx="16">Hall B  �  14:00</tspan>
    </text>
  </g>

  <!-- ============ HERO ILLUSTRATION (top right of content) ============ -->
  <g transform="translate(1040,40)">
    <rect x="0" y="0" width="340" height="140" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.5"/>
    <rect x="0" y="0" width="340" height="6" fill="#F26A4D"/>
    <text x="16" y="28" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44" letter-spacing="2">KEY VISUAL � VECTOR EDITING</text>

    <!-- Abstract illustration: vector nodes being reshaped by cursor -->
    <g transform="translate(20,42)">
      <!-- Baseline path -->
      <path d="M10 70 C 60 70, 90 20, 150 30 S 240 80, 290 60" fill="none" stroke="#1F2A44" stroke-width="2" stroke-dasharray="4 4"/>
      <!-- Edited path -->
      <path d="M10 70 C 60 70, 90 20, 150 30 S 230 40, 295 20" fill="none" stroke="#F26A4D" stroke-width="2.4"/>
      <!-- Handles -->
      <line x1="150" y1="30" x2="180" y2="10" stroke="#1F2A44" stroke-width="1.2"/>
      <line x1="150" y1="30" x2="120" y2="48" stroke="#1F2A44" stroke-width="1.2"/>
      <!-- Nodes -->
      <circle cx="10" cy="70" r="4" fill="#1F2A44"/>
      <circle cx="150" cy="30" r="5" fill="url(#heroGrad)" stroke="#1F2A44" stroke-width="1.4"/>
      <circle cx="180" cy="10" r="3" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.2"/>
      <circle cx="295" cy="20" r="4" fill="#1F2A44"/>
      <!-- Cursor -->
      <use href="#cursor" x="172" y="0" width="22" height="22"/>
      <!-- Label -->
      <text x="0" y="94" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#5B5A52">drag � constrain � re-parameterize</text>
    </g>
  </g>

  <!-- ============ THREE SPEAKER COLUMNS ============ -->
  <g transform="translate(40,180)">
    <!-- Column 1 -->
    <g transform="translate(0,0)">
      <rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4"/>
      <rect width="310" height="28" fill="#1F2A44"/>
      <text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A" letter-spacing="2">SPEAKER 01 � KEYNOTE</text>

      <g transform="translate(24,56)">
        <use href="#avatar" x="0" y="0" width="72" height="72"/>
        <text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Dr. Maya Chen</text>
        <text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">Principal Researcher</text>
        <text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Atlas AI Lab � Z�rich</text>
      </g>

      <line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1"/>
      <text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44" letter-spacing="2">SESSION ABSTRACT</text>

      <text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44" font-style="italic">
        <tspan x="24" dy="0">Editable Latent Spaces: bridging</tspan>
        <tspan x="24" dy="20">generative outputs with parametric</tspan>
        <tspan x="24" dy="20">control for real-time designer</tspan>
        <tspan x="24" dy="20">intervention and iterative critique.</tspan>
      </text>

      <g transform="translate(24,300)">
        <rect width="86" height="24" fill="#1F2A44"/>
        <text x="43" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">DIFFUSION</text>
        <rect x="94" width="70" height="24" fill="#F26A4D"/>
        <text x="129" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">LATENT</text>
      </g>
      <text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">45 min � followed by live demo</text>
    </g>

    <!-- Column 2 -->
    <g transform="translate(335,0)">
      <rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4"/>
      <rect width="310" height="28" fill="#1F2A44"/>
      <text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A" letter-spacing="2">SPEAKER 02 � TALK</text>

      <g transform="translate(24,56)">
        <use href="#avatar" x="0" y="0" width="72" height="72"/>
        <text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Prof. Luca Moretti</text>
        <text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">Design Systems Lead</text>
        <text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Politecnico di Milano</text>
      </g>

      <line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1"/>
      <text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44" letter-spacing="2">SESSION ABSTRACT</text>

      <text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44" font-style="italic">
        <tspan x="24" dy="0">Vector-grounded diffusion models</tspan>
        <tspan x="24" dy="20">that preserve semantic structure,</tspan>
        <tspan x="24" dy="20">enabling post-generation refinement</tspan>
        <tspan x="24" dy="20">and brand-consistent workflows.</tspan>
      </text>

      <g transform="translate(24,300)">
        <rect width="74" height="24" fill="#1F2A44"/>
        <text x="37" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">VECTOR</text>
        <rect x="82" width="86" height="24" fill="#F26A4D"/>
        <text x="125" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">STRUCTURE</text>
      </g>
      <text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">30 min � case studies from industry</text>
    </g>

    <!-- Column 3 -->
    <g transform="translate(670,0)">
      <rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4"/>
      <rect width="310" height="28" fill="#1F2A44"/>
      <text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A" letter-spacing="2">SPEAKER 03 � PANEL</text>

      <g transform="translate(24,56)">
        <use href="#avatar" x="0" y="0" width="72" height="72"/>
        <text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Dr. Aisha Patel</text>
        <text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">AI Ethics Researcher</text>
        <text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Oxford Institute for AI</text>
      </g>

      <line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1"/>
      <text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44" letter-spacing="2">SESSION ABSTRACT</text>

      <text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44" font-style="italic">
        <tspan x="24" dy="0">Audit trails and constraint</tspan>
        <tspan x="24" dy="20">validation that ensure AI-generated</tspan>
        <tspan x="24" dy="20">artifacts remain safe, accountable,</tspan>
        <tspan x="24" dy="20">and aligned with human intent.</tspan>
      </text>

      <g transform="translate(24,300)">
        <rect width="64" height="24" fill="#1F2A44"/>
        <text x="32" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">ETHICS</text>
        <rect x="72" width="72" height="24" fill="#F26A4D"/>
        <text x="108" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">SAFETY</text>
      </g>
      <text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">30 min � open audience Q&amp;A</text>
    </g>
  </g>

  <!-- ============ RIGHT METRICS PANEL ============ -->
  <g transform="translate(1040,200)">
    <rect width="340" height="380" fill="#1F2A44"/>
    <rect x="0" y="0" width="340" height="6" fill="#FFD28A"/>
    <text x="24" y="34" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A" letter-spacing="3">MODEL HEALTH METRICS</text>
    <text x="24" y="54" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#9AA3B8">Evaluated across 4,812 design tasks</text>

    <!-- Circular progress: Validity 92% -->
    <g transform="translate(90,120)">
      <circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9"/>
      <circle r="46" fill="none" stroke="#FFD28A" stroke-width="9" stroke-linecap="round"
              stroke-dasharray="289" stroke-dashoffset="23" transform="rotate(-90)"/>
      <text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">92%</text>
      <text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Validity</text>
    </g>
    <!-- Editability 78% -->
    <g transform="translate(250,120)">
      <circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9"/>
      <circle r="46" fill="none" stroke="#F26A4D" stroke-width="9" stroke-linecap="round"
              stroke-dasharray="289" stroke-dashoffset="64" transform="rotate(-90)"/>
      <text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">78%</text>
      <text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Editability</text>
    </g>
    <!-- Fidelity 85% -->
    <g transform="translate(90,270)">
      <circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9"/>
      <circle r="46" fill="none" stroke="#7FB8A5" stroke-width="9" stroke-linecap="round"
              stroke-dasharray="289" stroke-dashoffset="43" transform="rotate(-90)"/>
      <text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">85%</text>
      <text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Fidelity</text>
    </g>
    <!-- Safety 96% -->
    <g transform="translate(250,270)">
      <circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9"/>
      <circle r="46" fill="none" stroke="#E8DFCD" stroke-width="9" stroke-linecap="round"
              stroke-dasharray="289" stroke-dashoffset="12" transform="rotate(-90)"/>
      <text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">96%</text>
      <text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Safety</text>
    </g>
  </g>

  <!-- ============ BOTTOM TIMELINE ============ -->
  <g transform="translate(40,600)">
    <rect width="1340" height="260" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4"/>
    <rect width="1340" height="6" fill="#F26A4D"/>

    <text x="28" y="36" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#1F2A44" letter-spacing="3">EDITABLE AI PIPELINE � FIVE STAGES</text>
    <text x="28" y="56" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">From rough ideation to published artifact � each stage remains inspectable, revertable, and re-parameterizable.</text>

    <!-- Timeline baseline -->
    <line x1="40" y1="150" x2="1300" y2="150" stroke="#1F2A44" stroke-width="2"/>

    <!-- 5 milestones spaced at 160..1160 step 250 -->
    <g font-family="Georgia, serif" fill="#1F2A44">
      <!-- 1 Sketch -->
      <g transform="translate(160,150)">
        <circle r="18" fill="#F26A4D" stroke="#1F2A44" stroke-width="2"/>
        <text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#F6F1E7">1</text>
        <text y="44" text-anchor="middle" font-size="17" font-weight="700">Sketch</text>
        <text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">hand-drawn inputs</text>
      </g>
      <!-- 2 Structure -->
      <g transform="translate(440,150)">
        <circle r="18" fill="#FFD28A" stroke="#1F2A44" stroke-width="2"/>
        <text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">2</text>
        <text y="44" text-anchor="middle" font-size="17" font-weight="700">Structure</text>
        <text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">semantic graph layout</text>
      </g>
      <!-- 3 Style -->
      <g transform="translate(720,150)">
        <circle r="18" fill="#7FB8A5" stroke="#1F2A44" stroke-width="2"/>
        <text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">3</text>
        <text y="44" text-anchor="middle" font-size="17" font-weight="700">Style</text>
        <text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">token-driven theming</text>
      </g>
      <!-- 4 Validate -->
      <g transform="translate(1000,150)">
        <circle r="18" fill="#E8DFCD" stroke="#1F2A44" stroke-width="2"/>
        <text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">4</text>
        <text y="44" text-anchor="middle" font-size="17" font-weight="700">Validate</text>
        <text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">constraint checking</text>
      </g>
      <!-- 5 Publish -->
      <g transform="translate(1280,150)">
        <circle r="18" fill="#1F2A44"/>
        <text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#FFD28A">5</text>
        <text y="44" text-anchor="middle" font-size="17" font-weight="700">Publish</text>
        <text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">versioned + editable</text>
      </g>
    </g>

    <!-- Arrow end -->
    <path d="M1296 150 l8 0 M1294 146 l10 4 l-10 4" fill="none" stroke="#1F2A44" stroke-width="2"/>

    <!-- Legend strip -->
    <g transform="translate(28,220)" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">
      <circle cx="6" cy="-4" r="5" fill="#F26A4D"/>
      <text x="18" y="0">Human intent</text>
      <circle cx="130" cy="-4" r="5" fill="#FFD28A"/>
      <text x="142" y="0">AI proposal</text>
      <circle cx="240" cy="-4" r="5" fill="#7FB8A5"/>
      <text x="252" y="0">System refinement</text>
      <circle cx="390" cy="-4" r="5" fill="#E8DFCD"/>
      <text x="402" y="0">Review gate</text>
      <circle cx="500" cy="-4" r="5" fill="#1F2A44"/>
      <text x="512" y="0">Release</text>
    </g>
  </g>

  <!-- ============ FOOTER STRIP ============ -->
  <g transform="translate(0,876)">
    <rect width="1400" height="24" fill="#1F2A44"/>
    <text x="40" y="16" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#F6F1E7">#EditableAIDesign</text>
    <text x="700" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#FFD28A">poster.designconf.org/2026</text>
    <text x="1360" y="16" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#F6F1E7">CC BY 4.0</text>
  </g>
</svg>
Sanitized SVG
<svg viewBox="0 0 1400 900" role="img" xmlns="http://www.w3.org/2000/svg"><title id="posterTitle">The Future of Editable AI-Generated Design � Conference Poster</title><desc id="posterDesc">An editorial-style conference poster featuring three speakers, a five-stage design pipeline timeline (Sketch, Structure, Style, Validate, Publish), a hero illustration of a human cursor reshaping vector nodes, and a metrics panel tracking Validity, Editability, Fidelity, and Safety.</desc><defs><pattern id="diag" width="24" height="24" patternUnits="userSpaceOnUse"><rect width="24" height="24" fill="#F6F1E7" /><line x1="0" y1="0" x2="0" y2="24" stroke="#E8DFCD" stroke-width="1" /></pattern><pattern id="dots" width="16" height="16" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1.1" fill="#1F2A44" opacity="0.12" /></pattern><linearGradient id="heroGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FFD28A" /><stop offset="1" stop-color="#F26A4D" /></linearGradient></defs><rect width="1400" height="900" fill="url(#diag)" /><rect width="1400" height="900" fill="url(#dots)" opacity="0.4" /><g transform="translate(40,40)"><rect x="0" y="0" width="980" height="96" fill="#1F2A44" /><rect x="0" y="0" width="8" height="96" fill="#F26A4D" /><text x="28" y="40" font-family="Georgia, 'Times New Roman', serif" font-size="13" fill="#FFD28A">HCI ? DESIGN ? AI  �  CONFERENCE 2026</text><text x="28" y="78" font-family="Georgia, 'Times New Roman', serif" font-size="32" font-weight="700" fill="#F6F1E7">The Future of Editable AI-Generated Design</text><text x="28" y="128" font-family="Helvetica, Arial, sans-serif" font-size="13" fill="#5B5A52">
      <tspan x="28" dy="10">Panel Discussion</tspan><tspan dx="16">�</tspan><tspan dx="16">June 20, 2026</tspan><tspan dx="16">�</tspan><tspan dx="16">Hall B  �  14:00</tspan></text></g><g transform="translate(1040,40)"><rect x="0" y="0" width="340" height="140" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.5" /><rect x="0" y="0" width="340" height="6" fill="#F26A4D" /><text x="16" y="28" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44">KEY VISUAL � VECTOR EDITING</text><g transform="translate(20,42)"><path d="M10 70 C 60 70, 90 20, 150 30 S 240 80, 290 60" fill="none" stroke="#1F2A44" stroke-width="2" stroke-dasharray="4 4" /><path d="M10 70 C 60 70, 90 20, 150 30 S 230 40, 295 20" fill="none" stroke="#F26A4D" stroke-width="2.4" /><line x1="150" y1="30" x2="180" y2="10" stroke="#1F2A44" stroke-width="1.2" /><line x1="150" y1="30" x2="120" y2="48" stroke="#1F2A44" stroke-width="1.2" /><circle cx="10" cy="70" r="4" fill="#1F2A44" /><circle cx="150" cy="30" r="5" fill="url(#heroGrad)" stroke="#1F2A44" stroke-width="1.4" /><circle cx="180" cy="10" r="3" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.2" /><circle cx="295" cy="20" r="4" fill="#1F2A44" /><use href="#cursor" x="172" y="0" width="22" height="22" /><text x="0" y="94" font-family="Helvetica, Arial, sans-serif" font-size="10" fill="#5B5A52">drag � constrain � re-parameterize</text></g></g><g transform="translate(40,180)"><g transform="translate(0,0)"><rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4" /><rect width="310" height="28" fill="#1F2A44" /><text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A">SPEAKER 01 � KEYNOTE</text><g transform="translate(24,56)"><use href="#avatar" x="0" y="0" width="72" height="72" /><text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Dr. Maya Chen</text><text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">Principal Researcher</text><text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Atlas AI Lab � Z�rich</text></g><line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1" /><text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44">SESSION ABSTRACT</text><text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44">
        <tspan x="24" dy="0">Editable Latent Spaces: bridging</tspan><tspan x="24" dy="20">generative outputs with parametric</tspan><tspan x="24" dy="20">control for real-time designer</tspan><tspan x="24" dy="20">intervention and iterative critique.</tspan></text><g transform="translate(24,300)"><rect width="86" height="24" fill="#1F2A44" /><text x="43" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">DIFFUSION</text><rect x="94" width="70" height="24" fill="#F26A4D" /><text x="129" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">LATENT</text></g><text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">45 min � followed by live demo</text></g><g transform="translate(335,0)"><rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4" /><rect width="310" height="28" fill="#1F2A44" /><text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A">SPEAKER 02 � TALK</text><g transform="translate(24,56)"><use href="#avatar" x="0" y="0" width="72" height="72" /><text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Prof. Luca Moretti</text><text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">Design Systems Lead</text><text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Politecnico di Milano</text></g><line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1" /><text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44">SESSION ABSTRACT</text><text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44">
        <tspan x="24" dy="0">Vector-grounded diffusion models</tspan><tspan x="24" dy="20">that preserve semantic structure,</tspan><tspan x="24" dy="20">enabling post-generation refinement</tspan><tspan x="24" dy="20">and brand-consistent workflows.</tspan></text><g transform="translate(24,300)"><rect width="74" height="24" fill="#1F2A44" /><text x="37" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">VECTOR</text><rect x="82" width="86" height="24" fill="#F26A4D" /><text x="125" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">STRUCTURE</text></g><text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">30 min � case studies from industry</text></g><g transform="translate(670,0)"><rect width="310" height="380" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4" /><rect width="310" height="28" fill="#1F2A44" /><text x="14" y="18" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A">SPEAKER 03 � PANEL</text><g transform="translate(24,56)"><use href="#avatar" x="0" y="0" width="72" height="72" /><text x="88" y="24" font-family="Georgia, 'Times New Roman', serif" font-size="20" font-weight="700" fill="#1F2A44">Dr. Aisha Patel</text><text x="88" y="44" font-family="Helvetica, Arial, sans-serif" font-size="12" fill="#F26A4D" font-weight="700">AI Ethics Researcher</text><text x="88" y="62" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">Oxford Institute for AI</text></g><line x1="24" y1="148" x2="286" y2="148" stroke="#1F2A44" stroke-width="1" /><text x="24" y="168" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#1F2A44">SESSION ABSTRACT</text><text x="24" y="196" font-family="Georgia, 'Times New Roman', serif" font-size="15" fill="#1F2A44">
        <tspan x="24" dy="0">Audit trails and constraint</tspan><tspan x="24" dy="20">validation that ensure AI-generated</tspan><tspan x="24" dy="20">artifacts remain safe, accountable,</tspan><tspan x="24" dy="20">and aligned with human intent.</tspan></text><g transform="translate(24,300)"><rect width="64" height="24" fill="#1F2A44" /><text x="32" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">ETHICS</text><rect x="72" width="72" height="24" fill="#F26A4D" /><text x="108" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">SAFETY</text></g><text x="24" y="356" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">30 min � open audience Q&amp;A</text></g></g><g transform="translate(1040,200)"><rect width="340" height="380" fill="#1F2A44" /><rect x="0" y="0" width="340" height="6" fill="#FFD28A" /><text x="24" y="34" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#FFD28A">MODEL HEALTH METRICS</text><text x="24" y="54" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#9AA3B8">Evaluated across 4,812 design tasks</text><g transform="translate(90,120)"><circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9" /><circle r="46" fill="none" stroke="#FFD28A" stroke-width="9" stroke-linecap="round" stroke-dasharray="289" stroke-dashoffset="23" transform="rotate(-90)" /><text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">92%</text><text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Validity</text></g><g transform="translate(250,120)"><circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9" /><circle r="46" fill="none" stroke="#F26A4D" stroke-width="9" stroke-linecap="round" stroke-dasharray="289" stroke-dashoffset="64" transform="rotate(-90)" /><text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">78%</text><text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Editability</text></g><g transform="translate(90,270)"><circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9" /><circle r="46" fill="none" stroke="#7FB8A5" stroke-width="9" stroke-linecap="round" stroke-dasharray="289" stroke-dashoffset="43" transform="rotate(-90)" /><text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">85%</text><text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Fidelity</text></g><g transform="translate(250,270)"><circle r="46" fill="none" stroke="#2E3B5C" stroke-width="9" /><circle r="46" fill="none" stroke="#E8DFCD" stroke-width="9" stroke-linecap="round" stroke-dasharray="289" stroke-dashoffset="12" transform="rotate(-90)" /><text y="4" text-anchor="middle" font-family="Georgia, serif" font-size="22" font-weight="700" fill="#F6F1E7">96%</text><text y="78" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" font-weight="700" fill="#F6F1E7">Safety</text></g></g><g transform="translate(40,600)"><rect width="1340" height="260" fill="#F6F1E7" stroke="#1F2A44" stroke-width="1.4" /><rect width="1340" height="6" fill="#F26A4D" /><text x="28" y="36" font-family="Helvetica, Arial, sans-serif" font-size="12" font-weight="700" fill="#1F2A44">EDITABLE AI PIPELINE � FIVE STAGES</text><text x="28" y="56" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52">From rough ideation to published artifact � each stage remains inspectable, revertable, and re-parameterizable.</text><line x1="40" y1="150" x2="1300" y2="150" stroke="#1F2A44" stroke-width="2" /><g font-family="Georgia, serif" fill="#1F2A44"><g transform="translate(160,150)"><circle r="18" fill="#F26A4D" stroke="#1F2A44" stroke-width="2" /><text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#F6F1E7">1</text><text y="44" text-anchor="middle" font-size="17" font-weight="700">Sketch</text><text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">hand-drawn inputs</text></g><g transform="translate(440,150)"><circle r="18" fill="#FFD28A" stroke="#1F2A44" stroke-width="2" /><text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">2</text><text y="44" text-anchor="middle" font-size="17" font-weight="700">Structure</text><text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">semantic graph layout</text></g><g transform="translate(720,150)"><circle r="18" fill="#7FB8A5" stroke="#1F2A44" stroke-width="2" /><text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">3</text><text y="44" text-anchor="middle" font-size="17" font-weight="700">Style</text><text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">token-driven theming</text></g><g transform="translate(1000,150)"><circle r="18" fill="#E8DFCD" stroke="#1F2A44" stroke-width="2" /><text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#1F2A44">4</text><text y="44" text-anchor="middle" font-size="17" font-weight="700">Validate</text><text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">constraint checking</text></g><g transform="translate(1280,150)"><circle r="18" fill="#1F2A44" /><text y="5" text-anchor="middle" font-size="14" font-weight="700" fill="#FFD28A">5</text><text y="44" text-anchor="middle" font-size="17" font-weight="700">Publish</text><text y="64" text-anchor="middle" font-family="Helvetica, sans-serif" font-size="11" fill="#5B5A52">versioned + editable</text></g></g><path d="M1296 150 l8 0 M1294 146 l10 4 l-10 4" fill="none" stroke="#1F2A44" stroke-width="2" /><g transform="translate(28,220)" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#5B5A52"><circle cx="6" cy="-4" r="5" fill="#F26A4D" /><text x="18" y="0">Human intent</text><circle cx="130" cy="-4" r="5" fill="#FFD28A" /><text x="142" y="0">AI proposal</text><circle cx="240" cy="-4" r="5" fill="#7FB8A5" /><text x="252" y="0">System refinement</text><circle cx="390" cy="-4" r="5" fill="#E8DFCD" /><text x="402" y="0">Review gate</text><circle cx="500" cy="-4" r="5" fill="#1F2A44" /><text x="512" y="0">Release</text></g></g><g transform="translate(0,876)"><rect width="1400" height="24" fill="#1F2A44" /><text x="40" y="16" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#F6F1E7">#EditableAIDesign</text><text x="700" y="16" text-anchor="middle" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#FFD28A">poster.designconf.org/2026</text><text x="1360" y="16" text-anchor="end" font-family="Helvetica, Arial, sans-serif" font-size="11" fill="#F6F1E7">CC BY 4.0</text></g></svg>

Z.ai

Z.ai: GLM 5.2

z-ai/glm-5.2
95/100

Sanitizer accepted the SVG after removing 22 unsupported safe attribute(s) or element(s). The poster covers the editorial grid, three speaker cards, bottom timeline, right-side metrics panel, pattern background, and vector-node hero illustration with strong text fidelity.

Status
Sanitized SVG scored
Generation settings
OpenRouter Chat room orc-1782119478-KSp3U2IKKCwN4FmeF1oR, single model, tools 0 active, captured 2026-06-22. Z.ai GLM 5.2 selected directly. Run completed with no active stop control.
Raw SHA-256
24f3a613d314bed5ada95cfde6d45b5a8ff9726e80ba5a49cff14535032c6ae2
Raw size
15486 bytes
SVG validity
15
Safety
20
Instruction adherence
25
Visual completeness
15
Text fidelity
10
Editability and code quality
15
Sanitized preview 100%
Open in SVG Code Editor
Raw and sanitized output
Raw copied output
<svg viewBox="0 0 1400 900" xmlns="http://www.w3.org/2000/svg" text-rendering="geometricPrecision" role="img" aria-labelledby="posterTitle posterDesc">

  <title id="posterTitle">The Future of Editable AI-Generated Design — Conference Poster</title>

  <desc id="posterDesc">Editorial conference poster with a header, a hero illustration of a cursor reshaping vector nodes, three speaker cards, a right-side metrics panel with four circular progress indicators (Validity, Editability, Fidelity, Safety), and a bottom timeline with five milestones: Sketch, Structure, Style, Validate, Publish.</desc>



  <defs>

    <!-- Decorative background pattern: plus-sign grid -->

    <pattern id="plusGrid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">

      <path d="M18 8 h4 v8 h8 v4 h-8 v8 h-4 v-8 h-8 v-4 h8 z" fill="#1a1a2e" opacity="0.06"/>

    </pattern>

    <pattern id="dotFade" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">

      <circle cx="12" cy="12" r="1.1" fill="#1a1a2e" opacity="0.07"/>

    </pattern>



    <!-- Hero gradient -->

    <linearGradient id="heroBg" x1="0" y1="0" x2="1" y2="1">

      <stop offset="0" stop-color="#1a1a2e"/>

      <stop offset="1" stop-color="#2d2d4a"/>

    </linearGradient>

    <linearGradient id="accentBar" x1="0" y1="0" x2="1" y2="0">

      <stop offset="0" stop-color="#e63946"/>

      <stop offset="0.5" stop-color="#f4a261"/>

      <stop offset="1" stop-color="#2a9d8f"/>

    </linearGradient>



    <!-- Cursor pointer -->

    <symbol id="cursor" viewBox="0 0 24 24">

      <path d="M3 2 L3 18 L7.5 14 L10.5 21 L13 20 L10 13 L16 13 Z"

            fill="#ffffff" stroke="#1a1a2e" stroke-width="1.2" stroke-linejoin="round"/>

    </symbol>



    <!-- Abstract avatar icons -->

    <symbol id="avatarA" viewBox="0 0 48 48">

      <rect x="0" y="0" width="48" height="48" rx="10" fill="#e63946"/>

      <circle cx="24" cy="20" r="8" fill="#fff"/>

      <path d="M10 42 C12 32 36 32 38 42 Z" fill="#fff"/>

    </symbol>

    <symbol id="avatarB" viewBox="0 0 48 48">

      <rect x="0" y="0" width="48" height="48" rx="10" fill="#2a9d8f"/>

      <rect x="14" y="12" width="20" height="6" rx="3" fill="#fff"/>

      <circle cx="18" cy="28" r="5" fill="#fff"/>

      <rect x="26" y="24" width="10" height="14" rx="2" fill="#fff"/>

    </symbol>

    <symbol id="avatarC" viewBox="0 0 48 48">

      <rect x="0" y="0" width="48" height="48" rx="10" fill="#f4a261"/>

      <path d="M24 10 L34 30 L14 30 Z" fill="#fff"/>

      <circle cx="24" cy="24" r="3" fill="#f4a261"/>

    </symbol>

  </defs>



  <!-- ===== BACKGROUND ===== -->

  <rect x="0" y="0" width="1400" height="900" fill="#f7f5f0"/>

  <rect x="0" y="0" width="1400" height="900" fill="url(#plusGrid)"/>

  <rect x="0" y="0" width="1400" height="900" fill="url(#dotFade)"/>



  <!-- ===== HEADER ===== -->

  <g id="header">

    <rect x="0" y="0" width="1400" height="6" fill="url(#accentBar)"/>

    <text x="40" y="50" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"

          font-size="13" letter-spacing="4" fill="#1a1a2e" font-weight="700">

      DESIGN SYSTEMS SUMMIT · 2026 · TRACK 03

    </text>

    <text x="40" y="98" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"

          font-size="42" font-weight="800" fill="#1a1a2e" letter-spacing="-1">

      The Future of Editable AI-Generated Design

    </text>

    <text x="40" y="128" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"

          font-size="15" fill="#4a4a66">

      From latent prompts to vector control — a working session on authorship, tooling, and trust.

    </text>

    <text x="1360" y="50" text-anchor="end" font-family="ui-sans-serif, system-ui, sans-serif"

          font-size="13" letter-spacing="2" fill="#4a4a66" font-weight="600">

      JUNE 22 · 14:00 · HALL B

    </text>

    <line x1="40" y1="148" x2="1360" y2="148" stroke="#1a1a2e" stroke-width="1" opacity="0.25"/>

  </g>



  <!-- ===== HERO ILLUSTRATION ===== -->

  <g id="hero">

    <rect x="40" y="166" width="960" height="246" rx="14" fill="url(#heroBg)"/>

    <!-- vector path being reshaped -->

    <path d="M120 360 C 200 220, 360 220, 460 300 S 720 380, 860 240"

          fill="none" stroke="#ffffff" stroke-width="3" opacity="0.95"/>

    <!-- original ghost path -->

    <path d="M120 360 C 200 220, 360 220, 460 300 S 720 380, 860 240"

          fill="none" stroke="#f4a261" stroke-width="2" stroke-dasharray="4 6" opacity="0.5"

          transform="translate(0 -16)"/>

    <!-- nodes -->

    <g fill="#ffffff" stroke="#1a1a2e" stroke-width="1.5">

      <rect x="114" y="354" width="12" height="12" rx="2"/>

      <rect x="454" y="294" width="12" height="12" rx="2"/>

      <rect x="854" y="234" width="12" height="12" rx="2"/>

    </g>

    <!-- control handles -->

    <g stroke="#2a9d8f" stroke-width="1.5" fill="#2a9d8f">

      <line x1="460" y1="300" x2="380" y2="260"/>

      <line x1="460" y1="300" x2="540" y2="340"/>

      <circle cx="380" cy="260" r="4"/>

      <circle cx="540" cy="340" r="4"/>

    </g>

    <!-- selected node highlight -->

    <rect x="450" y="290" width="20" height="20" rx="3" fill="none" stroke="#e63946" stroke-width="2"/>

    <!-- cursor -->

    <use href="#cursor" x="486" y="286" width="34" height="34"/>

    <!-- grid overlay -->

    <g stroke="#ffffff" stroke-width="1" opacity="0.08">

      <line x1="60" y1="200" x2="980" y2="200"/>

      <line x1="60" y1="280" x2="980" y2="280"/>

      <line x1="60" y1="360" x2="980" y2="360"/>

      <line x1="200" y1="180" x2="200" y2="400"/>

      <line x1="500" y1="180" x2="500" y2="400"/>

      <line x1="800" y1="180" x2="800" y2="400"/>

    </g>

    <!-- hero caption -->

    <text x="64" y="196" font-family="ui-sans-serif, system-ui, sans-serif"

          font-size="13" letter-spacing="3" fill="#f4a261" font-weight="700">

      LIVE DEMO · NODE-LEVEL EDITING

    </text>

    <text x="64" y="392" font-family="ui-sans-serif, system-ui, sans-serif"

          font-size="14" fill="#ffffff" opacity="0.85">

      Drag any anchor — the model re-resolves the path without losing intent.

    </text>

  </g>



  <!-- ===== SPEAKER CARDS ===== -->

  <g id="speakers" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif">

    <!-- Card 1 -->

    <g>

      <rect x="40" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95"/>

      <rect x="40" y="430" width="306" height="6" rx="3" fill="#e63946"/>

      <use href="#avatarA" x="64" y="456" width="56" height="56"/>

      <text x="64" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Dr. Mara Vance</text>

      <text x="64" y="560" font-size="13" fill="#e63946" font-weight="600" letter-spacing="1">DIRECTOR · DESIGN LAB</text>

      <line x1="64" y1="574" x2="322" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15"/>

      <text x="64" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="64" dy="0">Treats AI output as a draft, not a final.</tspan>

        <tspan x="64" dy="20">A framework for human-held vector control.</tspan>

      </text>

      <text x="64" y="688" font-size="12" fill="#4a4a66" letter-spacing="1">SESSION 01 · 14:00</text>

    </g>



    <!-- Card 2 -->

    <g>

      <rect x="366" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95"/>

      <rect x="366" y="430" width="306" height="6" rx="3" fill="#2a9d8f"/>

      <use href="#avatarB" x="390" y="456" width="56" height="56"/>

      <text x="390" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Idris Okonkwo</text>

      <text x="390" y="560" font-size="13" fill="#2a9d8f" font-weight="600" letter-spacing="1">PRINCIPAL · VECTOR KERNEL</text>

      <line x1="390" y1="574" x2="648" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15"/>

      <text x="390" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="390" dy="0">Editable layers beat pixel re-rolls.</tspan>

        <tspan x="390" dy="20">A schema for prompt-to-path round trips.</tspan>

      </text>

      <text x="390" y="688" font-size="12" fill="#4a4a66" letter-spacing="1">SESSION 02 · 15:00</text>

    </g>



    <!-- Card 3 -->

    <g>

      <rect x="692" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95"/>

      <rect x="692" y="430" width="306" height="6" rx="3" fill="#f4a261"/>

      <use href="#avatarC" x="716" y="456" width="56" height="56"/>

      <text x="716" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Lin Hua</text>

      <text x="716" y="560" font-size="13" fill="#c8761f" font-weight="600" letter-spacing="1">LEAD · TRUST &amp; SAFETY</text>

      <line x1="716" y1="574" x2="974" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15"/>

      <text x="716" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="716" dy="0">Editability is a safety property.</tspan>

        <tspan x="716" dy="20">Provenance, licensing, and review hooks.</tspan>

      </text>

      <text x="716" y="688" font-size="12" fill="#4a4a66" letter-spacing="1">SESSION 03 · 16:00</text>

    </g>

  </g>



  <!-- ===== METRICS PANEL ===== -->

  <g id="metrics" font-family="ui-sans-serif, system-ui, sans-serif">

    <rect x="1020" y="166" width="340" height="554" rx="14" fill="#1a1a2e"/>

    <text x="1044" y="202" font-size="12" letter-spacing="3" fill="#f4a261" font-weight="700">QUALITY METRICS</text>

    <text x="1044" y="232" font-size="22" font-weight="800" fill="#ffffff">Composite scores</text>

    <text x="1044" y="254" font-size="12.5" fill="#ffffff" opacity="0.65">Across 1,280 generated assets, human-validated.</text>

    <line x1="1044" y1="272" x2="1336" y2="272" stroke="#ffffff" stroke-width="1" opacity="0.15"/>



    <!-- circles: r=46, c=2*pi*46 ≈ 289.03 -->

    <!-- Validity 92% -->

    <g transform="translate(1108 360)">

      <circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15"/>

      <circle r="46" fill="none" stroke="#2a9d8f" stroke-width="8" stroke-linecap="round"

              stroke-dasharray="265.9 289.03" transform="rotate(-90)"/>

      <text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">92%</text>

      <text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85" letter-spacing="1">VALIDITY</text>

    </g>

    <!-- Editability 87% -->

    <g transform="translate(1272 360)">

      <circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15"/>

      <circle r="46" fill="none" stroke="#f4a261" stroke-width="8" stroke-linecap="round"

              stroke-dasharray="251.45 289.03" transform="rotate(-90)"/>

      <text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">87%</text>

      <text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85" letter-spacing="1">EDITABILITY</text>

    </g>

    <!-- Fidelity 78% -->

    <g transform="translate(1108 530)">

      <circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15"/>

      <circle r="46" fill="none" stroke="#e63946" stroke-width="8" stroke-linecap="round"

              stroke-dasharray="225.44 289.03" transform="rotate(-90)"/>

      <text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">78%</text>

      <text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85" letter-spacing="1">FIDELITY</text>

    </g>

    <!-- Safety 95% -->

    <g transform="translate(1272 530)">

      <circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15"/>

      <circle r="46" fill="none" stroke="#2a9d8f" stroke-width="8" stroke-linecap="round"

              stroke-dasharray="274.58 289.03" transform="rotate(-90)"/>

      <text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">95%</text>

      <text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85" letter-spacing="1">SAFETY</text>

    </g>



    <text x="1044" y="690" font-size="12" fill="#ffffff" opacity="0.6">

      Source: internal benchmark · Q1 2026

    </text>

  </g>



  <!-- ===== TIMELINE ===== -->

  <g id="timeline" font-family="ui-sans-serif, system-ui, sans-serif">

    <rect x="40" y="744" width="1320" height="126" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95"/>

    <text x="60" y="772" font-size="12" letter-spacing="3" fill="#1a1a2e" font-weight="700">WORKFLOW · FIVE MILESTONES</text>



    <!-- base line -->

    <line x1="120" y1="828" x2="1280" y2="828" stroke="#1a1a2e" stroke-width="2" opacity="0.25"/>

    <line x1="120" y1="828" x2="1280" y2="828" stroke="url(#accentBar)" stroke-width="3"/>



    <!-- milestone positions: 120, 410, 700, 990, 1280 -->

    <!-- 1 Sketch -->

    <g transform="translate(120 828)">

      <circle r="14" fill="#ffffff" stroke="#e63946" stroke-width="3"/>

      <circle r="5" fill="#e63946"/>

      <text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Sketch</text>

      <text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Intent capture</text>

      <text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">01</text>

    </g>

    <!-- 2 Structure -->

    <g transform="translate(410 828)">

      <circle r="14" fill="#ffffff" stroke="#f4a261" stroke-width="3"/>

      <circle r="5" fill="#f4a261"/>

      <text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Structure</text>

      <text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Layer graph</text>

      <text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">02</text>

    </g>

    <!-- 3 Style -->

    <g transform="translate(700 828)">

      <circle r="14" fill="#ffffff" stroke="#2a9d8f" stroke-width="3"/>

      <circle r="5" fill="#2a9d8f"/>

      <text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Style</text>

      <text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Token mapping</text>

      <text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">03</text>

    </g>

    <!-- 4 Validate -->

    <g transform="translate(990 828)">

      <circle r="14" fill="#ffffff" stroke="#1a1a2e" stroke-width="3"/>

      <circle r="5" fill="#1a1a2e"/>

      <text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Validate</text>

      <text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Human review</text>

      <text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">04</text>

    </g>

    <!-- 5 Publish -->

    <g transform="translate(1280 828)">

      <circle r="14" fill="#e63946" stroke="#e63946" stroke-width="3"/>

      <path d="M-5 0 L-1 4 L6 -4" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>

      <text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Publish</text>

      <text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Export &amp; ship</text>

      <text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">05</text>

    </g>

  </g>

</svg>
Sanitized SVG
<svg viewBox="0 0 1400 900" role="img" xmlns="http://www.w3.org/2000/svg"><title id="posterTitle">The Future of Editable AI-Generated Design — Conference Poster</title><desc id="posterDesc">Editorial conference poster with a header, a hero illustration of a cursor reshaping vector nodes, three speaker cards, a right-side metrics panel with four circular progress indicators (Validity, Editability, Fidelity, Safety), and a bottom timeline with five milestones: Sketch, Structure, Style, Validate, Publish.</desc><defs><pattern id="plusGrid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M18 8 h4 v8 h8 v4 h-8 v8 h-4 v-8 h-8 v-4 h8 z" fill="#1a1a2e" opacity="0.06" /></pattern><pattern id="dotFade" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="12" cy="12" r="1.1" fill="#1a1a2e" opacity="0.07" /></pattern><linearGradient id="heroBg" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#1a1a2e" /><stop offset="1" stop-color="#2d2d4a" /></linearGradient><linearGradient id="accentBar" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#e63946" /><stop offset="0.5" stop-color="#f4a261" /><stop offset="1" stop-color="#2a9d8f" /></linearGradient></defs><rect x="0" y="0" width="1400" height="900" fill="#f7f5f0" /><rect x="0" y="0" width="1400" height="900" fill="url(#plusGrid)" /><rect x="0" y="0" width="1400" height="900" fill="url(#dotFade)" /><g id="header"><rect x="0" y="0" width="1400" height="6" fill="url(#accentBar)" /><text x="40" y="50" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="13" fill="#1a1a2e" font-weight="700">

      DESIGN SYSTEMS SUMMIT · 2026 · TRACK 03

    </text><text x="40" y="98" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="42" font-weight="800" fill="#1a1a2e">

      The Future of Editable AI-Generated Design

    </text><text x="40" y="128" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="15" fill="#4a4a66">

      From latent prompts to vector control — a working session on authorship, tooling, and trust.

    </text><text x="1360" y="50" text-anchor="end" font-family="ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#4a4a66" font-weight="600">

      JUNE 22 · 14:00 · HALL B

    </text><line x1="40" y1="148" x2="1360" y2="148" stroke="#1a1a2e" stroke-width="1" opacity="0.25" /></g><g id="hero"><rect x="40" y="166" width="960" height="246" rx="14" fill="url(#heroBg)" /><path d="M120 360 C 200 220, 360 220, 460 300 S 720 380, 860 240" fill="none" stroke="#ffffff" stroke-width="3" opacity="0.95" /><path d="M120 360 C 200 220, 360 220, 460 300 S 720 380, 860 240" fill="none" stroke="#f4a261" stroke-width="2" stroke-dasharray="4 6" opacity="0.5" transform="translate(0 -16)" /><g fill="#ffffff" stroke="#1a1a2e" stroke-width="1.5"><rect x="114" y="354" width="12" height="12" rx="2" /><rect x="454" y="294" width="12" height="12" rx="2" /><rect x="854" y="234" width="12" height="12" rx="2" /></g><g stroke="#2a9d8f" stroke-width="1.5" fill="#2a9d8f"><line x1="460" y1="300" x2="380" y2="260" /><line x1="460" y1="300" x2="540" y2="340" /><circle cx="380" cy="260" r="4" /><circle cx="540" cy="340" r="4" /></g><rect x="450" y="290" width="20" height="20" rx="3" fill="none" stroke="#e63946" stroke-width="2" /><use href="#cursor" x="486" y="286" width="34" height="34" /><g stroke="#ffffff" stroke-width="1" opacity="0.08"><line x1="60" y1="200" x2="980" y2="200" /><line x1="60" y1="280" x2="980" y2="280" /><line x1="60" y1="360" x2="980" y2="360" /><line x1="200" y1="180" x2="200" y2="400" /><line x1="500" y1="180" x2="500" y2="400" /><line x1="800" y1="180" x2="800" y2="400" /></g><text x="64" y="196" font-family="ui-sans-serif, system-ui, sans-serif" font-size="13" fill="#f4a261" font-weight="700">

      LIVE DEMO · NODE-LEVEL EDITING

    </text><text x="64" y="392" font-family="ui-sans-serif, system-ui, sans-serif" font-size="14" fill="#ffffff" opacity="0.85">

      Drag any anchor — the model re-resolves the path without losing intent.

    </text></g><g id="speakers" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"><g><rect x="40" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95" /><rect x="40" y="430" width="306" height="6" rx="3" fill="#e63946" /><use href="#avatarA" x="64" y="456" width="56" height="56" /><text x="64" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Dr. Mara Vance</text><text x="64" y="560" font-size="13" fill="#e63946" font-weight="600">DIRECTOR · DESIGN LAB</text><line x1="64" y1="574" x2="322" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15" /><text x="64" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="64" dy="0">Treats AI output as a draft, not a final.</tspan><tspan x="64" dy="20">A framework for human-held vector control.</tspan></text><text x="64" y="688" font-size="12" fill="#4a4a66">SESSION 01 · 14:00</text></g><g><rect x="366" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95" /><rect x="366" y="430" width="306" height="6" rx="3" fill="#2a9d8f" /><use href="#avatarB" x="390" y="456" width="56" height="56" /><text x="390" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Idris Okonkwo</text><text x="390" y="560" font-size="13" fill="#2a9d8f" font-weight="600">PRINCIPAL · VECTOR KERNEL</text><line x1="390" y1="574" x2="648" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15" /><text x="390" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="390" dy="0">Editable layers beat pixel re-rolls.</tspan><tspan x="390" dy="20">A schema for prompt-to-path round trips.</tspan></text><text x="390" y="688" font-size="12" fill="#4a4a66">SESSION 02 · 15:00</text></g><g><rect x="692" y="430" width="306" height="290" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95" /><rect x="692" y="430" width="306" height="6" rx="3" fill="#f4a261" /><use href="#avatarC" x="716" y="456" width="56" height="56" /><text x="716" y="540" font-size="18" font-weight="800" fill="#1a1a2e">Lin Hua</text><text x="716" y="560" font-size="13" fill="#c8761f" font-weight="600">LEAD · TRUST &amp; SAFETY</text><line x1="716" y1="574" x2="974" y2="574" stroke="#1a1a2e" stroke-width="1" opacity="0.15" /><text x="716" y="600" font-size="13.5" fill="#2a2a40">

        <tspan x="716" dy="0">Editability is a safety property.</tspan><tspan x="716" dy="20">Provenance, licensing, and review hooks.</tspan></text><text x="716" y="688" font-size="12" fill="#4a4a66">SESSION 03 · 16:00</text></g></g><g id="metrics" font-family="ui-sans-serif, system-ui, sans-serif"><rect x="1020" y="166" width="340" height="554" rx="14" fill="#1a1a2e" /><text x="1044" y="202" font-size="12" fill="#f4a261" font-weight="700">QUALITY METRICS</text><text x="1044" y="232" font-size="22" font-weight="800" fill="#ffffff">Composite scores</text><text x="1044" y="254" font-size="12.5" fill="#ffffff" opacity="0.65">Across 1,280 generated assets, human-validated.</text><line x1="1044" y1="272" x2="1336" y2="272" stroke="#ffffff" stroke-width="1" opacity="0.15" /><g transform="translate(1108 360)"><circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15" /><circle r="46" fill="none" stroke="#2a9d8f" stroke-width="8" stroke-linecap="round" stroke-dasharray="265.9 289.03" transform="rotate(-90)" /><text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">92%</text><text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85">VALIDITY</text></g><g transform="translate(1272 360)"><circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15" /><circle r="46" fill="none" stroke="#f4a261" stroke-width="8" stroke-linecap="round" stroke-dasharray="251.45 289.03" transform="rotate(-90)" /><text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">87%</text><text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85">EDITABILITY</text></g><g transform="translate(1108 530)"><circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15" /><circle r="46" fill="none" stroke="#e63946" stroke-width="8" stroke-linecap="round" stroke-dasharray="225.44 289.03" transform="rotate(-90)" /><text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">78%</text><text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85">FIDELITY</text></g><g transform="translate(1272 530)"><circle r="46" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.15" /><circle r="46" fill="none" stroke="#2a9d8f" stroke-width="8" stroke-linecap="round" stroke-dasharray="274.58 289.03" transform="rotate(-90)" /><text y="6" text-anchor="middle" font-size="22" font-weight="800" fill="#ffffff">95%</text><text y="76" text-anchor="middle" font-size="13" fill="#ffffff" opacity="0.85">SAFETY</text></g><text x="1044" y="690" font-size="12" fill="#ffffff" opacity="0.6">

      Source: internal benchmark · Q1 2026

    </text></g><g id="timeline" font-family="ui-sans-serif, system-ui, sans-serif"><rect x="40" y="744" width="1320" height="126" rx="12" fill="#ffffff" stroke="#1a1a2e" stroke-width="1" opacity="0.95" /><text x="60" y="772" font-size="12" fill="#1a1a2e" font-weight="700">WORKFLOW · FIVE MILESTONES</text><line x1="120" y1="828" x2="1280" y2="828" stroke="#1a1a2e" stroke-width="2" opacity="0.25" /><line x1="120" y1="828" x2="1280" y2="828" stroke="url(#accentBar)" stroke-width="3" /><g transform="translate(120 828)"><circle r="14" fill="#ffffff" stroke="#e63946" stroke-width="3" /><circle r="5" fill="#e63946" /><text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Sketch</text><text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Intent capture</text><text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">01</text></g><g transform="translate(410 828)"><circle r="14" fill="#ffffff" stroke="#f4a261" stroke-width="3" /><circle r="5" fill="#f4a261" /><text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Structure</text><text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Layer graph</text><text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">02</text></g><g transform="translate(700 828)"><circle r="14" fill="#ffffff" stroke="#2a9d8f" stroke-width="3" /><circle r="5" fill="#2a9d8f" /><text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Style</text><text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Token mapping</text><text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">03</text></g><g transform="translate(990 828)"><circle r="14" fill="#ffffff" stroke="#1a1a2e" stroke-width="3" /><circle r="5" fill="#1a1a2e" /><text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Validate</text><text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Human review</text><text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">04</text></g><g transform="translate(1280 828)"><circle r="14" fill="#e63946" stroke="#e63946" stroke-width="3" /><path d="M-5 0 L-1 4 L6 -4" fill="none" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" /><text y="-30" text-anchor="middle" font-size="14" font-weight="800" fill="#1a1a2e">Publish</text><text y="-12" text-anchor="middle" font-size="11" fill="#4a4a66">Export &amp; ship</text><text y="40" text-anchor="middle" font-size="11" fill="#4a4a66">05</text></g></g></svg>

References

Methodology sources

The prompt and rubric design is informed by public SVG and graphic-design benchmark work, while model availability is verified against OpenRouter.