Back

SVG Drawing Match #2795

May 25, 2025
GPT-4o
Challenge Creator

Creative Challenge

"An astronaut fishing for stars on a crescent moon."

Claude Sonnet 4 Thinking (2025-05-14)
Player 1
ELO: 1,151.542 1,154.622 (+3.1)
SVG by Claude Sonnet 4 Thinking (2025-05-14) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Enhanced Gradients -->
    <radialGradient id="spaceGradient" cx="40%" cy="20%">
      <stop offset="0%" stop-color="#2a1b5c"/>
      <stop offset="30%" stop-color="#1a0f3a"/>
      <stop offset="60%" stop-color="#0f051a"/>
      <stop offset="100%" stop-color="#000000"/>
    </radialGradient>
    
    <linearGradient id="moonGradient" x1="20%" y1="20%" x2="80%" y2="80%">
      <stop offset="0%" stop-color="#fff8dc"/>
      <stop offset="30%" stop-color="#ffd700"/>
      <stop offset="70%" stop-color="#ffed4e"/>
      <stop offset="100%" stop-color="#daa520"/>
    </linearGradient>
    
    <radialGradient id="helmetGradient" cx="25%" cy="25%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9"/>
      <stop offset="40%" stop-color="#e8f4f8" stop-opacity="0.7"/>
      <stop offset="70%" stop-color="#d0e8f0" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#a0c8d0" stop-opacity="0.2"/>
    </radialGradient>
    
    <linearGradient id="suitGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f8f8f8"/>
      <stop offset="50%" stop-color="#e0e0e0"/>
      <stop offset="100%" stop-color="#c0c0c0"/>
    </linearGradient>
    
    <radialGradient id="starGradient" cx="50%" cy="50%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="30%" stop-color="#ffff99"/>
      <stop offset="70%" stop-color="#ffcc00"/>
      <stop offset="100%" stop-color="#ff9900"/>
    </radialGradient>
    
    <linearGradient id="rodGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#8B4513"/>
      <stop offset="50%" stop-color="#A0522D"/>
      <stop offset="100%" stop-color="#654321"/>
    </linearGradient>
    
    <!-- Patterns -->
    <pattern id="starPattern" x="0" y="0" width="4" height="4" patternUnits="userSpaceOnUse">
      <rect width="4" height="4" fill="transparent"/>
      <circle cx="2" cy="2" r="0.3" fill="#ffffff" opacity="0.3"/>
    </pattern>
  </defs>
  
  <!-- Deep Space Background -->
  <rect width="300" height="300" fill="url(#spaceGradient)"/>
  
  <!-- Distant Galaxy/Nebula -->
  <ellipse cx="80" cy="80" rx="25" ry="15" fill="#4a3c8a" opacity="0.3" transform="rotate(30 80 80)"/>
  <ellipse cx="80" cy="80" rx="20" ry="10" fill="#6a5caa" opacity="0.2" transform="rotate(30 80 80)"/>
  
  <!-- Background Star Field -->
  <rect x="0" y="0" width="300" height="150" fill="url(#starPattern)"/>
  
  <!-- Specific Background Stars -->
  <g opacity="0.8">
    <circle cx="45" cy="35" r="1.2" fill="#ffffff"/>
    <circle cx="280" cy="25" r="1.8" fill="#ffff99"/>
    <circle cx="25" cy="95" r="0.8" fill="#ffffff"/>
    <circle cx="270" cy="75" r="1.5" fill="#ffcc99"/>
    <circle cx="65" cy="15" r="1" fill="#ff9999"/>
    <circle cx="190" cy="40" r="1.3" fill="#99ffff"/>
    <circle cx="15" cy="130" r="0.9" fill="#ffffff"/>
    <circle cx="285" cy="110" r="1.1" fill="#ffff99"/>
  </g>
  
  <!-- Crescent Moon with enhanced details -->
  <path d="M 70 210 Q 40 160 60 110 Q 70 100 85 105 Q 170 125 180 160 Q 185 180 175 200 Q 160 220 140 215 Q 120 210 100 205 Q 85 208 70 210 Z" 
        fill="url(#moonGradient)" stroke="#daa520" stroke-width="1.5"/>
  
  <!-- Moon Surface Details -->
  <ellipse cx="95" cy="170" rx="12" ry="8" fill="#daa520" opacity="0.4"/>
  <ellipse cx="130" cy="185" rx="8" ry="6" fill="#daa520" opacity="0.5"/>
  <ellipse cx="110" cy="195" rx="5" ry="3" fill="#daa520" opacity="0.3"/>
  <ellipse cx="150" cy="170" rx="6" ry="4" fill="#daa520" opacity="0.4"/>
  <circle cx="85" cy="150" r="3" fill="#daa520" opacity="0.6"/>
  <circle cx="165" cy="195" r="4" fill="#daa520" opacity="0.3"/>
  
  <!-- Moon Glow -->
  <path d="M 70 210 Q 40 160 60 110 Q 70 100 85 105 Q 170 125 180 160 Q 185 180 175 200 Q 160 220 140 215 Q 120 210 100 205 Q 85 208 70 210 Z" 
        fill="none" stroke="#fff8dc" stroke-width="2" opacity="0.5"/>
  
  <!-- Astronaut -->
  <g transform="translate(155, 175)">
    <!-- Shadow on moon -->
    <ellipse cx="5" cy="35" rx="20" ry="8" fill="#000000" opacity="0.2"/>
    
    <!-- Legs -->
    <ellipse cx="-8" cy="25" rx="6" ry="14" fill="url(#suitGradient)" stroke="#a0a0a0" stroke-width="1"/>
    <ellipse cx="8" cy="28" rx="6" ry="12" fill="url(#suitGradient)" stroke="#a0a0a0" stroke-width="1" transform="rotate(15)"/>
    
    <!-- Boots -->
    <ellipse cx="-8" cy="38" rx="8" ry="4" fill="#606060"/>
    <ellipse cx="8" cy="38" rx="8" ry="4" fill="#606060" transform="rotate(15)"/>
    
    <!-- Torso -->
    <ellipse cx="0" cy="0" rx="18" ry="22" fill="url(#suitGradient)" stroke="#a0a0a0" stroke-width="1.5"/>
    
    <!-- Arms -->
    <!-- Left arm holding fishing rod -->
    <ellipse cx="-20" cy="-8" rx="7" ry="16" fill="url(#suitGradient)" stroke="#a0a0a0" stroke-width="1" transform="rotate(-25)"/>
    <!-- Right arm relaxed -->
    <ellipse cx="22" cy="5" rx="6" ry="14" fill="url(#suitGradient)" stroke="#a0a0a0" stroke-width="1" transform="rotate(35)"/>
    
    <!-- Gloves -->
    <circle cx="-25" cy="-18" r="5" fill="#e0e0e0" stroke="#a0a0a0" stroke-width="1"/>
    <circle cx="30" cy="15" r="5" fill="#e0e0e0" stroke="#a0a0a0" stroke-width="1"/>
    
    <!-- Suit Details -->
    <rect x="-12" y="-12" width="24" height="18" fill="none" stroke="#808080" stroke-width="1.5" rx="3"/>
    <circle cx="0" cy="-3" r="3" fill="#ff4444" stroke="#cc0000" stroke-width="1"/>
    <rect x="-14" y="8" width="8" height="4" fill="#4444ff" rx="2" stroke="#0000cc" stroke-width="0.5"/>
    <rect x="6" y="8" width="8" height="4" fill="#44ff44" rx="2" stroke="#00cc00" stroke-width="0.5"/>
    <rect x="-6" y="12" width="12" height="2" fill="#ffff44" rx="1"/>
    
    <!-- Life Support Backpack -->
    <rect x="-15" y="-8" width="6" height="16" fill="#c0c0c0" stroke="#808080" stroke-width="1" rx="2"/>
    <circle cx="-12" cy="-5" r="1.5" fill="#ff6666"/>
    <circle cx="-12" cy="2" r="1.5" fill="#66ff66"/>
    
    <!-- Helmet -->
    <circle cx="0" cy="-28" r="20" fill="url(#helmetGradient)" stroke="#c0c0c0" stroke-width="2"/>
    
    <!-- Helmet Reflection -->
    <ellipse cx="-8" cy="-35" rx="8" ry="12" fill="#ffffff" opacity="0.7"/>
    <ellipse cx="-10" cy="-38" rx="4" ry="6" fill="#ffffff" opacity="0.9"/>
    
    <!-- Helmet Details -->
    <circle cx="0" cy="-28" r="17" fill="none" stroke="#8080ff" stroke-width="1" opacity="0.4"/>
    <circle cx="0" cy="-28" r="14" fill="none" stroke="#80ff80" stroke-width="0.5" opacity="0.3"/>
    
    <!-- Face -->
    <circle cx="-4" cy="-30" r="1.5" fill="#ffdbaa"/>
    <circle cx="4" cy="-30" r="1.5" fill="#ffdbaa"/>
    <path d="M -3 -25 Q 0 -23 3 -25" stroke="#ffdbaa" stroke-width="1" fill="none"/>
    <circle cx="-4" cy="-31" r="0.5" fill="#654321"/>
    <circle cx="4" cy="-31" r="0.5" fill="#654321"/>
    
    <!-- Antenna -->
    <line x1="15" y1="-35" x2="25" y2="-45" stroke="#c0c0c0" stroke-width="1"/>
    <circle cx="25" cy="-45" r="1.5" fill="#ff4444"/>
  </g>
  
  <!-- Fishing Rod -->
  <line x1="130" y1="167" x2="85" y2="70" stroke="url(#rodGradient)" stroke-width="3"/>
  <line x1="128" y1="164" x2="140" y2="158" stroke="url(#rodGradient)" stroke-width="2"/>
  <!-- Rod rings -->
  <circle cx="115" cy="135" r="1.5" fill="none" stroke="#c0c0c0" stroke-width="1"/>
  <circle cx="105" cy="110" r="1.5" fill="none" stroke="#c0c0c0" stroke-width="1"/>
  <circle cx="95" cy="90" r="1.5" fill="none" stroke="#c0c0c0" stroke-width="1"/>
  
  <!-- Fishing Line -->
  <polyline points="85,70 82,58 78,45 72,32 65,20 58,10 50,5" 
            stroke="#ffffff" stroke-width="0.8" fill="none" opacity="0.9" stroke-dasharray="1,0.5"/>
  
  <!-- Hook -->
  <path d="M 48 5 Q 45 2 48 0 Q 50 1 48 3" stroke="#c0c0c0" stroke-width="1.5" fill="none"/>
  
  <!-- Star Fish! -->
  <!-- Star 1 - on the hook -->
  <g transform="translate(50, 5)">
    <path d="M 0,-6 L 1.8,-1.8 L 6,0 L 1.8,1.8 L 0,6 L -1.8,1.8 L -6,0 L -1.8,-1.8 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="1"/>
    <circle cx="0" cy="0" r="1" fill="#ffffff"/>
    <!-- Sparkles around caught star -->
    <circle cx="8" cy="-3" r="0.5" fill="#ffffff" opacity="0.8"/>
    <circle cx="-7" cy="4" r="0.3" fill="#ffff99" opacity="0.6"/>
    <circle cx="5" cy="6" r="0.4" fill="#ffffff" opacity="0.7"/>
  </g>
  
  <!-- Star 2 - swimming near the line -->
  <g transform="translate(70, 35)">
    <path d="M 0,-4 L 1.2,-1.2 L 4,0 L 1.2,1.2 L 0,4 L -1.2,1.2 L -4,0 L -1.2,-1.2 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="0.8"/>
    <!-- Swimming motion trail -->
    <path d="M 6 1 Q 9 0 12 2" stroke="#ffff99" stroke-width="1" fill="none" opacity="0.5"/>
    <circle cx="10" cy="1" r="0.3" fill="#ffff99" opacity="0.4"/>
    <circle cx="13" cy="2" r="0.2" fill="#ffff99" opacity="0.3"/>
  </g>
  
  <!-- Star 3 - larger, swimming around -->
  <g transform="translate(40, 85)">
    <path d="M 0,-7 L 2.1,-2.1 L 7,0 L 2.1,2.1 L 0,7 L -2.1,2.1 L -7,0 L -2.1,-2.1 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="1"/>
    <circle cx="0" cy="0" r="1.5" fill="#ffffff"/>
    <!-- Larger swimming trail -->
    <path d="M 10 3 Q 15 2 20 5 Q 22 8 18 10" stroke="#ffff99" stroke-width="1.5" fill="none" opacity="0.6"/>
    <circle cx="15" cy="4" r="0.5" fill="#ffff99" opacity="0.5"/>
    <circle cx="20" cy="7" r="0.4" fill="#ffff99" opacity="0.4"/>
    <circle cx="18" cy="9" r="0.3" fill="#ffff99" opacity="0.3"/>
  </g>
  
  <!-- Star 4 - small one escaping -->
  <g transform="translate(200, 100)">
    <path d="M 0,-3 L 0.9,-0.9 L 3,0 L 0.9,0.9 L 0,3 L -0.9,0.9 L -3,0 L -0.9,-0.9 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="0.8"/>
    <!-- Escape trail -->
    <path d="M -5 0 Q -8 -1 -12 0" stroke="#ffff99" stroke-width="0.8" fill="none" opacity="0.4"/>
    <circle cx="-8" cy="0" r="0.2" fill="#ffff99" opacity="0.3"/>
  </g>
  
  <!-- More swimming stars -->
  <g transform="translate(30, 130)">
    <path d="M 0,-5 L 1.5,-1.5 L 5,0 L 1.5,1.5 L 0,5 L -1.5,1.5 L -5,0 L -1.5,-1.5 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="0.8" opacity="0.9"/>
    <path d="M 8 2 Q 12 0 16 3" stroke="#ffff99" stroke-width="1" fill="none" opacity="0.4"/>
  </g>
  
  <g transform="translate(240, 140)">
    <path d="M 0,-4 L 1.2,-1.2 L 4,0 L 1.2,1.2 L 0,4 L -1.2,1.2 L -4,0 L -1.2,-1.2 Z" 
          fill="url(#starGradient)" stroke="#ffcc00" stroke-width="0.8" opacity="0.8"/>
  </g>
  
  <!-- Cosmic Sparkles and Details -->
  <g opacity="0.6">
    <circle cx="190" cy="55" r="0.8" fill="#ffffff"/>
    <circle cx="60" cy="110" r="0.5" fill="#ffff99"/>
    <circle cx="250" cy="160" r="0.6" fill="#ffffff"/>
    <circle cx="20" cy="190" r="0.4" fill="#ffcc99"/>
    <circle cx="280" cy="180" r="0.7" fill="#99ffff"/>
    <circle cx="120" cy="40" r="0.5" fill="#ff99ff"/>
  </g>
  
  <!-- Earth in the distance -->
  <circle cx="260" cy="260" r="18" fill="#4169E1" opacity="0.8"/>
  <path d="M 248 252 Q 260 245 272 252 Q 268 268 248 252" fill="#228B22" opacity="0.9"/>
  <path d="M 250 268 Q 265 260 275 268" fill="#228B22" opacity="0.7"/>
  <path d="M 245 260 Q 250 255 255 260" fill="#228B22" opacity="0.6"/>
  <!-- Earth's atmosphere glow -->
  <circle cx="260" cy="260" r="20" fill="none" stroke="#87CEEB" stroke-width="1" opacity="0.5"/>
  
  <!-- Final magical touches - floating stardust -->
  <g opacity="0.4">
    <circle cx="180" cy="90" r="0.3" fill="#ffffff"/>
    <circle cx="185" cy="85" r="0.2" fill="#ffff99"/>
    <circle cx="175" cy="95" r="0.25" fill="#ffffff"/>
    <circle cx="170" cy="88" r="0.2" fill="#ffcc99"/>
  </g>
</svg>
Llama 3.1 405B Instruct
Player 2
ELO: 762.428 759.349 (-3.1)
SVG by Llama 3.1 405B Instruct 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background Gradient -->
  <defs>
    <linearGradient id="spaceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#212121" />
      <stop offset="100%" stop-color="#121212" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="300" height="300" fill="url(#spaceGrad)" />
  
  <!-- Crescent Moon -->
  <path d="M150,100 C200,50 250,100 150,150 A100,50 0 0 0 150,100" fill="#E5E5EA" />
  <path d="M150,100 C100,50 50,100 150,150 A100,50 0 1 0 150,100" fill="#F7F7F7" />
  
  <!-- Astronaut -->
  <g transform="translate(120, 150)">
    <circle cx="0" cy="0" r="20" fill="#FFFFFF" />
    <path d="M-15,-20 C-10,-15 -5,-10 0,0 C5,10 10,15 15,20" stroke="#000000" stroke-width="2" fill="none" />
    <rect x="-10" y="-30" width="20" height="30" fill="#000000" rx="5" />
    <circle cx="0" cy="-40" r="10" fill="#FFC107" />
  </g>
  
  <!-- Fishing Rod -->
  <line x1="120" y1="170" x2="180" y2="220" stroke="#000000" stroke-width="2" />
  <circle cx="180" cy="220" r="5" fill="#000000" />
  <line x1="180" y1="220" x2="200" y2="250" stroke="#000000" stroke-width="2" />
  <polygon points="200,250 210,240 190,240" fill="#000000" />
  
  <!-- Stars -->
  <g>
    <circle cx="50" cy="50" r="5" fill="#FFC107" />
    <circle cx="100" cy="80" r="8" fill="#8BC34A" />
    <circle cx="250" cy="120" r="10" fill="#03A9F4" />
    <circle cx="200" cy="180" r="12" fill="#FF9800" />
  </g>
  
  <!-- Fishing Line -->
  <path d="M200,250 C220,220 240,190 250,160" stroke="#000000" stroke-width="1" fill="none" />
  <circle cx="250" cy="160" r="3" fill="#000000" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude Sonnet 4 Thinking (2025-05-14) Player 1

Judge's Analysis

    Player 1's submission adheres more closely to the prompt with a clear depiction of an astronaut fishing for stars on a crescent moon.

    The composition is detailed, engaging, and visually appealing, with a well-defined astronaut, moon, and stars.

    Player 2's abstract approach lacks clarity and does not effectively convey the theme as strongly as Player 1's submission.

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
95
Player 2
17
Rectangles

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

Player 1
8
Player 2
2
Circles

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

Player 1
50
Player 2
8
Ellipses

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

Player 1
16
Player 2
—
Lines

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

Player 1
3
Player 2
2
Polygons

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

Player 1
—
Player 2
1
Paths

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

Player 1
17
Player 2
4
Groups

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

Player 1
10
Player 2
2

Visual Effects Metrics

Gradients

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

Player 1
6
Player 2
1
Patterns

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

Player 1
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
39
Player 2
—
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
37
Player 2
4

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
46
Player 2
10

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
13
Player 2
1

Complexity Metrics

Path Commands

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

Player 1
93
Player 2
11
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
7
Player 2
1
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.