Back

SVG Drawing Match #624

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Surreal clock melting over a floating iceberg in a purple sky"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,254.659 1,265.613 (+11.0)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Purple sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2a0845" />
      <stop offset="50%" stop-color="#6441a5" />
      <stop offset="100%" stop-color="#9370DB" />
    </linearGradient>
    
    <!-- Aurora effect gradient -->
    <linearGradient id="auroraGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4CAF50" stop-opacity="0" />
      <stop offset="50%" stop-color="#8BC34A" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#4CAF50" stop-opacity="0" />
    </linearGradient>
    
    <!-- Iceberg gradient -->
    <linearGradient id="icebergGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFFFFF" />
      <stop offset="50%" stop-color="#E0F7FA" />
      <stop offset="80%" stop-color="#80DEEA" />
      <stop offset="100%" stop-color="#4DD0E1" />
    </linearGradient>
    
    <!-- Clock face gradient -->
    <radialGradient id="clockFaceGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#FFFDE7" />
      <stop offset="80%" stop-color="#FFF9C4" />
      <stop offset="100%" stop-color="#FFF176" />
    </radialGradient>
    
    <!-- Melting effect gradient -->
    <linearGradient id="meltGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFF176" stop-opacity="1" />
      <stop offset="100%" stop-color="#FFF176" stop-opacity="0.2" />
    </linearGradient>
    
    <!-- Reflection gradient -->
    <linearGradient id="reflectionGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFF176" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#FFF176" stop-opacity="0" />
    </linearGradient>
    
    <!-- Glow filter for surreal elements -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Aurora glow filter -->
    <filter id="auroraGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Drop shadow for the iceberg -->
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="2" dy="4" stdDeviation="4" flood-color="#2a0845" flood-opacity="0.5" />
    </filter>
    
    <!-- Pattern for iceberg crystalline structure -->
    <pattern id="icePattern" patternUnits="userSpaceOnUse" width="30" height="30">
      <path d="M0 15L15 0L30 15L15 30Z" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-opacity="0.3" />
      <path d="M15 0L30 15L15 30L0 15Z" fill="none" stroke="#FFFFFF" stroke-width="0.5" stroke-opacity="0.3" />
    </pattern>
  </defs>
  
  <!-- Purple sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Aurora effects -->
  <path d="M0,50 Q75,30 150,60 T300,40" fill="none" stroke="url(#auroraGradient)" stroke-width="10" filter="url(#auroraGlow)" opacity="0.7" />
  <path d="M0,80 Q100,100 200,70 T300,90" fill="none" stroke="url(#auroraGradient)" stroke-width="15" filter="url(#auroraGlow)" opacity="0.5" />
  
  <!-- Stars and surreal elements in the sky -->
  <g id="stars">
    <circle cx="30" cy="40" r="1" fill="white" />
    <circle cx="60" cy="20" r="1.5" fill="white" />
    <circle cx="100" cy="50" r="1" fill="white" />
    <circle cx="150" cy="30" r="1.5" fill="white" />
    <circle cx="200" cy="15" r="1" fill="white" />
    <circle cx="240" cy="45" r="1.2" fill="white" />
    <circle cx="280" cy="25" r="1" fill="white" />
    <circle cx="170" cy="70" r="1.3" fill="white" />
    <circle cx="50" cy="85" r="1" fill="white" />
    <circle cx="220" cy="75" r="1.5" fill="white" />
    <circle cx="85" cy="35" r="0.8" fill="white" />
    <circle cx="125" cy="25" r="1.2" fill="white" />
    <circle cx="265" cy="60" r="0.9" fill="white" />
    <circle cx="190" cy="55" r="1.1" fill="white" />
  </g>
  
  <!-- Floating time bubbles -->
  <g id="timeBubbles">
    <circle cx="40" cy="60" r="15" fill="rgba(255,255,255,0.2)" stroke="#E6E6FA" stroke-width="0.5" filter="url(#glow)" />
    <circle cx="260" cy="80" r="20" fill="rgba(255,255,255,0.15)" stroke="#E6E6FA" stroke-width="0.5" filter="url(#glow)" />
    <circle cx="180" cy="40" r="12" fill="rgba(255,255,255,0.2)" stroke="#E6E6FA" stroke-width="0.5" filter="url(#glow)" />
    <circle cx="75" cy="100" r="10" fill="rgba(255,255,255,0.25)" stroke="#E6E6FA" stroke-width="0.5" filter="url(#glow)" />
    
    <!-- Small clock hands inside bubbles -->
    <g transform="translate(40,60) scale(0.4)">
      <line x1="0" y1="0" x2="0" y2="-15" stroke="#333" stroke-width="2" />
      <line x1="0" y1="0" x2="10" y2="0" stroke="#333" stroke-width="2" />
    </g>
    
    <g transform="translate(260,80) scale(0.5)">
      <line x1="0" y1="0" x2="-5" y2="-18" stroke="#333" stroke-width="2" />
      <line x1="0" y1="0" x2="15" y2="5" stroke="#333" stroke-width="2" />
    </g>
    
    <g transform="translate(180,40) scale(0.3)">
      <line x1="0" y1="0" x2="0" y2="-20" stroke="#333" stroke-width="2" />
      <line x1="0" y1="0" x2="-15" y2="0" stroke="#333" stroke-width="2" />
    </g>
    
    <g transform="translate(75,100) scale(0.25)">
      <line x1="0" y1="0" x2="8" y2="-16" stroke="#333" stroke-width="2" />
      <line x1="0" y1="0" x2="-12" y2="8" stroke="#333" stroke-width="2" />
    </g>
  </g>
  
  <!-- Floating iceberg -->
  <g id="iceberg" filter="url(#shadow)">
    <!-- Main iceberg shape -->
    <path d="M50,200 L100,130 L150,150 L200,120 L250,180 L280,220 L200,250 L150,220 L100,250 Z" 
          fill="url(#icebergGradient)" />
    <!-- Crystalline pattern overlay -->
    <path d="M50,200 L100,130 L150,150 L200,120 L250,180 L280,220 L200,250 L150,220 L100,250 Z" 
          fill="url(#icePattern)" />
          
    <!-- Ice cracks -->
    <path d="M100,130 L120,160 L140,180" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.5" />
    <path d="M200,120 L180,150 L150,170" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.5" />
    <path d="M250,180 L220,200 L180,210" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.5" />
    
    <!-- Ice highlights -->
    <path d="M100,130 L120,140 L110,150 Z" fill="rgba(255,255,255,0.8)" />
    <path d="M200,120 L210,135 L190,145 Z" fill="rgba(255,255,255,0.7)" />
    <path d="M150,150 L160,170 L140,180 Z" fill="rgba(255,255,255,0.6)" />
    <path d="M250,180 L235,195 L255,200 Z" fill="rgba(255,255,255,0.7)" />
    
    <!-- Clock reflection on iceberg -->
    <ellipse cx="150" cy="220" rx="25" ry="10" fill="url(#reflectionGradient)" opacity="0.3" />
  </g>
  
  <!-- Melting clock -->
  <g id="meltingClock">
    <!-- Clock face base -->
    <ellipse cx="150" cy="160" rx="40" ry="40" fill="url(#clockFaceGradient)" stroke="#E6B800" stroke-width="2" />
    
    <!-- Clock numbers, distorted -->
    <g font-family="Arial" font-weight="bold" font-size="10">
      <text x="148" y="125" text-anchor="middle">12</text>
      <text x="173" y="130" text-anchor="middle" transform="rotate(30,150,160)">1</text>
      <text x="187" y="150" text-anchor="middle">3</text>
      <text x="177" y="180" text-anchor="middle" transform="rotate(-30,150,160)">5</text>
      <text x="148" y="195" text-anchor="middle">6</text>
      <text x="123" y="180" text-anchor="middle" transform="rotate(30,150,160)">7</text>
      <text x="110" y="150" text-anchor="middle">9</text>
      <text x="123" y="130" text-anchor="middle" transform="rotate(-30,150,160)">11</text>
    </g>
    
    <!-- Clock minute marks -->
    <g stroke="#333" stroke-width="1">
      <line x1="150" y1="120" x2="150" y2="125" />
      <line x1="180" y1="160" x2="175" y2="160" />
      <line x1="150" y1="200" x2="150" y2="195" />
      <line x1="120" y1="160" x2="125" y2="160" />
      
      <line x1="165" y1="126" x2="162" y2="130" transform="rotate(30,150,160)" />
      <line x1="174" y1="145" x2="170" y2="148" transform="rotate(60,150,160)" />
      <line x1="174" y1="175" x2="170" y2="172" transform="rotate(-60,150,160)" />
      <line x1="165" y1="194" x2="162" y2="190" transform="rotate(-30,150,160)" />
      <line x1="135" y1="194" x2="138" y2="190" transform="rotate(30,150,160)" />
      <line x1="126" y1="175" x2="130" y2="172" transform="rotate(60,150,160)" />
      <line x1="126" y1="145" x2="130" y2="148" transform="rotate(-60,150,160)" />
      <line x1="135" y1="126" x2="138" y2="130" transform="rotate(-30,150,160)" />
    </g>
    
    <!-- Clock hands -->
    <line x1="150" y1="160" x2="130" y2="140" stroke="#333" stroke-width="2" />
    <line x1="150" y1="160" x2="180" y2="170" stroke="#333" stroke-width="3" />
    <circle cx="150" cy="160" r="3" fill="#333" />
    
    <!-- Melting drips -->
    <path d="M150,200 C170,220 150,240 160,280" fill="none" stroke="url(#meltGradient)" stroke-width="15" stroke-linecap="round" />
    <path d="M180,190 C190,210 180,230 190,260" fill="none" stroke="url(#meltGradient)" stroke-width="12" stroke-linecap="round" />
    <path d="M120,190 C110,215 125,235 105,270" fill="none" stroke="url(#meltGradient)" stroke-width="10" stroke-linecap="round" />
    
    <!-- Additional small drips -->
    <path d="M145,195 C140,210 150,220 140,240" fill="none" stroke="url(#meltGradient)" stroke-width="5" stroke-linecap="round" />
    <path d="M170,185 C175,200 165,210 175,230" fill="none" stroke="url(#meltGradient)" stroke-width="7" stroke-linecap="round" />
    
    <!-- Melting clock deformation -->
    <path d="M190,160 C215,170 200,195 180,190" fill="url(#clockFaceGradient)" stroke="#E6B800" stroke-width="1.5" />
    <path d="M110,160 C85,165 95,185 120,190" fill="url(#clockFaceGradient)" stroke="#E6B800" stroke-width="1.5" />
    
    <!-- Melted number dripping off -->
    <g font-family="Arial" font-weight="bold" font-size="10" fill="#E6B800">
      <text x="170" y="210" text-anchor="middle" transform="rotate(15)">4</text>
      <path d="M170,210 C175,220 168,225 173,235" fill="none" stroke="#E6B800" stroke-width="1" />
    </g>
  </g>
  
  <!-- Additional surreal elements -->
  <g id="surreal-elements">
    <!-- Floating number fragments -->
    <text x="75" y="110" font-family="Arial" font-weight="bold" font-size="12" fill="rgba(255,255,255,0.7)" transform="rotate(-15)">3</text>
    <text x="220" y="95" font-family="Arial" font-weight="bold" font-size="14" fill="rgba(255,255,255,0.7)" transform="rotate(20)">7</text>
    <text x="270" y="150" font-family="Arial" font-weight="bold" font-size="16" fill="rgba(255,255,255,0.7)" transform="rotate(90)">11</text>
    <text x="50" y="170" font-family="Arial" font-weight="bold" font-size="13" fill="rgba(255,255,255,0.7)" transform="rotate(-40)">9</text>
    
    <!-- Floating time pieces -->
    <path d="M230,130 L240,120 L250,130 L240,140 Z" fill="#FFF176" stroke="#E6B800" stroke-width="1" />
    <path d="M70,155 L80,145 L90,155 L80,165 Z" fill="#FFF176" stroke="#E6B800" stroke-width="1" />
    <path d="M215,170 L225,160 L235,170 L225,180 Z" fill="#FFF176" stroke="#E6B800" stroke-width="1" />
    
    <!-- Abstract clock gears -->
    <circle cx="210" cy="200" r="8" fill="none" stroke="#E6B800" stroke-width="1" />
    <circle cx="210" cy="200" r="5" fill="none" stroke="#E6B800" stroke-width="1" />
    <path d="M210,192 L210,188 M210,212 L210,216 M202,200 L198,200 M222,200 L226,200" stroke="#E6B800" stroke-width="1" />
    
    <circle cx="90" cy="220" r="6" fill="none" stroke="#E6B800" stroke-width="1" />
    <circle cx="90" cy="220" r="3" fill="none" stroke="#E6B800" stroke-width="1" />
    <path d="M90,214 L90,211 M90,229 L90,232 M84,220 L81,220 M96,220 L99,220" stroke="#E6B800" stroke-width="1" />
    
    <circle cx="240" cy="170" r="5" fill="none" stroke="#E6B800" stroke-width="1" />
    <circle cx="240" cy="170" r="2" fill="none" stroke="#E6B800" stroke-width="1" />
    <path d="M240,165 L240,162 M240,178 L240,180 M235,170 L233,170 M245,170 L247,170" stroke="#E6B800" stroke-width="1" />
  </g>
</svg>
Claude 3.5 Sonnet (2024-10-22)
Player 2
ELO: 1,141.223 1,130.269 (-11.0)
SVG by Claude 3.5 Sonnet (2024-10-22) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1a0033"/>
      <stop offset="100%" style="stop-color:#660099"/>
    </linearGradient>
    <radialGradient id="clockGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#ffcc00"/>
      <stop offset="100%" style="stop-color:#ff6600"/>
    </radialGradient>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
  
  <!-- Stars -->
  <g fill="white">
    <circle cx="50" cy="30" r="1"/>
    <circle cx="150" cy="20" r="1.5"/>
    <circle cx="250" cy="40" r="1"/>
    <circle cx="80" cy="60" r="1.2"/>
    <circle cx="200" cy="50" r="1"/>
  </g>

  <!-- Iceberg -->
  <path d="M50,200 L150,100 L250,200 L270,250 L30,250 Z" fill="#e6f7ff" opacity="0.8"/>
  <path d="M70,220 L180,120 L240,220" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.5"/>

  <!-- Melting Clock -->
  <g transform="translate(150,150)">
    <circle cx="0" cy="0" r="40" fill="url(#clockGradient)"/>
    <path d="M0,-40 C60,-20 80,40 60,80" fill="url(#clockGradient)" stroke="#ff6600" stroke-width="2"/>
    
    <!-- Clock Numbers -->
    <text x="-5" y="-25" fill="black" font-size="12">12</text>
    <text x="20" y="5" fill="black" font-size="12">3</text>
    <text x="-5" y="30" fill="black" font-size="12">6</text>
    <text x="-30" y="5" fill="black" font-size="12">9</text>

    <!-- Clock Hands -->
    <path d="M0,0 L20,-15" stroke="black" stroke-width="3"/>
    <path d="M0,0 L-10,20" stroke="black" stroke-width="3"/>
  </g>

  <!-- Drips -->
  <path d="M180,230 Q190,260 185,280" fill="none" stroke="url(#clockGradient)" stroke-width="4"/>
  <path d="M200,220 Q210,270 205,290" fill="none" stroke="url(#clockGradient)" stroke-width="3"/>
  
  <!-- Atmosphere Effects -->
  <circle cx="250" cy="50" r="20" fill="#9933ff" opacity="0.3"/>
  <circle cx="50" cy="80" r="15" fill="#9933ff" opacity="0.2"/>
</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 integrates the melting clock with a floating iceberg, adding visual interest with additional floating clocks and geometric shapes.

    The use of gradient colors enhances the surreal atmosphere, adhering closely to the prompt.

    In contrast, Player 2's submission, while technically clean, lacks the same level of creativity and complexity in its composition.

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
77
Player 2
16
Rectangles

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

Player 1
1
Player 2
1
Circles

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

Player 1
25
Player 2
8
Ellipses

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

Player 1
2
Player 2
—
Lines

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

Player 1
22
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
27
Player 2
7
Groups

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

Player 1
12
Player 2
2

Visual Effects Metrics

Gradients

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

Player 1
6
Player 2
2
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
3
Player 2
4
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
43
Player 2
6

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
22
Player 2
5

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
21
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
116
Player 2
19
Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1
1
Player 2
—
Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1
10
Player 2
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
13
Player 2
4

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 #1026 Mar 13, 2025

"Robot octopus making coffee, steampunk style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.5 Sonnet (2024-10-22)
View
Match #1025 Mar 13, 2025

"Galactic snail with a spiral galaxy shell, in vibrant pop art style"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #806 Mar 13, 2025

"Giraffe in space wearing a jetpack, orbiting a planet with a tiny hat"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #788 Mar 13, 2025

"Surreal clock with hands as rainbow-colored vines twisting around the numbers"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #559 Mar 13, 2025

"Giraffe wearing a spacesuit, floating with balloons above a surreal desert"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #102 Mar 13, 2025

"A giraffe in a tuxedo, sipping tea at a cosmic garden party"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.5 Sonnet (2024-10-22)
View