Back

SVG Drawing Match #945

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A clock with melting numbers, Dali-esque surrealism"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,319.573 1,329.845 (+10.3)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions for gradients and filters -->
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#5c3f6b" />
      <stop offset="50%" stop-color="#3b2349" />
      <stop offset="100%" stop-color="#1a0b28" />
    </linearGradient>
    
    <!-- Clock face gradient -->
    <radialGradient id="clockFaceGradient" cx="50%" cy="50%" r="50%" fx="45%" fy="45%">
      <stop offset="0%" stop-color="#f2e9d4" />
      <stop offset="85%" stop-color="#d9c7a0" />
      <stop offset="100%" stop-color="#c2a872" />
    </radialGradient>
    
    <!-- Melting gold gradient -->
    <linearGradient id="meltingGold" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e6c670" />
      <stop offset="50%" stop-color="#c9a642" />
      <stop offset="100%" stop-color="#aa8623" />
    </linearGradient>
    
    <!-- Melting effect filter -->
    <filter id="meltFilter" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="2" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="15" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    
    <!-- Stronger melting effect -->
    <filter id="strongMelt" x="-30%" y="-30%" width="160%" height="160%">
      <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="3" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="25" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    
    <!-- Drop shadow filter -->
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur" />
      <feComposite in="SourceGraphic" in2="offsetBlur" operator="over" />
    </filter>
    
    <!-- Dripping effect for numbers -->
    <filter id="drip" x="-30%" y="-30%" width="160%" height="160%">
      <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" seed="1" result="turbulence"/>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="30" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    
    <!-- Enhanced dripping for specific directions -->
    <filter id="dripDown" x="-30%" y="-30%" width="160%" height="160%">
      <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" seed="2" result="turbulence"/>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="G"/>
      <feGaussianBlur stdDeviation="1"/>
    </filter>
    
    <!-- Reflection effect -->
    <linearGradient id="reflectionGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="white" stop-opacity="0.4" />
      <stop offset="100%" stop-color="white" stop-opacity="0.1" />
    </linearGradient>
    
    <!-- Glow effect -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#bgGradient)" />
  
  <!-- Stars in the surreal sky -->
  <g fill="white">
    <circle cx="30" cy="40" r="1" opacity="0.7" />
    <circle cx="60" cy="30" r="0.8" opacity="0.6" />
    <circle cx="90" cy="25" r="1.2" opacity="0.8" />
    <circle cx="120" cy="50" r="0.9" opacity="0.7" />
    <circle cx="180" cy="30" r="1" opacity="0.8" />
    <circle cx="210" cy="20" r="1.1" opacity="0.7" />
    <circle cx="240" cy="45" r="0.8" opacity="0.6" />
    <circle cx="270" cy="35" r="1" opacity="0.8" />
  </g>
  
  <!-- Surreal landscape elements -->
  <path d="M0,220 C50,210 80,230 120,210 S180,190 220,200 S280,220 300,210 L300,300 L0,300 Z" 
        fill="#7c5c3b" filter="url(#meltFilter)" />
  
  <!-- Distant surreal mountains -->
  <path d="M0,200 Q50,130 100,180 T200,150 T300,190 L300,220 L0,220 Z" 
        fill="#46355e" filter="url(#meltFilter)" opacity="0.7" />
  
  <!-- Surreal tree/branch -->
  <path d="M30,80 Q10,120 20,150 T15,180" fill="none" stroke="#564334" stroke-width="5" />
  <path d="M22,120 Q35,110 40,130" fill="none" stroke="#564334" stroke-width="3" />
  <path d="M19,160 Q5,170 15,190" fill="none" stroke="#564334" stroke-width="3" />
  
  <!-- Dead tree with melting branch -->
  <path d="M260,190 Q265,160 270,130" fill="none" stroke="#564334" stroke-width="4" />
  <path d="M270,130 Q280,120 290,125 T300,115" fill="none" stroke="#564334" stroke-width="3" filter="url(#meltFilter)" />
  
  <!-- Dali-esque crutch in the distance -->
  <line x1="280" y1="150" x2="280" y2="220" stroke="#52433a" stroke-width="2" />
  <line x1="280" y1="175" x2="290" y2="185" stroke="#52433a" stroke-width="2" />
  
  <!-- Clock base -->
  <circle cx="150" cy="150" r="100" fill="url(#clockFaceGradient)" filter="url(#shadow)" />
  
  <!-- Reflection on clock face -->
  <ellipse cx="120" cy="110" rx="70" ry="40" fill="url(#reflectionGradient)" opacity="0.3" />
  
  <!-- Clock rim -->
  <circle cx="150" cy="150" r="100" fill="none" stroke="url(#meltingGold)" stroke-width="5" filter="url(#shadow)" />
  
  <!-- Melting clock edge - the clock is melting off its edge -->
  <path d="M230,190 Q245,220 255,210 T270,250 T290,260" fill="url(#clockFaceGradient)" filter="url(#strongMelt)" opacity="0.9" />
  
  <!-- Tick marks -->
  <g stroke="#333" stroke-width="2">
    <line x1="150" y1="60" x2="150" y2="70" />
    <line x1="240" y1="150" x2="230" y2="150" />
    <line x1="150" y1="240" x2="150" y2="230" />
    <line x1="60" y1="150" x2="70" y2="150" />
    
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(30, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(60, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(120, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(150, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(210, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(240, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(300, 150, 150)" />
    <line x1="195" y1="76" x2="190" y2="85" transform="rotate(330, 150, 150)" />
  </g>
  
  <!-- Melting clock numbers -->
  <!-- 12 -->
  <text x="150" y="70" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#662d91" filter="url(#drip)">12</text>
  <path d="M145,75 Q142,95 138,115 T135,140" fill="#662d91" opacity="0.6" filter="url(#dripDown)" />
  <path d="M155,75 Q162,90 168,110" fill="#662d91" opacity="0.4" filter="url(#dripDown)" />
  
  <!-- 1 -->
  <text x="195" y="80" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#9e005d" filter="url(#drip)">1</text>
  <path d="M195,85 Q205,95 215,110 T220,135" fill="#9e005d" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 2 -->
  <text x="225" y="110" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#f7931e" filter="url(#drip)">2</text>
  <path d="M225,115 Q230,125 235,140 T240,165" fill="#f7931e" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 3 -->
  <text x="240" y="150" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#ed1c24" filter="url(#drip)">3</text>
  <path d="M240,155 Q260,160 270,175 T275,195" fill="#ed1c24" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 4 -->
  <text x="225" y="190" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#f15a24" filter="url(#drip)">4</text>
  <path d="M225,195 Q235,210 240,220 T245,245" fill="#f15a24" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 5 -->
  <text x="195" y="220" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#c69c6d" filter="url(#drip)">5</text>
  <path d="M195,225 Q200,245 210,260 T215,280" fill="#c69c6d" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 6 -->
  <text x="150" y="235" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#8cc63f" filter="url(#drip)">6</text>
  <path d="M150,240 Q155,260 145,280 T148,300" fill="#8cc63f" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 7 -->
  <text x="105" y="220" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#00a651" filter="url(#drip)">7</text>
  <path d="M105,225 Q95,245 85,260 T80,280" fill="#00a651" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 8 -->
  <text x="75" y="190" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#00a99d" filter="url(#drip)">8</text>
  <path d="M75,195 Q65,210 60,230 T55,250" fill="#00a99d" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 9 -->
  <text x="60" y="150" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#29abe2" filter="url(#drip)">9</text>
  <path d="M60,155 Q40,165 30,180 T25,200" fill="#29abe2" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 10 -->
  <text x="75" y="110" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#0071bc" filter="url(#drip)">10</text>
  <path d="M75,115 Q65,130 55,140 T50,165" fill="#0071bc" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- 11 -->
  <text x="105" y="80" text-anchor="middle" font-family="serif" font-size="24" font-weight="bold" fill="#2e3192" filter="url(#drip)">11</text>
  <path d="M105,85 Q95,100 90,120 T88,145" fill="#2e3192" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- Clock hands -->
  <!-- Hour hand -->
  <path d="M150,150 L170,110 Q175,105 170,100 T165,90 T160,75" fill="none" stroke="#333" stroke-width="6" stroke-linecap="round" filter="url(#meltFilter)" />
  
  <!-- Minute hand -->
  <path d="M150,150 L190,160 Q200,165 210,160 T230,180 T245,175" fill="none" stroke="#333" stroke-width="4" stroke-linecap="round" filter="url(#meltFilter)" />
  
  <!-- Second hand -->
  <path d="M150,150 L140,90 Q135,85 130,80 T125,70 T115,65" fill="none" stroke="#b91313" stroke-width="2" stroke-linecap="round" filter="url(#meltFilter)" />
  
  <!-- Center cap -->
  <circle cx="150" cy="150" r="8" fill="#333" />
  <circle cx="150" cy="150" r="3" fill="#111" />
  
  <!-- Surreal elements -->
  <!-- Dali-esque ants -->
  <g fill="#111">
    <circle cx="240" cy="225" r="3" />
    <circle cx="245" cy="220" r="3" />
    <circle cx="250" cy="215" r="3" />
    <circle cx="255" cy="212" r="3" />
    <circle cx="260" cy="210" r="3" />
    
    <!-- Second ant trail -->
    <circle cx="140" cy="245" r="2.5" />
    <circle cx="143" cy="250" r="2.5" />
    <circle cx="148" cy="254" r="2.5" />
    <circle cx="153" cy="257" r="2.5" />
    <circle cx="159" cy="260" r="2.5" />
  </g>
  
  <!-- Floating pocket watch -->
  <ellipse cx="45" cy="100" rx="15" ry="10" fill="#cc9ade" filter="url(#shadow)" transform="rotate(-15,45,100)" />
  <line x1="45" y1="90" x2="45" y2="70" stroke="#cc9ade" stroke-width="2" />
  
  <!-- Melting gold object -->
  <ellipse cx="260" cy="80" rx="12" ry="8" fill="#f7c174" filter="url(#shadow)" transform="rotate(20,260,80)" />
  <path d="M255,85 Q250,95 245,110 T240,130" fill="#f7c174" opacity="0.6" filter="url(#dripDown)" />
  
  <!-- Floating objects -->
  <path d="M70,60 Q80,50 90,60 T110,50 T125,60" fill="none" stroke="#d8b589" stroke-width="3" filter="url(#meltFilter)" />
  
  <!-- Mysterious glowing sphere -->
  <circle cx="250" cy="140" r="10" fill="#eab5d1" filter="url(#glow)" opacity="0.8" />
  
  <!-- Flying butterfly with melting wings -->
  <path d="M90,145 Q75,140 70,130 T80,115 T95,140" fill="#b3d9f5" filter="url(#meltFilter)" />
  <path d="M90,145 Q105,140 110,130 T100,115 T85,140" fill="#b3d9f5" filter="url(#meltFilter)" />
  <line x1="90" y1="145" x2="90" y2="155" stroke="#333" stroke-width="1" />
</svg>
o3-mini low (2025-01-31)
Player 2
ELO: 1,189.409 1,179.138 (-10.3)
SVG by o3-mini low (2025-01-31) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="bgGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#1e3c72"/>
      <stop offset="100%" stop-color="#2a5298"/>
    </linearGradient>
    <radialGradient id="clockGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#fff8dc"/>
      <stop offset="100%" stop-color="#f4a460"/>
    </radialGradient>
    <filter id="meltingShadow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
      <feOffset in="blur" dx="3" dy="5" result="offsetBlur"/>
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGradient)" />
  
  <!-- Surreal melting clock face -->
  <g id="clock">
    <circle cx="150" cy="150" r="80" fill="url(#clockGradient)" stroke="#8b4513" stroke-width="4" filter="url(#meltingShadow)" />
    
    <!-- Clock center -->
    <circle cx="150" cy="150" r="4" fill="#000" />
    
    <!-- Clock hands -->
    <line x1="150" y1="150" x2="150" y2="90" stroke="#000" stroke-width="3" stroke-linecap="round" transform="rotate(25 150 150)"/>
    <line x1="150" y1="150" x2="200" y2="150" stroke="#000" stroke-width="2" stroke-linecap="round" transform="rotate(-15 150 150)"/>
  </g>
  
  <!-- Melting numbers -->
  <g font-family="serif" font-size="16" fill="#000">
    <!-- Number 12 melting at top -->
    <text x="140" y="70" filter="url(#meltingShadow)" transform="rotate(-5 150 70)">12</text>
    <!-- Number 3 melting on right -->
    <text x="220" y="160" filter="url(#meltingShadow)" transform="rotate(10 220 160)">3</text>
    <!-- Number 6 melting at bottom -->
    <text x="145" y="230" filter="url(#meltingShadow)" transform="rotate(5 150 230)">6</text>
    <!-- Number 9 melting on left -->
    <text x="70" y="160" filter="url(#meltingShadow)" transform="rotate(-10 70 160)">9</text>
  </g>
  
  <!-- Dripping numbers details -->
  <g fill="#8b0000" opacity="0.7">
    <!-- Drip for 12 -->
    <path d="M150,70 C152,80,148,90,150,100 C149,110,151,115,150,120 L148,120 C147,115,149,110,148,100 C146,90,150,80,150,70 Z"/>
    <!-- Drip for 3 -->
    <path d="M220,160 C230,162,240,158,245,170 C248,180,242,185,240,195 L238,195 C236,185,230,180,228,170 C223,158,220,160,220,160 Z"/>
    <!-- Drip for 6 -->
    <path d="M150,230 C152,240,148,250,150,260 C149,270,151,275,150,280 L148,280 C147,275,149,270,148,260 C146,250,150,240,150,230 Z"/>
    <!-- Drip for 9 -->
    <path d="M70,160 C68,170,72,180,70,190 C69,200,71,205,70,210 L68,210 C67,205,69,200,68,190 C66,180,70,170,70,160 Z"/>
  </g>
  
  <!-- Surreal drips from clock edge -->
  <g fill="#d2691e" opacity="0.5">
    <path d="M190,230 C195,240,190,250,192,260 C191,265,194,268,193,275 L190,275 C189,268,192,265,191,260 C189,250,190,240,190,230 Z"/>
    <path d="M110,230 C105,240,110,250,108,260 C109,265,106,268,107,275 L110,275 C111,268,108,265,109,260 C111,250,110,240,110,230 Z"/>
  </g>
</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 exhibits a higher level of creativity and adherence to the Dali-esque surrealism prompt with its vibrant, melting numbers and abstract background.

    The use of diverse colors and flowing forms adds to the surreal quality, enhancing visual interest.

    While Player 2's submission is technically clean, it lacks the same level of imaginative elements and complexity required for 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
71
Player 2
11
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
23
Player 2
2
Ellipses

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

Player 1
3
Player 2
—
Lines

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

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

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

Player 1
3
Player 2
4

Visual Effects Metrics

Gradients

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

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

The number of elements with stroke attributes in the SVG.

Player 1
15
Player 2
3

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
34
Player 2
8

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
10
Player 2
6

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1
98
Player 2
42
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
10
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
12
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 #1248 Mar 13, 2025

"Floating island with a waterfall pouring into a teacup; use a minimalist style"

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o3-mini low (2025-01-31)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #682 Mar 13, 2025

"A cat in a suit of armor riding a snail over a field of giant mushrooms"

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o3-mini low (2025-01-31)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #569 Mar 13, 2025

"A cat wearing a monocle and top hat, sitting elegantly on a crescent moon"

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o3-mini low (2025-01-31)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #298 Mar 13, 2025

"A clock made of cheese, melting under a tiny sun with spoon-shaped rays"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o3-mini low (2025-01-31)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o3-mini low (2025-01-31)
View
Match #187 Mar 13, 2025

"Octopus in a top hat juggling planets under a starry sky"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o3-mini low (2025-01-31)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o3-mini low (2025-01-31)
View