Back

SVG Drawing Match #1042

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Skyscraper made of giant seashells under aurora borealis"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,332.186 1,333.851 (+1.7)
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="#0a0a2a" />
      <stop offset="70%" stop-color="#1a1a4a" />
      <stop offset="100%" stop-color="#2a3060" />
    </linearGradient>
    
    <!-- Aurora gradients -->
    <linearGradient id="auroraGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00ff8866" />
      <stop offset="50%" stop-color="#00aaff66" />
      <stop offset="100%" stop-color="#aa00ff66" />
    </linearGradient>
    
    <linearGradient id="auroraGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00ffcc66" />
      <stop offset="50%" stop-color="#00ff8866" />
      <stop offset="100%" stop-color="#88ff0066" />
    </linearGradient>
    
    <linearGradient id="auroraGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff00cc66" />
      <stop offset="50%" stop-color="#ff66aa66" />
      <stop offset="100%" stop-color="#ffaa5566" />
    </linearGradient>
    
    <!-- Shell gradients -->
    <linearGradient id="shellGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f8e9d0" />
      <stop offset="100%" stop-color="#c8b090" />
    </linearGradient>
    
    <linearGradient id="shellGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0e0c0" />
      <stop offset="100%" stop-color="#d0a080" />
    </linearGradient>
    
    <linearGradient id="shellGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e8d8c0" />
      <stop offset="100%" stop-color="#b09070" />
    </linearGradient>
    
    <linearGradient id="shellGradientPink" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffccd0" />
      <stop offset="100%" stop-color="#e090a0" />
    </linearGradient>
    
    <!-- Water gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2a3060" />
      <stop offset="100%" stop-color="#0a0a2a" />
    </linearGradient>
    
    <!-- Filters -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.8" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="windowGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Shell pattern -->
    <pattern id="shellPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M0,5 Q5,0 10,5 Q5,10 0,5" fill="none" stroke="#a0808033" stroke-width="0.5" />
    </pattern>
  </defs>
  
  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="220" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g>
    <circle cx="20" cy="30" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="50" cy="15" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="40" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="25" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="150" cy="10" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="35" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="220" cy="20" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="250" cy="45" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="280" cy="15" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="30" cy="60" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="70" cy="75" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="110" cy="50" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="160" cy="65" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="200" cy="55" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="240" cy="70" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="270" cy="60" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="15" cy="85" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="45" cy="95" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="80" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="130" cy="90" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="175" cy="85" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="210" cy="95" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="90" r="0.9" fill="white" filter="url(#starGlow)" />
  </g>
  
  <!-- Aurora Borealis -->
  <path d="M0,30 Q75,0 150,20 T300,10" stroke="url(#auroraGradient1)" stroke-width="15" fill="none" opacity="0.7">
    <animate attributeName="d" values="M0,30 Q75,0 150,20 T300,10; M0,40 Q75,10 150,30 T300,20; M0,30 Q75,0 150,20 T300,10" dur="15s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,50 Q75,20 150,40 T300,30" stroke="url(#auroraGradient2)" stroke-width="20" fill="none" opacity="0.7">
    <animate attributeName="d" values="M0,50 Q75,20 150,40 T300,30; M0,60 Q75,30 150,50 T300,40; M0,50 Q75,20 150,40 T300,30" dur="12s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,70 Q75,50 150,60 T300,50" stroke="url(#auroraGradient3)" stroke-width="10" fill="none" opacity="0.5">
    <animate attributeName="d" values="M0,70 Q75,50 150,60 T300,50; M0,80 Q75,60 150,70 T300,60; M0,70 Q75,50 150,60 T300,50" dur="18s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,25 Q100,15 200,25 T300,15" stroke="url(#auroraGradient2)" stroke-width="5" fill="none" opacity="0.6">
    <animate attributeName="d" values="M0,25 Q100,15 200,25 T300,15; M0,20 Q100,10 200,20 T300,10; M0,25 Q100,15 200,25 T300,15" dur="20s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,90 Q100,80 200,90 T300,80" stroke="url(#auroraGradient1)" stroke-width="8" fill="none" opacity="0.4">
    <animate attributeName="d" values="M0,90 Q100,80 200,90 T300,80; M0,95 Q100,85 200,95 T300,85; M0,90 Q100,80 200,90 T300,80" dur="17s" repeatCount="indefinite" />
  </path>
  
  <!-- Water/Base -->
  <rect x="0" y="220" width="300" height="80" fill="url(#waterGradient)" />
  
  <!-- Seashell Skyscraper - from bottom to top -->
  
  <!-- Base large conch shell -->
  <path d="M120,220 C80,220 80,185 100,175 C125,165 175,165 200,175 C220,185 220,220 180,220 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="1" />
  <path d="M120,220 C85,220 85,190 100,182 C120,175 180,175 200,182 C215,190 215,220 180,220" fill="url(#shellPattern)" stroke="none" opacity="0.3" />
  
  <!-- Ridged shell layer -->
  <path d="M130,175 L125,165 C90,155 90,140 110,130 C130,120 170,120 190,130 C210,140 210,155 175,165 L170,175 Z" fill="url(#shellGradient3)" stroke="#a09080" stroke-width="1" />
  
  <!-- Shell ridges -->
  <path d="M110,130 L175,165" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M120,127 L178,160" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M130,125 L180,155" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M140,123 L182,150" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M150,122 L184,145" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M160,122 L186,140" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M170,123 L188,135" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  <path d="M180,125 L190,130" stroke="#a09080" stroke-width="0.5" fill="none" opacity="0.5" />
  
  <!-- Middle spiral shell structure -->
  <path d="M140,130 C120,125 115,110 125,95 C135,80 160,75 180,85 C200,95 205,110 185,125 L160,130 Z" fill="url(#shellGradient2)" stroke="#a09080" stroke-width="1" />
  
  <!-- Spiral details -->
  <path d="M150,95 C140,93 137,87 142,82 C147,77 157,75 167,78 C177,81 180,87 175,92 L165,95 Z" fill="url(#shellGradientPink)" stroke="#a09080" stroke-width="0.5" />
  <path d="M155,88 C150,87 148,84 150,81 C152,78 157,77 162,79 C167,81 169,84 167,87 L162,88 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="0.3" />
  
  <!-- Scallop shell layers -->
  <path d="M135,95 C125,85 130,75 140,70 C150,65 165,65 175,70 C185,75 190,85 180,95 Z" fill="url(#shellGradient2)" stroke="#a09080" stroke-width="1" />
  
  <path d="M135,70 C125,60 130,50 140,45 C150,40 165,40 175,45 C185,50 190,60 180,70 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="1" />
  
  <path d="M142,45 C132,35 137,25 147,20 C157,15 168,15 178,20 C188,25 193,35 183,45 Z" fill="url(#shellGradientPink)" stroke="#a09080" stroke-width="1" />
  
  <!-- Nautilus crown structure -->
  <g transform="translate(150, 20)">
    <path d="M0,0 C-15,5 -20,15 -15,25 C-10,35 0,40 15,35 C30,30 35,20 30,10 C25,0 15,-5 0,0 Z" fill="url(#shellGradient3)" stroke="#a09080" stroke-width="1" />
    
    <!-- Nautilus spiral -->
    <path d="M0,20 C-5,22 -7,25 -5,28 C-3,31 0,32 5,30 C10,28 12,25 10,22 C8,19 5,18 0,20 Z" fill="url(#shellGradient2)" stroke="#a09080" stroke-width="0.5" />
    <path d="M0,20 C-2,21 -3,22 -2,24 C-1,26 1,26 3,25 C5,24 6,23 5,21 C4,19 2,19 0,20 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="0.3" />
  </g>
  
  <!-- Windows and lights -->
  <g>
    <!-- Base shell windows -->
    <rect x="125" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="135" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="145" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="155" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="165" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="175" y="200" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <rect x="120" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="130" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="140" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="150" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="160" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="170" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="180" y="190" width="4" height="4" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <!-- Ridged shell windows -->
    <rect x="130" y="160" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="140" y="155" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="150" y="150" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="160" y="155" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="170" y="160" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <!-- Middle structure windows -->
    <rect x="135" y="115" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="145" y="110" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="155" y="110" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="165" y="115" width="3" height="3" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <rect x="140" y="100" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="150" y="95" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="160" y="100" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <!-- Scallop tower windows -->
    <rect x="140" y="80" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="150" y="78" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="160" y="80" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <rect x="145" y="60" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="155" y="58" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="165" y="60" width="2" height="2" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <rect x="147" y="40" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="155" y="38" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="162" y="40" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
    
    <!-- Top structure windows -->
    <rect x="148" y="25" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="153" y="22" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
    <rect x="158" y="25" width="1.5" height="1.5" fill="#ffcc66" filter="url(#windowGlow)" />
  </g>
  
  <!-- Small decorative shells at base -->
  <path d="M90,220 C85,215 85,210 90,205 C95,200 105,200 110,205 C115,210 115,215 110,220 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="0.5" />
  
  <path d="M70,220 C65,218 65,215 70,212 C75,209 85,209 90,212 C95,215 95,218 90,220 Z" fill="url(#shellGradientPink)" stroke="#a09080" stroke-width="0.5" />
  
  <path d="M210,220 C205,215 205,210 210,205 C215,200 225,200 230,205 C235,210 235,215 230,220 Z" fill="url(#shellGradient3)" stroke="#a09080" stroke-width="0.5" />
  
  <path d="M230,220 C225,218 225,215 230,212 C235,209 245,209 250,212 C255,215 255,218 250,220 Z" fill="url(#shellGradient2)" stroke="#a09080" stroke-width="0.5" />
  
  <path d="M50,220 C47,217 47,213 50,210 C53,207 60,207 63,210 C66,213 66,217 63,220 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="0.4" />
  
  <path d="M250,220 C247,217 247,213 250,210 C253,207 260,207 263,210 C266,213 266,217 263,220 Z" fill="url(#shellGradient1)" stroke="#a09080" stroke-width="0.4" />
  
  <!-- Reflections in water -->
  <path d="M120,280 C90,278 90,265 105,255 C125,245 175,245 195,255 C210,265 210,278 180,280 Z" fill="url(#shellGradient1)" stroke="none" opacity="0.15" />
  
  <path d="M130,255 L125,245 C95,240 95,230 110,225 C130,220 170,220 190,225 C205,230 205,240 175,245 L170,255 Z" fill="url(#shellGradient3)" stroke="none" opacity="0.1" />
  
  <path d="M140,230 C120,225 115,215 125,210 C135,205 165,205 175,210 C185,215 180,225 160,230 Z" fill="url(#shellGradient2)" stroke="none" opacity="0.08" />
  
  <!-- Aurora reflections in water -->
  <path d="M0,240 Q75,235 150,240 T300,235" stroke="url(#auroraGradient1)" stroke-width="6" fill="none" opacity="0.15">
    <animate attributeName="d" values="M0,240 Q75,235 150,240 T300,235; M0,245 Q75,240 150,245 T300,240; M0,240 Q75,235 150,240 T300,235" dur="15s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,250 Q75,245 150,250 T300,245" stroke="url(#auroraGradient2)" stroke-width="4" fill="none" opacity="0.15">
    <animate attributeName="d" values="M0,250 Q75,245 150,250 T300,245; M0,255 Q75,250 150,255 T300,250; M0,250 Q75,245 150,250 T300,245" dur="12s" repeatCount="indefinite" />
  </path>
  
  <path d="M0,260 Q75,255 150,260 T300,255" stroke="url(#auroraGradient3)" stroke-width="3" fill="none" opacity="0.1">
    <animate attributeName="d" values="M0,260 Q75,255 150,260 T300,255; M0,265 Q75,260 150,265 T300,260; M0,260 Q75,255 150,260 T300,255" dur="18s" repeatCount="indefinite" />
  </path>
</svg>
GPT-3.5 turbo (0125)
Player 2
ELO: 827.909 826.244 (-1.7)
SVG by GPT-3.5 turbo (0125) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Aurora Borealis background -->
  <defs>
    <radialGradient id="sky-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#0f3057" />
      <stop offset="50%" stop-color="#471f57" />
      <stop offset="100%" stop-color="#050f2b" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="300" height="300" fill="url(#sky-gradient)" />
  
  <!-- Giant seashells skyscraper -->
  <path d="M40 260 L60 230 L80 260 L100 230 L120 260 L140 230 L160 260 L180 230 L200 260 Q190 200 220 260 Q200 200 240 260 Q210 200 260 260 Z" fill="#f7d685" />
  <path d="M50 220 L70 190 L90 220 L110 190 L130 220 L150 190 L170 220 L190 190 L210 220 Q200 150 230 220 Q210 150 250 220 Q220 150 260 220 Z" fill="#f9bc5e" />
  <path d="M60 180 L80 150 L100 180 L120 150 L140 180 L160 150 L180 180 L200 150 L220 180 Q210 120 240 180 Q210 120 250 180 Q220 120 260 180 Z" fill="#dfad79" />
  <path d="M70 140 L90 110 L110 140 L130 110 L150 140 L170 110 L190 140 L210 110 L230 140 Q220 80 250 140 Q220 80 260 140 Q230 70 260 130 Z" fill="#b99476" />
</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 presents a clear depiction of a skyscraper made of giant seashells, with a visually appealing and creative design.

    The use of color and the aurora borealis in the background enhance the adherence to the prompt.

    In contrast, Player 2's image lacks clarity in representing seashells and the aurora borealis, making it less effective in conveying the theme.

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
100
Player 2
5
Rectangles

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

Player 1
39
Player 2
1
Circles

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

Player 1
23
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
38
Player 2
4
Groups

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

Player 1
3
Player 2
—

Visual Effects Metrics

Gradients

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

Player 1
9
Player 2
1
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
2
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
20
Player 2
—
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
38
Player 2
—

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
15
Player 2
7

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1
8
Player 2
—
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
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
157
Player 2
52
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
12
Player 2
1
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 #1036 Mar 13, 2025

"A moonlit violin serenades a dancing galaxy, in impressionism"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-3.5 turbo (0125)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-3.5 turbo (0125)
View
Match #765 Mar 13, 2025

"A giraffe wearing a top hat, juggling planets in a starry sky"

P1
SVG by GPT-3.5 turbo (0125)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-3.5 turbo (0125)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #728 Mar 13, 2025

"Floating library in a teacup sailing on a sea of honey under a moonlit sky"

P1
SVG by GPT-3.5 turbo (0125)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-3.5 turbo (0125)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #605 Mar 13, 2025

"A flying teacup with wings, pouring stars into an ocean made of swirling galaxies"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-3.5 turbo (0125)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-3.5 turbo (0125)
View
Match #539 Mar 13, 2025

"A giraffe wearing a suit, reading a newspaper, on a tiny unicycle"

P1
SVG by GPT-3.5 turbo (0125)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-3.5 turbo (0125)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #434 Mar 13, 2025

"Melting clock dripping over a cactus in the desert"

P1
SVG by GPT-3.5 turbo (0125)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-3.5 turbo (0125)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View