Back

SVG Drawing Match #50

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A steampunk snail with a mechanical shell and clockwork gears"

SVG by DeepSeek-R1-Distill-Llama-70B
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background with subtle gradient -->
  <rect width="300" height="300" fill="url(#bgGrad)" />
  
  <!-- Custom gradient for background -->
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="300" y2="300">
      <stop offset="0" stop-color="#1a1a1a" />
      <stop offset="1" stop-color="#2a2a2a" />
    </linearGradient>
  </defs>

  <!-- Snail body -->
  <ellipse cx="220" cy="240" rx="40" ry="30" fill="#4a2a14" />
  <ellipse cx="220" cy="240" rx="35" ry="25" fill="url(#snailGrad)" />
  
  <!-- Snail gradient -->
  <radialGradient id="snailGrad" cx="220" cy="240" r="1" fx="220" fy="240">
    <stop offset="0" stop-color="#4a2a14" />
    <stop offset="1" stop-color="#6a3a1f" />
  </radialGradient>

  <!-- Mechanical shell -->
  <g transform="translate(120, 180)">
    <!-- Main shell body -->
    <path d="M0,0 Q60,-40 120,0 Q180,-40 240,0 Q300,40 180,80 L0,80 L0,0 Z" 
          fill="url(#shellGrad)" stroke="#333" stroke-width="2" />
    
    <!-- Shell gradient -->
    <linearGradient id="shellGrad" x1="0" y1="0" x2="240" y2="80">
      <stop offset="0" stop-color="#cd7f32" />
      <stop offset="1" stop-color="#a9714f" />
    </linearGradient>

    <!-- Gears and cogs -->
    <g transform="translate(60,20)">
      <!-- Large gear -->
      <circle cx="0" cy="0" r="40" fill="none" stroke="#666" stroke-width="2" />
      <path d="M0,0 L40,0 L20,-20 L0,0" fill="#666" />
      <path d="M0,0 L-20,-20 L0,0 L20,-20 L0,0" fill="#666" />
      
      <!-- Small gears -->
      <circle cx="80" cy="0" r="20" fill="none" stroke="#666" stroke-width="2" />
      <circle cx="160" cy="0" r="20" fill="none" stroke="#666" stroke-width="2" />
      
      <!-- Connecting gears -->
      <path d="M40,0 Q50,-10 60,0" stroke="#666" stroke-width="2" fill="none" />
      <path d="M80,0 Q90,-10 100,0" stroke="#666" stroke-width="2" fill="none" />
      <path d="M120,0 Q130,-10 140,0" stroke="#666" stroke-width="2" fill="none" />
    </g>

    <!-- Rivets -->
    <circle cx="60" cy="40" r="2" fill="#999" />
    <circle cx="180" cy="40" r="2" fill="#999" />
    <circle cx="120" cy="20" r="2" fill="#999" />
    <circle cx="120" cy="60" r="2" fill="#999" />
  </g>

  <!-- Antennae -->
  <circle cx="200" cy="200" r="5" fill="#4a2a14" />
  <circle cx="240" cy="200" r="5" fill="#4a2a14" />
  
  <!-- Slimy trail -->
  <path d="M100,280 Q120,260 140,240 160,220 180,200 200,180 220,160 240,140 260,120" 
        stroke="url(#trailGrad)" stroke-width="8" fill="none" />
  
  <!-- Trail gradient -->
  <linearGradient id="trailGrad" x1="100" y1="280" x2="260" y2="120">
    <stop offset="0" stop-color="#1a9acd" />
    <stop offset="0.5" stop-color="#0c7d8c" />
    <stop offset="1" stop-color="#0a5a75" />
  </linearGradient>
</svg>
SVG by DeepSeek-R1-Distill-Qwen-32B
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="shellGradient">
      <stop offset="0%" stop-color="#CD7F32"/>
      <stop offset="100%" stop-color="#8B4513"/>
    </linearGradient>
    <linearGradient id="metalGradient">
      <stop offset="0%" stop-color="#DAA520"/>
      <stop offset="100%" stop-color="#8B4513"/>
    </linearGradient>
    <radialGradient id="gearGradient">
      <stop offset="0%" stop-color="#FFF"/>
      <stop offset="100%" stop-color="#8B4513"/>
    </radialGradient>
  </defs>
  <path d="M150,280 Q130,280 100,280 Q70,280 50,260 Q30,240 50,220 Q70,200 100,180 Q130,160 150,140 Q170,120 200,100 Q230,80 250,80 Q270,80 280,100 Q290,120 260,140 Q230,160 200,160 Q170,160 150,180 Z" fill="url(#shellGradient)" stroke="#8B4513" stroke-width="2"/>
  <path d="M100,180 L120,160 L140,180 L120,200 Z" fill="#8B4513" stroke="#696969" stroke-width="1"/>
  <circle cx="150" cy="150" r="20" fill="url(#metalGradient)"/>
  <circle cx="130" cy="140" r="5" fill="#8B4513"/>
  <circle cx="170" cy="140" r="5" fill="#8B4513"/>
  <circle cx="150" cy="130" r="5" fill="#8B4513"/>
  <path d="M150,200 Q160,210 170,200 Q180,190 170,180 Q160,170 150,180 Z" fill="#8B4513"/>
  <path d="M140,190 L160,190 L150,200 Z" fill="#8B4513"/>
  <circle cx="150" cy="220" r="30" fill="none" stroke="#8B4513" stroke-width="2">
    <animate attributeName="r" from="30" to="35" dur="2s" repeatCount="indefinite"/>
  </circle>
  <path d="M150,220 L150,240 L160,235 Z" fill="#8B4513"/>
  <circle cx="140" cy="230" r="5" fill="#8B4513"/>
  <circle cx="160" cy="230" r="5" fill="#8B4513"/>
  <circle cx="150" cy="235" r="10" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="235" r="8" fill="none" stroke="#8B4513" stroke-width="1"/>
  <circle cx="150" cy="235" r="6" fill="none" stroke="#8B4513" stroke-width="1"/>
  <circle cx="150" cy="235" r="4" fill="#8B4513"/>
  <circle cx="150" cy="235" r="2" fill="#FFF"/>
  <path d="M100,240 Q110,250 120,240 Q130,230 120,220 Q110,210 100,220 Z" fill="#8B4513"/>
  <path d="M190,240 Q200,250 210,240 Q220,230 210,220 Q200,210 190,220 Z" fill="#8B4513"/>
  <circle cx="150" cy="100" r="40" fill="url(#gearGradient)" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="35" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="30" fill="url(#gearGradient)" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="25" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="20" fill="url(#gearGradient)" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="15" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="10" fill="url(#gearGradient)" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="100" r="5" fill="#8B4513"/>
  <path d="M150,100 L160,110 L150,120 Z" fill="#8B4513"/>
  <path d="M150,100 L140,110 L150,120 Z" fill="#8B4513"/>
  <path d="M150,100 L155,95 L160,100 Z" fill="#8B4513"/>
  <path d="M150,100 L145,95 L140,100 Z" fill="#8B4513"/>
  <path d="M150,100 L155,105 L160,100 Z" fill="#8B4513"/>
  <path d="M150,100 L145,105 L140,100 Z" fill="#8B4513"/>
  <circle cx="150" cy="200" r="20" fill="url(#metalGradient)"/>
  <circle cx="150" cy="200" r="15" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="200" r="10" fill="url(#metalGradient)"/>
  <circle cx="150" cy="200" r="5" fill="#8B4513"/>
  <path d="M150,180 L160,190 L150,200 Z" fill="#8B4513"/>
  <path d="M150,180 L140,190 L150,200 Z" fill="#8B4513"/>
  <path d="M150,180 L155,175 L160,180 Z" fill="#8B4513"/>
  <path d="M150,180 L145,175 L140,180 Z" fill="#8B4513"/>
  <path d="M150,180 L155,185 L160,180 Z" fill="#8B4513"/>
  <path d="M150,180 L145,185 L140,180 Z" fill="#8B4513"/>
  <circle cx="150" cy="250" r="5" fill="#8B4513"/>
  <circle cx="150" cy="250" r="3" fill="#FFF"/>
  <circle cx="130" cy="240" r="5" fill="#8B4513"/>
  <circle cx="170" cy="240" r="5" fill="#8B4513"/>
  <circle cx="130" cy="240" r="3" fill="#FFF"/>
  <circle cx="170" cy="240" r="3" fill="#FFF"/>
  <path d="M150,260 L160,270 L150,280 Z" fill="#8B4513"/>
  <path d="M150,260 L140,270 L150,280 Z" fill="#8B4513"/>
  <path d="M150,260 L155,255 L160,260 Z" fill="#8B4513"/>
  <path d="M150,260 L145,255 L140,260 Z" fill="#8B4513"/>
  <path d="M150,260 L155,265 L160,260 Z" fill="#8B4513"/>
  <path d="M150,260 L145,265 L140,260 Z" fill="#8B4513"/>
  <circle cx="150" cy="230" r="10" fill="url(#metalGradient)"/>
  <circle cx="150" cy="230" r="8" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="230" r="6" fill="url(#metalGradient)"/>
  <circle cx="150" cy="230" r="4" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="230" r="2" fill="#8B4513"/>
  <circle cx="150" cy="230" r="1" fill="#FFF"/>
  <circle cx="150" cy="230" r="3" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="230" r="2" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="230" r="1" fill="none" stroke="#8B4513" stroke-width="2"/>
  <circle cx="150" cy="230" r="0.5" fill="#8B4513"/>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is DeepSeek-R1-Distill-Qwen-32B Player 2

Judge's Analysis

    Player 2's submission better captures the concept of a steampunk snail with a mechanical shell and clockwork gears.

    The design incorporates intricate gear-like patterns and a more pronounced mechanical aesthetic, aligning well with the steampunk theme.

    Player 1's submission, while abstract, lacks clear elements that define a snail or a mechanical structure, making Player 2's work more visually appealing and conceptually accurate.

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
19
Player 2
65
Rectangles

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

Player 1
1
Player 2
Circles

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

Player 1
9
Player 2
40
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
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
7
Player 2
25
Groups

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

Player 1
2
Player 2

Visual Effects Metrics

Gradients

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

Player 1
4
Player 2
3
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
8
Player 2
19

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
12
Player 2
5

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1
Player 2
1
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
2
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
24
Player 2
113
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
1
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
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