Back

SVG Drawing Match #2618

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Surreal clock melting over a tree branch under a starry sky."

o4-mini high (2025-04-16)
Player 1
ELO: 1,134.406 1,122.565 (-11.8)
SVG by o4-mini high (2025-04-16) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="bgGrad" cx="50%" cy="20%" r="80%">
      <stop offset="0%" stop-color="#0a1f2d"/>
      <stop offset="100%" stop-color="#000"/>
    </radialGradient>
    <radialGradient id="clockFaceGrad" cx="50%" cy="40%" r="50%">
      <stop offset="0%" stop-color="#fff8c8"/>
      <stop offset="100%" stop-color="#f1e1a6"/>
    </radialGradient>
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="300" height="300" fill="url(#bgGrad)"/>
  <g id="stars" fill="#fff">
    <circle cx="15" cy="10" r="1" opacity="0.8"/>
    <circle cx="40" cy="25" r="1.2" opacity="0.7"/>
    <circle cx="60" cy="15" r="0.9" opacity="0.9"/>
    <circle cx="80" cy="35" r="1.3" opacity="0.6"/>
    <circle cx="100" cy="20" r="1.1" opacity="0.8"/>
    <circle cx="120" cy="30" r="1" opacity="0.7"/>
    <circle cx="140" cy="15" r="0.8" opacity="0.9"/>
    <circle cx="160" cy="40" r="1.4" opacity="0.6"/>
    <circle cx="180" cy="25" r="1.2" opacity="0.8"/>
    <circle cx="200" cy="50" r="1.1" opacity="0.7"/>
    <circle cx="220" cy="30" r="0.9" opacity="0.9"/>
    <circle cx="240" cy="45" r="1.3" opacity="0.6"/>
    <circle cx="260" cy="35" r="1.2" opacity="0.8"/>
    <circle cx="280" cy="20" r="0.9" opacity="0.7"/>
    <circle cx="300" cy="55" r="1.4" opacity="0.6"/>
    <circle cx="50" cy="60" r="1.1" opacity="0.8"/>
    <circle cx="100" cy="80" r="1.3" opacity="0.7"/>
    <circle cx="150" cy="70" r="1" opacity="0.9"/>
    <circle cx="200" cy="90" r="1.2" opacity="0.6"/>
    <circle cx="250" cy="75" r="0.8" opacity="0.8"/>
    <circle cx="30" cy="100" r="1.3" opacity="0.7"/>
    <circle cx="80" cy="115" r="1.1" opacity="0.9"/>
    <circle cx="130" cy="105" r="0.9" opacity="0.6"/>
    <circle cx="180" cy="120" r="1.2" opacity="0.8"/>
    <circle cx="230" cy="110" r="1" opacity="0.7"/>
  </g>
  <!-- Tree branch -->
  <path d="M0,180 C50,170 100,190 150,180 C200,175 250,195 300,180"
        fill="none" stroke="#4b2e0e" stroke-width="12" stroke-linecap="round"/>
  <path d="M0,180 C50,170 100,190 150,180 C200,175 250,195 300,180"
        fill="none" stroke="#573a15" stroke-width="6" stroke-linecap="round" opacity="0.6"/>
  <!-- Melting clock -->
  <path d="
    M120,120
    C130,90 170,90 180,120
    C182,135 190,150 184,160
    C180,200 150,195 150,175
    C148,195 120,200 120,160
    C110,150 120,135 120,120
    Z"
    fill="url(#clockFaceGrad)" stroke="#664e27" stroke-width="2" filter="url(#glow)"/>
  <!-- Clock hands -->
  <line x1="150" y1="130" x2="150" y2="110" stroke="#333" stroke-width="2" stroke-linecap="round" transform="rotate(-30,150,130)"/>
  <line x1="150" y1="130" x2="180" y2="130" stroke="#333" stroke-width="2" stroke-linecap="round" transform="rotate(60,150,130)"/>
  <circle cx="150" cy="130" r="2" fill="#333"/>
</svg>
Gemini 2.5 Pro Preview 05-06
Player 2
ELO: 1,226.821 1,238.663 (+11.8)
SVG by Gemini 2.5 Pro Preview 05-06 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <radialGradient id="skyGradient" cx="50%" cy="35%" r="75%" fx="50%" fy="40%">
      <stop offset="0%" style="stop-color:#3A1C71; stop-opacity:1" />
      <stop offset="25%" style="stop-color:#D76D77; stop-opacity:0.9" />
      <stop offset="50%" style="stop-color:#FFAF7B; stop-opacity:0.8" />
      <stop offset="75%" style="stop-color:#23153C; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0D0C1D; stop-opacity:1" />
    </radialGradient>

    <linearGradient id="clockMetal" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FDEFB2;" />
      <stop offset="20%" style="stop-color:#FAD02C;" />
      <stop offset="50%" style="stop-color:#DAA520;" />
      <stop offset="80%" style="stop-color:#B8860B;" />
      <stop offset="100%" style="stop-color:#8B4513;" />
    </linearGradient>
    <linearGradient id="clockHighlightGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" style="stop-color:rgba(255,255,240,0.8)" />
        <stop offset="100%" style="stop-color:rgba(250,210,44,0.3)" />
    </linearGradient>

    <linearGradient id="branchGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#6D4C41;" />
      <stop offset="50%" style="stop-color:#4E342E;" />
      <stop offset="100%" style="stop-color:#3E2723;" />
    </linearGradient>

    <filter id="starGlow">
      <feGaussianBlur stdDeviation="0.8" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="softNebulaBlur">
      <feGaussianBlur stdDeviation="12"/>
    </filter>
  </defs>

  <!-- Background Sky -->
  <rect width="300" height="300" fill="url(#skyGradient)" />

  <!-- Subtle Nebula Clouds -->
  <g opacity="0.4" filter="url(#softNebulaBlur)">
    <ellipse cx="80" cy="70" rx="100" ry="40" fill="#D76D77" opacity="0.3" transform="rotate(-20 80 70)" />
    <ellipse cx="220" cy="100" rx="120" ry="50" fill="#FFAF7B" opacity="0.25" transform="rotate(15 220 100)" />
    <ellipse cx="150" cy="50" rx="80" ry="30" fill="#8A2BE2" opacity="0.2" />
  </g>

  <!-- Stars -->
  <g id="starsContainer">
    <circle cx="26.31" cy="104.66" r="0.76" fill="rgba(255,255,255,0.7)" opacity="0.68" />
    <circle cx="136.45" cy="43.04" r="1.38" fill="rgba(255,255,220,0.9)" opacity="0.68" filter="url(#starGlow)" />
    <circle cx="227.28" cy="161.63" r="0.50" fill="rgba(255,255,255,0.7)" opacity="0.56" />
    <circle cx="108.58" cy="32.38" r="1.29" fill="rgba(220,220,255,1)" opacity="0.81" filter="url(#starGlow)" />
    <circle cx="47.83" cy="120.20" r="0.88" fill="rgba(255,255,255,0.7)" opacity="0.35" />
    <circle cx="278.45" cy="27.10" r="1.43" fill="rgba(255,255,220,0.9)" opacity="0.71" />
    <circle cx="25.89" cy="34.90" r="1.02" fill="rgba(220,220,255,1)" opacity="0.94" filter="url(#starGlow)" />
    <circle cx="188.61" cy="178.02" r="0.39" fill="rgba(255,255,255,0.7)" opacity="0.43" />
    <circle cx="166.94" cy="18.80" r="0.86" fill="rgba(255,255,255,0.7)" opacity="0.63" />
    <circle cx="76.74" cy="8.91" r="0.78" fill="rgba(255,255,220,0.9)" opacity="0.89" />
    <circle cx="265.83" cy="144.16" r="1.14" fill="rgba(255,255,220,0.9)" opacity="0.72" />
    <circle cx="59.91" cy="69.44" r="0.42" fill="rgba(255,255,255,0.7)" opacity="0.55" />
    <circle cx="201.98" cy="133.25" r="0.78" fill="rgba(255,255,255,0.7)" opacity="0.39" />
    <circle cx="149.00" cy="140.61" r="0.83" fill="rgba(255,255,220,0.9)" opacity="0.70" />
    <circle cx="90.23" cy="155.87" r="0.71" fill="rgba(255,255,220,0.9)" opacity="0.78" />
    <circle cx="32.82" cy="175.79" r="1.08" fill="rgba(255,255,220,0.9)" opacity="0.88" />
    <circle cx="204.12" cy="31.28" r="0.71" fill="rgba(255,255,255,0.7)" opacity="0.62" />
    <circle cx="238.33" cy="60.11" r="2.15" fill="rgba(220,220,255,1)" opacity="0.91" filter="url(#starGlow)" />
    <circle cx="122.32" cy="189.73" r="0.87" fill="rgba(255,255,255,0.7)" opacity="0.61" />
    <circle cx="290.61" cy="78.87" r="1.02" fill="rgba(255,255,220,0.9)" opacity="0.89" />
    <circle cx="70.01" cy="145.41" r="0.41" fill="rgba(255,255,255,0.7)" opacity="0.65" />
    <circle cx="175.27" cy="88.19" r="0.96" fill="rgba(255,255,220,0.9)" opacity="0.62" />
    <circle cx="211.64" cy="191.13" r="0.48" fill="rgba(255,255,255,0.7)" opacity="0.38" />
    <circle cx="11.78" cy="88.92" r="0.71" fill="rgba(255,255,255,0.7)" opacity="0.46" />
    <circle cx="248.87" cy="10.79" r="0.55" fill="rgba(255,255,255,0.7)" opacity="0.40" />
    <circle cx="128.60" cy="60.79" r="1.41" fill="rgba(255,255,220,0.9)" opacity="0.70" />
    <circle cx="199.78" cy="71.25" r="1.81" fill="rgba(220,220,255,1)" opacity="0.93" filter="url(#starGlow)" />
    <circle cx="55.68" cy="190.62" r="0.56" fill="rgba(255,255,255,0.7)" opacity="0.67" />
    <circle cx="277.34" cy="188.77" r="0.71" fill="rgba(255,255,255,0.7)" opacity="0.31" />
    <circle cx="98.33" cy="25.33" r="0.61" fill="rgba(255,255,220,0.9)" opacity="0.87" />
    <circle cx="15.50" cy="150.03" r="1.41" fill="rgba(255,255,220,0.9)" opacity="0.82" filter="url(#starGlow)" />
    <circle cx="233.93" cy="145.05" r="1.39" fill="rgba(220,220,255,1)" opacity="0.99" filter="url(#starGlow)" />
    <circle cx="40.11" cy="50.70" r="0.48" fill="rgba(255,255,255,0.7)" opacity="0.51" />
    <circle cx="180.11" cy="45.22" r="0.77" fill="rgba(255,255,255,0.7)" opacity="0.38" />
    <circle cx="288.20" cy="120.55" r="0.75" fill="rgba(255,255,220,0.9)" opacity="0.82" />
    <circle cx="66.33" cy="100.88" r="0.31" fill="rgba(255,255,255,0.7)" opacity="0.48" />
    <circle cx="111.88" cy="101.84" r="1.21" fill="rgba(255,255,220,0.9)" opacity="0.83" />
    <circle cx="215.55" cy="55.33" r="1.23" fill="rgba(255,255,220,0.9)" opacity="0.87" filter="url(#starGlow)" />
    <circle cx="29.77" cy="199.01" r="0.59" fill="rgba(255,255,255,0.7)" opacity="0.33" />
    <circle cx="165.22" cy="150.77" r="0.85" fill="rgba(255,255,255,0.7)" opacity="0.52" />
    <circle cx="255.99" cy="44.01" r="0.81" fill="rgba(255,255,220,0.9)" opacity="0.81" />
    <circle cx="10.33" cy="15.23" r="1.93" fill="rgba(220,220,255,1)" opacity="0.87" filter="url(#starGlow)" />
     <circle cx="270.11" cy="90.45" r="0.65" fill="rgba(255,255,255,0.7)" opacity="0.55" />
    <circle cx="50.78" cy="170.88" r="1.45" fill="rgba(255,255,220,0.9)" opacity="0.75" filter="url(#starGlow)" />
    <circle cx="190.25" cy="15.60" r="0.88" fill="rgba(255,255,255,0.7)" opacity="0.68" />
    <circle cx="130.50" cy="122.10" r="1.75" fill="rgba(220,220,255,1)" opacity="0.80" filter="url(#starGlow)" />
  </g>

  <!-- Tree Branch -->
  <path id="treeBranch"
        d="M 5 180
           C 60 165, 100 195, 150 180
           C 200 165, 240 195, 295 180
           L 293 192
           C 238 207, 198 177, 150 192
           C 98 207, 58 177, 7 192 Z"
        fill="url(#branchGradient)" stroke="#2F1B12" stroke-width="2.5" />

  <!-- Melting Clock -->
  <g id="meltingClock">
    <!-- Clock Casing -->
    <path id="clockCasingPath"
          d="M 150 100
             C 110 102, 90 125, 95 155  /* Left upper face */
             C 97 175, 105 180, 115 183 /* Left side draping onto branch */
             C 120 195, 125 215, 135 230 /* Left drip part 1 */
             Q 142 240, 150 242          /* Bottom most point of drip */
             Q 158 240, 165 230          /* Right drip part 1 */
             C 175 215, 180 195, 185 183 /* Right side draping onto branch */
             C 195 180, 203 175, 205 155 /* Right upper face */
             C 210 125, 190 102, 150 100 Z"
          fill="url(#clockMetal)" stroke="#7A550A" stroke-width="1.5" />

    <!-- Clock Casing Highlight -->
    <path id="clockHighlightPath"
          d="M 150 100.5
             C 120 102.5, 102 120, 100 145
             C 108 125, 125 105.5, 150 103.5
             A 48 48 0 0 1 190 115
             C 185 108, 170 101.5, 150 100.5 Z"
          fill="url(#clockHighlightGradient)" opacity="0.9" />

    <!-- Inner Clock Face -->
    <path id="innerFacePath"
          d="M 150 112
             Q 118 118, 115 152
             Q 118 186, 150 192
             Q 182 186, 185 152
             Q 182 118, 150 112 Z"
          fill="#F5EACE" stroke="#C8AB7B" stroke-width="0.5" />

    <!-- Clock Numerals -->
    <g fill="#4A3B27" font-family="Georgia, 'Times New Roman', serif" font-size="10" text-anchor="middle">
      <text x="150" y="126" transform="rotate(-3 150 123)">XII</text>
      <text x="173" y="138" transform="rotate(30 173 138) scale(0.95,1)">I</text>
      <text x="181" y="154" transform="rotate(60 181 154) scale(0.9,1)">II</text>
      <text x="183" y="170" transform="rotate(90 183 170) scale(0.9,1.05)">III</text>
      <text x="176" y="184" transform="rotate(125 176 184) scale(0.95,1.1)">IV</text>
      <text x="163" y="193" transform="rotate(150 163 193) scale(1,1.15)">V</text>
      <text x="150" y="196" transform="scale(1.05,1.25)">VI</text>
      <text x="137" y="193" transform="rotate(-150 137 193) scale(1,1.15)">VII</text>
      <text x="124" y="184" transform="rotate(-125 124 184) scale(0.95,1.1)">VIII</text>
      <text x="117" y="170" transform="rotate(-90 117 170) scale(0.9,1.05)">IX</text>
      <text x="119" y="154" transform="rotate(-60 119 154) scale(0.9,1)">X</text>
      <text x="127" y="138" transform="rotate(-30 127 138) scale(0.95,1)">XI</text>
    </g>

    <!-- Clock Hands -->
    <g fill="#3B2A1A" stroke="#2A1D0F" stroke-width="0.5">
      <!-- Hour Hand (pointing towards ~2, melting) -->
      <path d="M 150 152
               C 155 145, 165 142, 170 135
               Q 168 140, 162 143
               C 158 148, 152 151, 150 152 Z" />
      <!-- Minute Hand (pointing towards ~7, melting) -->
      <path d="M 150 152
               C 140 165, 130 175, 125 188
               Q 130 185, 135 178
               C 140 170, 148 155, 150 152 Z" />
    </g>
    <circle cx="150" cy="152" r="2.5" fill="#3B2A1A"/>
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Gemini 2.5 Pro Preview 05-06 Player 2

Judge's Analysis

    Player 2's image demonstrates stronger creativity and technical quality.

    The melting clock is detailed and effectively conveys the surreal theme, with Roman numerals and a vibrant starry sky blending into a radiant gradient background.

    Player 1's submission is simpler, but lacks the depth and surreal complexity required for the prompt.

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
32
Player 2
57
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
26
Player 2
47
Ellipses

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

Player 1
—
Player 2
3
Lines

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

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

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

Player 1
1
Player 2
5

Visual Effects Metrics

Gradients

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

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

The number of elements with opacity attributes in the SVG.

Player 1
26
Player 2
51
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
5
Player 2
4

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
9
Player 2
13

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
2
Player 2
14

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
163
Max Group Nesting

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

Player 1
—
Player 2
1
Defs Elements

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

Player 1
3
Player 2
6
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
12

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 #2705 May 09, 2025

"Tree made of melting clocks under a crescent moon."

P1
SVG by o4-mini high (2025-04-16)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o4-mini high (2025-04-16)
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2503 May 09, 2025

"A lone tree on a tiny floating island under a glowing crescent moon."

P1
SVG by Gemini 2.5 Pro Preview 05-06
P2
SVG by o4-mini high (2025-04-16)
Gemini 2.5 Pro Preview 05-06
vs
o4-mini high (2025-04-16)
View
Match #2391 May 09, 2025

"Two flamingos fencing with breadsticks under a disco ball at sunset."

P1
SVG by Gemini 2.5 Pro Preview 05-06
P2
SVG by o4-mini high (2025-04-16)
Gemini 2.5 Pro Preview 05-06
vs
o4-mini high (2025-04-16)
View