Back

SVG Drawing Match #2560

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A cactus wearing sunglasses, holding a balloon, in the middle of a desert."

o4-mini low (2025-04-16)
Player 1
ELO: 1,041.223 1,036.127 (-5.1)
SVG by o4-mini low (2025-04-16) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FFDEE9"/>
      <stop offset="100%" stop-color="#B5FFFC"/>
    </linearGradient>
    <linearGradient id="sandGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#F7D794"/>
      <stop offset="100%" stop-color="#EFC76A"/>
    </linearGradient>
    <linearGradient id="cactusGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#6FCF97"/>
      <stop offset="100%" stop-color="#2D9CDB"/>
    </linearGradient>
    <radialGradient id="balloonGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FF8A80"/>
      <stop offset="100%" stop-color="#D32F2F"/>
    </radialGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="2" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.3"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="300" height="300" fill="url(#skyGrad)" />
  <g filter="url(#shadow)">
    <path d="M0,250 Q150,200 300,250 L300,300 L0,300 Z" fill="url(#sandGrad)" />
    <path d="M0,280 Q150,230 300,280 L300,300 L0,300 Z" fill="url(#sandGrad)" opacity="0.7"/>
  </g>

  <!-- Sun -->
  <circle cx="250" cy="50" r="40" fill="yellow" opacity="0.8"/>

  <!-- Cactus -->
  <g transform="translate(120,100)">
    <!-- Main body -->
    <path d="M30,150 Q40,50 70,50 Q100,50 90,150 Z" fill="url(#cactusGrad)" stroke="#2F8F9D" stroke-width="3"/>
    <!-- Left arm -->
    <path d="M40,100 Q10,90 20,130 Q25,160 40,155 Z" fill="url(#cactusGrad)" stroke="#2F8F9D" stroke-width="3"/>
    <!-- Right arm -->
    <path d="M80,100 Q110,90 100,130 Q95,160 80,155 Z" fill="url(#cactusGrad)" stroke="#2F8F9D" stroke-width="3"/>
    <!-- Spines -->
    <g stroke="#FFFFFF" stroke-width="1">
      <line x1="50" y1="60" x2="50" y2="45"/>
      <line x1="60" y1="70" x2="75" y2="65"/>
      <line x1="40" y1="80" x2="25" y2="75"/>
      <line x1="55" y1="100" x2="65" y2="90"/>
      <line x1="45" y1="120" x2="35" y2="110"/>
      <line x1="70" y1="140" x2="80" y2="130"/>
    </g>

    <!-- Sunglasses -->
    <g fill="#222">
      <rect x="50" y="60" width="20" height="10" rx="2"/>
      <rect x="80" y="60" width="20" height="10" rx="2"/>
      <line x1="70" y1="65" x2="80" y2="65" stroke="#222" stroke-width="2"/>
      <line x1="50" y1="65" x2="45" y2="60" stroke="#222" stroke-width="2"/>
      <line x1="100" y1="65" x2="105" y2="60" stroke="#222" stroke-width="2"/>
    </g>

    <!-- Smile -->
    <path d="M60,90 Q75,105 90,90" stroke="#444" stroke-width="3" fill="none" stroke-linecap="round"/>

    <!-- Balloon string -->
    <path d="M90,50 C95,80 110,100 110,120" stroke="#555" stroke-width="1.5" fill="none"/>

    <!-- Balloon -->
    <ellipse cx="110" cy="40" rx="20" ry="30" fill="url(#balloonGrad)" stroke="#B71C1C" stroke-width="2"/>
    <line x1="110" y1="65" x2="110" y2="75" stroke="#B71C1C" stroke-width="2"/>
  </g>

  <!-- Foreground cacti shadows -->
  <ellipse cx="155" cy="260" rx="60" ry="10" fill="#000" opacity="0.1"/>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,330.237 1,335.334 (+5.1)
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>
    <!-- Sky Gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1E90FF" />
      <stop offset="80%" stop-color="#87CEEB" />
    </linearGradient>
    
    <!-- Sand Gradient -->
    <linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#E8C06F" />
      <stop offset="50%" stop-color="#F2D2A9" />
      <stop offset="100%" stop-color="#E8C06F" />
    </linearGradient>
    
    <!-- Cactus Gradient -->
    <linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2E8B57" />
      <stop offset="50%" stop-color="#3CB371" />
      <stop offset="100%" stop-color="#2E8B57" />
    </linearGradient>
    
    <!-- Sun Gradient -->
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FFFF00" />
      <stop offset="100%" stop-color="#FFA500" />
    </radialGradient>
    
    <!-- Balloon Gradient -->
    <radialGradient id="balloonGradient" cx="50%" cy="40%" r="60%" fx="40%" fy="30%">
      <stop offset="0%" stop-color="#FF6347" />
      <stop offset="100%" stop-color="#DC143C" />
    </radialGradient>
    
    <!-- Small Cactus Gradient -->
    <linearGradient id="smallCactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#228B22" />
      <stop offset="100%" stop-color="#32CD32" />
    </linearGradient>
    
    <!-- Shadow Filter -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
      <feOffset dx="2" dy="2" result="offsetblur" />
      <feComponentTransfer>
        <feFuncA type="linear" slope="0.5" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
    
    <!-- Sand Pattern -->
    <pattern id="sandPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="0.5" fill="#D2B48C" fill-opacity="0.3" />
      <circle cx="0" cy="0" r="0.3" fill="#D2B48C" fill-opacity="0.3" />
      <circle cx="10" cy="10" r="0.4" fill="#D2B48C" fill-opacity="0.3" />
    </pattern>
    
    <!-- Balloon Pattern -->
    <pattern id="balloonPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="1" fill="#FFFFFF" fill-opacity="0.1" />
    </pattern>
    
    <!-- Cloud Filter -->
    <filter id="cloudFilter" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" />
    </filter>
  </defs>
  
  <!-- Sky -->
  <rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
  
  <!-- Clouds -->
  <g fill="white" filter="url(#cloudFilter)" opacity="0.7">
    <ellipse cx="60" cy="40" rx="20" ry="10" />
    <ellipse cx="50" cy="45" rx="15" ry="8" />
    <ellipse cx="70" cy="45" rx="18" ry="9" />
    
    <ellipse cx="240" cy="90" rx="25" ry="12" />
    <ellipse cx="225" cy="95" rx="18" ry="9" />
    <ellipse cx="255" cy="95" rx="22" ry="11" />
  </g>
  
  <!-- Sun -->
  <circle cx="250" cy="50" r="30" fill="url(#sunGradient)" />
  <g transform="translate(250, 50)">
    <line x1="0" y1="-40" x2="0" y2="-50" stroke="#FFA500" stroke-width="2" />
    <line x1="0" y1="40" x2="0" y2="50" stroke="#FFA500" stroke-width="2" />
    <line x1="-40" y1="0" x2="-50" y2="0" stroke="#FFA500" stroke-width="2" />
    <line x1="40" y1="0" x2="50" y2="0" stroke="#FFA500" stroke-width="2" />
    <line x1="-28" y1="-28" x2="-35" y2="-35" stroke="#FFA500" stroke-width="2" />
    <line x1="28" y1="-28" x2="35" y2="-35" stroke="#FFA500" stroke-width="2" />
    <line x1="-28" y1="28" x2="-35" y2="35" stroke="#FFA500" stroke-width="2" />
    <line x1="28" y1="28" x2="35" y2="35" stroke="#FFA500" stroke-width="2" />
  </g>
  
  <!-- Desert Ground -->
  <rect x="0" y="200" width="300" height="100" fill="url(#sandGradient)" />
  <rect x="0" y="200" width="300" height="100" fill="url(#sandPattern)" />
  
  <!-- Sand Dunes -->
  <path d="M0,200 Q75,180 150,200 T300,200 L300,300 L0,300 Z" fill="url(#sandGradient)" />
  <path d="M0,200 Q75,180 150,200 T300,200 L300,300 L0,300 Z" fill="url(#sandPattern)" />
  
  <!-- Distant Mountains -->
  <path d="M0,200 L30,170 L60,190 L100,160 L150,190 L300,200" fill="#B19CD9" fill-opacity="0.4" />
  
  <!-- Background Cacti -->
  <g transform="translate(40, 190)">
    <rect x="0" y="-20" width="10" height="25" rx="3" ry="3" fill="url(#smallCactusGradient)" />
    <rect x="-5" y="-15" width="5" height="10" rx="2" ry="2" fill="url(#smallCactusGradient)" />
    <rect x="10" y="-12" width="5" height="8" rx="2" ry="2" fill="url(#smallCactusGradient)" />
  </g>
  
  <g transform="translate(260, 195)">
    <rect x="0" y="-25" width="12" height="30" rx="4" ry="4" fill="url(#smallCactusGradient)" />
    <rect x="-6" y="-18" width="6" height="12" rx="2" ry="2" fill="url(#smallCactusGradient)" />
  </g>
  
  <!-- Small Rocks -->
  <ellipse cx="50" cy="230" rx="15" ry="10" fill="#A0522D" filter="url(#shadow)" />
  <ellipse cx="270" cy="250" rx="20" ry="12" fill="#8B4513" filter="url(#shadow)" />
  <ellipse cx="30" cy="260" rx="10" ry="8" fill="#CD853F" filter="url(#shadow)" />
  <ellipse cx="190" cy="240" rx="12" ry="7" fill="#A0522D" filter="url(#shadow)" />
  
  <!-- Tumbleweed -->
  <g transform="translate(220, 230)">
    <circle cx="0" cy="0" r="10" fill="#D2B48C" />
    <path d="M-10,0 C-5,-5 5,-5 10,0" fill="none" stroke="#A0522D" stroke-width="1" />
    <path d="M-10,0 C-5,5 5,5 10,0" fill="none" stroke="#A0522D" stroke-width="1" />
    <path d="M0,-10 C5,-5 5,5 0,10" fill="none" stroke="#A0522D" stroke-width="1" />
    <path d="M0,-10 C-5,-5 -5,5 0,10" fill="none" stroke="#A0522D" stroke-width="1" />
  </g>
  
  <!-- Main Cactus Shadow -->
  <ellipse cx="150" cy="240" rx="40" ry="10" fill="black" opacity="0.3" />
  
  <!-- Main Cactus -->
  <g filter="url(#shadow)">
    <!-- Main Stem -->
    <rect x="135" y="140" width="30" height="100" rx="10" ry="10" fill="url(#cactusGradient)" />
    
    <!-- Left Arm -->
    <path d="M135,170 H110 Q100,170 100,180 V200 Q100,210 110,210 H135" fill="url(#cactusGradient)" />
    
    <!-- Right Arm (holding balloon) -->
    <path d="M165,160 H190 Q200,160 200,170 V180 Q200,190 190,190 H165" fill="url(#cactusGradient)" />
    
    <!-- Cactus Top -->
    <ellipse cx="150" cy="140" rx="15" ry="15" fill="url(#cactusGradient)" />
    
    <!-- Flower on top - a little surprise! -->
    <g transform="translate(150, 125)">
      <circle cx="0" cy="0" r="5" fill="#FF69B4" />
      <circle cx="0" cy="0" r="2" fill="#FFFF00" />
      <g stroke="#FF69B4" stroke-width="1.5">
        <line x1="0" y1="-7" x2="0" y2="-10" />
        <line x1="5" y1="-5" x2="7" y2="-7" />
        <line x1="7" y1="0" x2="10" y2="0" />
        <line x1="5" y1="5" x2="7" y2="7" />
        <line x1="0" y1="7" x2="0" y2="10" />
        <line x1="-5" y1="5" x2="-7" y2="7" />
        <line x1="-7" y1="0" x2="-10" y2="0" />
        <line x1="-5" y1="-5" x2="-7" y2="-7" />
      </g>
    </g>
  </g>
  
  <!-- Cactus Spines -->
  <g stroke="#F8F8FF" stroke-width="1.5">
    <!-- Main Body Spines -->
    <line x1="145" y1="150" x2="140" y2="145" />
    <line x1="155" y1="150" x2="160" y2="145" />
    <line x1="145" y1="165" x2="140" y2="160" />
    <line x1="155" y1="165" x2="160" y2="160" />
    <line x1="145" y1="180" x2="140" y2="175" />
    <line x1="155" y1="180" x2="160" y2="175" />
    <line x1="145" y1="195" x2="140" y2="190" />
    <line x1="155" y1="195" x2="160" y2="190" />
    <line x1="145" y1="210" x2="140" y2="205" />
    <line x1="155" y1="210" x2="160" y2="205" />
    <line x1="145" y1="225" x2="140" y2="220" />
    <line x1="155" y1="225" x2="160" y2="220" />
    
    <!-- Left Arm Spines -->
    <line x1="115" y1="170" x2="115" y2="165" />
    <line x1="125" y1="170" x2="125" y2="165" />
    <line x1="115" y1="210" x2="115" y2="215" />
    <line x1="125" y1="210" x2="125" y2="215" />
    <line x1="105" y1="185" x2="100" y2="185" />
    <line x1="105" y1="195" x2="100" y2="195" />
    
    <!-- Right Arm Spines -->
    <line x1="175" y1="160" x2="175" y2="155" />
    <line x1="185" y1="160" x2="185" y2="155" />
    <line x1="175" y1="190" x2="175" y2="195" />
    <line x1="185" y1="190" x2="185" y2="195" />
    <line x1="195" y1="175" x2="200" y2="175" />
    <line x1="195" y1="185" x2="200" y2="185" />
  </g>
  
  <!-- Sunglasses -->
  <g transform="translate(130, 130)">
    <!-- Frames -->
    <rect x="0" y="0" width="40" height="15" rx="5" ry="5" fill="#000000" />
    
    <!-- Left lens -->
    <rect x="0" y="0" width="18" height="15" rx="5" ry="5" fill="#000000" />
    
    <!-- Right lens -->
    <rect x="22" y="0" width="18" height="15" rx="5" ry="5" fill="#000000" />
    
    <!-- Bridge -->
    <rect x="18" y="5" width="4" height="5" fill="#000000" />
    
    <!-- Temple arms -->
    <rect x="-5" y="7" width="7" height="2" fill="#000000" rx="1" ry="1" />
    <rect x="38" y="7" width="7" height="2" fill="#000000" rx="1" ry="1" />
    
    <!-- Reflection on glasses -->
    <path d="M3,3 L8,3 L6,8 L3,8 Z" fill="#FFFFFF" fill-opacity="0.6" />
    <path d="M25,3 L30,3 L28,8 L25,8 Z" fill="#FFFFFF" fill-opacity="0.6" />
  </g>
  
  <!-- Cactus Face -->
  <path d="M140,150 Q150,156 160,150" fill="none" stroke="#006400" stroke-width="2" stroke-linecap="round" />
  <!-- Rosy Cheeks -->
  <circle cx="137" cy="147" r="3" fill="#FF9999" fill-opacity="0.4" />
  <circle cx="163" cy="147" r="3" fill="#FF9999" fill-opacity="0.4" />
  
  <!-- Balloon -->
  <g transform="translate(200, 160)">
    <!-- Balloon String with slight wave -->
    <path d="M-10,0 C-5,-20 -8,-40 0,-70" fill="none" stroke="#000000" stroke-width="1" />
    
    <!-- Balloon -->
    <ellipse cx="0" cy="-90" rx="15" ry="20" fill="url(#balloonGradient)" />
    <ellipse cx="0" cy="-90" rx="15" ry="20" fill="url(#balloonPattern)" />
    
    <!-- Balloon Tie -->
    <path d="M0,-70 C2,-73 3,-71 0,-69 C-3,-71 -2,-73 0,-70" fill="#DC143C" />
    
    <!-- Balloon Reflection -->
    <ellipse cx="-5" cy="-95" rx="3" ry="5" fill="#FFFFFF" fill-opacity="0.6" />
    
    <!-- Balloon Surface Details -->
    <path d="M0,-105 C5,-100 5,-80 0,-75" fill="none" stroke="#FFFFFF" stroke-width="1" stroke-opacity="0.5" />
    
    <!-- Balloon Text -->
    <text x="0" y="-87" font-family="Arial" font-size="8" fill="white" text-anchor="middle" font-weight="bold">HELLO!</text>
  </g>
  
  <!-- Heat Waves -->
  <g stroke="#FFFFFF" stroke-width="0.5" stroke-opacity="0.3">
    <path d="M80,180 Q85,175 90,180 Q95,185 100,180" fill="none" />
    <path d="M70,160 Q75,155 80,160 Q85,165 90,160" fill="none" />
    <path d="M220,170 Q225,165 230,170 Q235,175 240,170" fill="none" />
    <path d="M230,150 Q235,145 240,150 Q245,155 250,150" fill="none" />
  </g>
  
  <!-- Little Bird -->
  <g transform="translate(90, 100)">
    <path d="M0,0 L5,5 L-5,5 Z" fill="#6A5ACD" />
    <circle cx="0" cy="3" r="3" fill="#6A5ACD" />
    <circle cx="2" cy="2" r="1" fill="white" />
    <path d="M-2,6 L0,10 L2,6" fill="#6A5ACD" />
    <path d="M-5,0 L5,0" fill="none" stroke="#6A5ACD" stroke-width="1" />
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 2

Judge's Analysis

    Player 2's submission is more visually detailed and creative, with additional elements like other desert plants, rocks, and a vibrant sky.

    The cactus is more expressive, adorned with flowers and holding a balloon with text, which enhances its personality.

    While Player 1's design is simple and adheres to the prompt, Player 2's submission demonstrates higher technical quality and visual appeal.

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
23
Player 2
104
Rectangles

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

Player 1
3
Player 2
15
Circles

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

Player 1
1
Player 2
12
Ellipses

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

Player 1
2
Player 2
15
Lines

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

Player 1
10
Player 2
40
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
7
Player 2
22
Groups

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

Player 1
4
Player 2
13

Visual Effects Metrics

Gradients

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

Player 1
4
Player 2
6
Patterns

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

Player 1
—
Player 2
2
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
11
Player 2
19

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
16
Player 2
24

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

Complexity Metrics

Path Commands

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

Player 1
26
Player 2
78
Max Group Nesting

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

Player 1
1
Player 2
2
Defs Elements

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

Player 1
5
Player 2
10
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
1

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.

Similar Challenges

Match #2729 May 10, 2025

"Cat balancing on a unicycle across a tightrope over a canyon at sunset."

P1
SVG by o4-mini low (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini low (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2641 May 09, 2025

"A levitating teacup pouring rainbow tea into a cloud-shaped saucer."

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o4-mini low (2025-04-16)
View
Match #2306 May 09, 2025

"A flying toaster chasing a bagel through a rainbow."

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o4-mini low (2025-04-16)
View
Match #2304 May 09, 2025

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

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o4-mini low (2025-04-16)
View