Back

SVG Drawing Match #1025

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Galactic snail with a spiral galaxy shell, in vibrant pop art style"

Claude 3.5 Sonnet (2024-10-22)
Player 1
ELO: 1,135.748 1,123.93 (-11.8)
SVG by Claude 3.5 Sonnet (2024-10-22) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="shellGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FF1493"/>
      <stop offset="50%" style="stop-color:#4B0082"/>
      <stop offset="100%" style="stop-color:#00FFFF"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#1a1a2e"/>
  
  <!-- Galaxy Shell -->
  <path d="M150,150 m-70,0 a70,70 0 1,0 140,0 a70,70 0 1,0 -140,0 Z" 
        fill="url(#shellGrad)" 
        transform="rotate(45,150,150)"
        filter="url(#glow)"/>
  
  <!-- Spiral Arms -->
  <path d="M150,150 q50,-50 100,-20 q-30,40 -80,60 q-40,10 -20,-40" 
        fill="none" 
        stroke="#FF69B4" 
        stroke-width="4"
        filter="url(#glow)"/>
  
  <!-- Snail Body -->
  <path d="M120,180 q-20,10 -40,0 q-10,-10 -10,-30 q5,-20 30,-20 q20,0 25,20 z" 
        fill="#FF6B6B"/>
  
  <!-- Snail Face -->
  <circle cx="95" cy="140" r="5" fill="white"/>
  <circle cx="95" cy="140" r="2" fill="black"/>
  
  <!-- Antennae -->
  <path d="M90,130 q-10,-20 0,-30" 
        fill="none" 
        stroke="#FF6B6B" 
        stroke-width="3"/>
  <path d="M100,130 q10,-20 20,-25" 
        fill="none" 
        stroke="#FF6B6B" 
        stroke-width="3"/>
  
  <!-- Stars -->
  <g fill="white">
    <circle cx="50" cy="50" r="2"/>
    <circle cx="250" cy="50" r="3"/>
    <circle cx="200" cy="250" r="2"/>
    <circle cx="75" cy="200" r="2"/>
    <circle cx="175" cy="75" r="2"/>
  </g>
  
  <!-- Pop Art Dots -->
  <g fill="#FFD700" filter="url(#glow)">
    <circle cx="40" cy="260" r="10"/>
    <circle cx="260" cy="40" r="15"/>
    <circle cx="220" cy="220" r="8"/>
  </g>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,228.726 1,240.544 (+11.8)
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, patterns, and filters -->
  <defs>
    <!-- Galaxy spiral gradient -->
    <linearGradient id="galaxyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff00aa" />
      <stop offset="25%" stop-color="#5500ff" />
      <stop offset="50%" stop-color="#00ffff" />
      <stop offset="75%" stop-color="#00ff77" />
      <stop offset="100%" stop-color="#ffff00" />
    </linearGradient>
    
    <!-- Alternative galaxy colors -->
    <linearGradient id="galaxyGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ff3300" />
      <stop offset="50%" stop-color="#ff00ff" />
      <stop offset="100%" stop-color="#3300ff" />
    </linearGradient>
    
    <!-- Star pattern -->
    <pattern id="starPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="1" fill="white" />
      <circle cx="15" cy="15" r="0.8" fill="white" />
      <circle cx="10" cy="5" r="0.5" fill="white" />
      <circle cx="5" cy="15" r="0.7" fill="white" />
      <circle cx="18" cy="2" r="0.6" fill="white" />
    </pattern>
    
    <!-- Pop art dot patterns (Ben-Day dots) -->
    <pattern id="dotPattern1" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
      <circle cx="4" cy="4" r="2" fill="#ff00ff" />
    </pattern>
    
    <pattern id="dotPattern2" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
      <circle cx="3" cy="3" r="1.5" fill="#00ffff" />
    </pattern>
    
    <pattern id="dotPattern3" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="2.5" fill="#ffff00" />
    </pattern>
    
    <!-- Snail body gradient -->
    <linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#00eeff" />
      <stop offset="50%" stop-color="#3300ff" />
      <stop offset="100%" stop-color="#ff00aa" />
    </linearGradient>
    
    <!-- Glow filter -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feFlood flood-color="#ff00ff" flood-opacity="0.7" result="color" />
      <feComposite in="color" in2="blur" operator="in" result="coloredBlur" />
      <feComposite in="SourceGraphic" in2="coloredBlur" operator="over" />
    </filter>
    
    <!-- Star glow -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feFlood flood-color="white" flood-opacity="1" result="color" />
      <feComposite in="color" in2="blur" operator="in" result="coloredBlur" />
      <feComposite in="SourceGraphic" in2="coloredBlur" operator="over" />
    </filter>
    
    <!-- Yellow glow -->
    <filter id="yellowGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feFlood flood-color="#ffff00" flood-opacity="0.8" result="color" />
      <feComposite in="color" in2="blur" operator="in" result="coloredBlur" />
      <feComposite in="SourceGraphic" in2="coloredBlur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#000055" />
  
  <!-- Stars background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" opacity="0.8" />
  
  <!-- Galaxy spiral shell - central core -->
  <circle cx="150" cy="150" r="25" fill="#ffff77" stroke="#ffffff" stroke-width="1.5" filter="url(#glow)" />
  
  <!-- Galaxy spiral arms - main structure -->
  <path d="M150,150 
           C150,150 180,120 200,100 
           C220,80 245,75 265,90 
           C285,105 290,140 275,170 
           C260,200 230,220 195,225 
           C160,230 130,220 105,200 
           C80,180 70,150 75,120 
           C80,90 100,70 130,65 
           C160,60 185,70 205,90 
           C225,110 235,140 230,170 
           C225,200 200,220 170,225 
           C140,230 115,215 95,190"
        fill="url(#galaxyGradient)" 
        stroke="#ffffff" 
        stroke-width="2" 
        opacity="0.9"
        filter="url(#glow)" />
  
  <!-- Pop art dot overlay on galaxy -->
  <path d="M150,150 
           C150,150 180,120 200,100 
           C220,80 245,75 265,90 
           C285,105 290,140 275,170"
        fill="url(#dotPattern1)" 
        opacity="0.5" />
  
  <path d="M150,150
           C160,230 130,220 105,200 
           C80,180 70,150 75,120"
        fill="url(#dotPattern2)" 
        opacity="0.5" />
  
  <path d="M150,150
           C80,90 100,70 130,65 
           C160,60 185,70 205,90"
        fill="url(#dotPattern3)" 
        opacity="0.4" />
  
  <!-- Stars in the galaxy -->
  <g filter="url(#starGlow)">
    <circle cx="190" cy="130" r="1.5" fill="white" />
    <circle cx="210" cy="140" r="1" fill="white" />
    <circle cx="170" cy="160" r="1.2" fill="white" />
    <circle cx="150" cy="170" r="0.8" fill="white" />
    <circle cx="130" cy="150" r="1.3" fill="white" />
    <circle cx="120" cy="130" r="1" fill="white" />
    <circle cx="140" cy="120" r="0.9" fill="white" />
    <circle cx="235" cy="160" r="1.7" fill="white" />
    <circle cx="220" cy="120" r="1.2" fill="white" />
    <circle cx="80" cy="160" r="1.5" fill="white" />
    <circle cx="65" cy="140" r="1.3" fill="white" />
    <circle cx="100" cy="120" r="1.1" fill="white" />
    <circle cx="160" cy="90" r="1.4" fill="white" />
    <circle cx="140" cy="210" r="1.2" fill="white" />
    <circle cx="190" cy="200" r="1.6" fill="white" />
    <circle cx="250" cy="135" r="1.8" fill="white" />
    <circle cx="195" cy="85" r="1.3" fill="white" />
    <circle cx="95" cy="95" r="1.1" fill="white" />
    <circle cx="120" cy="190" r="1.5" fill="white" />
    <circle cx="240" cy="190" r="1.4" fill="white" />
  </g>
  
  <!-- Colorful nebula effects -->
  <ellipse cx="210" cy="130" rx="25" ry="15" fill="#ff00aa" opacity="0.3" filter="url(#glow)" />
  <ellipse cx="100" cy="170" rx="20" ry="18" fill="#00ffff" opacity="0.3" filter="url(#glow)" />
  <ellipse cx="170" cy="190" rx="18" ry="22" fill="#5500ff" opacity="0.3" filter="url(#glow)" />
  <ellipse cx="180" cy="90" rx="20" ry="15" fill="#00ff77" opacity="0.3" filter="url(#glow)" />
  
  <!-- The snail comes out from the galaxy core -->
  <!-- Snail body -->
  <path d="M125,180 
           C130,190 140,200 155,200 
           C170,200 185,190 190,175 
           C195,160 190,145 180,135 
           C170,125 155,120 140,125 
           C125,130 115,145 125,180 Z"
        fill="url(#snailBodyGradient)" 
        stroke="#ffffff" 
        stroke-width="3" />
  
  <!-- Pop art dots on the snail body -->
  <path d="M125,180 
           C130,190 140,200 155,200 
           C170,200 185,190 190,175 
           C195,160 190,145 180,135 
           C170,125 155,120 140,125 
           C125,130 115,145 125,180 Z"
        fill="url(#dotPattern1)" 
        fill-opacity="0.4" />
  
  <!-- Snail head -->
  <ellipse cx="120" cy="190" rx="18" ry="15" fill="url(#snailBodyGradient)" stroke="#ffffff" stroke-width="3" />
  
  <!-- Pop art dots on the snail head -->
  <ellipse cx="120" cy="190" rx="18" ry="15" fill="url(#dotPattern2)" fill-opacity="0.4" />
  
  <!-- Snail eyes with cosmic orbs -->
  <g>
    <circle cx="110" cy="182" r="7" fill="#00ffff" stroke="#ffffff" stroke-width="2" />
    <circle cx="110" cy="182" r="4" fill="#ff00aa" />
    <circle cx="110" cy="182" r="1.5" fill="white" filter="url(#yellowGlow)" />
    
    <!-- Mini galaxy in eye -->
    <path d="M110,182 C108,180 109,179 111,180 C113,181 112,184 110,182" 
          fill="none" stroke="#ffffff" stroke-width="0.5" />
  </g>
  <g>
    <circle cx="130" cy="182" r="7" fill="#00ffff" stroke="#ffffff" stroke-width="2" />
    <circle cx="130" cy="182" r="4" fill="#ff00aa" />
    <circle cx="130" cy="182" r="1.5" fill="white" filter="url(#yellowGlow)" />
    
    <!-- Mini galaxy in eye -->
    <path d="M130,182 C128,180 129,179 131,180 C133,181 132,184 130,182" 
          fill="none" stroke="#ffffff" stroke-width="0.5" />
  </g>
  
  <!-- Snail antennas with stars on top -->
  <path d="M110,177 Q105,162 95,150" fill="none" stroke="#ffffff" stroke-width="2" />
  <circle cx="95" cy="150" r="5" fill="#ffff00" filter="url(#yellowGlow)" stroke="#ffffff" stroke-width="1" />
  
  <path d="M130,177 Q135,162 145,145" fill="none" stroke="#ffffff" stroke-width="2" />
  <circle cx="145" cy="145" r="5" fill="#ffff00" filter="url(#yellowGlow)" stroke="#ffffff" stroke-width="1" />
  
  <!-- Cosmic slime trail -->
  <path d="M125,195 
           C90,220 60,230 40,210 
           C20,190 30,160 60,135"
        fill="none" 
        stroke-width="8" 
        stroke="url(#galaxyGradient2)"
        opacity="0.7" />
        
  <!-- Sparkles on the cosmic trail -->
  <circle cx="105" cy="208" r="2" fill="white" filter="url(#starGlow)" />
  <circle cx="85" cy="215" r="1.5" fill="white" filter="url(#starGlow)" />
  <circle cx="65" cy="212" r="2" fill="white" filter="url(#starGlow)" />
  <circle cx="45" cy="200" r="1.5" fill="white" filter="url(#starGlow)" />
  <circle cx="35" cy="180" r="2" fill="white" filter="url(#starGlow)" />
  <circle cx="45" cy="160" r="1.5" fill="white" filter="url(#starGlow)" />
  <circle cx="60" cy="140" r="2" fill="white" filter="url(#starGlow)" />
  
  <!-- Pop art comic style "COSMIC" text -->
  <g transform="translate(220,220) rotate(15)">
    <path d="M0,0 L80,0 L90,10 L80,20 L0,20 L10,10 Z" fill="#ff00aa" stroke="#ffffff" stroke-width="2" />
    <text x="45" y="15" font-family="Arial" font-size="12" font-weight="bold" text-anchor="middle" fill="white">COSMIC!</text>
  </g>
  
  <!-- Pop art comic style "SPACE" starburst -->
  <g transform="translate(40,50) rotate(-10)">
    <path d="M0,15 L5,0 L20,5 L25,0 L40,10 L35,20 L45,25 L30,30 L25,45 L15,30 L0,35 L10,20 Z" fill="#00ffff" stroke="#ffffff" stroke-width="2" />
    <text x="22" y="25" font-family="Arial" font-size="10" font-weight="bold" text-anchor="middle" fill="white">SPACE!</text>
  </g>
  
  <!-- Additional pop art starburst -->
  <g transform="translate(240,60) rotate(20)">
    <path d="M0,0 L10,-10 L20,0 L30,-10 L25,5 L40,10 L20,15 L25,30 L10,20 L0,35 L-10,15 Z" fill="#ffff00" stroke="#000000" stroke-width="2" />
    <text x="15" y="15" font-family="Arial" font-size="9" font-weight="bold" text-anchor="middle" fill="black">POP!</text>
  </g>
  
  <!-- Additional stars and planets -->
  <circle cx="40" cy="100" r="12" fill="#ff3300" opacity="0.8" filter="url(#glow)" />
  <circle cx="260" cy="150" r="15" fill="#00ff77" opacity="0.8" filter="url(#glow)" />
  <circle cx="220" cy="250" r="18" fill="#5500ff" opacity="0.8" filter="url(#glow)" />
  
  <!-- Small planets with pop art rings -->
  <g transform="translate(30,240) rotate(-15)">
    <circle cx="0" cy="0" r="10" fill="#00ffff" stroke="#ffffff" stroke-width="1.5" />
    <ellipse cx="0" cy="0" rx="12" ry="4" fill="none" stroke="#ffffff" stroke-width="1" />
    <ellipse cx="0" cy="0" rx="14" ry="2" fill="none" stroke="#ffffff" stroke-width="1" />
  </g>
  
  <g transform="translate(260,40) rotate(20)">
    <circle cx="0" cy="0" r="12" fill="#ff00aa" stroke="#ffffff" stroke-width="1.5" />
    <ellipse cx="0" cy="0" rx="15" ry="5" fill="none" stroke="#ffffff" stroke-width="1" />
    <ellipse cx="0" cy="0" rx="18" ry="3" fill="none" stroke="#ffffff" stroke-width="1" />
  </g>
  
  <!-- Bold comic-style outline for the galaxy -->
  <path d="M150,150 
           C150,150 180,120 200,100 
           C220,80 245,75 265,90 
           C285,105 290,140 275,170 
           C260,200 230,220 195,225 
           C160,230 130,220 105,200 
           C80,180 70,150 75,120 
           C80,90 100,70 130,65 
           C160,60 185,70 205,90 
           C225,110 235,140 230,170 
           C225,200 200,220 170,225 
           C140,230 115,215 95,190"
        fill="none" 
        stroke="#ffffff" 
        stroke-width="2.5" 
        stroke-dasharray="8,4"
        opacity="0.7" />
        
  <!-- Speed lines for movement effect -->
  <line x1="190" y1="100" x2="210" y2="80" stroke="#ffffff" stroke-width="1.5" />
  <line x1="210" y1="150" x2="240" y2="140" stroke="#ffffff" stroke-width="1.5" />
  <line x1="180" y1="190" x2="200" y2="210" stroke="#ffffff" stroke-width="1.5" />
  <line x1="100" y1="90" x2="80" y2="70" stroke="#ffffff" stroke-width="1.5" />
  <line x1="90" y1="170" x2="70" y2="190" stroke="#ffffff" stroke-width="1.5" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 2

Judge's Analysis

    Player 2's submission excels in creativity and adherence to the prompt with a dynamic representation of a galactic snail featuring a spiral galaxy shell.

    The use of vibrant colors and pop art elements enhances the visual appeal and aligns well with the theme.

    In comparison, Player 1's image lacks a clear depiction of a spiral galaxy shell and is less vibrant, making Player 2's image more compelling 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
16
Player 2
81
Rectangles

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

Player 1
1
Player 2
2
Circles

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

Player 1
10
Player 2
49
Ellipses

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

Player 1
—
Player 2
10
Lines

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

Player 1
—
Player 2
5
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
5
Player 2
15
Groups

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

Player 1
2
Player 2
8

Visual Effects Metrics

Gradients

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

Player 1
1
Player 2
3
Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1
—
Player 2
4
Filters

The number of filter definitions (filter) in the SVG.

Player 1
1
Player 2
3
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
14
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
3
Player 2
28

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

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

Complexity Metrics

Path Commands

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

Player 1
19
Player 2
93
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
2
Player 2
10
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
3

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 #1026 Mar 13, 2025

"Robot octopus making coffee, steampunk style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.5 Sonnet (2024-10-22)
View
Match #806 Mar 13, 2025

"Giraffe in space wearing a jetpack, orbiting a planet with a tiny hat"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #788 Mar 13, 2025

"Surreal clock with hands as rainbow-colored vines twisting around the numbers"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #624 Mar 13, 2025

"Surreal clock melting over a floating iceberg in a purple sky"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.5 Sonnet (2024-10-22)
View
Match #559 Mar 13, 2025

"Giraffe wearing a spacesuit, floating with balloons above a surreal desert"

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.5 Sonnet (2024-10-22)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #102 Mar 13, 2025

"A giraffe in a tuxedo, sipping tea at a cosmic garden party"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.5 Sonnet (2024-10-22)
View