Back

SVG Drawing Match #1017

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A clock with melting numbers in a surreal desert landscape"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,311.966 1,315.096 (+3.1)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Sky gradient with surreal colors -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1A0033" />
      <stop offset="40%" stop-color="#FF5E5E" />
      <stop offset="70%" stop-color="#FF9D00" />
      <stop offset="100%" stop-color="#FFD700" />
    </linearGradient>
    
    <!-- Sand gradient with warm tones -->
    <linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#FFD700" />
      <stop offset="30%" stop-color="#E2A76F" />
      <stop offset="100%" stop-color="#CD853F" />
    </linearGradient>
    
    <!-- Clock face gradient -->
    <radialGradient id="clockFaceGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#FFFFFF" />
      <stop offset="70%" stop-color="#F0F0F0" />
      <stop offset="100%" stop-color="#E0E0E0" />
    </radialGradient>
    
    <!-- Sun gradient -->
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#FFFFFF" />
      <stop offset="20%" stop-color="#FFFF00" />
      <stop offset="100%" stop-color="#FF8C00" />
    </radialGradient>
    
    <!-- Melting effect gradient -->
    <linearGradient id="meltingGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#F0F0F0" />
      <stop offset="100%" stop-color="#D0D0D0" />
    </linearGradient>
    
    <!-- Shadow gradient -->
    <radialGradient id="shadowGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#000000" stop-opacity="0" />
    </radialGradient>
    
    <!-- Desert ground texture -->
    <pattern id="sandPattern" patternUnits="userSpaceOnUse" width="30" height="30">
      <rect width="30" height="30" fill="#E2A76F" />
      <circle cx="5" cy="5" r="1" fill="#CD853F" opacity="0.3" />
      <circle cx="15" cy="20" r="1.5" fill="#CD853F" opacity="0.3" />
      <circle cx="25" cy="10" r="1" fill="#CD853F" opacity="0.3" />
    </pattern>
  </defs>
  
  <!-- Background - Surreal sky -->
  <rect x="0" y="0" width="300" height="150" fill="url(#skyGradient)" />
  
  <!-- Stars in the sky -->
  <circle cx="20" cy="15" r="1" fill="white" />
  <circle cx="40" cy="25" r="0.8" fill="white" />
  <circle cx="70" cy="10" r="1.2" fill="white" />
  <circle cx="100" cy="30" r="0.9" fill="white" />
  <circle cx="140" cy="20" r="1" fill="white" />
  <circle cx="180" cy="15" r="0.7" fill="white" />
  <circle cx="220" cy="10" r="1.1" fill="white" />
  <circle cx="260" cy="20" r="0.8" fill="white" />
  <circle cx="290" cy="30" r="1" fill="white" />
  
  <!-- Surreal suns -->
  <circle cx="230" cy="40" r="25" fill="url(#sunGradient)" />
  <circle cx="50" cy="70" r="15" fill="url(#sunGradient)" opacity="0.7" />
  
  <!-- Desert landscape -->
  <path d="M0,150 Q75,130 150,145 T300,135 L300,300 L0,300 Z" fill="url(#sandGradient)" />
  <path d="M0,180 Q100,160 200,175 T300,160 L300,300 L0,300 Z" fill="url(#sandPattern)" opacity="0.5" />
  
  <!-- Distant mountains -->
  <path d="M0,135 L30,120 L60,130 L90,115 L120,125 L150,110 L180,120 L210,105 L240,125 L270,115 L300,130 L300,150 L0,150 Z" fill="#A0522D" opacity="0.6" />
  
  <!-- Strange rock formations -->
  <path d="M40,180 L30,160 L25,140 L40,130 L55,145 L60,170 L40,180 Z" fill="#8B4513" />
  <path d="M260,170 L250,150 L260,130 L275,135 L285,150 L270,165 L260,170 Z" fill="#A0522D" />
  
  <!-- Dead tree -->
  <g transform="translate(70, 190)">
    <path d="M0,0 L0,-30 L-15,-45 L-5,-55 L5,-50 L15,-60 L10,-45 L20,-55 L5,-40 L0,-30 Z" fill="#5D4037" />
    <ellipse cx="0" cy="2" rx="5" ry="2" fill="#8B4513" />
  </g>
  
  <!-- Main melting clock -->
  <g transform="translate(150, 120)">
    <!-- Shadow under main clock -->
    <ellipse cx="0" cy="80" rx="60" ry="20" fill="url(#shadowGradient)" />
    
    <!-- Warped clock body -->
    <path d="M0,-40 C30,-35 45,-20 50,0 C55,20 45,40 25,45 C5,50 -25,45 -45,30 C-55,15 -45,-30 0,-40 Z" fill="url(#clockFaceGradient)" stroke="#B8860B" stroke-width="3" />
    
    <!-- Melting drip effects -->
    <path d="M-30,40 C-25,60 -20,80 -10,100 C0,120 10,130 20,150 C22,170 15,180 10,190 C0,180 -5,175 -10,150 C-20,120 -25,90 -30,40 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="2" />
    <path d="M20,35 C25,45 30,60 25,80 C23,90 18,95 15,100 C12,95 11,90 12,80 C15,65 18,50 20,35 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="1.5" />
    
    <!-- Clock hands (melting) -->
    <path d="M0,0 C5,5 10,15 15,40 C18,50 15,60 10,70" stroke="#333" stroke-width="2.5" fill="none" />
    <path d="M0,0 C15,5 30,-5 40,-15 C45,-20 50,-15 55,-10" stroke="#333" stroke-width="3.5" fill="none" />
    
    <!-- Clock center -->
    <circle cx="0" cy="0" r="4" fill="#333" />
    
    <!-- Melting numbers -->
    <!-- 12 -->
    <g transform="translate(0, -30)">
      <text x="0" y="0" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle">12</text>
      <path d="M-5,5 C-8,20 -12,40 -15,60 C-15,65 -10,70 -5,75 C-2,70 -4,65 -5,60" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
      <path d="M5,5 C8,25 12,50 18,70 C20,75 17,80 15,85 C10,80 8,75 10,70" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    </g>
    
    <!-- 3 -->
    <g transform="translate(35, 0)">
      <text x="0" y="0" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle">3</text>
      <path d="M0,5 C10,10 25,15 60,18 C70,18 75,15 80,10 C75,5 70,7 65,10" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
      <path d="M-5,0 C0,15 5,25 10,40 C12,45 8,50 5,55 C2,50 0,45 2,40" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    </g>
    
    <!-- 6 -->
    <g transform="translate(0, 35)">
      <text x="0" y="0" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle">6</text>
      <path d="M0,5 C0,30 0,60 0,100 C0,110 -5,115 -10,120 C-15,115 -10,110 -5,100 C-5,70 -2,30 0,5" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    </g>
    
    <!-- 9 -->
    <g transform="translate(-35, 0)">
      <text x="0" y="0" font-family="Arial" font-size="14" font-weight="bold" text-anchor="middle">9</text>
      <path d="M-2,5 C-20,10 -40,15 -70,10 C-75,8 -75,3 -70,0 C-65,2 -60,5 -55,5" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
      <path d="M2,5 C-5,15 -15,25 -25,35 C-30,40 -35,38 -38,35 C-35,30 -30,28 -25,25" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    </g>
    
    <!-- Hour marks -->
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(30)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(60)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(120)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(150)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(210)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(240)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(300)" stroke="#000" stroke-width="2" />
    <line x1="0" y1="-38" x2="0" y2="-45" transform="rotate(330)" stroke="#000" stroke-width="2" />
  </g>
  
  <!-- Small melting pocket watch -->
  <g transform="translate(220, 180)">
    <!-- Shadow -->
    <ellipse cx="0" cy="40" rx="25" ry="10" fill="url(#shadowGradient)" />
    
    <!-- Watch body -->
    <ellipse cx="0" cy="0" rx="20" ry="15" fill="url(#clockFaceGradient)" stroke="#B8860B" stroke-width="2" />
    
    <!-- Melting effect -->
    <path d="M-10,15 C-5,25 0,40 5,60 C7,70 3,75 0,80 C-3,75 -7,70 -5,60 C0,40 -5,25 -10,15 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="1.5" />
    
    <!-- Watch hands and details -->
    <line x1="0" y1="0" x2="8" y2="-6" stroke="#333" stroke-width="1.5" />
    <line x1="0" y1="0" x2="-5" y2="8" stroke="#333" stroke-width="1.5" />
    <circle cx="0" cy="0" r="2" fill="#333" />
    
    <!-- Mini hour marks -->
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(0)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(30)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(60)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(90)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(120)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(150)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(180)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(210)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(240)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(270)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(300)" stroke="#000" stroke-width="1" />
    <line x1="0" y1="-12" x2="0" y2="-14" transform="rotate(330)" stroke="#000" stroke-width="1" />
    
    <!-- Melting numbers -->
    <g transform="scale(0.6)">
      <text x="0" y="-15" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">12</text>
      <text x="15" y="0" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">3</text>
      <text x="0" y="15" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">6</text>
      <text x="-15" y="0" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">9</text>
    </g>
  </g>
  
  <!-- Another melting clock/watch -->
  <g transform="translate(60, 150)">
    <!-- Shadow -->
    <ellipse cx="10" cy="50" rx="20" ry="8" fill="url(#shadowGradient)" />
    
    <!-- Watch body -->
    <ellipse cx="0" cy="0" rx="15" ry="12" fill="url(#clockFaceGradient)" stroke="#B8860B" stroke-width="2" transform="rotate(-20)" />
    
    <!-- Melting effect -->
    <path d="M5,10 C15,20 20,40 25,80 C27,90 23,95 20,100 C17,95 13,90 15,80 C20,40 10,20 5,10 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="1.5" />
    
    <!-- Watch hands -->
    <line x1="0" y1="0" x2="5" y2="-8" stroke="#333" stroke-width="1.5" transform="rotate(-20)" />
    <line x1="0" y1="0" x2="-7" y2="3" stroke="#333" stroke-width="1.5" transform="rotate(-20)" />
    <circle cx="0" cy="0" r="2" fill="#333" />
    
    <!-- Mini numbers melting -->
    <g transform="scale(0.5) rotate(-20)">
      <text x="0" y="-15" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">12</text>
      <path d="M0,-10 C5,-5 10,0 20,40" stroke="#000" stroke-width="0.8" fill="none" />
      
      <text x="15" y="0" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">3</text>
      <path d="M20,0 C30,5 40,10 50,15" stroke="#000" stroke-width="0.8" fill="none" />
      
      <text x="0" y="15" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">6</text>
      <path d="M0,20 C0,30 0,40 0,60" stroke="#000" stroke-width="0.8" fill="none" />
      
      <text x="-15" y="0" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle">9</text>
      <path d="M-20,0 C-30,5 -40,10 -60,5" stroke="#000" stroke-width="0.8" fill="none" />
    </g>
  </g>
  
  <!-- Floating melting numbers -->
  <g transform="translate(100, 80)">
    <text x="0" y="0" font-family="Arial" font-size="18" font-weight="bold" text-anchor="middle" fill="#000">7</text>
    <path d="M0,5 C0,15 5,25 10,60 C12,65 8,70 5,75 C2,70 0,65 2,60" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    <path d="M-5,0 C-15,10 -25,20 -40,30 C-45,35 -50,30 -55,25 C-50,20 -45,22 -40,25" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
  </g>
  
  <g transform="translate(200, 70)">
    <text x="0" y="0" font-family="Arial" font-size="20" font-weight="bold" text-anchor="middle" fill="#000">4</text>
    <path d="M5,5 C10,25 15,40 25,80 C27,85 23,90 20,95 C15,90 13,85 15,80" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    <path d="M-5,0 C-10,10 -20,15 -30,20 C-35,22 -40,18 -42,15 C-38,12 -35,15 -30,15" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
  </g>
  
  <g transform="translate(250, 100)">
    <text x="0" y="0" font-family="Arial" font-size="16" font-weight="bold" text-anchor="middle" fill="#000">8</text>
    <path d="M-5,5 C-10,15 -15,25 -25,40 C-27,45 -23,48 -20,50 C-17,47 -18,44 -20,40" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
    <path d="M5,5 C10,15 15,25 25,35 C28,38 25,42 22,45 C18,42 17,38 20,35" stroke="#000" stroke-width="1" fill="#000" fill-opacity="0.7" />
  </g>
  
  <!-- Small scattered clock elements -->
  <g transform="translate(30, 110)">
    <circle cx="0" cy="0" r="8" fill="url(#clockFaceGradient)" stroke="#B8860B" stroke-width="1" />
    <path d="M0,8 C5,15 7,25 5,35 C4,40 2,42 0,45 C-2,42 -4,40 -5,35 C-7,25 -5,15 0,8 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="0.5" />
    <line x1="0" y1="0" x2="3" y2="-5" stroke="#333" stroke-width="1" />
    <line x1="0" y1="0" x2="-4" y2="2" stroke="#333" stroke-width="1" />
  </g>
  
  <g transform="translate(270, 140)">
    <circle cx="0" cy="0" r="7" fill="url(#clockFaceGradient)" stroke="#B8860B" stroke-width="1" />
    <path d="M0,7 C-3,15 -5,25 -8,35 C-9,38 -6,40 -4,42 C-2,40 -1,38 -2,35 C0,25 2,15 0,7 Z" fill="url(#meltingGradient)" stroke="#B8860B" stroke-width="0.5" />
    <line x1="0" y1="0" x2="0" y2="-5" stroke="#333" stroke-width="1" />
    <line x1="0" y1="0" x2="3" y2="3" stroke="#333" stroke-width="1" />
  </g>
  
  <!-- Cactus in desert -->
  <g transform="translate(230, 210)">
    <path d="M0,0 L0,-25 L-10,-35 L-10,-45 L0,-25 L10,-40 L10,-30 L0,-15 L0,0 Z" fill="#2E7D32" />
    <ellipse cx="0" cy="2" rx="4" ry="2" fill="#8B4513" />
  </g>
</svg>
DeepSeek-R1-Distill-Llama-70B
Player 2
ELO: 925.957 922.828 (-3.1)
SVG by DeepSeek-R1-Distill-Llama-70B 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Background with gradient and texture -->
  <defs>
    <linearGradient id="desertGradient" x1="0" y1="0" x2="0" y2="300">
      <stop offset="0" stop-color="#FFD700" />
      <stop offset="1" stop-color="#DA70D6" />
    </linearGradient>
    <path id="duneShape" d="M0 300 Q150 200 300 300 Q200 250 100 300" />
    <linearGradient id="sandTexture" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#FFF" />
      <stop offset="1" stop-color="#F5DEB3" />
    </linearGradient>
  </defs>

  <!-- Desert background -->
  <rect width="300" height="300" fill="url(#desertGradient)" />
  <!-- Desert dunes with texture -->
  <g transform="translate(0,200)">
    <use href="#duneShape" fill="url(#sandTexture)" opacity="0.8" />
    <use href="#duneShape" transform="translate(100,0)" fill="url(#sandTexture)" opacity="0.6" />
  </g>

  <!-- Melting clock -->
  <g transform="translate(150,150)">
    <!-- Clock face with gradient -->
    <circle r="80" fill="url(#desertGradient)" transform="rotate(30)" />
    <!-- Melting numbers -->
    <path d="M-80,0 Q-40,-20 -20,-40 L0,-60 L20,-40 40,-20 0,0 Z" fill="#FFD700" transform="rotate(0)" opacity="0.8" />
    <path d="M0,-80 Q-20,-40 -40,-20 L-60,0 L-40,20 -20,40 0,0 Z" fill="#FFD700" transform="rotate(90)" opacity="0.8" />
    <!-- Clock hands -->
    <line x1="0" y1="0" x2="-40" y2="-60" stroke="#FFF" stroke-width="2" />
    <line x1="0" y1="0" x2="40" y2="-40" stroke="#FFF" stroke-width="4" />
  </g>

  <!-- Surreal sky elements -->
  <rect width="300" height="150" fill="url(#desertGradient)" opacity="0.3" />
  <circle cx="250" cy="100" r="50" fill="#FFF" opacity="0.2" />
  <circle cx="250" cy="100" r="40" fill="#FFF" opacity="0.5" />
  <!-- Stars -->
  <g fill="#FFF">
    <circle cx="50" cy="50" r="1" />
    <circle cx="100" cy="80" r="1" />
    <circle cx="200" cy="60" r="1" />
    <circle cx="250" cy="100" r="1" />
  </g>

  <!-- Crescent moon -->
  <path d="M200,100 Q220,90 240,100 Q230,110 220,100" fill="#FFF" />
  <path d="M220,100 Q225,95 230,100 Q228,105 220,100" fill="#FFF" />
</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 submission captures the surreal and dynamic essence of the prompt with a vibrant desert landscape and melting clock numbers that convey a sense of fluidity and distortion.

    The composition is rich and imaginative, aligning well with the surreal theme.

    Player 2's image, while minimalist, lacks the detail and creativity necessary to fully realize the concept of melting numbers in a surreal desert setting.

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

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

Player 1
2
Player 2
2
Circles

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

Player 1
19
Player 2
7
Ellipses

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

Player 1
7
Player 2
—
Lines

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

Player 1
28
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
33
Player 2
5
Groups

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

Player 1
16
Player 2
3

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
—
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
6
Player 2
7
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
58
Player 2
2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
20
Player 2
4

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
39
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
173
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
7
Player 2
3
Use Elements

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

Player 1
—
Player 2
2

Text Metrics

Text Elements

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

Player 1
15
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 #1259 Mar 13, 2025

"Astronaut squirrel juggling planets, in a geometric style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek-R1-Distill-Llama-70B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek-R1-Distill-Llama-70B
View
Match #1202 Mar 13, 2025

"Dandelion made of clock gears, in a minimalist steampunk style"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1124 Mar 13, 2025

"A geometric zebra made entirely of triangles drinking neon water from a pixelated oasis"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #625 Mar 13, 2025

"A giraffe wearing a spacesuit, floating among colorful planets"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek-R1-Distill-Llama-70B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek-R1-Distill-Llama-70B
View
Match #581 Mar 13, 2025

"A flamingo in a top hat playing the violin under a moonlit sky"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #545 Mar 13, 2025

"Floating island with skyscrapers, underlit by bioluminescent jellyfish in the sky"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View