Back

SVG Drawing Match #198

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Upside-down cityscape reflected in an ocean wave"

Llama 3.0 70B (8192)
Player 1
ELO: 928.528 919.175 (-9.4)
SVG by Llama 3.0 70B (8192) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Ocean Wave -->
  <path d="M150,250 C150,250 100,200 50,150 L50,150 C50,150 100,100 150,50 L150,50 C150,50 200,100 250,150 L250,150 C250,150 200,200 150,250 Z" fill="url(#ocean-wave)" />
  <linearGradient id="ocean-wave" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#34A85A" />
    <stop offset="0.5" stop-color="#87CEEB" />
    <stop offset="1" stop-color="#56B3FA" />
  </linearGradient>

  <!-- Upside-down Cityscape -->
  <g transform="translate(150, 250) scale(1, -1)">
    <!-- Buildings -->
    <rect x="-50" y="-100" width="100" height="100" fill="#F7F7F7" rx="10" />
    <rect x="-75" y="-125" width="150" height="75" fill="#CCCCCC" rx="15" />
    <rect x="-25" y="-150" width="50" height="150" fill="#AAAAAA" rx="20" />
    <!-- Windows -->
    <rect x="-45" y="-90" width="10" height="10" fill="#FFFFFF" rx="2" />
    <rect x="-35" y="-90" width="10" height="10" fill="#FFFFFF" rx="2" />
    <rect x="-25" y="-90" width="10" height="10" fill="#FFFFFF" rx="2" />
    <rect x="-45" y="-80" width="10" height="10" fill="#FFFFFF" rx="2" />
    <rect x="-35" y="-80" width="10" height="10" fill="#FFFFFF" rx="2" />
    <rect x="-25" y="-80" width="10" height="10" fill="#FFFFFF" rx="2" />
    <!-- Roads -->
    <path d="M-50,-50 L50,-50" stroke="#999999" stroke-width="5" />
    <path d="M-50,-75 L50,-75" stroke="#999999" stroke-width="5" />
    <!-- Sky -->
    <rect x="-100" y="-200" width="200" height="100" fill="url(#city-sky)" rx="20" />
    <linearGradient id="city-sky" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#87CEEB" />
      <stop offset="0.5" stop-color="#56B3FA" />
      <stop offset="1" stop-color="#34A85A" />
    </linearGradient>
  </g>

  <!-- Reflection -->
  <use xlink:href="#ocean-wave" transform="translate(0, 250) scale(1, -1)" opacity="0.5" />
  <use xlink:href="#city-sky" transform="translate(0, 250) scale(1, -1)" opacity="0.5" />
  <use xlink:href="# Buildings" transform="translate(0, 250) scale(1, -1)" opacity="0.5" />
  <use xlink:href="#Windows" transform="translate(0, 250) scale(1, -1)" opacity="0.5" />
  <use xlink:href="#Roads" transform="translate(0, 250) scale(1, -1)" opacity="0.5" />
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,082.145 1,091.499 (+9.4)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Definitions for gradients, patterns, and filters -->
  <defs>
    <!-- Sky gradient (twilight) -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a1a" />
      <stop offset="40%" stop-color="#16213e" />
      <stop offset="80%" stop-color="#0f3460" />
      <stop offset="100%" stop-color="#e94560" />
    </linearGradient>
    
    <!-- Water gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#e94560" stop-opacity="0.3" />
      <stop offset="20%" stop-color="#0f3460" />
      <stop offset="70%" stop-color="#1a508b" />
      <stop offset="100%" stop-color="#0f4c75" />
    </linearGradient>
    
    <!-- Building gradients -->
    <linearGradient id="buildingGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1e3a5f" />
      <stop offset="100%" stop-color="#355c7d" />
    </linearGradient>
    
    <linearGradient id="buildingGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2b2d42" />
      <stop offset="100%" stop-color="#474a6e" />
    </linearGradient>
    
    <linearGradient id="buildingGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#1d3c45" />
      <stop offset="100%" stop-color="#2b6777" />
    </linearGradient>
    
    <linearGradient id="buildingGradient4" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#2d2d2d" />
      <stop offset="100%" stop-color="#4a4a4a" />
    </linearGradient>
    
    <linearGradient id="buildingGradient5" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#3d2b56" />
      <stop offset="100%" stop-color="#6247aa" />
    </linearGradient>
    
    <!-- Window patterns -->
    <pattern id="windowPattern1" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
      <rect x="1" y="1" width="6" height="6" fill="#ffeb3b" fill-opacity="0.8" />
    </pattern>
    
    <pattern id="windowPattern2" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse">
      <rect x="1" y="1" width="3" height="3" fill="#ffc107" fill-opacity="0.7" />
    </pattern>
    
    <pattern id="windowPattern3" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect x="1" y="1" width="3" height="8" fill="#ffe082" fill-opacity="0.6" />
      <rect x="6" y="1" width="3" height="8" fill="#ffe082" fill-opacity="0.6" />
    </pattern>
    
    <!-- Wave filter for distortion -->
    <filter id="waveDisplacement" x="0" y="0" width="100%" height="100%">
      <feTurbulence type="turbulence" baseFrequency="0.01 0.05" numOctaves="3" seed="5" />
      <feDisplacementMap in="SourceGraphic" scale="15" />
    </filter>
    
    <!-- Glow filter for lights -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Wave clip path -->
    <clipPath id="waveClip">
      <path d="M0,150 
               C30,140 60,160 90,155 
               C120,150 150,160 180,145 
               C210,130 240,155 270,145 
               C300,140 330,150 300,150 
               L300,300 L0,300 Z" />
    </clipPath>
  </defs>
  
  <!-- Background sky -->
  <rect x="0" y="0" width="300" height="150" fill="url(#skyGradient)" />
  
  <!-- Ocean background -->
  <rect x="0" y="150" width="300" height="150" fill="url(#waterGradient)" />
  
  <!-- Upside-down cityscape -->
  <g transform="translate(0, 150) scale(1, -1)">
    <!-- Building 1 - Classic skyscraper -->
    <rect x="10" y="0" width="30" height="120" fill="url(#buildingGradient1)" />
    <rect x="15" y="10" width="20" height="100" fill="url(#windowPattern1)" fill-opacity="0.5" />
    <polygon points="10,120 25,135 40,120" fill="url(#buildingGradient1)" />
    
    <!-- Building 2 - Shorter building -->
    <rect x="45" y="0" width="40" height="80" fill="url(#buildingGradient2)" />
    <rect x="50" y="10" width="30" height="60" fill="url(#windowPattern2)" fill-opacity="0.5" />
    
    <!-- Building 3 - Tallest skyscraper -->
    <rect x="90" y="0" width="25" height="140" fill="url(#buildingGradient3)" />
    <rect x="95" y="10" width="15" height="120" fill="url(#windowPattern1)" fill-opacity="0.6" />
    <polygon points="90,140 102.5,160 115,140" fill="url(#buildingGradient3)" />
    
    <!-- Building 4 - Medium with antenna -->
    <rect x="120" y="0" width="35" height="100" fill="url(#buildingGradient1)" />
    <rect x="125" y="10" width="25" height="80" fill="url(#windowPattern2)" fill-opacity="0.5" />
    <line x1="137.5" y1="100" x2="137.5" y2="120" stroke="#aaa" stroke-width="2" />
    <circle cx="137.5" cy="122" r="2" fill="red" />
    
    <!-- Building 5 - Wide corporate building -->
    <rect x="160" y="0" width="60" height="70" fill="url(#buildingGradient4)" />
    <rect x="170" y="10" width="40" height="50" fill="url(#windowPattern1)" fill-opacity="0.6" />
    
    <!-- Building 6 - Rounded top -->
    <rect x="225" y="0" width="20" height="90" fill="url(#buildingGradient2)" />
    <rect x="230" y="10" width="10" height="70" fill="url(#windowPattern2)" fill-opacity="0.5" />
    <ellipse cx="235" cy="90" rx="10" ry="5" fill="url(#buildingGradient2)" />
    
    <!-- Building 7 - Modern with setbacks -->
    <rect x="250" y="0" width="40" height="60" fill="url(#buildingGradient3)" />
    <rect x="255" y="10" width="30" height="40" fill="url(#windowPattern1)" fill-opacity="0.5" />
    <rect x="260" y="60" width="20" height="40" fill="url(#buildingGradient3)" />
    <rect x="262" y="70" width="16" height="25" fill="url(#windowPattern2)" fill-opacity="0.6" />
    
    <!-- Building 8 - Domed tower -->
    <rect x="190" y="0" width="30" height="100" fill="url(#buildingGradient5)" />
    <rect x="195" y="10" width="20" height="80" fill="url(#windowPattern3)" fill-opacity="0.5" />
    <ellipse cx="205" cy="100" rx="15" ry="10" fill="url(#buildingGradient5)" />
    <circle cx="205" cy="105" r="5" fill="#6b7fd7" />
  </g>
  
  <!-- Wave shape -->
  <path d="M0,150 
           C30,140 60,160 90,155 
           C120,150 150,160 180,145 
           C210,130 240,155 270,145 
           C300,140 330,150 300,150 
           L300,300 L0,300 Z" 
        fill="url(#waterGradient)" />
  
  <!-- Reflection effect -->
  <g opacity="0.7" filter="url(#waveDisplacement)" clip-path="url(#waveClip)">
    <!-- Building 1 - Classic skyscraper reflection -->
    <rect x="10" y="150" width="30" height="120" fill="url(#buildingGradient1)" />
    <rect x="15" y="160" width="20" height="100" fill="url(#windowPattern1)" fill-opacity="0.4" />
    <polygon points="10,270 25,285 40,270" fill="url(#buildingGradient1)" />
    
    <!-- Building 2 - Shorter building reflection -->
    <rect x="45" y="150" width="40" height="80" fill="url(#buildingGradient2)" />
    <rect x="50" y="160" width="30" height="60" fill="url(#windowPattern2)" fill-opacity="0.4" />
    
    <!-- Building 3 - Tallest skyscraper reflection -->
    <rect x="90" y="150" width="25" height="140" fill="url(#buildingGradient3)" />
    <rect x="95" y="160" width="15" height="120" fill="url(#windowPattern1)" fill-opacity="0.4" />
    <polygon points="90,290 102.5,310 115,290" fill="url(#buildingGradient3)" />
    
    <!-- Building 4 - Medium with antenna reflection -->
    <rect x="120" y="150" width="35" height="100" fill="url(#buildingGradient1)" />
    <rect x="125" y="160" width="25" height="80" fill="url(#windowPattern2)" fill-opacity="0.4" />
    <line x1="137.5" y1="250" x2="137.5" y2="270" stroke="#aaa" stroke-width="2" opacity="0.4" />
    <circle cx="137.5" cy="272" r="2" fill="red" opacity="0.4" />
    
    <!-- Building 5 - Wide corporate building reflection -->
    <rect x="160" y="150" width="60" height="70" fill="url(#buildingGradient4)" />
    <rect x="170" y="160" width="40" height="50" fill="url(#windowPattern1)" fill-opacity="0.4" />
    
    <!-- Building 6 - Rounded top reflection -->
    <rect x="225" y="150" width="20" height="90" fill="url(#buildingGradient2)" />
    <rect x="230" y="160" width="10" height="70" fill="url(#windowPattern2)" fill-opacity="0.4" />
    <ellipse cx="235" cy="240" rx="10" ry="5" fill="url(#buildingGradient2)" />
    
    <!-- Building 7 - Modern with setbacks reflection -->
    <rect x="250" y="150" width="40" height="60" fill="url(#buildingGradient3)" />
    <rect x="255" y="160" width="30" height="40" fill="url(#windowPattern1)" fill-opacity="0.4" />
    <rect x="260" y="210" width="20" height="40" fill="url(#buildingGradient3)" />
    <rect x="262" y="220" width="16" height="25" fill="url(#windowPattern2)" fill-opacity="0.4" />
    
    <!-- Building 8 - Domed tower reflection -->
    <rect x="190" y="150" width="30" height="100" fill="url(#buildingGradient5)" />
    <rect x="195" y="160" width="20" height="80" fill="url(#windowPattern3)" fill-opacity="0.4" />
    <ellipse cx="205" cy="250" rx="15" ry="10" fill="url(#buildingGradient5)" />
    <circle cx="205" cy="255" r="5" fill="#6b7fd7" opacity="0.4" />
  </g>
  
  <!-- Wave highlights and details -->
  <path d="M0,150 
           C30,140 60,160 90,155 
           C120,150 150,160 180,145 
           C210,130 240,155 270,145 
           C300,140 330,150 300,150" 
        fill="none" stroke="white" stroke-width="2" stroke-opacity="0.5" />
  
  <path d="M0,153 
           C30,143 60,163 90,158 
           C120,153 150,163 180,148 
           C210,133 240,158 270,148 
           C300,143 330,153 300,153" 
        fill="none" stroke="white" stroke-width="1" stroke-opacity="0.3" />
  
  <!-- Splashing water droplets -->
  <circle cx="90" cy="152" r="1.5" fill="white" opacity="0.7" />
  <circle cx="92" cy="150" r="1" fill="white" opacity="0.5" />
  <circle cx="180" cy="142" r="2" fill="white" opacity="0.8" />
  <circle cx="183" cy="140" r="1.2" fill="white" opacity="0.6" />
  <circle cx="185" cy="146" r="1" fill="white" opacity="0.6" />
  <circle cx="270" cy="143" r="1.5" fill="white" opacity="0.7" />
  <circle cx="273" cy="141" r="1.2" fill="white" opacity="0.5" />
  <circle cx="265" cy="147" r="1" fill="white" opacity="0.5" />
  
  <!-- Stars in the sky with variety -->
  <g filter="url(#glow)">
    <circle cx="20" cy="30" r="1" fill="white" />
    <circle cx="50" cy="15" r="1.5" fill="white" />
    <circle cx="80" cy="40" r="1" fill="white" />
    <circle cx="120" cy="20" r="1.2" fill="white" />
    <circle cx="160" cy="35" r="1" fill="white" />
    <circle cx="200" cy="15" r="1.5" fill="white" />
    <circle cx="240" cy="25" r="1" fill="white" />
    <circle cx="270" cy="45" r="1.2" fill="white" />
    <circle cx="35" cy="55" r="0.8" fill="white" />
    <circle cx="95" cy="25" r="0.8" fill="white" />
    <circle cx="145" cy="50" r="0.8" fill="white" />
    <circle cx="220" cy="40" r="0.8" fill="white" />
    <circle cx="280" cy="20" r="0.8" fill="white" />
    
    <!-- Twinkling stars effect - using slightly different colors -->
    <circle cx="60" cy="30" r="1" fill="#fffcf0" />
    <circle cx="110" cy="45" r="0.7" fill="#fffcf0" />
    <circle cx="175" cy="25" r="0.9" fill="#fffcf0" />
    <circle cx="230" cy="60" r="0.7" fill="#fffcf0" />
    <circle cx="290" cy="35" r="0.9" fill="#fffcf0" />
  </g>
  
  <!-- Moon with detailed crater -->
  <circle cx="250" cy="40" r="15" fill="#fffde7" filter="url(#glow)" />
  <circle cx="242" cy="35" r="12" fill="#0a0a1a" fill-opacity="0.8" />
  <circle cx="253" cy="46" r="3" fill="#f5f5f5" fill-opacity="0.2" />
  <circle cx="245" cy="38" r="2" fill="#f5f5f5" fill-opacity="0.1" />
  
  <!-- Flying object - maybe a plane or satellite -->
  <circle cx="120" cy="70" r="0.8" fill="red" />
  <circle cx="122" cy="70" r="0.8" fill="white" />
  <circle cx="124" cy="70" r="0.8" fill="white" />
</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 effectively captures the concept of an upside-down cityscape reflected in an ocean wave.

    The reflection is clearly depicted with a creative use of colors and shapes that mimic both the city and the movement of water.

    The technical quality and visual appeal are strong, providing a clearer and more compelling interpretation of the prompt compared to Player 1's image.

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
13
Player 2
93
Rectangles

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

Player 1
10
Player 2
42
Circles

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

Player 1
—
Player 2
37
Ellipses

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

Player 1
—
Player 2
4
Lines

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

Player 1
—
Player 2
2
Polygons

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

Player 1
—
Player 2
4
Paths

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

Player 1
3
Player 2
4
Groups

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

Player 1
1
Player 2
3

Visual Effects Metrics

Gradients

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

Player 1
2
Player 2
7
Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1
—
Player 2
3
Filters

The number of filter definitions (filter) in the SVG.

Player 1
—
Player 2
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
1
Elements with Opacity

The number of elements with opacity attributes in the SVG.

Player 1
5
Player 2
12
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
2
Player 2
4

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
8
Player 2
26

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
6
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
13
Player 2
26
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
13
Use Elements

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

Player 1
5
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 #1307 Mar 13, 2025

"A steam-punk jellyfish floating above a Victorian cityscape"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Llama 3.0 70B (8192)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Llama 3.0 70B (8192)
View
Match #664 Mar 13, 2025

"Mushroom cityscape under a cosmic aurora sky"

P1
SVG by Llama 3.0 70B (8192)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Llama 3.0 70B (8192)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #242 Mar 13, 2025

"A snail with a cityscape shell, complete with tiny skyscrapers and glowing windows"

P1
SVG by Llama 3.0 70B (8192)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Llama 3.0 70B (8192)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #8 Mar 13, 2025

"Jellyfish chandelier glowing in a stormy underwater ballroom"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Llama 3.0 70B (8192)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Llama 3.0 70B (8192)
View