Back

SVG Drawing Match #2721

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Night sky filled with jellyfish-shaped stars glowing over a serene mountain lake."

o4-mini low (2025-04-16)
Player 1
ELO: 1,145.9 1,136.069 (-9.8)
SVG by o4-mini low (2025-04-16) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#0b0e2c"/>
      <stop offset="100%" stop-color="#000"/>
    </linearGradient>
    <!-- Lake gradient -->
    <linearGradient id="lakeGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#041a40"/>
      <stop offset="100%" stop-color="#000a1a"/>
    </linearGradient>
    <!-- Jellyfish glow -->
    <radialGradient id="jellyGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#a8e6ff" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#004d7a" stop-opacity="0"/>
    </radialGradient>
    <!-- Jellyfish symbol -->
    <symbol id="jellyfish" viewBox="-10 -10 20 20">
      <g filter="url(#blur)">
        <circle cx="0" cy="0" r="3" fill="#a8e6ff"/>
        <path d="M-2,2 C-1,5 1,5 2,2" stroke="#a8e6ff" stroke-width="0.8" fill="none"/>
        <path d="M-1,2 C-0.5,4 0.5,4 1,2" stroke="#c0efff" stroke-width="0.6" fill="none"/>
      </g>
    </symbol>
    <!-- Glow filter -->
    <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <!-- Mountain gradient -->
    <linearGradient id="mtnGrad" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2b2d42"/>
      <stop offset="100%" stop-color="#1b1d2a"/>
    </linearGradient>
  </defs>

  <!-- Night sky -->
  <rect width="300" height="200" fill="url(#skyGrad)"/>

  <!-- Jellyfish stars in sky -->
  <g id="stars">
    <use href="#jellyfish" x="30" y="30"/>
    <use href="#jellyfish" x="80" y="50" transform="scale(0.8)"/>
    <use href="#jellyfish" x="130" y="40" transform="scale(1.2)"/>
    <use href="#jellyfish" x="200" y="70" transform="scale(0.9)"/>
    <use href="#jellyfish" x="250" y="30" transform="scale(0.7)"/>
    <use href="#jellyfish" x="60" y="100" transform="scale(1.1)"/>
    <use href="#jellyfish" x="160" y="120" transform="scale(0.8)"/>
    <use href="#jellyfish" x="220" y="90" transform="scale(1.0)"/>
  </g>

  <!-- Mountains -->
  <polygon points="0,200 60,120 120,180 180,130 240,200 300,150 300,200" fill="url(#mtnGrad)"/>

  <!-- Lake -->
  <rect y="200" width="300" height="100" fill="url(#lakeGrad)"/>

  <!-- Reflection group -->
  <g opacity="0.4">
    <use href="#stars" transform="translate(0,400) scale(1,-1)"/>
    <polygon points="0,200 60,120 120,180 180,130 240,200 300,150 300,200" fill="url(#mtnGrad)" transform="translate(0,400) scale(1,-1)"/>
  </g>

  <!-- Water ripple pattern -->
  <defs>
    <pattern id="ripples" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M0,10 Q10,8 20,10 T40,10" stroke="#00172d" stroke-width="0.5" fill="none"/>
    </pattern>
  </defs>
  <rect y="200" width="300" height="100" fill="url(#ripples)" opacity="0.2"/>
</svg>
Claude 3.7 Sonnet (2025-02-19)
Player 2
ELO: 1,287.174 1,297.004 (+9.8)
SVG by Claude 3.7 Sonnet (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Gradients and Patterns -->
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0033" />
      <stop offset="40%" stop-color="#1a0050" />
      <stop offset="70%" stop-color="#2a0066" />
      <stop offset="100%" stop-color="#3a0080" />
    </linearGradient>
    
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a0040" />
      <stop offset="50%" stop-color="#150060" />
      <stop offset="100%" stop-color="#1a0070" />
    </linearGradient>
    
    <radialGradient id="jellyfishGlow1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#83f0ff" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#41c6ff" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#0066ff" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="jellyfishGlow2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ff83f4" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#ff41c6" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#ff0066" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="jellyfishGlow3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#f4ff83" stop-opacity="0.9" />
      <stop offset="70%" stop-color="#c6ff41" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#66ff00" stop-opacity="0" />
    </radialGradient>
    
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <pattern id="ripple" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
      <path d="M0 5 Q 5 0, 10 5, 15 10, 20 5" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.3" />
    </pattern>
  </defs>
  
  <!-- Background Sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars (small) -->
  <g id="smallStars">
    <circle cx="30" cy="40" r="0.8" fill="white" opacity="0.8" />
    <circle cx="50" cy="20" r="0.6" fill="white" opacity="0.7" />
    <circle cx="80" cy="35" r="0.7" fill="white" opacity="0.9" />
    <circle cx="120" cy="25" r="0.5" fill="white" opacity="0.8" />
    <circle cx="150" cy="15" r="0.9" fill="white" opacity="0.7" />
    <circle cx="190" cy="40" r="0.6" fill="white" opacity="0.9" />
    <circle cx="230" cy="20" r="0.7" fill="white" opacity="0.8" />
    <circle cx="260" cy="30" r="0.8" fill="white" opacity="0.7" />
    <circle cx="270" cy="50" r="0.5" fill="white" opacity="0.9" />
    <circle cx="15" cy="60" r="0.6" fill="white" opacity="0.8" />
    <circle cx="45" cy="70" r="0.7" fill="white" opacity="0.7" />
    <circle cx="95" cy="50" r="0.5" fill="white" opacity="0.9" />
    <circle cx="210" cy="60" r="0.8" fill="white" opacity="0.8" />
    <circle cx="250" cy="70" r="0.6" fill="white" opacity="0.7" />
    <circle cx="290" cy="45" r="0.7" fill="white" opacity="0.9" />
  </g>
  
  <!-- Jellyfish Stars -->
  <g id="jellyfishStars">
    <!-- Jellyfish 1 -->
    <g transform="translate(60, 60)" filter="url(#glow)">
      <circle cx="0" cy="0" r="15" fill="url(#jellyfishGlow1)" opacity="0.9" />
      <ellipse cx="0" cy="0" rx="8" ry="10" fill="#b3f0ff" opacity="0.7" />
      <path d="M-8 0 Q-4 8, 0 10, 4 8, 8 0" fill="#d9f9ff" opacity="0.8" />
      <!-- Tentacles -->
      <path d="M-7 0 Q-8 15, -12 25" fill="none" stroke="#83f0ff" stroke-width="0.8" />
      <path d="M-4 2 Q-3 20, -5 30" fill="none" stroke="#83f0ff" stroke-width="0.8" />
      <path d="M0 3 Q2 18, 0 28" fill="none" stroke="#83f0ff" stroke-width="0.8" />
      <path d="M4 2 Q7 22, 6 32" fill="none" stroke="#83f0ff" stroke-width="0.8" />
      <path d="M7 0 Q10 17, 14 27" fill="none" stroke="#83f0ff" stroke-width="0.8" />
    </g>
    
    <!-- Jellyfish 2 -->
    <g transform="translate(170, 40)" filter="url(#glow)">
      <circle cx="0" cy="0" r="12" fill="url(#jellyfishGlow2)" opacity="0.9" />
      <ellipse cx="0" cy="0" rx="6" ry="8" fill="#ffb3f0" opacity="0.7" />
      <path d="M-6 0 Q-3 6, 0 8, 3 6, 6 0" fill="#ffd9f9" opacity="0.8" />
      <!-- Tentacles -->
      <path d="M-5 0 Q-7 12, -9 20" fill="none" stroke="#ff83f4" stroke-width="0.8" />
      <path d="M-2 2 Q-1 15, -3 25" fill="none" stroke="#ff83f4" stroke-width="0.8" />
      <path d="M0 3 Q1 13, 0 23" fill="none" stroke="#ff83f4" stroke-width="0.8" />
      <path d="M2 2 Q4 18, 5 28" fill="none" stroke="#ff83f4" stroke-width="0.8" />
      <path d="M5 0 Q8 14, 10 24" fill="none" stroke="#ff83f4" stroke-width="0.8" />
    </g>
    
    <!-- Jellyfish 3 -->
    <g transform="translate(240, 80)" filter="url(#glow)">
      <circle cx="0" cy="0" r="10" fill="url(#jellyfishGlow3)" opacity="0.9" />
      <ellipse cx="0" cy="0" rx="5" ry="7" fill="#f0ffb3" opacity="0.7" />
      <path d="M-5 0 Q-2.5 5, 0 7, 2.5 5, 5 0" fill="#f9ffd9" opacity="0.8" />
      <!-- Tentacles -->
      <path d="M-4 0 Q-6 10, -8 18" fill="none" stroke="#f4ff83" stroke-width="0.8" />
      <path d="M-2 2 Q-1 13, -2 22" fill="none" stroke="#f4ff83" stroke-width="0.8" />
      <path d="M0 3 Q1 12, 0 20" fill="none" stroke="#f4ff83" stroke-width="0.8" />
      <path d="M2 2 Q4 15, 3 24" fill="none" stroke="#f4ff83" stroke-width="0.8" />
      <path d="M4 0 Q7 12, 9 20" fill="none" stroke="#f4ff83" stroke-width="0.8" />
    </g>
    
    <!-- Jellyfish 4 -->
    <g transform="translate(100, 90)" filter="url(#glow)">
      <circle cx="0" cy="0" r="8" fill="url(#jellyfishGlow1)" opacity="0.9" />
      <ellipse cx="0" cy="0" rx="4" ry="6" fill="#b3f0ff" opacity="0.7" />
      <path d="M-4 0 Q-2 4, 0 6, 2 4, 4 0" fill="#d9f9ff" opacity="0.8" />
      <!-- Tentacles -->
      <path d="M-3 0 Q-5 8, -6 15" fill="none" stroke="#83f0ff" stroke-width="0.6" />
      <path d="M-1 2 Q-0.5 10, -1.5 18" fill="none" stroke="#83f0ff" stroke-width="0.6" />
      <path d="M0 3 Q0.5 9, 0 17" fill="none" stroke="#83f0ff" stroke-width="0.6" />
      <path d="M1 2 Q3 12, 2 20" fill="none" stroke="#83f0ff" stroke-width="0.6" />
      <path d="M3 0 Q5 10, 7 16" fill="none" stroke="#83f0ff" stroke-width="0.6" />
    </g>
    
    <!-- Jellyfish 5 -->
    <g transform="translate(200, 110)" filter="url(#glow)">
      <circle cx="0" cy="0" r="9" fill="url(#jellyfishGlow2)" opacity="0.9" />
      <ellipse cx="0" cy="0" rx="4.5" ry="6.5" fill="#ffb3f0" opacity="0.7" />
      <path d="M-4.5 0 Q-2.25 5, 0 6.5, 2.25 5, 4.5 0" fill="#ffd9f9" opacity="0.8" />
      <!-- Tentacles -->
      <path d="M-4 0 Q-6 9, -7 16" fill="none" stroke="#ff83f4" stroke-width="0.7" />
      <path d="M-2 2 Q-1 11, -2 19" fill="none" stroke="#ff83f4" stroke-width="0.7" />
      <path d="M0 3 Q1 10, 0 18" fill="none" stroke="#ff83f4" stroke-width="0.7" />
      <path d="M2 2 Q3 13, 2.5 21" fill="none" stroke="#ff83f4" stroke-width="0.7" />
      <path d="M4 0 Q6 11, 8 18" fill="none" stroke="#ff83f4" stroke-width="0.7" />
    </g>
  </g>
  
  <!-- Mountains -->
  <path d="M0 180 L60 130 L100 160 L150 120 L200 150 L250 110 L300 140 L300 300 L0 300 Z" fill="#0e0028" />
  <path d="M0 190 L40 150 L80 170 L130 140 L180 160 L220 130 L270 150 L300 170 L300 300 L0 300 Z" fill="#0a001c" />
  
  <!-- Lake -->
  <path d="M0 200 L300 200 L300 300 L0 300 Z" fill="url(#waterGradient)" />
  <rect x="0" y="200" width="300" height="100" fill="url(#ripple)" />
  
  <!-- Reflections -->
  <g opacity="0.7">
    <!-- Jellyfish reflection 1 -->
    <g transform="translate(60, 340) scale(1, -1)" filter="url(#glow)">
      <circle cx="0" cy="0" r="15" fill="url(#jellyfishGlow1)" opacity="0.3" />
      <ellipse cx="0" cy="0" rx="8" ry="10" fill="#b3f0ff" opacity="0.2" />
      <path d="M-7 0 Q-8 15, -12 25" fill="none" stroke="#83f0ff" stroke-width="0.8" opacity="0.2" />
      <path d="M-4 2 Q-3 20, -5 30" fill="none" stroke="#83f0ff" stroke-width="0.8" opacity="0.2" />
      <path d="M0 3 Q2 18, 0 28" fill="none" stroke="#83f0ff" stroke-width="0.8" opacity="0.2" />
      <path d="M4 2 Q7 22, 6 32" fill="none" stroke="#83f0ff" stroke-width="0.8" opacity="0.2" />
      <path d="M7 0 Q10 17, 14 27" fill="none" stroke="#83f0ff" stroke-width="0.8" opacity="0.2" />
    </g>
    
    <!-- Jellyfish reflection 2 -->
    <g transform="translate(170, 360) scale(1, -1)" filter="url(#glow)">
      <circle cx="0" cy="0" r="12" fill="url(#jellyfishGlow2)" opacity="0.3" />
      <ellipse cx="0" cy="0" rx="6" ry="8" fill="#ffb3f0" opacity="0.2" />
      <path d="M-5 0 Q-7 12, -9 20" fill="none" stroke="#ff83f4" stroke-width="0.8" opacity="0.2" />
      <path d="M-2 2 Q-1 15, -3 25" fill="none" stroke="#ff83f4" stroke-width="0.8" opacity="0.2" />
      <path d="M0 3 Q1 13, 0 23" fill="none" stroke="#ff83f4" stroke-width="0.8" opacity="0.2" />
      <path d="M2 2 Q4 18, 5 28" fill="none" stroke="#ff83f4" stroke-width="0.8" opacity="0.2" />
      <path d="M5 0 Q8 14, 10 24" fill="none" stroke="#ff83f4" stroke-width="0.8" opacity="0.2" />
    </g>
    
    <!-- Jellyfish reflection 3 -->
    <g transform="translate(240, 320) scale(1, -1)" filter="url(#glow)">
      <circle cx="0" cy="0" r="10" fill="url(#jellyfishGlow3)" opacity="0.3" />
      <ellipse cx="0" cy="0" rx="5" ry="7" fill="#f0ffb3" opacity="0.2" />
      <path d="M-4 0 Q-6 10, -8 18" fill="none" stroke="#f4ff83" stroke-width="0.8" opacity="0.2" />
      <path d="M-2 2 Q-1 13, -2 22" fill="none" stroke="#f4ff83" stroke-width="0.8" opacity="0.2" />
      <path d="M0 3 Q1 12, 0 20" fill="none" stroke="#f4ff83" stroke-width="0.8" opacity="0.2" />
      <path d="M2 2 Q4 15, 3 24" fill="none" stroke="#f4ff83" stroke-width="0.8" opacity="0.2" />
      <path d="M4 0 Q7 12, 9 20" fill="none" stroke="#f4ff83" stroke-width="0.8" opacity="0.2" />
    </g>
  </g>
  
  <!-- Water ripples -->
  <path d="M50 240 Q70 238, 90 240, 110 242, 130 240, 150 238, 170 240, 190 242, 210 240, 230 238, 250 240" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.3" />
  <path d="M30 250 Q50 248, 70 250, 90 252, 110 250, 130 248, 150 250, 170 252, 190 250, 210 248, 230 250, 250 252, 270 250" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.2" />
  <path d="M20 260 Q40 258, 60 260, 80 262, 100 260, 120 258, 140 260, 160 262, 180 260, 200 258, 220 260, 240 262, 260 260, 280 258" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.1" />
  
  <!-- Subtle fog over the lake -->
  <rect x="0" y="195" width="300" height="20" fill="url(#skyGradient)" opacity="0.3" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet (2025-02-19) Player 2

Judge's Analysis

    Player 2's submission better captures the prompt with glowing, colorful jellyfish-shaped stars floating over a serene mountain lake.

    The technical quality and composition are stronger, with clear shapes and a balanced use of colors that enhance the visual appeal.

    Player 1's piece, while creative, lacks clarity and detail in depicting jellyfish-shaped stars, making it less effective in fulfilling 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
9
Player 2
86
Rectangles

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

Player 1
3
Player 2
3
Circles

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

Player 1
1
Player 2
23
Ellipses

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

Player 1
—
Player 2
8
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
2
Player 2
—
Paths

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

Player 1
3
Player 2
52
Groups

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

Player 1
3
Player 2
11

Visual Effects Metrics

Gradients

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

Player 1
4
Player 2
5
Patterns

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

Player 1
1
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
3
Player 2
44

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
10
Player 2
25

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
9
Player 2
8

Complexity Metrics

Path Commands

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

Player 1
7
Player 2
124
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
7
Player 2
7
Use Elements

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

Player 1
9
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

Match #2632 May 09, 2025

"A jellyfish-shaped hot air balloon floating over a city at sunset."

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet (2025-02-19)
vs
o4-mini low (2025-04-16)
View
Match #2552 May 09, 2025

"A single tree growing inside a light bulb."

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet (2025-02-19)
vs
o4-mini low (2025-04-16)
View
Match #2433 May 09, 2025

"A snail racing against a tortoise on a track with cheering mushrooms in the stands."

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet (2025-02-19)
vs
o4-mini low (2025-04-16)
View
Match #2214 May 08, 2025

"A snail racing a cheetah on a cloud track."

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by o4-mini low (2025-04-16)
Claude 3.7 Sonnet (2025-02-19)
vs
o4-mini low (2025-04-16)
View