Back

SVG Drawing Match #2689

May 09, 2025

GPT-4o

Challenge Creator

Creative Challenge

"An astronaut grilling burgers on the moon under a disco ball."

o3-mini high (2025-01-31)

Player 1

ELO: 975.045 969.636 (-5.4)

<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Background Radial Gradient -->
    <radialGradient id="bgGradient" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#2a0c4e"/>
      <stop offset="100%" stop-color="#000000"/>
    </radialGradient>
    <!-- Moon Surface Gradient -->
    <linearGradient id="moonGradient" x1="0" y1="220" x2="0" y2="300">
      <stop offset="0%" stop-color="#c0c0c0"/>
      <stop offset="100%" stop-color="#808080"/>
    </linearGradient>
    <!-- Mirror Pattern for Disco Ball -->
    <pattern id="mirrorPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="4" height="4" fill="#d0d0d0"/>
      <path d="M0 0 L4 4" stroke="#a0a0a0" stroke-width="0.5"/>
      <path d="M4 0 L0 4" stroke="#a0a0a0" stroke-width="0.5"/>
    </pattern>
    <!-- Disco Ball Gradient Overlay -->
    <radialGradient id="discoGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#c0c0c0"/>
    </radialGradient>
    <!-- Astronaut Helmet Gradient -->
    <radialGradient id="helmetGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#e0e0e0"/>
      <stop offset="100%" stop-color="#888888"/>
    </radialGradient>
    <!-- Astronaut Suit Gradient -->
    <linearGradient id="suitGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#4a90e2"/>
      <stop offset="100%" stop-color="#003399"/>
    </linearGradient>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGradient)"/>
  
  <!-- Moon Surface -->
  <rect x="0" y="220" width="300" height="80" fill="url(#moonGradient)"/>
  <!-- Craters -->
  <circle cx="50" cy="250" r="8" fill="#a0a0a0" opacity="0.7"/>
  <circle cx="150" cy="240" r="12" fill="#999999" opacity="0.7"/>
  <circle cx="230" cy="260" r="6" fill="#8f8f8f" opacity="0.7"/>
  <circle cx="100" cy="230" r="5" fill="#a0a0a0" opacity="0.6"/>
  
  <!-- Disco Ball and Chain -->
  <line x1="150" y1="20" x2="150" y2="40" stroke="#c0c0c0" stroke-width="2" stroke-dasharray="2,2"/>
  <circle cx="150" cy="60" r="20" fill="url(#mirrorPattern)" stroke="#888" stroke-width="1"/>
  <circle cx="150" cy="60" r="16" fill="url(#discoGradient)" fill-opacity="0.7"/>
  
  <!-- Stars -->
  <circle cx="30" cy="40" r="1" fill="white" opacity="0.8"/>
  <circle cx="70" cy="20" r="1" fill="white" opacity="0.8"/>
  <circle cx="250" cy="50" r="1" fill="white" opacity="0.8"/>
  <circle cx="220" cy="30" r="1" fill="white" opacity="0.8"/>
  <circle cx="180" cy="10" r="1" fill="white" opacity="0.8"/>
  <circle cx="100" cy="60" r="1" fill="white" opacity="0.8"/>
  <circle cx="270" cy="80" r="1" fill="white" opacity="0.8"/>
  
  <!-- Astronaut Grilling -->
  <g id="astronaut" transform="translate(180,220)">
    <!-- Backpack -->
    <rect x="-12" y="-2" width="4" height="16" fill="#777" opacity="0.8"/>
    <!-- Body -->
    <rect x="-8" y="-2" width="16" height="20" fill="url(#suitGradient)" stroke="#555" stroke-width="1" rx="3"/>
    <!-- Helmet -->
    <circle cx="0" cy="-12" r="10" fill="url(#helmetGradient)" stroke="#aaa" stroke-width="1"/>
    <!-- Left Arm -->
    <line x1="-8" y1="0" x2="-20" y2="10" stroke="#555" stroke-width="2" stroke-linecap="round"/>
    <!-- Right Arm with Spatula -->
    <path d="M8,0 C15,4,18,7,20,10" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>
    <rect x="20" y="9" width="10" height="2" fill="#aaa" transform="rotate(10 20 9)"/>
    <!-- Left Leg -->
    <line x1="-5" y1="18" x2="-5" y2="30" stroke="#555" stroke-width="2" stroke-linecap="round"/>
    <!-- Right Leg -->
    <line x1="5" y1="18" x2="5" y2="30" stroke="#555" stroke-width="2" stroke-linecap="round"/>
  </g>
  
  <!-- Grill with Burgers -->
  <g id="grill" transform="translate(230,240)">
    <!-- Grill Base -->
    <rect x="-15" y="-7" width="30" height="4" fill="#444" stroke="#222" stroke-width="1" rx="2"/>
    <!-- Grill Legs -->
    <line x1="-10" y1="-3" x2="-10" y2="5" stroke="#555" stroke-width="1" stroke-linecap="round"/>
    <line x1="10" y1="-3" x2="10" y2="5" stroke="#555" stroke-width="1" stroke-linecap="round"/>
    <!-- Burgers -->
    <circle cx="-8" cy="-5" r="3" fill="#8B4513"/>
    <circle cx="6" cy="-5" r="3" fill="#8B4513"/>
    <!-- Cheese on Right Burger -->
    <polygon points="4,-7 8,-5 4,-3" fill="#ffcc00" opacity="0.8"/>
    <!-- Lettuce on Left Burger -->
    <path d="M -11,-6 Q -8,-8 -5,-6 Q -8,-4 -11,-6" fill="#228B22" opacity="0.7"/>
  </g>
</svg>

Claude 3.7 Sonnet (2025-02-19)

Player 2

ELO: 1,251.661 1,257.071 (+5.4)

Winner

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background - Space -->
  <defs>
    <radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#0F1642" />
      <stop offset="100%" stop-color="#000510" />
    </radialGradient>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    <pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.8" fill="white" />
      <circle cx="30" cy="25" r="0.5" fill="white" />
      <circle cx="45" cy="15" r="0.3" fill="white" />
      <circle cx="60" cy="40" r="0.7" fill="white" />
      <circle cx="80" cy="30" r="0.4" fill="white" />
      <circle cx="20" cy="70" r="0.6" fill="white" />
      <circle cx="65" cy="75" r="0.3" fill="white" />
      <circle cx="90" cy="85" r="0.5" fill="white" />
    </pattern>
    <radialGradient id="moonSurface" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#E6E6E6" />
      <stop offset="80%" stop-color="#C0C0C0" />
      <stop offset="100%" stop-color="#A0A0A0" />
    </radialGradient>
    <radialGradient id="discoLight" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FF00FF" stop-opacity="0.7" />
      <stop offset="20%" stop-color="#FF00FF" stop-opacity="0.5" />
      <stop offset="40%" stop-color="#00FFFF" stop-opacity="0.4" />
      <stop offset="60%" stop-color="#FFFF00" stop-opacity="0.3" />
      <stop offset="80%" stop-color="#FF0000" stop-opacity="0.2" />
      <stop offset="100%" stop-color="#0000FF" stop-opacity="0.1" />
    </radialGradient>
    <filter id="discoGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>

  <!-- Space Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)" />
  <rect x="0" y="0" width="300" height="300" fill="url(#stars)" />

  <!-- Earth in the distance -->
  <circle cx="40" cy="40" r="25" fill="#1a5fb4" filter="url(#glow)" />
  <path d="M25,30 Q40,45 55,35 T65,50" stroke="#2ec27e" stroke-width="3" fill="none" filter="url(#glow)" />

  <!-- Moon Surface -->
  <ellipse cx="150" cy="270" rx="180" ry="70" fill="url(#moonSurface)" />
  <circle cx="90" cy="250" r="10" fill="#A0A0A0" />
  <circle cx="210" cy="260" r="15" fill="#B0B0B0" />
  <circle cx="150" cy="240" r="8" fill="#A0A0A0" />
  <circle cx="260" cy="250" r="12" fill="#B0B0B0" />

  <!-- Disco Ball with Light Rays -->
  <circle cx="150" cy="60" r="20" fill="#E0E0E0" stroke="#FFFFFF" stroke-width="1" />
  <circle cx="150" cy="60" r="19" fill="none" stroke="#CCCCCC" stroke-width="0.5" />
  <circle cx="150" cy="60" r="18" fill="none" stroke="#CCCCCC" stroke-width="0.5" />
  <circle cx="150" cy="60" r="17" fill="none" stroke="#CCCCCC" stroke-width="0.5" />
  <circle cx="150" cy="60" r="16" fill="none" stroke="#CCCCCC" stroke-width="0.5" />
  <line x1="150" y1="40" x2="150" y2="30" stroke="#CCCCCC" stroke-width="2" />
  
  <!-- Disco Ball Mirror Tiles -->
  <g transform="translate(150, 60)">
    <rect x="-15" y="-15" width="5" height="5" fill="#FFFFFF" opacity="0.8" />
    <rect x="-5" y="-15" width="5" height="5" fill="#FFFFFF" opacity="0.7" />
    <rect x="5" y="-15" width="5" height="5" fill="#FFFFFF" opacity="0.9" />
    <rect x="-15" y="-5" width="5" height="5" fill="#FFFFFF" opacity="0.6" />
    <rect x="-5" y="-5" width="5" height="5" fill="#FFFFFF" opacity="0.8" />
    <rect x="5" y="-5" width="5" height="5" fill="#FFFFFF" opacity="0.7" />
    <rect x="-15" y="5" width="5" height="5" fill="#FFFFFF" opacity="0.9" />
    <rect x="-5" y="5" width="5" height="5" fill="#FFFFFF" opacity="0.7" />
    <rect x="5" y="5" width="5" height="5" fill="#FFFFFF" opacity="0.8" />
  </g>
  
  <!-- Disco Light Beams -->
  <polygon points="150,60 120,200 180,200" fill="url(#discoLight)" opacity="0.4" filter="url(#discoGlow)" />
  <polygon points="150,60 80,180 100,220" fill="url(#discoLight)" opacity="0.3" filter="url(#discoGlow)" />
  <polygon points="150,60 200,180 220,220" fill="url(#discoLight)" opacity="0.3" filter="url(#discoGlow)" />

  <!-- Grill -->
  <ellipse cx="150" cy="220" rx="40" ry="15" fill="#333333" />
  <rect x="145" y="220" width="10" height="30" fill="#444444" />
  <rect x="110" y="220" width="80" height="10" rx="2" ry="2" fill="#444444" />
  <ellipse cx="150" cy="220" rx="30" ry="10" fill="#666666" />
  
  <!-- Grill Grate -->
  <line x1="125" y1="215" x2="175" y2="215" stroke="#888888" stroke-width="1" />
  <line x1="125" y1="220" x2="175" y2="220" stroke="#888888" stroke-width="1" />
  <line x1="125" y1="225" x2="175" y2="225" stroke="#888888" stroke-width="1" />
  <line x1="130" y1="210" x2="130" y2="230" stroke="#888888" stroke-width="1" />
  <line x1="140" y1="210" x2="140" y2="230" stroke="#888888" stroke-width="1" />
  <line x1="150" y1="210" x2="150" y2="230" stroke="#888888" stroke-width="1" />
  <line x1="160" y1="210" x2="160" y2="230" stroke="#888888" stroke-width="1" />
  <line x1="170" y1="210" x2="170" y2="230" stroke="#888888" stroke-width="1" />

  <!-- Burgers on Grill -->
  <ellipse cx="140" cy="217" rx="10" ry="4" fill="#8B4513" />
  <ellipse cx="140" cy="215" rx="10" ry="2" fill="#D2691E" />
  <ellipse cx="160" cy="217" rx="10" ry="4" fill="#8B4513" />
  <ellipse cx="160" cy="215" rx="10" ry="2" fill="#D2691E" />
  
  <!-- Flame under grill -->
  <path d="M145,230 Q150,225 155,230 Q160,235 165,230 Q170,225 175,230" fill="#FF4500" opacity="0.8" />
  <path d="M145,232 Q150,227 155,232 Q160,237 165,232 Q170,227 175,232" fill="#FFA500" opacity="0.6" />

  <!-- Astronaut -->
  <g transform="translate(90, 180)">
    <!-- Spacesuit Body -->
    <ellipse cx="0" cy="20" rx="15" ry="25" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1" />
    
    <!-- Helmet -->
    <circle cx="0" cy="-10" r="12" fill="#FFFFFF" stroke="#CCCCCC" stroke-width="1" />
    <ellipse cx="0" cy="-10" rx="8" ry="10" fill="#ADD8E6" opacity="0.5" />
    
    <!-- Face inside helmet -->
    <circle cx="-3" cy="-12" r="1.5" fill="#000000" />
    <circle cx="3" cy="-12" r="1.5" fill="#000000" />
    <path d="M-4,-7 Q0,-5 4,-7" stroke="#000000" stroke-width="1" fill="none" />
    
    <!-- Arms -->
    <path d="M-15,10 Q-25,20 -40,15" stroke="#FFFFFF" stroke-width="10" fill="none" />
    <path d="M15,10 Q30,15 45,10" stroke="#FFFFFF" stroke-width="10" fill="none" />
    
    <!-- Spatula -->
    <rect x="35" y="5" width="20" height="3" fill="#888888" />
    <rect x="55" y="3" width="10" height="7" fill="#AAAAAA" />
    
    <!-- Legs -->
    <path d="M-8,45 Q-10,60 -15,70" stroke="#FFFFFF" stroke-width="10" fill="none" />
    <path d="M8,45 Q10,60 15,70" stroke="#FFFFFF" stroke-width="10" fill="none" />
    
    <!-- NASA Logo -->
    <circle cx="0" cy="15" r="5" fill="#0B3D91" />
    <path d="M-3,15 Q0,10 3,15 Q0,20 -3,15" fill="#FFFFFF" />
    <path d="M-2,15 L2,15" stroke="#FF0000" stroke-width="0.5" />
  </g>
  
  <!-- American Flag on Moon -->
  <rect x="40" y="160" width="20" height="15" fill="#FF0000" />
  <rect x="40" y="160" width="20" height="2" fill="#FFFFFF" />
  <rect x="40" y="164" width="20" height="2" fill="#FFFFFF" />
  <rect x="40" y="168" width="20" height="2" fill="#FFFFFF" />
  <rect x="40" y="172" width="20" height="3" fill="#FFFFFF" />
  <rect x="40" y="160" width="10" height="8" fill="#0000AA" />
  <line x1="40" y1="160" x2="40" y2="190" stroke="#AAAAAA" stroke-width="2" />
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is Claude 3.7 Sonnet (2025-02-19) Player 2

Judge's Analysis

Player 2's image is more detailed, visually appealing, and adheres more closely to the prompt.

It includes a well-designed astronaut, a clearly visible grill with burgers, a colorful disco ball with beams of light, and additional elements such as Earth in the background and a flag.

Player 1's submission is simpler and lacks the same level of creativity and technical execution.

These metrics analyze technical aspects of both SVG drawings. Look for differences that might explain the judge's decision. Use the "View Code" button above to see the SVG code for each drawing.

Shapes Metrics

Total Shapes

The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.

Player 1

Player 2

Rectangles

The number of rectangle elements (rect) in the SVG.

Player 1

Player 2

Circles

The number of circle elements (circle) in the SVG.

Player 1

Player 2

Ellipses

The number of ellipse elements (ellipse) in the SVG.

Player 1

—

Player 2

Lines

The number of line elements (line) in the SVG.

Player 1

Player 2

Polygons

The number of polygon elements (polygon) in the SVG.

Player 1

Player 2

Paths

The number of path elements (path) in the SVG.

Player 1

Player 2

Groups

The number of group elements (g) in the SVG.

Player 1

Player 2

Visual Effects Metrics

Gradients

The number of gradient definitions (linearGradient, radialGradient) in the SVG.

Player 1

Player 2

Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1

Player 2

Filters

The number of filter definitions (filter) in the SVG.

Player 1

—

Player 2

Masks

The number of mask definitions (mask) in the SVG.

Player 1

—

Player 2

—

Clip Paths

The number of clipping path definitions (clipPath) in the SVG.

Player 1

—

Player 2

—

Elements with Opacity

The number of elements with opacity attributes in the SVG.

Player 1

Player 2

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

Player 2

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1

—

Player 2

—

Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1

Player 2

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1

Player 2

Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1

—

Player 2

—

Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1

Player 2

Use Elements

The number of use elements (use) in the SVG.

Player 1

—

Player 2

—

Text Metrics

Text Elements

The number of text elements (text) in the SVG.

Player 1

—

Player 2

—

AI Judging Process

Creativity

Originality, innovative use of shapes and unique approach to the prompt.

Prompt Adherence

How accurately the SVG captures the essence of the prompt.

Visual Appeal

Aesthetic quality including composition, color usage and overall visual impact.

How does judging work?

SVG drawings are converted to static PNG images for evaluation. The AI judge receives the original prompt and both images, then determines which drawing better fulfills the evaluation criteria without seeing animations, interactivity, or SVG code.