Back

SVG Drawing Match #659

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Floating cityscape on a giant turtle's back under a starry sky"

DeepSeek-R1-Distill-Qwen-32B

Player 1

ELO: 827.428 824.488 (-2.9)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="skyGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#2a2a4e;stop-opacity:1"/>
    </radialGradient>
    <pattern id="stars" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="1" fill="white" opacity="0.8"/>
      <circle cx="30" cy="20" r="2" fill="white" opacity="0.6"/>
      <circle cx="50" cy="40" r="1.5" fill="white" opacity="0.7"/>
      <circle cx="70" cy="60" r="1" fill="white" opacity="0.9"/>
      <circle cx="90" cy="80" r="1.2" fill="white" opacity="0.8"/>
    </pattern>
    <linearGradient id="turtleShell" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#2d5a27;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#1d3a17;stop-opacity:1"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="glow"/>
      <feMerge>
        <feMergeNode in="glow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="300" height="300" fill="url(#skyGradient)"/>
  <rect width="300" height="300" fill="url(#stars)" opacity="0.3"/>
  <g transform="translate(150,150)">
    <circle r="80" fill="url(#turtleShell)" stroke="#1d3a17" stroke-width="2"/>
    <path d="M-80,0 Q-80,-40 -40,-40 L40,-40 Q80,-40 80,0 L0,80 Z" fill="#1d3a17"/>
  </g>
  <g transform="translate(150,120)">
    <rect width="160" height="80" fill="#303030" rx="10"/>
    <rect x="10" y="10" width="40" height="60" fill="#666" rx="5"/>
    <rect x="60" y="20" width="30" height="70" fill="#888" rx="5"/>
    <rect x="100" y="15" width="50" height="80" fill="#777" rx="5"/>
    <circle cx="140" cy="30" r="15" fill="#555" filter="url(#glow)"/>
  </g>
  <g transform="translate(150,170)">
    <rect width="200" height="10" fill="#1a1a2e"/>
    <path d="M-100,0 Q-50,-20 0,-20 L100,-20 Q150,-20 200,0" fill="#1a1a2e" opacity="0.5"/>
  </g>
  <g transform="translate(150,140)">
    <circle r="40" fill="none" stroke="#666" stroke-width="2" opacity="0.2"/>
  </g>
  <g transform="translate(150,140)">
    <circle r="35" fill="none" stroke="#888" stroke-width="1" opacity="0.4"/>
  </g>
  <g transform="translate(150,140)">
    <circle r="30" fill="none" stroke="#aaa" stroke-width="1" opacity="0.6"/>
  </g>
  <g transform="translate(150,140)">
    <circle r="25" fill="none" stroke="#bbb" stroke-width="1" opacity="0.8"/>
  </g>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,225.404 1,228.344 (+2.9)

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>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#030B25" />
      <stop offset="50%" stop-color="#0E2052" />
      <stop offset="100%" stop-color="#1C3771" />
    </linearGradient>
    
    <!-- Water gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0F1B39" />
      <stop offset="50%" stop-color="#1E3261" />
      <stop offset="100%" stop-color="#0F1B39" />
    </linearGradient>
    
    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FFF" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#FFF" stop-opacity="0" />
    </radialGradient>
    
    <!-- Turtle shell pattern -->
    <pattern id="shellPattern" patternUnits="userSpaceOnUse" width="20" height="20">
      <path d="M0 10 L10 0 L20 10 L10 20 Z" fill="#1A3A30" />
      <path d="M1 10 L10 1 L19 10 L10 19 Z" fill="#2D5F4D" />
    </pattern>
    
    <!-- City lights glow -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>

  <!-- Background sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g id="stars">
    <!-- Static stars -->
    <g fill="#FFF">
      <circle cx="15" cy="30" r="0.8" opacity="0.7" />
      <circle cx="45" cy="15" r="0.7" opacity="0.8" />
      <circle cx="75" cy="35" r="0.5" opacity="0.6" />
      <circle cx="105" cy="22" r="0.9" opacity="0.9" />
      <circle cx="135" cy="38" r="0.6" opacity="0.7" />
      <circle cx="165" cy="18" r="0.7" opacity="0.8" />
      <circle cx="195" cy="32" r="0.5" opacity="0.6" />
      <circle cx="225" cy="25" r="0.8" opacity="0.9" />
      <circle cx="255" cy="40" r="0.7" opacity="0.7" />
      <circle cx="285" cy="20" r="0.6" opacity="0.8" />
      
      <circle cx="20" cy="60" r="0.6" opacity="0.7" />
      <circle cx="50" cy="50" r="0.5" opacity="0.6" />
      <circle cx="80" cy="70" r="0.8" opacity="0.8" />
      <circle cx="110" cy="55" r="0.7" opacity="0.7" />
      <circle cx="140" cy="65" r="0.9" opacity="0.9" />
      <circle cx="170" cy="50" r="0.6" opacity="0.8" />
      <circle cx="200" cy="70" r="0.5" opacity="0.6" />
      <circle cx="230" cy="60" r="0.7" opacity="0.7" />
      <circle cx="260" cy="50" r="0.8" opacity="0.9" />
      <circle cx="290" cy="70" r="0.6" opacity="0.8" />
      
      <circle cx="25" cy="90" r="0.7" opacity="0.8" />
      <circle cx="55" cy="80" r="0.9" opacity="0.9" />
      <circle cx="85" cy="100" r="0.6" opacity="0.7" />
      <circle cx="115" cy="85" r="0.5" opacity="0.6" />
      <circle cx="145" cy="95" r="0.8" opacity="0.9" />
      <circle cx="175" cy="80" r="0.7" opacity="0.8" />
      <circle cx="205" cy="100" r="0.5" opacity="0.6" />
      <circle cx="235" cy="90" r="0.9" opacity="0.9" />
      <circle cx="265" cy="80" r="0.6" opacity="0.7" />
      <circle cx="295" cy="100" r="0.8" opacity="0.8" />
    </g>
    
    <!-- Twinkling stars -->
    <g fill="#FFF">
      <circle cx="30" cy="40" r="1.2">
        <animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite" />
      </circle>
      <circle cx="120" cy="30" r="1.1">
        <animate attributeName="opacity" values="1;0.4;1" dur="4s" repeatCount="indefinite" />
      </circle>
      <circle cx="210" cy="45" r="1.3">
        <animate attributeName="opacity" values="1;0.5;1" dur="3.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="270" cy="30" r="1.0">
        <animate attributeName="opacity" values="1;0.3;1" dur="2.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="60" cy="60" r="1.2">
        <animate attributeName="opacity" values="1;0.4;1" dur="4.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="180" cy="75" r="1.1">
        <animate attributeName="opacity" values="1;0.5;1" dur="3.8s" repeatCount="indefinite" />
      </circle>
    </g>
    
    <!-- Star clusters -->
    <g opacity="0.8">
      <circle cx="80" cy="20" r="0.4" fill="#FFF" />
      <circle cx="82" cy="18" r="0.3" fill="#FFF" />
      <circle cx="78" cy="17" r="0.5" fill="#FFF" />
      <circle cx="83" cy="21" r="0.3" fill="#FFF" />
      <circle cx="79" cy="22" r="0.4" fill="#FFF" />
    </g>
    <g opacity="0.8">
      <circle cx="240" cy="75" r="0.4" fill="#FFF" />
      <circle cx="243" cy="73" r="0.3" fill="#FFF" />
      <circle cx="238" cy="72" r="0.5" fill="#FFF" />
      <circle cx="242" cy="77" r="0.3" fill="#FFF" />
      <circle cx="236" cy="76" r="0.4" fill="#FFF" />
    </g>
  </g>
  
  <!-- Moon -->
  <circle cx="50" cy="50" r="15" fill="#FFF" opacity="0.9" />
  <circle cx="50" cy="50" r="25" fill="url(#moonGlow)" />
  
  <!-- Water -->
  <rect x="0" y="220" width="300" height="80" fill="url(#waterGradient)" />
  <!-- Water ripples -->
  <path d="M0 225 Q30 223, 60 225 T120 227 T180 225 T240 223 T300 225 V300 H0 Z" fill="#1E3261" opacity="0.3" />
  <path d="M0 235 Q40 232, 80 235 T160 238 T240 235 T300 232 V300 H0 Z" fill="#274683" opacity="0.2" />
  
  <!-- Giant Turtle -->
  <!-- Turtle body -->
  <ellipse cx="150" cy="240" rx="90" ry="30" fill="#1A3A30" />
  
  <!-- Turtle legs -->
  <path d="M80 230 C70 250, 60 260, 50 265 S60 270, 70 260 Q75 250, 85 240" fill="#1A3A30" />
  <path d="M220 230 C230 250, 240 260, 250 265 S240 270, 230 260 Q225 250, 215 240" fill="#1A3A30" />
  
  <!-- Turtle head -->
  <path d="M70 230 C60 225, 55 215, 60 205 S75 195, 80 205 Q85 215, 80 230 Z" fill="#1A3A30" />
  <circle cx="65" cy="205" r="2" fill="black" /> <!-- Eye -->
  
  <!-- Turtle tail -->
  <path d="M230 230 C240 225, 250 230, 255 240 S240 250, 230 240 Z" fill="#1A3A30" />
  
  <!-- Turtle shell -->
  <ellipse cx="150" cy="210" rx="70" ry="40" fill="url(#shellPattern)" stroke="#1A3A30" stroke-width="2" />
  <path d="M100 190 L150 180 L200 190 L190 210 L150 220 L110 210 Z" fill="none" stroke="#1A3A30" stroke-width="1.5" />
  <path d="M110 185 L150 175 L190 185 L180 205 L150 215 L120 205 Z" fill="none" stroke="#1A3A30" stroke-width="1" />
  
  <!-- City base platform -->
  <ellipse cx="150" cy="185" rx="55" ry="25" fill="#2D5F4D" stroke="#1A3A30" stroke-width="1" />
  <ellipse cx="150" cy="185" rx="45" ry="20" fill="#3E6259" opacity="0.7" />
  
  <!-- City buildings -->
  <!-- Central tower -->
  <rect x="145" y="120" width="10" height="65" rx="1" fill="#D9BC88" />
  <polygon points="145,120 155,120 150,105" fill="#EBD5A8" />
  <circle cx="150" cy="105" r="2" fill="#FFE066" filter="url(#glow)" />
  
  <!-- Left side buildings -->
  <g fill="#C9A97D">
    <rect x="120" y="150" width="15" height="35" rx="1" />
    <rect x="120" y="140" width="15" height="10" fill="#D9BC88" />
    
    <rect x="105" y="155" width="10" height="30" rx="1" />
    <rect x="105" y="150" width="10" height="5" fill="#D9BC88" />
    
    <rect x="95" y="160" width="8" height="25" rx="1" />
    
    <rect x="135" y="145" width="8" height="40" rx="1" />
  </g>
  
  <!-- Right side buildings -->
  <g fill="#C9A97D">
    <rect x="165" y="150" width="15" height="35" rx="1" />
    <rect x="165" y="140" width="15" height="10" fill="#D9BC88" />
    
    <rect x="185" y="155" width="10" height="30" rx="1" />
    <rect x="185" y="150" width="10" height="5" fill="#D9BC88" />
    
    <rect x="197" y="160" width="8" height="25" rx="1" />
    
    <rect x="157" y="145" width="8" height="40" rx="1" />
  </g>
  
  <!-- Building windows -->
  <g fill="#FFE066" filter="url(#glow)">
    <!-- Central tower windows -->
    <rect x="147" y="130" width="2" height="3" />
    <rect x="151" y="130" width="2" height="3" />
    <rect x="147" y="140" width="2" height="3" />
    <rect x="151" y="140" width="2" height="3" />
    <rect x="147" y="150" width="2" height="3" />
    <rect x="151" y="150" width="2" height="3" />
    <rect x="147" y="160" width="2" height="3" />
    <rect x="151" y="160" width="2" height="3" />
    <rect x="147" y="170" width="2" height="3" />
    <rect x="151" y="170" width="2" height="3" />
    
    <!-- Left buildings windows -->
    <rect x="123" y="160" width="2" height="2" />
    <rect x="130" y="160" width="2" height="2" />
    <rect x="123" y="170" width="2" height="2" />
    <rect x="130" y="170" width="2" height="2" />
    
    <rect x="107" y="165" width="2" height="2" />
    <rect x="111" y="165" width="2" height="2" />
    <rect x="107" y="175" width="2" height="2" />
    
    <rect x="97" y="170" width="2" height="2" />
    <rect x="99" y="180" width="2" height="2" />
    
    <rect x="137" y="155" width="2" height="2" />
    <rect x="139" y="165" width="2" height="2" />
    <rect x="137" y="175" width="2" height="2" />
    
    <!-- Right buildings windows -->
    <rect x="168" y="160" width="2" height="2" />
    <rect x="175" y="160" width="2" height="2" />
    <rect x="168" y="170" width="2" height="2" />
    <rect x="175" y="170" width="2" height="2" />
    
    <rect x="187" y="165" width="2" height="2" />
    <rect x="191" y="165" width="2" height="2" />
    <rect x="187" y="175" width="2" height="2" />
    
    <rect x="199" y="170" width="2" height="2" />
    <rect x="201" y="180" width="2" height="2" />
    
    <rect x="159" y="155" width="2" height="2" />
    <rect x="161" y="165" width="2" height="2" />
    <rect x="159" y="175" width="2" height="2" />
  </g>
  
  <!-- Bridges connecting buildings -->
  <g stroke="#D9BC88" stroke-width="1.5">
    <path d="M135 160 L145 160" />
    <path d="M155 160 L165 160" />
    <path d="M115 170 L120 170" />
    <path d="M180 170 L185 170" />
  </g>
  
  <!-- Floating airships -->
  <ellipse cx="120" cy="130" rx="5" ry="2" fill="#D9BC88" />
  <circle cx="120" cy="129" r="1" fill="#FFE066" filter="url(#glow)" />
  
  <ellipse cx="180" cy="125" rx="7" ry="2.5" fill="#D9BC88" />
  <circle cx="177" cy="124" r="1" fill="#FFE066" filter="url(#glow)" />
  <circle cx="183" cy="124" r="1" fill="#FFE066" filter="url(#glow)" />
  
  <!-- Tiny flying vehicles -->
  <g fill="#D9BC88">
    <circle cx="100" cy="140" r="1.5" />
    <circle cx="190" cy="140" r="1.5" />
    <circle cx="130" cy="110" r="1" />
    <circle cx="170" cy="115" r="1" />
  </g>
  
  <!-- Magical energy connections -->
  <g stroke="#3AAF85" stroke-width="0.8" opacity="0.7">
    <path d="M120 195 Q125 200, 130 205">
      <animate attributeName="opacity" values="0.7;0.3;0.7" dur="3s" repeatCount="indefinite" />
    </path>
    <path d="M140 195 Q145 200, 150 205">
      <animate attributeName="opacity" values="0.7;0.4;0.7" dur="4s" repeatCount="indefinite" />
    </path>
    <path d="M160 195 Q165 200, 170 205">
      <animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.5s" repeatCount="indefinite" />
    </path>
    <path d="M180 195 Q175 200, 170 205">
      <animate attributeName="opacity" values="0.7;0.4;0.7" dur="4.5s" repeatCount="indefinite" />
    </path>
  </g>
  
  <!-- Light rays from city -->
  <g stroke="#FFE066" stroke-width="0.5" opacity="0.5">
    <path d="M150 105 L145 85" />
    <path d="M150 105 L150 80" />
    <path d="M150 105 L155 85" />
  </g>
  
  <!-- Cloud wisps -->
  <g stroke="white" stroke-width="0.8" fill="none" opacity="0.2">
    <path d="M100 140 Q120 135, 140 140 T180 140" />
    <path d="M110 120 Q130 115, 150 120 T190 120" />
    <path d="M90 150 Q110 145, 130 150 T170 150" />
  </g>
  
  <!-- Energy glow under city -->
  <ellipse cx="150" cy="195" rx="45" ry="15" fill="#18634B" opacity="0.2" />
  <ellipse cx="150" cy="195" rx="35" ry="10" fill="#3AAF85" opacity="0.1" />
  
  <!-- Waterfall effects from shell -->
  <g stroke="#5ABFED" stroke-width="0.5" opacity="0.6">
    <path d="M85 220 Q80 230, 75 240" />
    <path d="M90 220 Q85 230, 80 240" />
    <path d="M95 220 Q90 230, 85 240" />
    
    <path d="M205 220 Q210 230, 215 240" />
    <path d="M210 220 Q215 230, 220 240" />
    <path d="M215 220 Q220 230, 225 240" />
  </g>
  
  <!-- Small boats -->
  <g>
    <ellipse cx="40" cy="260" rx="8" ry="2" fill="#D9BC88" />
    <rect x="38" y="254" width="4" height="6" fill="#C9A97D" />
    
    <ellipse cx="260" cy="255" rx="6" ry="2" fill="#D9BC88" />
    <rect x="258" y="250" width="4" height="5" fill="#C9A97D" />
  </g>
  
  <!-- Birds -->
  <g stroke="#FFFFFF" stroke-width="0.5" fill="none" opacity="0.7">
    <path d="M40 100 Q45 95, 50 100 Q55 95, 60 100" />
    <path d="M45 105 Q50 100, 55 105 Q60 100, 65 105" />
    
    <path d="M230 120 Q235 115, 240 120 Q245 115, 250 120" />
    <path d="M235 125 Q240 120, 245 125 Q250 120, 255 125" />
  </g>
  
  <!-- Vegetation on turtle shell -->
  <g fill="#3AAF85" opacity="0.8">
    <path d="M100 180 C98 175, 100 173, 102 178 C103 170, 105 175, 104 178 C106 174, 108 176, 107 180" />
    <path d="M200 180 C198 175, 200 173, 202 178 C203 170, 205 175, 204 178 C206 174, 208 176, 207 180" />
    <path d="M110 200 C108 195, 110 193, 112 198 C113 190, 115 195, 114 198" />
    <path d="M190 200 C188 195, 190 193, 192 198 C193 190, 195 195, 194 198" />
  </g>
  
  <!-- Water splashes around turtle -->
  <g stroke="#5ABFED" stroke-width="0.5" fill="none" opacity="0.5">
    <path d="M70 240 Q65 235, 60 240 Q55 245, 50 240" />
    <path d="M230 240 Q235 235, 240 240 Q245 245, 250 240" />
  </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 image demonstrates a clearer and more creative interpretation of the prompt, effectively depicting a well-defined cityscape on a turtle's back under a starry sky.

The technical quality and visual appeal are superior, with attention to detail and a cohesive composition.

In contrast, Player 1's submission lacks clarity and detail, 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

Player 2

159

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

133

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.