Back

SVG Drawing Match #257

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A teapot balancing on a tightrope over a canyon, steam forming into cloud animals"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,174.938 1,188.713 (+13.8)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1E90FF" />
      <stop offset="50%" stop-color="#87CEEB" />
      <stop offset="100%" stop-color="#B0E0E6" />
    </linearGradient>
    
    <!-- Canyon gradients -->
    <linearGradient id="canyonGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#8B4513" />
      <stop offset="50%" stop-color="#CD853F" />
      <stop offset="100%" stop-color="#A0522D" />
    </linearGradient>
    
    <linearGradient id="canyonGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#A0522D" />
      <stop offset="50%" stop-color="#D2691E" />
      <stop offset="100%" stop-color="#8B4513" />
    </linearGradient>
    
    <linearGradient id="canyonGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#CD853F" />
      <stop offset="50%" stop-color="#DEB887" />
      <stop offset="100%" stop-color="#D2691E" />
    </linearGradient>
    
    <!-- Teapot gradient -->
    <linearGradient id="teapotGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#F0E68C" />
      <stop offset="50%" stop-color="#DAA520" />
      <stop offset="100%" stop-color="#B8860B" />
    </linearGradient>
    
    <!-- Teapot lid gradient -->
    <linearGradient id="lidGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFD700" />
      <stop offset="100%" stop-color="#DAA520" />
    </linearGradient>
    
    <!-- Rope texture -->
    <pattern id="ropePattern" patternUnits="userSpaceOnUse" width="10" height="4">
      <path d="M0,2 Q2.5,0 5,2 T10,2" stroke="#8B4513" stroke-width="1" fill="none" />
    </pattern>
    
    <!-- Sun -->
    <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>
    
    <!-- Cloud filter -->
    <filter id="cloudFilter" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    
    <!-- Shadow filter -->
    <filter id="shadowFilter" 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>
    
    <!-- Glow filter for steam -->
    <filter id="steamGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
  
  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Distant clouds -->
  <g opacity="0.7">
    <ellipse cx="50" cy="40" rx="20" ry="10" fill="white" filter="url(#cloudFilter)" />
    <ellipse cx="200" cy="30" rx="25" ry="12" fill="white" filter="url(#cloudFilter)" />
    <ellipse cx="280" cy="70" rx="15" ry="8" fill="white" filter="url(#cloudFilter)" />
  </g>
  
  <!-- Sun -->
  <circle cx="250" cy="50" r="20" fill="url(#sunGradient)" />
  <g opacity="0.3">
    <path d="M250,20 L250,10 M280,50 L290,50 M250,80 L250,90 M220,50 L210,50 M270,30 L280,20 M270,70 L280,80 M230,70 L220,80 M230,30 L220,20" stroke="#FFA500" stroke-width="2" />
  </g>
  
  <!-- Distant mountains -->
  <path d="M0,150 L30,130 L60,145 L90,125 L120,140 L150,120 L180,145 L210,130 L240,140 L270,125 L300,145" fill="#9E9E9E" opacity="0.5" />
  
  <!-- Canyon - multiple layers for depth -->
  <path d="M0,150 L30,180 L60,160 L90,185 L120,155 L150,190 L180,160 L210,185 L240,165 L270,180 L300,150 L300,300 L0,300 Z" fill="url(#canyonGradient1)" />
  <path d="M0,170 L40,190 L70,170 L100,200 L130,170 L160,205 L190,175 L220,200 L250,180 L280,195 L300,175 L300,300 L0,300 Z" fill="url(#canyonGradient2)" />
  <path d="M0,200 L50,220 L80,200 L110,230 L140,190 L170,225 L200,195 L230,220 L260,200 L290,215 L300,200 L300,300 L0,300 Z" fill="url(#canyonGradient3)" />
  
  <!-- Canyon details - rock strata and details -->
  <g opacity="0.7">
    <path d="M30,180 L50,178 L80,183 M90,185 L110,182 L140,186 M150,190 L170,187 L190,192 M210,185 L230,182 L250,187 M240,165 L260,162 L280,167" stroke="#5D4037" stroke-width="0.5" fill="none" />
    <path d="M40,190 L60,188 L90,193 M100,200 L120,197 L150,202 M160,205 L180,202 L200,207 M220,200 L240,197 L260,202" stroke="#5D4037" stroke-width="0.5" fill="none" />
    
    <!-- Canyon rock details -->
    <path d="M60,160 L62,180 M90,185 L92,205 M120,155 L122,175 M180,160 L182,180 M240,165 L242,185" stroke="#5D4037" stroke-width="0.5" fill="none" />
    <path d="M70,170 L72,190 M130,170 L132,190 M190,175 L192,195 M250,180 L252,200" stroke="#5D4037" stroke-width="0.5" fill="none" />
  </g>
  
  <!-- Cacti and desert plants -->
  <g transform="translate(50, 170) scale(0.5)">
    <path d="M0,0 L0,-20 M0,-10 L-5,-15 M0,-10 L5,-15" stroke="#2E7D32" stroke-width="3" stroke-linecap="round" />
  </g>
  <g transform="translate(250, 165) scale(0.6)">
    <path d="M0,0 L0,-25 M0,-15 L-8,-20 M0,-15 L8,-20" stroke="#2E7D32" stroke-width="3" stroke-linecap="round" />
  </g>
  <g transform="translate(200, 180) scale(0.4)">
    <path d="M0,0 C-5,-10 -3,-20 0,-25 C3,-20 5,-10 0,0 Z" fill="#2E7D32" />
  </g>
  <g transform="translate(100, 195) scale(0.3)">
    <circle cx="0" cy="0" r="10" fill="#2E7D32" />
    <path d="M-8,-8 L8,8 M-8,8 L8,-8" stroke="#1B5E20" stroke-width="2" />
  </g>
  
  <!-- Tightrope -->
  <line x1="20" y1="150" x2="280" y2="150" stroke="url(#ropePattern)" stroke-width="2" />
  
  <!-- Poles for tightrope -->
  <rect x="15" y="120" width="10" height="180" fill="#8B4513" />
  <rect x="275" y="120" width="10" height="180" fill="#8B4513" />
  <!-- Pole details -->
  <path d="M15,120 L25,120 L25,300 L15,300 Z" stroke="#5D4037" stroke-width="0.5" fill="none" />
  <path d="M275,120 L285,120 L285,300 L275,300 Z" stroke="#5D4037" stroke-width="0.5" fill="none" />
  <path d="M15,130 L25,130 M15,150 L25,150 M15,170 L25,170 M15,190 L25,190 M15,210 L25,210" stroke="#5D4037" stroke-width="0.5" />
  <path d="M275,130 L285,130 M275,150 L285,150 M275,170 L285,170 M275,190 L285,190 M275,210 L285,210" stroke="#5D4037" stroke-width="0.5" />
  
  <!-- Teapot - positioned around x=150, y=135 (on the rope) -->
  <g transform="translate(150, 135)" filter="url(#shadowFilter)">
    <!-- Teapot body -->
    <ellipse cx="0" cy="5" rx="25" ry="15" fill="url(#teapotGradient)" stroke="#5D4037" stroke-width="1" />
    
    <!-- Teapot spout -->
    <path d="M22,5 C35,0 42,2 45,10" stroke="#5D4037" stroke-width="3" fill="url(#teapotGradient)" />
    
    <!-- Teapot handle -->
    <path d="M-20,5 C-30,-5 -35,0 -30,10" stroke="#5D4037" stroke-width="3" fill="none" />
    
    <!-- Teapot lid -->
    <ellipse cx="0" cy="-5" rx="12" ry="7" fill="url(#lidGradient)" stroke="#5D4037" stroke-width="1" />
    <ellipse cx="0" cy="-5" rx="8" ry="4" fill="none" stroke="#5D4037" stroke-width="0.5" />
    <path d="M0,-10 L0,-15 C2,-17 2,-13 0,-12" fill="#5D4037" stroke="#5D4037" stroke-width="0.5" />
    
    <!-- Teapot base/feet - to balance on rope -->
    <rect x="-10" y="15" width="20" height="1" fill="#5D4037" rx="0.5" />
    
    <!-- Decorative elements on teapot -->
    <path d="M-15,5 C-10,10 10,10 15,5" stroke="#5D4037" stroke-width="0.5" fill="none" opacity="0.7" />
    <path d="M-15,0 C-10,5 10,5 15,0" stroke="#5D4037" stroke-width="0.5" fill="none" opacity="0.7" />
    <path d="M-10,-3 C-5,2 5,2 10,-3" stroke="#5D4037" stroke-width="0.5" fill="none" opacity="0.7" />
    
    <!-- Gold accents on teapot -->
    <path d="M-15,5 C-10,8 10,8 15,5" stroke="#FFD700" stroke-width="0.3" fill="none" />
    <circle cx="-10" cy="0" r="3" fill="none" stroke="#FFD700" stroke-width="0.3" />
    <circle cx="10" cy="0" r="3" fill="none" stroke="#FFD700" stroke-width="0.3" />
  </g>
  
  <!-- Steam coming from teapot spout -->
  <g opacity="0.8" filter="url(#steamGlow)">
    <path d="M195,145 C200,135 205,125 200,115 C195,105 200,95 205,90" stroke="white" stroke-width="3" fill="none" />
    <path d="M195,145 C205,130 195,120 205,110 C215,100 205,90 195,80" stroke="white" stroke-width="2.5" fill="none" />
    <path d="M195,145 C190,130 200,115 190,100 C180,85 190,75 195,65" stroke="white" stroke-width="2" fill="none" />
  </g>
  
  <!-- Cloud rabbit -->
  <g transform="translate(210, 80)">
    <path d="M0,0 C5,-10 15,-10 20,-5 C25,-15 35,-15 40,-5 C45,-10 50,-5 50,0 C60,0 60,10 50,15 C55,20 50,30 40,28 C35,35 25,35 20,28 C10,32 0,25 0,15 C-10,15 -10,5 0,0 Z" fill="white" filter="url(#cloudFilter)" opacity="0.9" />
    
    <!-- Rabbit details -->
    <circle cx="15" cy="5" r="2" fill="#333" />
    <circle cx="35" cy="5" r="2" fill="#333" />
    <path d="M25,10 L25,15 M20,20 C25,22 30,22 35,20" stroke="#333" stroke-width="1" fill="none" />
    
    <!-- Rabbit ears -->
    <path d="M15,-5 C13,-15 17,-20 20,-15 M35,-5 C37,-15 33,-20 30,-15" stroke="#333" stroke-width="1" fill="white" filter="url(#cloudFilter)" />
    
    <!-- Rabbit whiskers -->
    <path d="M15,12 L5,10 M15,14 L5,16 M35,12 L45,10 M35,14 L45,16" stroke="#333" stroke-width="0.5" fill="none" />
  </g>
  
  <!-- Cloud bird -->
  <g transform="translate(140, 60)">
    <path d="M0,0 C-5,-10 0,-15 10,-10 C20,-20 30,-15 30,-5 C40,-10 45,-5 40,5 C45,10 40,15 30,13 C25,20 10,15 10,5 C0,10 -5,5 0,0 Z" fill="white" filter="url(#cloudFilter)" opacity="0.8" />
    
    <!-- Bird details -->
    <circle cx="15" cy="-5" r="2" fill="#333" />
    <path d="M25,5 L30,0" stroke="#FF9800" stroke-width="2" fill="none" stroke-linecap="round" />
    
    <!-- Bird wings -->
    <path d="M15,5 C10,10 5,8 8,3 M25,5 C30,10 35,8 32,3" stroke="#333" stroke-width="1" fill="white" filter="url(#cloudFilter)" />
    
    <!-- Bird tail feathers -->
    <path d="M0,5 L-8,2 M0,8 L-8,10" stroke="#333" stroke-width="0.5" fill="none" />
  </g>
  
  <!-- Cloud elephant -->
  <g transform="translate(70, 50)">
    <path d="M0,0 C-10,-10 -5,-20 5,-15 C10,-25 25,-25 30,-15 C40,-20 45,-15 40,-5 C50,0 45,10 35,8 C32,15 15,15 10,8 C0,10 -10,5 0,0 Z" fill="white" filter="url(#cloudFilter)" opacity="0.7" />
    
    <!-- Elephant details -->
    <circle cx="15" cy="-10" r="2" fill="#333" />
    <circle cx="25" cy="-10" r="2" fill="#333" />
    <path d="M20,0 C18,5 22,5 20,0 M10,-2 C0,10 -5,0 10,-2" stroke="#333" stroke-width="1.5" fill="none" />
    
    <!-- Elephant ears -->
    <path d="M10,-15 C5,-20 0,-15 5,-10 M30,-15 C35,-20 40,-15 35,-10" stroke="#333" stroke-width="0.5" fill="white" filter="url(#cloudFilter)" opacity="0.6" />
  </g>
  
  <!-- Connecting steam paths -->
  <path d="M195,145 C185,125 160,90 140,60" stroke="white" stroke-width="2" fill="none" opacity="0.5" />
  <path d="M195,145 C190,105 150,80 70,50" stroke="white" stroke-width="1.5" fill="none" opacity="0.4" />
  <path d="M195,145 C200,115 205,100 210,80" stroke="white" stroke-width="1.5" fill="none" opacity="0.6" />
  
  <!-- Small sparkles in steam -->
  <g fill="white" opacity="0.8">
    <circle cx="180" cy="120" r="1" />
    <circle cx="165" cy="100" r="0.8" />
    <circle cx="150" cy="90" r="1.2" />
    <circle cx="190" cy="95" r="1" />
    <circle cx="175" cy="80" r="0.6" />
    <circle cx="120" cy="75" r="1" />
    <circle cx="100" cy="60" r="0.8" />
  </g>
</svg>
GPT-4o (2024-11-20)
Player 2
ELO: 1,126.292 1,112.518 (-13.8)
SVG by GPT-4o (2024-11-20) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Gradient definitions -->
  <defs>
    <linearGradient id="canyonGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(162, 107, 64); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(92, 51, 23); stop-opacity:1" />
    </linearGradient>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(135, 206, 235); stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(70, 130, 180); stop-opacity:1" />
    </linearGradient>
    <linearGradient id="steamGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255, 255, 255); stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:rgb(200, 200, 255); stop-opacity:0.5" />
    </linearGradient>
  </defs>

  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />

  <!-- Canyon walls -->
  <path d="M0,150 Q50,100 100,150 T200,150 Q250,200 300,150 L300,300 L0,300 Z" fill="url(#canyonGradient)" />

  <!-- Tightrope -->
  <line x1="0" y1="150" x2="300" y2="150" stroke="black" stroke-width="2" />

  <!-- Teapot -->
  <g transform="translate(150,140) scale(0.6)">
    <path d="M42,10 Q48,5 54,10 Q58,14 58,30 Q58,52 25,52 Q-8,52 -8,30 Q-8,14 -4,10 Q2,5 8,10 Z" fill="goldenrod" />
    <circle cx="25" cy="30" r="25" fill="goldenrod" />
    <path d="M0,30 Q-20,25 -25,35 Q-20,45 0,40 Z" fill="goldenrod" />
  </g>

  <!-- Steam forming cloud animals -->
  <!-- A rabbit -->
  <path d="M150,70 Q160,60 170,70 Q170,50 180,60 Q190,70 200,70 Q210,60 220,70 Q230,60 230,80 Q230,90 220,95 Q210,100 200,95 Q190,90 180,95 Q170,100 160,95 Q150,90 150,70 Z" fill="url(#steamGradient)" />

  <!-- A fish -->
  <path d="M100,60 Q110,50 120,60 Q130,55 140,60 Q130,65 120,70 Q110,80 100,70 Z" fill="url(#steamGradient)" />

  <!-- A bird -->
  <path d="M180,30 Q185,20 190,30 Q195,20 200,30 Q205,20 210,30 Q215,20 220,25 Q215,30 210,35 Q205,30 200,35 Q195,30 190,35 Q185,30 180,30 Z" fill="url(#steamGradient)" />
</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 interprets the prompt with a colorful and engaging scene.

    The teapot is clearly balancing on a tightrope, and the steam forms into imaginative cloud animals with expressive faces, enhancing the whimsical aspect.

    In contrast, Player 2's image is more minimalistic and lacks the detailed elements that fulfill the prompt as effectively 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
69
Player 2
9
Rectangles

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

Player 1
4
Player 2
1
Circles

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

Player 1
16
Player 2
1
Ellipses

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

Player 1
6
Player 2
—
Lines

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

Player 1
1
Player 2
1
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
42
Player 2
6
Groups

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

Player 1
13
Player 2
1

Visual Effects Metrics

Gradients

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

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

The number of elements with stroke attributes in the SVG.

Player 1
40
Player 2
1

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
21
Player 2
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
8
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
257
Player 2
47
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
11
Player 2
3
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.

Similar Challenges

Match #1013 Mar 13, 2025

"Surreal clock with melting wings, suspended in a candy sky"

P1
SVG by GPT-4o (2024-11-20)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o (2024-11-20)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #888 Mar 13, 2025

"Dancing skyscrapers under a swirling, cosmic sky"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o (2024-11-20)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o (2024-11-20)
View
Match #871 Mar 13, 2025

"Flying cactus wearing headphones"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o (2024-11-20)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o (2024-11-20)
View
Match #558 Mar 13, 2025

"Mushroom with skyscrapers growing as windows"

P1
SVG by GPT-4o (2024-11-20)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o (2024-11-20)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #503 Mar 13, 2025

"A penguin with a jetpack, soaring over an erupting volcano at sunset"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o (2024-11-20)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o (2024-11-20)
View
Match #398 Mar 13, 2025

"A snail with a transparent shell showing a galaxy inside"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o (2024-11-20)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o (2024-11-20)
View