Back

SVG Drawing Match #298

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

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

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 1

ELO: 1,201.259 1,210.98 (+9.7)

Winner

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 patterns -->
  <defs>
    <!-- Sun gradient -->
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffff00" />
      <stop offset="80%" stop-color="#ff9500" />
      <stop offset="100%" stop-color="#ff5500" />
    </radialGradient>
    
    <!-- Cheese gradient -->
    <radialGradient id="cheeseGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffed8b" />
      <stop offset="70%" stop-color="#ffc72c" />
      <stop offset="100%" stop-color="#e6b422" />
    </radialGradient>
    
    <!-- Melting cheese gradient -->
    <linearGradient id="meltingGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ffc72c" />
      <stop offset="100%" stop-color="#ffed8b" stop-opacity="0.7" />
    </linearGradient>
    
    <!-- Cheese hole pattern -->
    <pattern id="cheeseHoles" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="#f7db8c" />
      <circle cx="30" cy="10" r="2" fill="#f7db8c" />
      <circle cx="20" cy="25" r="4" fill="#f7db8c" />
      <circle cx="35" cy="30" r="3" fill="#f7db8c" />
    </pattern>
    
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#87ceeb" />
      <stop offset="100%" stop-color="#e6f7ff" />
    </linearGradient>
    
    <!-- Spoon bowl shine -->
    <linearGradient id="spoonShine" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffc8" />
      <stop offset="100%" stop-color="#ffcc00" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGradient)" />
  
  <!-- Decorative elements - fluffy clouds -->
  <ellipse cx="50" cy="40" rx="25" ry="15" fill="white" opacity="0.8" />
  <ellipse cx="65" cy="35" rx="20" ry="18" fill="white" opacity="0.8" />
  <ellipse cx="40" cy="30" rx="15" ry="10" fill="white" opacity="0.8" />
  
  <ellipse cx="250" cy="50" rx="25" ry="15" fill="white" opacity="0.8" />
  <ellipse cx="235" cy="40" rx="20" ry="18" fill="white" opacity="0.8" />
  <ellipse cx="260" cy="35" rx="15" ry="10" fill="white" opacity="0.8" />
  
  <!-- Sun with spoon-shaped rays -->
  <g id="sun">
    <!-- Sun glow -->
    <circle cx="150" cy="60" r="40" fill="url(#sunGradient)" opacity="0.3" />
    
    <!-- Sun circle -->
    <circle cx="150" cy="60" r="30" fill="url(#sunGradient)" />
    
    <!-- Spoon-shaped rays -->
    <!-- Ray 1 (right) -->
    <g transform="translate(150, 60) rotate(0)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 2 (bottom right) -->
    <g transform="translate(150, 60) rotate(45)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 3 (bottom) -->
    <g transform="translate(150, 60) rotate(90)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 4 (bottom left) -->
    <g transform="translate(150, 60) rotate(135)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 5 (left) -->
    <g transform="translate(150, 60) rotate(180)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 6 (top left) -->
    <g transform="translate(150, 60) rotate(225)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 7 (top) -->
    <g transform="translate(150, 60) rotate(270)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Ray 8 (top right) -->
    <g transform="translate(150, 60) rotate(315)">
      <rect x="30" y="-2" width="20" height="4" fill="#ff9900" rx="2" ry="2" />
      <ellipse cx="60" cy="0" rx="10" ry="7" fill="url(#spoonShine)" stroke="#ff9900" stroke-width="1" />
    </g>
    
    <!-- Sun face -->
    <circle cx="140" cy="55" r="4" fill="#ff5500" />
    <circle cx="160" cy="55" r="4" fill="#ff5500" />
    <path d="M138,70 Q150,80 162,70" fill="none" stroke="#ff5500" stroke-width="2" stroke-linecap="round" />
  </g>
  
  <!-- Heat waves from the sun -->
  <g id="heatWaves" opacity="0.3">
    <path d="M110,95 Q130,90 150,95 Q170,100 190,95" fill="none" stroke="#ff9900" stroke-width="1.5" />
    <path d="M110,105 Q130,100 150,105 Q170,110 190,105" fill="none" stroke="#ff9900" stroke-width="1.5" />
    <path d="M110,115 Q130,110 150,115 Q170,120 190,115" fill="none" stroke="#ff9900" stroke-width="1.5" />
  </g>
  
  <!-- Melting Cheese Pool -->
  <g id="meltingPool">
    <!-- Large puddle at the bottom -->
    <ellipse cx="150" cy="290" rx="70" ry="15" fill="url(#meltingGradient)" />
  </g>
  
  <!-- Melting Cheese Drips -->
  <g id="meltingCheese">    
    <!-- Drip 1 -->
    <path d="M110,245 C110,245 105,270 100,290 C95,310 115,310 120,290 C125,270 115,250 120,245 Z" 
          fill="url(#meltingGradient)" />
    
    <!-- Drip 2 -->
    <path d="M170,245 C170,245 175,270 170,290 C165,310 185,310 190,290 C195,270 185,250 180,245 Z" 
          fill="url(#meltingGradient)" />
    
    <!-- Drip 3 -->
    <path d="M140,245 C140,245 135,270 130,290 C125,310 145,310 150,290 C155,270 150,250 145,245 Z" 
          fill="url(#meltingGradient)" />
    
    <!-- Melting edge at the bottom of the clock -->
    <path d="M90,170 C90,210 110,240 150,250 C190,240 210,210 210,170 C210,180 190,230 150,240 C110,230 90,180 90,170 Z" 
          fill="url(#meltingGradient)" />
  </g>
  
  <!-- Cheese Clock -->
  <g id="cheeseClock">
    <!-- Main cheese body -->
    <circle cx="150" cy="170" r="80" fill="url(#cheeseGradient)" stroke="#e6b422" stroke-width="2" />
    
    <!-- Clock tick marks -->
    <g stroke="#8B4513" stroke-width="2">
      <line x1="150" y1="100" x2="150" y2="110" />
      <line x1="190" y1="110" x2="185" y2="119" />
      <line x1="220" y1="140" x2="210" y2="145" />
      <line x1="230" y1="170" x2="220" y2="170" />
      <line x1="220" y1="200" x2="210" y2="195" />
      <line x1="190" y1="230" x2="185" y2="221" />
      <line x1="150" y1="240" x2="150" y2="230" />
      <line x1="110" y1="230" x2="115" y2="221" />
      <line x1="80" y1="200" x2="90" y2="195" />
      <line x1="70" y1="170" x2="80" y2="170" />
      <line x1="80" y1="140" x2="90" y2="145" />
      <line x1="110" y1="110" x2="115" y2="119" />
    </g>
    
    <!-- Cheese holes pattern overlay -->
    <circle cx="150" cy="170" r="80" fill="url(#cheeseHoles)" fill-opacity="0.6" />
    
    <!-- Clock numbers -->
    <text x="150" y="95" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">12</text>
    <text x="195" y="115" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">1</text>
    <text x="225" y="150" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">2</text>
    <text x="235" y="175" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">3</text>
    <text x="225" y="205" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">4</text>
    <text x="195" y="235" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">5</text>
    <text x="150" y="245" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">6</text>
    <text x="105" y="235" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">7</text>
    <text x="75" y="205" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">8</text>
    <text x="65" y="175" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">9</text>
    <text x="75" y="150" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">10</text>
    <text x="105" y="115" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#8B4513">11</text>
    
    <!-- Clock hands -->
    <line x1="150" y1="170" x2="150" y2="120" stroke="#8B4513" stroke-width="3" stroke-linecap="round" />
    <line x1="150" y1="170" x2="190" y2="170" stroke="#8B4513" stroke-width="4" stroke-linecap="round" />
    
    <!-- Clock center -->
    <circle cx="150" cy="170" r="6" fill="#8B4513" />
    <circle cx="150" cy="170" r="2" fill="#e6b422" />
  </g>
  
  <!-- Additional melting details -->
  <g id="additionalMeltingDetails">
    <!-- Some dribbles on the clock -->
    <path d="M125,105 C123,115 122,125 126,135" fill="none" stroke="url(#meltingGradient)" stroke-width="3" stroke-linecap="round" />
    <path d="M190,180 C200,185 210,190 218,195" fill="none" stroke="url(#meltingGradient)" stroke-width="3" stroke-linecap="round" />
    
    <!-- Small drops -->
    <circle cx="218" cy="195" r="3" fill="url(#meltingGradient)" />
    <circle cx="126" cy="135" r="2.5" fill="url(#meltingGradient)" />
    <circle cx="180" cy="240" r="4" fill="url(#meltingGradient)" />
    <circle cx="120" cy="238" r="3" fill="url(#meltingGradient)" />
  </g>
</svg>

o3-mini low (2025-01-31)

Player 2

ELO: 1,057.188 1,047.467 (-9.7)

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradients for cheese -->
    <radialGradient id="cheeseGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffcc33"/>
      <stop offset="100%" stop-color="#e6a800"/>
    </radialGradient>
    <!-- Gradients for melting effect -->
    <linearGradient id="meltGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffcc33" stop-opacity=".9"/>
      <stop offset="100%" stop-color="#e6a800" stop-opacity="0"/>
    </linearGradient>
    <!-- Gradient for the sun -->
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffdb4d"/>
      <stop offset="100%" stop-color="#ffcc00"/>
    </radialGradient>
    <!-- Pattern for straw-like texture on spoon rays -->
    <pattern id="spoonPattern" patternUnits="userSpaceOnUse" width="8" height="8">
      <path d="M0,8 L8,0" stroke="#fff" stroke-width="1"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#f7f3e9"/>

  <!-- The cheese clock main body -->
  <circle cx="150" cy="150" r="90" fill="url(#cheeseGradient)" stroke="#cc9900" stroke-width="4"/>
  
  <!-- Clock numbers represented as cheese holes -->
  <g fill="#f7f3e9">
    <circle cx="150" cy="65" r="8"/>
    <circle cx="214" cy="90" r="7"/>
    <circle cx="245" cy="150" r="8"/>
    <circle cx="214" cy="210" r="7"/>
    <circle cx="150" cy="235" r="8"/>
    <circle cx="86"  cy="210" r="7"/>
    <circle cx="55"  cy="150" r="8"/>
    <circle cx="86"  cy="90" r="7"/>
  </g>
  
  <!-- Clock hands (a melting look) -->
  <line x1="150" y1="150" x2="150" y2="80" stroke="#663300" stroke-width="4" stroke-linecap="round"/>
  <line x1="150" y1="150" x2="205" y2="150" stroke="#663300" stroke-width="3" stroke-linecap="round"/>
  
  <!-- Melting cheese effect on the top of clock -->
  <path d="M70,95 Q90,70 110,95 T150,95 Q170,115 190,95 T230,95 L230,110 Q190,130 150,110 Q110,130 70,110 Z" fill="url(#meltGradient)" />

  <!-- The tiny sun -->
  <g transform="translate(240, 40)">
    <circle cx="0" cy="0" r="12" fill="url(#sunGradient)" stroke="#cc9900" stroke-width="2"/>
    <!-- Spoon-shaped rays -->
    <g fill="#ffcc00">
      <!-- Ray 1 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(0)"/>
      <!-- Ray 2 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(45)"/>
      <!-- Ray 3 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(90)"/>
      <!-- Ray 4 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(135)"/>
      <!-- Ray 5 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(180)"/>
      <!-- Ray 6 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(225)"/>
      <!-- Ray 7 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(270)"/>
      <!-- Ray 8 -->
      <path d="M0,-20 L4,-8 L0,-10 L-4,-8 Z" transform="rotate(315)"/>
    </g>
  </g>

  <!-- Spoon pattern overlay on rays for added texture -->
  <g transform="translate(240,40)">
    <g fill="url(#spoonPattern)">
      <rect x="-20" y="-20" width="40" height="40" />
    </g>
  </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 creatively captures the prompt by featuring a smiling sun with spoon-shaped rays and a cheese-like texture for the clock, which is also visually appealing with its playful design and melting effect.

Player 2's submission, while clean and technically sound, does not incorporate the spoon-shaped rays or the melting aspect as effectively, making Player 1 the stronger choice overall.

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

Player 2

Rectangles

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

Player 1

Player 2

Circles

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

Player 1

Player 2

Ellipses

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

Player 1

Player 2

—

Lines

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

Player 1

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

Player 2

Groups

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

Player 1

Player 2

Visual Effects Metrics

Gradients

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

Player 1

Player 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

—

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

Player 2

—

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

Player 2

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

Player 2

Complexity Metrics

Path Commands

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

Player 1

Player 2

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

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

—

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.