Back

SVG Drawing Match #2304

May 09, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A giraffe wearing a polka-dot spacesuit floating in zero gravity."

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 1

ELO: 1,357.38 1,361.55 (+4.2)

Winner

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions -->
  <defs>
    <!-- Space background gradient -->
    <radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#2a0159" />
      <stop offset="70%" stop-color="#120136" />
      <stop offset="100%" stop-color="#000011" />
    </radialGradient>
    
    <!-- Polka dot pattern for the spacesuit -->
    <pattern id="polkaDots" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="20" height="20" fill="#cc45dc" />
      <circle cx="10" cy="10" r="4" fill="#ff9eea" />
      <circle cx="20" cy="0" r="2.5" fill="#ff9eea" />
      <circle cx="0" cy="20" r="2.5" fill="#ff9eea" />
    </pattern>
    
    <!-- Helmet glass effect -->
    <linearGradient id="helmetGlass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c4fdff" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#8ad9f7" stop-opacity="0.7" />
    </linearGradient>
    
    <!-- Star glow filter -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Space background -->
  <rect width="300" height="300" fill="url(#spaceGradient)" />
  
  <!-- Distant planets -->
  <circle cx="50" cy="40" r="15" fill="#9553a0" opacity="0.7" />
  <ellipse cx="50" cy="45" rx="15" ry="3" fill="#6b3d73" opacity="0.7" />
  
  <circle cx="260" cy="50" r="25" fill="#8a67ab" />
  <circle cx="268" cy="45" r="7" fill="#7a5a9e" />
  <circle cx="250" cy="55" r="9" fill="#7a5a9e" />
  <ellipse cx="260" cy="58" rx="25" ry="5" fill="#6b3d73" opacity="0.5" />
  
  <!-- Stars (multiple sizes) -->
  <g id="stars">
    <!-- Small stars -->
    <g fill="white" filter="url(#starGlow)">
      <circle cx="30" cy="40" r="0.8" />
      <circle cx="70" cy="20" r="1.2" />
      <circle cx="120" cy="35" r="0.7" />
      <circle cx="180" cy="50" r="1.5" />
      <circle cx="220" cy="30" r="0.9" />
      <circle cx="250" cy="90" r="1.1" />
      <circle cx="40" cy="110" r="0.8" />
      <circle cx="90" cy="140" r="0.7" />
      <circle cx="150" cy="180" r="1.2" />
      <circle cx="200" cy="200" r="0.9" />
      <circle cx="230" cy="160" r="1.4" />
      <circle cx="260" cy="240" r="0.8" />
      <circle cx="30" cy="250" r="1.1" />
      <circle cx="100" cy="270" r="0.7" />
      <circle cx="170" cy="260" r="0.9" />
      <circle cx="270" cy="280" r="1.3" />
      <circle cx="80" cy="80" r="0.8" />
      <circle cx="280" cy="130" r="0.7" />
      <circle cx="20" cy="180" r="1.1" />
      <circle cx="140" cy="40" r="0.9" />
      <circle cx="190" cy="70" r="0.8" />
    </g>
    
    <!-- Larger, twinkling stars -->
    <g fill="#ffffc0" filter="url(#starGlow)">
      <path d="M110,60 L113,63 L116,60 L113,57 Z" />
      <path d="M240,190 L243,193 L246,190 L243,187 Z" />
      <path d="M70,220 L73,223 L76,220 L73,217 Z" />
      <path d="M210,120 L213,123 L216,120 L213,117 Z" />
    </g>
  </g>
  
  <!-- Floating nebula-like elements -->
  <ellipse cx="130" cy="30" rx="60" ry="15" fill="#4b0082" opacity="0.3" />
  <ellipse cx="200" cy="260" rx="70" ry="20" fill="#800080" opacity="0.2" />
  
  <!-- Giraffe in spacesuit -->
  <g id="giraffe">
    <!-- Spacesuit legs/boots -->
    <path d="M120,210 C115,230 120,250 130,255" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2.5" />
    <path d="M180,210 C185,230 180,250 170,255" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2.5" />
    <circle cx="130" cy="255" r="12" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2" />
    <circle cx="170" cy="255" r="12" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2" />
    
    <!-- Spacesuit body -->
    <ellipse cx="150" cy="170" rx="40" ry="50" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="3" />
    
    <!-- Giraffe body hints inside the suit -->
    <ellipse cx="150" cy="165" rx="30" ry="40" fill="#f4d03f" opacity="0.3" />
    <g fill="#b67d24" opacity="0.3">
      <ellipse cx="140" cy="150" rx="5" ry="6" />
      <ellipse cx="160" cy="160" rx="6" ry="7" />
      <ellipse cx="145" cy="180" rx="7" ry="5" />
      <ellipse cx="155" cy="195" rx="5" ry="6" />
    </g>
    
    <!-- Spacesuit arms/gloves -->
    <path d="M110,160 C90,155 70,165 65,180" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2.5" />
    <path d="M190,160 C210,155 230,165 235,180" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2.5" />
    <circle cx="65" cy="180" r="10" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2" />
    <circle cx="235" cy="180" r="10" fill="url(#polkaDots)" stroke="#ff45dc" stroke-width="2" />
    
    <!-- Spacesuit control panel -->
    <rect x="130" y="175" width="40" height="25" rx="3" fill="#333" stroke="#555" stroke-width="1" />
    <circle cx="140" cy="180" r="3" fill="#60efff" />
    <circle cx="140" cy="180" r="2" fill="#00cfff" />
    <circle cx="160" cy="180" r="3" fill="#ff6060" />
    <circle cx="160" cy="180" r="2" fill="#ff0000" />
    <rect x="135" y="190" width="30" height="5" rx="2" fill="#555" />
    <rect x="150" y="190" width="10" height="5" rx="2" fill="#60efff" />
    
    <!-- Oxygen backpack -->
    <rect x="135" y="120" width="30" height="30" rx="5" fill="#a030a0" stroke="#ff45dc" stroke-width="2" />
    <circle cx="142" cy="130" r="3" fill="#60efff" />
    <circle cx="158" cy="130" r="3" fill="#60efff" />
    <rect x="138" y="140" width="24" height="5" rx="2" fill="#ff45dc" />
    
    <!-- Oxygen tubes -->
    <path d="M142,130 C135,120 130,100 135,80" fill="none" stroke="#ff45dc" stroke-width="2" stroke-dasharray="2 1" />
    <path d="M158,130 C165,120 170,100 165,80" fill="none" stroke="#ff45dc" stroke-width="2" stroke-dasharray="2 1" />
    <circle cx="135" cy="80" r="3" fill="#60efff" stroke="#ff45dc" stroke-width="1" />
    <circle cx="165" cy="80" r="3" fill="#60efff" stroke="#ff45dc" stroke-width="1" />
    
    <!-- Giraffe neck inside spacesuit -->
    <path d="M150,160 C145,130 140,100 150,80" fill="#f4d03f" stroke="#d4a52c" stroke-width="1" />
    <path d="M150,160 C155,130 160,100 150,80" fill="#f2ca27" stroke="#d4a52c" stroke-width="0.5" />
    
    <!-- Giraffe spots on neck -->
    <g fill="#b67d24">
      <ellipse cx="147" cy="150" rx="3" ry="4" />
      <ellipse cx="153" cy="140" rx="4" ry="3" />
      <ellipse cx="146" cy="130" rx="3.5" ry="2.5" />
      <ellipse cx="154" cy="120" rx="2.5" ry="3" />
      <ellipse cx="148" cy="110" rx="3" ry="2" />
      <ellipse cx="152" cy="100" rx="2.5" ry="3.5" />
      <ellipse cx="147" cy="90" rx="3" ry="2.5" />
    </g>
    
    <!-- Spacesuit helmet -->
    <ellipse cx="150" cy="70" rx="25" ry="27" fill="url(#helmetGlass)" stroke="#ff45dc" stroke-width="3" />
    <ellipse cx="160" cy="65" rx="6" ry="8" fill="white" opacity="0.4" />
    
    <!-- Helmet HUD/UI elements -->
    <path d="M130,80 L135,75 L140,80" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    <path d="M160,80 L165,75 L170,80" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    <path d="M125,65 L130,65" fill="none" stroke="#ff6060" stroke-width="0.7" opacity="0.8" />
    <path d="M125,70 L132,70" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    <path d="M125,75 L135,75" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    
    <path d="M175,65 L170,65" fill="none" stroke="#ff6060" stroke-width="0.7" opacity="0.8" />
    <path d="M175,70 L168,70" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    <path d="M175,75 L165,75" fill="none" stroke="#60efff" stroke-width="0.7" opacity="0.8" />
    
    <!-- Helmet connection ring -->
    <ellipse cx="150" cy="95" rx="15" ry="5" fill="#ff45dc" stroke="#ff0099" stroke-width="1" />
    
    <!-- Giraffe head -->
    <ellipse cx="150" cy="60" rx="15" ry="20" fill="#f4d03f" />
    <path d="M135,70 L150,75 L165,70" fill="#f4d03f" stroke="#d4a52c" stroke-width="0.5" />
    
    <!-- Giraffe facial features -->
    <ellipse cx="143" cy="55" rx="3" ry="4" fill="white" />
    <ellipse cx="157" cy="55" rx="3" ry="4" fill="white" />
    <circle cx="143" cy="55" r="1.5" fill="black" />
    <circle cx="157" cy="55" r="1.5" fill="black" />
    <path d="M145,65 C148,68 152,68 155,65" stroke="#9e7c24" stroke-width="1" fill="none" />
    <path d="M143,51 C144,50 146,50 147,51" stroke="#222" stroke-width="0.7" fill="none" />
    <path d="M153,51 C154,50 156,50 157,51" stroke="#222" stroke-width="0.7" fill="none" />
    
    <!-- Giraffe ears -->
    <path d="M135,45 C130,40 132,35 136,37 C140,39 138,45 135,45" fill="#f4d03f" />
    <path d="M165,45 C170,40 168,35 164,37 C160,39 162,45 165,45" fill="#f4d03f" />
    
    <!-- Giraffe ossicones (horns) -->
    <path d="M143,40 C142,35 144,32 146,32 C148,32 147,35 146,40" fill="#f4d03f" stroke="#d4a52c" stroke-width="1" />
    <path d="M157,40 C158,35 156,32 154,32 C152,32 153,35 154,40" fill="#f4d03f" stroke="#d4a52c" stroke-width="1" />
    
    <!-- Giraffe spots on head -->
    <g fill="#b67d24">
      <ellipse cx="143" cy="45" rx="2.5" ry="2" />
      <ellipse cx="157" cy="45" rx="2" ry="2.5" />
      <ellipse cx="150" cy="50" rx="3" ry="2" />
      <ellipse cx="138" cy="60" rx="2.5" ry="2" />
      <ellipse cx="162" cy="60" rx="2" ry="2.5" />
    </g>
  </g>
  
  <!-- Zero gravity elements -->
  <g id="floating-elements">
    <!-- Floating small asteroids -->
    <path d="M70,110 C68,107 72,105 74,107 C76,109 73,112 70,110" fill="#aaa" />
    <path d="M230,150 C227,148 229,144 232,145 C235,146 233,152 230,150" fill="#999" />
    <path d="M120,230 C117,232 116,228 119,226 C122,224 123,228 120,230" fill="#aaa" />
    
    <!-- Floating bubbles -->
    <circle cx="50" cy="70" r="5" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="260" cy="170" r="8" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="100" cy="200" r="6" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="200" cy="90" r="10" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="85" cy="160" r="4" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="240" cy="130" r="7" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    <circle cx="40" cy="220" r="9" fill="none" stroke="#8df" stroke-width="1" opacity="0.7" />
    
    <!-- Motion lines to show floating -->
    <path d="M100,130 C110,125 120,135 130,130" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M170,120 C180,115 190,125 200,120" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M90,190 C100,185 110,195 120,190" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M190,220 C200,215 210,225 220,220" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    
    <!-- Additional floating curves for zero-g feeling -->
    <path d="M110,60 C115,55 120,58 125,55" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M160,40 C165,35 175,38 180,35" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M220,70 C225,65 230,68 235,65" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
    <path d="M70,250 C75,245 85,248 90,245" stroke="#8df" stroke-width="1" fill="none" opacity="0.5" />
  </g>
  
  <!-- Space debris/particles -->
  <g fill="white" opacity="0.6">
    <circle cx="40" cy="140" r="0.7" />
    <circle cx="65" cy="200" r="0.5" />
    <circle cx="90" cy="250" r="0.6" />
    <circle cx="140" cy="100" r="0.4" />
    <circle cx="180" cy="30" r="0.7" />
    <circle cx="220" cy="80" r="0.5" />
    <circle cx="250" cy="190" r="0.6" />
    <circle cx="270" cy="120" r="0.4" />
  </g>
</svg>

o4-mini low (2025-04-16)

Player 2

ELO: 1,027.62 1,023.45 (-4.2)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="bgGrad" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#1a1a2e"/>
      <stop offset="100%" stop-color="#000"/>
    </radialGradient>
    <linearGradient id="helmetGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="rgba(255,255,255,0.8)"/>
      <stop offset="100%" stop-color="rgba(200,200,255,0.2)"/>
    </linearGradient>
    <pattern id="polka" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="20" height="20" fill="#5f27cd"/>
      <circle cx="10" cy="10" r="4" fill="white"/>
    </pattern>
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGrad)"/>
  <!-- Stars -->
  <g filter="url(#starGlow)">
    <circle cx="20" cy="40" r="1.5" fill="#fff"/>
    <circle cx="80" cy="90" r="2" fill="#f5f5fa"/>
    <circle cx="240" cy="60" r="1.2" fill="#e0e0ff"/>
    <circle cx="150" cy="200" r="1.8" fill="#fff"/>
    <circle cx="270" cy="180" r="1.3" fill="#ccd1ff"/>
    <circle cx="50" cy="220" r="2.2" fill="#fafafa"/>
  </g>
  <!-- Floating planet -->
  <circle cx="260" cy="260" r="15" fill="url(#bgGrad)" opacity="0.6"/>
  <circle cx="260" cy="260" r="15" fill="none" stroke="#8888ff" stroke-width="1"/>
  <!-- Giraffe in spacesuit -->
  <g transform="translate(80,80) scale(1.2)">
    <!-- Helmet -->
    <ellipse cx="90" cy="40" rx="35" ry="30" fill="url(#helmetGrad)" stroke="#fff" stroke-width="2"/>
    <!-- Neck -->
    <rect x="75" y="70" width="30" height="100" fill="#ffe066" rx="5"/>
    <g fill="#ff9f1a">
      <circle cx="90" cy="80" r="8"/>
      <circle cx="100" cy="110" r="6"/>
      <circle cx="80" cy="130" r="7"/>
      <circle cx="95" cy="155" r="6"/>
    </g>
    <!-- Body in suit -->
    <path d="M60,170 L140,170 L155,210 L45,210 Z" fill="url(#polka)" stroke="#fff" stroke-width="2"/>
    <!-- Suit details -->
    <line x1="60" y1="170" x2="140" y2="170" stroke="#ddd" stroke-width="2" stroke-dasharray="4,4"/>
    <line x1="80" y1="170" x2="80" y2="210" stroke="#ddd" stroke-width="2" stroke-dasharray="3,3"/>
    <circle cx="125" cy="190" r="6" fill="#ff6b6b"/>
    <circle cx="110" cy="200" r="4" fill="#48dbfb"/>
    <!-- Legs floating -->
    <g stroke="#fff" stroke-width="2" stroke-linecap="round">
      <line x1="50" y1="210" x2="40" y2="240"/>
      <line x1="70" y1="210" x2="65" y2="240"/>
      <line x1="150" y1="210" x2="160" y2="240"/>
      <line x1="130" y1="210" x2="135" y2="240"/>
    </g>
    <!-- Head -->
    <path d="M90,20 
             c-15,5 -20,25 -10,35 
             c5,5 15,5 20,0 
             c10,-10 5,-30 -10,-35 Z" fill="#ffe066" stroke="#ff9f1a" stroke-width="2"/>
    <circle cx="85" cy="35" r="3" fill="#000"/>
    <circle cx="95" cy="35" r="3" fill="#000"/>
    <path d="M85,45 q5,5 10,0" stroke="#000" stroke-width="1" fill="none"/>
    <!-- Horns -->
    <path d="M85,15 L82,5" stroke="#ff9f1a" stroke-width="4" stroke-linecap="round"/>
    <path d="M95,15 L98,5" stroke="#ff9f1a" stroke-width="4" stroke-linecap="round"/>
  </g>
</svg>

GPT-4o

Judge & Evaluator

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

Judge's Analysis

Player 1's image is more creative and adheres better to the prompt, showcasing a giraffe in a vibrant polka-dot spacesuit with detailed zero-gravity elements like floating limbs and a rich cosmic background.

In contrast, Player 2's submission is simpler and less dynamic, with minimal detail on the spacesuit and a less engaging composition overall.

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

131

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

100

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.