Back

SVG Drawing Match #871

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Flying cactus wearing headphones"

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 1

ELO: 1,296.849 1,307.884 (+11.0)

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>
    <!-- Gradients -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1E88E5" />
      <stop offset="100%" style="stop-color:#64B5F6" />
    </linearGradient>
    
    <linearGradient id="cactusGradient" x1="30%" y1="0%" x2="70%" y2="100%">
      <stop offset="0%" style="stop-color:#43A047" />
      <stop offset="50%" style="stop-color:#388E3C" />
      <stop offset="100%" style="stop-color:#2E7D32" />
    </linearGradient>
    
    <linearGradient id="cactusHighlight" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#66BB6A" />
      <stop offset="100%" style="stop-color:#43A047" />
    </linearGradient>
    
    <linearGradient id="leftWingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#B3E5FC" />
      <stop offset="100%" style="stop-color:#29B6F6" />
    </linearGradient>
    
    <linearGradient id="rightWingGradient" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#B3E5FC" />
      <stop offset="100%" style="stop-color:#29B6F6" />
    </linearGradient>
    
    <linearGradient id="headphoneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#FF6D00" />
      <stop offset="100%" style="stop-color:#E65100" />
    </linearGradient>
    
    <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:white;stop-opacity:0" />
    </radialGradient>
    
    <!-- Patterns -->
    <pattern id="spinePattern" patternUnits="userSpaceOnUse" width="10" height="10">
      <line x1="5" y1="0" x2="5" y2="3" stroke="white" stroke-width="1" opacity="0.6" />
      <line x1="0" y1="5" x2="3" y2="5" stroke="white" stroke-width="1" opacity="0.6" />
    </pattern>
    
    <!-- Filters -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="softShadow" 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.3" />
      </feComponentTransfer>
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  
  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Sun with rays -->
  <g transform="translate(250, 50)">
    <circle cx="0" cy="0" r="18" fill="#FFEB3B" />
    <circle cx="0" cy="0" r="12" fill="#FFF59D" />
    
    <!-- Sun rays -->
    <g stroke="#FFD54F" stroke-width="2" stroke-linecap="round">
      <line x1="0" y1="-25" x2="0" y2="-35" />
      <line x1="17.7" y1="-17.7" x2="24.7" y2="-24.7" />
      <line x1="25" y1="0" x2="35" y2="0" />
      <line x1="17.7" y1="17.7" x2="24.7" y2="24.7" />
      <line x1="-17.7" y1="-17.7" x2="-24.7" y2="-24.7" />
      <line x1="-25" y1="0" x2="-35" y2="0" />
      <line x1="-17.7" y1="17.7" x2="-24.7" y2="24.7" />
    </g>
  </g>
  
  <!-- Clouds -->
  <g>
    <!-- Cloud group 1 -->
    <g transform="translate(60, 50)">
      <ellipse cx="0" cy="0" rx="30" ry="20" fill="white" opacity="0.8" />
      <ellipse cx="25" cy="5" rx="25" ry="15" fill="white" opacity="0.8" />
      <ellipse cx="-20" cy="5" rx="20" ry="13" fill="white" opacity="0.8" />
    </g>
    
    <!-- Cloud group 2 -->
    <g transform="translate(200, 40)">
      <ellipse cx="0" cy="0" rx="35" ry="22" fill="white" opacity="0.8" />
      <ellipse cx="30" cy="5" rx="25" ry="15" fill="white" opacity="0.8" />
      <ellipse cx="-25" cy="8" rx="22" ry="14" fill="white" opacity="0.8" />
    </g>
    
    <!-- Smaller individual clouds -->
    <ellipse cx="140" cy="70" rx="20" ry="12" fill="white" opacity="0.7" />
    <ellipse cx="250" cy="110" rx="15" ry="10" fill="white" opacity="0.7" />
    <ellipse cx="90" cy="100" rx="18" ry="11" fill="white" opacity="0.7" />
  </g>
  
  <!-- Motion lines -->
  <g stroke="white" stroke-width="2" stroke-linecap="round" opacity="0.7">
    <path d="M30,160 C40,150 60,170 70,160 C80,150 90,170 100,160" fill="none" />
    <path d="M20,190 C30,180 50,200 60,190 C70,180 80,200 90,190" fill="none" />
    <path d="M40,130 C50,120 70,140 80,130 C90,120 100,140 110,130" fill="none" />
  </g>
  
  <!-- Flying glow effect -->
  <ellipse cx="150" cy="160" rx="80" ry="40" fill="url(#glowGradient)" opacity="0.4" />
  
  <!-- Left wing -->
  <g>
    <!-- Main wing shape -->
    <path d="M120,150 C90,130 75,100 85,70 C95,40 115,40 135,80 C140,90 130,140 120,150 Z" fill="url(#leftWingGradient)" />
    
    <!-- Wing details -->
    <path d="M120,150 C90,130 75,100 85,70 C95,40 115,40 135,80 C140,90 130,140 120,150" fill="none" stroke="#29B6F6" stroke-width="1" />
    
    <!-- Feather lines -->
    <path d="M110,140 L90,110 M115,130 L95,95 M120,120 L105,80" stroke="#29B6F6" stroke-width="1.2" stroke-linecap="round" fill="none" />
    
    <!-- Small decorative dots -->
    <circle cx="100" cy="115" r="1.5" fill="#B3E5FC" />
    <circle cx="110" cy="100" r="1.5" fill="#B3E5FC" />
    <circle cx="115" cy="85" r="1.5" fill="#B3E5FC" />
  </g>
  
  <!-- Right wing -->
  <g>
    <!-- Main wing shape -->
    <path d="M180,150 C210,130 225,100 215,70 C205,40 185,40 165,80 C160,90 170,140 180,150 Z" fill="url(#rightWingGradient)" />
    
    <!-- Wing details -->
    <path d="M180,150 C210,130 225,100 215,70 C205,40 185,40 165,80 C160,90 170,140 180,150" fill="none" stroke="#29B6F6" stroke-width="1" />
    
    <!-- Feather lines -->
    <path d="M190,140 L210,110 M185,130 L205,95 M180,120 L195,80" stroke="#29B6F6" stroke-width="1.2" stroke-linecap="round" fill="none" />
    
    <!-- Small decorative dots -->
    <circle cx="200" cy="115" r="1.5" fill="#B3E5FC" />
    <circle cx="190" cy="100" r="1.5" fill="#B3E5FC" />
    <circle cx="185" cy="85" r="1.5" fill="#B3E5FC" />
  </g>
  
  <!-- Main cactus body -->
  <g filter="url(#softShadow)">
    <!-- Main stem -->
    <path d="M135,140 C135,100 165,100 165,140 L165,220 C165,250 135,250 135,220 L135,140 Z" fill="url(#cactusGradient)" />
    
    <!-- Left arm -->
    <path d="M135,170 C115,170 95,150 95,130 C95,110 110,110 110,130 L110,150 C110,160 135,160 135,170 Z" fill="url(#cactusGradient)" />
    
    <!-- Right arm -->
    <path d="M165,170 C185,170 205,150 205,130 C205,110 190,110 190,130 L190,150 C190,160 165,160 165,170 Z" fill="url(#cactusGradient)" />
    
    <!-- Highlight curves -->
    <path d="M145,140 C145,110 155,110 155,140" fill="none" stroke="url(#cactusHighlight)" stroke-width="3" opacity="0.7" />
    <path d="M105,130 C105,120 115,120 115,130" fill="none" stroke="url(#cactusHighlight)" stroke-width="2" opacity="0.7" />
    <path d="M195,130 C195,120 185,120 185,130" fill="none" stroke="url(#cactusHighlight)" stroke-width="2" opacity="0.7" />
    
    <!-- Cactus spines pattern -->
    <g opacity="0.6">
      <rect x="135" y="140" width="30" height="80" fill="url(#spinePattern)" />
      <path d="M135,170 C115,170 95,150 95,130 C95,110 110,110 110,130 L110,150 C110,160 135,160 135,170 Z" fill="url(#spinePattern)" />
      <path d="M165,170 C185,170 205,150 205,130 C205,110 190,110 190,130 L190,150 C190,160 165,160 165,170 Z" fill="url(#spinePattern)" />
    </g>
    
    <!-- Individual spines - main body -->
    <g stroke="white" stroke-width="1" opacity="0.9">
      <line x1="135" y1="150" x2="125" y2="145" />
      <line x1="135" y1="165" x2="125" y2="160" />
      <line x1="135" y1="180" x2="125" y2="175" />
      <line x1="135" y1="195" x2="125" y2="190" />
      <line x1="135" y1="210" x2="125" y2="205" />
      
      <line x1="165" y1="150" x2="175" y2="145" />
      <line x1="165" y1="165" x2="175" y2="160" />
      <line x1="165" y1="180" x2="175" y2="175" />
      <line x1="165" y1="195" x2="175" y2="190" />
      <line x1="165" y1="210" x2="175" y2="205" />
    </g>
    
    <!-- Individual spines - arms -->
    <g stroke="white" stroke-width="1" opacity="0.9">
      <line x1="105" y1="130" x2="95" y2="125" />
      <line x1="110" y1="140" x2="100" y2="138" />
      <line x1="120" y1="150" x2="115" y2="158" />
      
      <line x1="195" y1="130" x2="205" y2="125" />
      <line x1="190" y1="140" x2="200" y2="138" />
      <line x1="180" y1="150" x2="185" y2="158" />
    </g>
  </g>
  
  <!-- Headphones -->
  <g filter="url(#softShadow)">
    <!-- Headphone band -->
    <path d="M125,110 C125,85 175,85 175,110" stroke="url(#headphoneGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    
    <!-- Headphone band details -->
    <path d="M125,106 C125,86 175,86 175,106" stroke="#FFA726" stroke-width="1.5" fill="none" />
    <path d="M125,114 C125,94 175,94 175,114" stroke="#E65100" stroke-width="1.5" fill="none" />
    
    <!-- Headphone connection to music player -->
    <path d="M150,110 C150,130 160,140 170,145 C180,150 190,160 190,180" fill="none" stroke="#E65100" stroke-width="2" stroke-dasharray="2,1" />
    <circle cx="190" cy="180" r="5" fill="#E65100" />
    <rect x="186" y="180" width="8" height="12" rx="2" ry="2" fill="#E65100" />
    
    <!-- Left earpiece -->
    <circle cx="125" cy="115" r="15" fill="url(#headphoneGradient)" />
    <circle cx="125" cy="115" r="10" fill="#444444" />
    <circle cx="125" cy="115" r="5" fill="#222222" />
    <circle cx="125" cy="115" r="2" fill="#FFCC80" opacity="0.9" />
    
    <!-- Right earpiece -->
    <circle cx="175" cy="115" r="15" fill="url(#headphoneGradient)" />
    <circle cx="175" cy="115" r="10" fill="#444444" />
    <circle cx="175" cy="115" r="5" fill="#222222" />
    <circle cx="175" cy="115" r="2" fill="#FFCC80" opacity="0.9" />
  </g>
  
  <!-- Cactus face -->
  <g transform="translate(150, 180)">
    <!-- Eyes -->
    <g>
      <!-- Left eye -->
      <ellipse cx="-10" cy="0" rx="4" ry="5" fill="black" />
      <!-- Left eye highlight -->
      <circle cx="-11" cy="-2" r="1.5" fill="white" />
      
      <!-- Right eye -->
      <ellipse cx="10" cy="0" rx="4" ry="5" fill="black" />
      <!-- Right eye highlight -->
      <circle cx="9" cy="-2" r="1.5" fill="white" />
      
      <!-- Eyebrows -->
      <path d="M-15,-6 C-12,-8 -5,-8 -5,-6" stroke="black" stroke-width="1.5" fill="none" />
      <path d="M15,-6 C12,-8 5,-8 5,-6" stroke="black" stroke-width="1.5" fill="none" />
    </g>
    
    <!-- Mouth -->
    <path d="M-12,10 C-5,18 5,18 12,10" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" />
    
    <!-- Cheeks -->
    <circle cx="-15" cy="8" r="4" fill="#E57373" opacity="0.6" />
    <circle cx="15" cy="8" r="4" fill="#E57373" opacity="0.6" />
  </g>
  
  <!-- Music notes -->
  <g>
    <!-- Note 1 -->
    <g transform="translate(215, 120) rotate(-10)" filter="url(#glow)">
      <path d="M0,0 C1,-5 8,-3 8,0 C8,3 1,5 0,0 M8,0 L8,-15 L2,-17 L2,-2 Z" fill="black" />
    </g>
    
    <!-- Note 2 -->
    <g transform="translate(85, 100) rotate(-20)" filter="url(#glow)">
      <path d="M0,0 C1,-5 8,-3 8,0 C8,3 1,5 0,0 M8,0 L8,-15 L2,-17 L2,-2 Z" fill="black" />
    </g>
    
    <!-- Note 3 -->
    <g transform="translate(235, 170) rotate(15)" filter="url(#glow)">
      <path d="M0,0 C1,-5 8,-3 8,0 C8,3 1,5 0,0 M8,0 L8,-15 L2,-17 L2,-2 Z" fill="black" />
    </g>
  </g>
  
  <!-- Small stars -->
  <g fill="white" opacity="0.8">
    <circle cx="50" cy="200" r="1.5" />
    <circle cx="75" cy="220" r="1" />
    <circle cx="100" cy="180" r="1.5" />
    <circle cx="200" cy="230" r="1" />
    <circle cx="250" cy="200" r="1.5" />
    <circle cx="230" cy="170" r="1" />
    <circle cx="180" cy="190" r="1.5" />
  </g>
</svg>

GPT-4o (2024-11-20)

Player 2

ELO: 1,185.367 1,174.332 (-11.0)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="headphonesGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ff6f61"/>
      <stop offset="100%" stop-color="#f44b42"/>
    </radialGradient>
    <linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#6bdb8c"/>
      <stop offset="100%" stop-color="#2d824f"/>
    </linearGradient>
    <radialGradient id="cloudGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#d9e9eb"/>
    </radialGradient>
    <pattern id="cactusSpikes" patternUnits="userSpaceOnUse" width="10" height="10">
      <circle cx="1" cy="1" r="1" fill="#4a7d4a"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="skyblue"/>
  <g transform="translate(150,150)">
    <ellipse rx="60" ry="100" fill="url(#cactusGradient)" stroke="#3a7546" stroke-width="3"/>
    <ellipse rx="10" ry="15" fill="url(#cactusGradient)" transform="translate(-45,-85) rotate(-20)"/>
    <ellipse rx="10" ry="15" fill="url(#cactusGradient)" transform="translate(45,-85) rotate(20)"/>
    <circle fill="url(#cactusSpikes)" cx="0" cy="0" r="60"/>
  </g>
  <g transform="translate(150,50)">
    <circle cx="0" cy="0" r="20" fill="url(#headphonesGradient)" stroke="#900" stroke-width="2"/>
    <rect x="-30" y="0" width="60" height="5" fill="#300"/>
    <rect x="-50" y="-2.5" width="20" height="5" fill="url(#headphonesGradient)" transform="rotate(15)"/>
    <rect x="30" y="-2.5" width="20" height="5" fill="url(#headphonesGradient)" transform="rotate(-15)"/>
  </g>
  <g transform="translate(100,200)">
    <ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#cloudGradient)" opacity="0.8"/>
  </g>
  <g transform="translate(200,220)">
    <ellipse cx="0" cy="0" rx="50" ry="15" fill="url(#cloudGradient)" opacity="0.8"/>
  </g>
  <g transform="translate(250,90)">
    <ellipse cx="0" cy="0" rx="60" ry="20" fill="url(#cloudGradient)" opacity="0.9"/>
  </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 creatively incorporates wings, a smiling face, and headphones, effectively conveying the idea of a 'flying cactus wearing headphones.' The use of colors and additional elements like clouds and the sun enhances visual appeal and adds a playful touch.

Player 2's image lacks the dynamic elements and clarity needed to fully express the concept.

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

114

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.