Back

SVG Drawing Match #2005

Mar 14, 2025

GPT-4o

Challenge Creator

Creative Challenge

"An octopus playing a grand piano at a coral reef concert"

o3-mini high (2025-01-31)

Player 1

ELO: 1,104.949 1,095.668 (-9.3)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#4facfe"/>
      <stop offset="100%" stop-color="#00f2fe"/>
    </linearGradient>
    <radialGradient id="octoGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#b388eb"/>
      <stop offset="100%" stop-color="#6c5ce7"/>
    </radialGradient>
    <linearGradient id="pianoGrad" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0%" stop-color="#fff"/>
      <stop offset="100%" stop-color="#ccc"/>
    </linearGradient>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGrad)"/>
  
  <!-- Coral Reef -->
  <g id="coral">
    <path d="M10,280 Q20,260 30,280 T50,280 Q60,260 70,280 T90,280 L90,300 L10,300 Z" fill="#ff6f61"/>
    <path d="M100,285 Q115,265 130,285 T160,285 Q175,265 190,285 T220,285 L220,300 L100,300 Z" fill="#ff9f43"/>
    <path d="M210,280 Q220,265 230,280 T250,280 Q260,265 270,280 T290,280 L290,300 L210,300 Z" fill="#ff6f61"/>
    <path d="M50,300 Q55,270 60,300" stroke="#2ecc71" stroke-width="2" fill="none"/>
    <path d="M80,300 Q85,270 90,300" stroke="#2ecc71" stroke-width="2" fill="none"/>
  </g>
  
  <!-- Grand Piano -->
  <g id="piano">
    <path d="M60,170 C50,150 80,130 110,130 L190,130 C220,130 250,150 240,170 L240,210 C250,230 220,250 190,250 L110,250 C80,250 50,230 60,210 Z" fill="url(#pianoGrad)" stroke="#999" stroke-width="2"/>
    <g id="keys">
      <rect x="130" y="140" width="8" height="12" fill="white" stroke="black" stroke-width="0.5"/>
      <rect x="140" y="140" width="8" height="12" fill="white" stroke="black" stroke-width="0.5"/>
      <rect x="150" y="140" width="8" height="12" fill="white" stroke="black" stroke-width="0.5"/>
      <rect x="160" y="140" width="8" height="12" fill="white" stroke="black" stroke-width="0.5"/>
      <rect x="170" y="140" width="8" height="12" fill="white" stroke="black" stroke-width="0.5"/>
      <rect x="135" y="138" width="4" height="8" fill="black"/>
      <rect x="155" y="138" width="4" height="8" fill="black"/>
    </g>
  </g>
  
  <!-- Musical Notes -->
  <g id="notes" opacity="0.8">
    <g transform="translate(210,70)">
      <ellipse cx="0" cy="0" rx="3" ry="4" fill="purple"/>
      <path d="M3,0 L3,-10 Q3,-12 5,-11" stroke="purple" stroke-width="2" fill="none"/>
    </g>
    <g transform="translate(230,80)">
      <ellipse cx="0" cy="0" rx="2.5" ry="3.5" fill="magenta"/>
      <path d="M2.5,0 L2.5,-8" stroke="magenta" stroke-width="2" fill="none"/>
    </g>
    <g transform="translate(220,100)">
      <ellipse cx="0" cy="0" rx="2" ry="3" fill="violet"/>
      <path d="M2,0 L2,-7 Q2,-9 4,-8" stroke="violet" stroke-width="2" fill="none"/>
    </g>
  </g>
  
  <!-- Octopus Playing -->
  <g id="octopus">
    <!-- Tentacles -->
    <path d="M138,125 C130,135 132,145 128,150" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M144,125 C136,135 134,145 135,155" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M148,125 C141,135 139,145 140,160" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M150,125 C150,135 150,145 150,165" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M152,125 C155,135 158,145 160,165" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M156,125 C160,135 163,145 165,160" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M162,125 C165,135 168,145 170,155" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <path d="M166,125 C172,135 176,145 180,150" stroke="#6c5ce7" stroke-width="3" fill="none" stroke-linecap="round"/>
    <!-- Head -->
    <circle cx="150" cy="120" r="10" fill="url(#octoGrad)" stroke="#6c5ce7" stroke-width="1"/>
    <!-- Eyes -->
    <circle cx="146" cy="116" r="1.5" fill="white"/>
    <circle cx="154" cy="116" r="1.5" fill="white"/>
    <circle cx="146" cy="116" r="0.7" fill="black"/>
    <circle cx="154" cy="116" r="0.7" fill="black"/>
  </g>
</svg>

Claude 3.7 Sonnet (2025-02-19)

Player 2

ELO: 1,260.45 1,269.732 (+9.3)

Winner

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a2463" />
      <stop offset="50%" stop-color="#1e5f8c" />
      <stop offset="100%" stop-color="#3e92cc" />
    </linearGradient>
    
    <radialGradient id="spotlightGradient" cx="150" cy="70" r="180" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#fffce8" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#fffce8" stop-opacity="0" />
    </radialGradient>
    
    <pattern id="bubblePattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="white" opacity="0.3" />
      <circle cx="30" cy="20" r="1.5" fill="white" opacity="0.2" />
      <circle cx="25" cy="35" r="2.5" fill="white" opacity="0.2" />
    </pattern>
    
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="4" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Ocean background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#oceanGradient)" />
  
  <!-- Bubbles pattern -->
  <rect x="0" y="0" width="300" height="300" fill="url(#bubblePattern)" />
  
  <!-- Spotlight effect -->
  <circle cx="150" cy="70" r="180" fill="url(#spotlightGradient)" />
  
  <!-- Coral reef -->
  <path d="M0,240 C20,230 30,250 50,235 C70,220 80,240 100,225 C120,210 130,230 150,215 C170,200 190,230 210,215 C230,200 250,220 270,210 C290,220 300,230 300,240 L300,300 L0,300 Z" fill="#d07973" />
  <path d="M0,250 C20,240 40,260 60,245 C80,230 100,250 120,235 C140,220 160,240 180,225 C200,210 220,240 240,225 C260,210 280,230 300,250 L300,300 L0,300 Z" fill="#f4978e" />
  
  <!-- Various corals -->
  <path d="M40,240 Q45,220 50,240 Q55,220 60,240 Q65,220 70,240 Z" fill="#8b5fbf" />
  <path d="M90,230 Q95,210 100,230 Q105,210 110,230 Q115,210 120,230 Z" fill="#c17e61" />
  <path d="M220,235 Q225,215 230,235 Q235,215 240,235 Q245,215 250,235 Z" fill="#ffa987" />
  <path d="M260,245 C265,225 270,245 275,225 C280,245 285,225 290,245" fill="none" stroke="#a7c957" stroke-width="3" />
  <path d="M150,240 C155,220 160,240 165,220 C170,240 175,220 180,240" fill="none" stroke="#a7c957" stroke-width="2" />
  
  <!-- Small fish -->
  <g transform="translate(20,130) rotate(-10)">
    <path d="M0,0 L10,5 L0,10 Z" fill="#ffcb69" />
    <circle cx="2" cy="5" r="1" fill="black" />
  </g>
  <g transform="translate(280,100) rotate(180)">
    <path d="M0,0 L10,5 L0,10 Z" fill="#ff7b9c" />
    <circle cx="2" cy="5" r="1" fill="black" />
  </g>
  <g transform="translate(250,150) rotate(160)">
    <path d="M0,0 L12,6 L0,12 Z" fill="#7bdff2" />
    <circle cx="3" cy="6" r="1.2" fill="black" />
  </g>
  
  <!-- Grand piano -->
  <g transform="translate(150,170)">
    <path d="M-40,-30 L20,-30 C30,-30 40,-20 40,-10 L40,30 L-40,30 Z" fill="#1a1a1a" />
    <path d="M-40,-30 L-45,-25 L-45,35 L-40,30 Z" fill="#0d0d0d" />
    <path d="M40,30 L45,35 L45,-5 C45,-15 35,-25 25,-25 L20,-30 C30,-30 40,-20 40,-10 Z" fill="#0d0d0d" />
    <path d="M-40,30 L-45,35 L45,35 L40,30 Z" fill="#0d0d0d" />
    
    <!-- Piano lid -->
    <path d="M-40,-30 L20,-30 C30,-30 40,-40 35,-50 L-25,-50 Z" fill="#1a1a1a" />
    <path d="M-40,-30 L-25,-50 C-15,-45 25,-45 35,-50 C40,-40 30,-30 20,-30 Z" fill="#333333" />
    
    <!-- Piano keys -->
    <rect x="-35" y="-28" width="70" height="18" fill="white" />
    <rect x="-32" y="-28" width="3" height="12" fill="black" />
    <rect x="-25" y="-28" width="3" height="12" fill="black" />
    <rect x="-18" y="-28" width="3" height="12" fill="black" />
    <rect x="-4" y="-28" width="3" height="12" fill="black" />
    <rect x="3" y="-28" width="3" height="12" fill="black" />
    <rect x="10" y="-28" width="3" height="12" fill="black" />
    <rect x="17" y="-28" width="3" height="12" fill="black" />
    <rect x="24" y="-28" width="3" height="12" fill="black" />
    <rect x="31" y="-28" width="3" height="12" fill="black" />
    
    <!-- Piano stool -->
    <rect x="-10" y="35" width="20" height="5" fill="#3a3a3a" />
    <rect x="-8" y="40" width="16" height="15" fill="#222222" />
  </g>
  
  <!-- Octopus -->
  <g transform="translate(140,130)">
    <!-- Octopus head -->
    <ellipse cx="0" cy="-15" rx="25" ry="30" fill="#7b3c98" />
    <ellipse cx="0" cy="-15" rx="22" ry="27" fill="#9d4edd" />
    
    <!-- Octopus eyes -->
    <circle cx="-10" cy="-25" r="6" fill="white" />
    <circle cx="10" cy="-25" r="6" fill="white" />
    <circle cx="-10" cy="-25" r="3" fill="black" />
    <circle cx="10" cy="-25" r="3" fill="black" />
    <circle cx="-11" cy="-26" r="1" fill="white" />
    <circle cx="9" cy="-26" r="1" fill="white" />
    
    <!-- Octopus tentacles -->
    <!-- Playing tentacles -->
    <path d="M-20,-5 C-25,5 -30,15 -20,25 C-15,30 -10,32 -5,28" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    <path d="M-10,0 C-15,10 -20,20 -10,30 C-5,35 0,38 5,32" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    
    <!-- Other tentacles -->
    <path d="M2,10 C5,20 10,30 20,25 C25,22 25,15 20,10" fill="none" stroke="#9d4edd" stroke-width="5" stroke-linecap="round" />
    <path d="M10,5 C20,15 30,20 35,10 C38,0 32,-5 25,0" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    <path d="M-15,5 C-25,15 -40,15 -45,5 C-48,-5 -40,-10 -35,-5" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    <path d="M-5,8 C-15,18 -22,30 -10,40 C0,45 10,40 5,35" fill="none" stroke="#9d4edd" stroke-width="5" stroke-linecap="round" />
    <path d="M15,0 C25,10 35,25 25,35 C15,40 5,35 10,25" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    <path d="M-25,-5 C-35,0 -45,5 -40,15 C-35,25 -25,20 -30,10" fill="none" stroke="#9d4edd" stroke-width="4" stroke-linecap="round" />
    
    <!-- Suckers on visible tentacles -->
    <circle cx="-20" cy="20" r="2" fill="#c77dff" />
    <circle cx="-10" cy="25" r="2" fill="#c77dff" />
    <circle cx="20" cy="22" r="2" fill="#c77dff" />
    <circle cx="30" cy="15" r="2" fill="#c77dff" />
    <circle cx="-40" cy="10" r="2" fill="#c77dff" />
    <circle cx="-15" cy="35" r="2" fill="#c77dff" />
    <circle cx="20" cy="30" r="2" fill="#c77dff" />
    <circle cx="-35" cy="10" r="2" fill="#c77dff" />
  </g>
  
  <!-- Musical notes -->
  <g filter="url(#glow)">
    <g transform="translate(70,60)">
      <path d="M0,0 L0,15 C0,20 5,20 5,15 L5,0 Z" fill="#f8f9fa" />
      <circle cx="5" cy="15" r="4" fill="#f8f9fa" />
    </g>
    <g transform="translate(95,80) rotate(-10)">
      <path d="M0,0 L0,15 C0,20 5,20 5,15 L5,0 Z" fill="#f8f9fa" />
      <circle cx="5" cy="15" r="4" fill="#f8f9fa" />
    </g>
    <g transform="translate(220,50) rotate(10)">
      <path d="M0,0 L0,15 C0,20 5,20 5,15 L5,0 Z" fill="#f8f9fa" />
      <circle cx="5" cy="15" r="4" fill="#f8f9fa" />
    </g>
    <g transform="translate(190,75) rotate(-5)">
      <path d="M0,0 L0,15 C0,20 5,20 5,15 L5,0 Z" fill="#f8f9fa" />
      <circle cx="5" cy="15" r="4" fill="#f8f9fa" />
    </g>
  </g>
  
  <!-- Sea anemones -->
  <g transform="translate(30,220)">
    <path d="M0,0 Q-5,-10 -10,0 Q-15,-12 -20,0 Q-10,5 0,0" fill="#ff7aa2" />
    <path d="M0,0 Q5,-10 10,0 Q15,-12 20,0 Q10,5 0,0" fill="#ff7aa2" />
  </g>
  <g transform="translate(260,225)">
    <path d="M0,0 Q-5,-10 -10,0 Q-15,-12 -20,0 Q-10,5 0,0" fill="#ff7aa2" />
    <path d="M0,0 Q5,-10 10,0 Q15,-12 20,0 Q10,5 0,0" fill="#ff7aa2" />
  </g>
  
  <!-- Seaweed -->
  <path d="M50,300 C60,280 40,260 50,240 C60,220 40,200 50,190" fill="none" stroke="#a7c957" stroke-width="3" />
  <path d="M60,300 C65,270 55,250 60,230" fill="none" stroke="#a7c957" stroke-width="2" />
  <path d="M230,300 C220,280 240,260 230,240 C220,220 240,200 230,190" fill="none" stroke="#a7c957" stroke-width="3" />
  <path d="M240,300 C235,270 245,250 240,230" fill="none" stroke="#a7c957" 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 submission excels in creativity and adherence to the prompt, depicting an octopus playing a grand piano with a whimsical underwater concert atmosphere.

The technical quality and visual appeal are enhanced by the dynamic background and details, such as musical notes and coral.

Player 1's image, while colorful, lacks the same level of detail and thematic clarity.

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

155

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.