Back

SVG Drawing Match #2614

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A jellyfish-shaped hot air balloon floating above a glowing underwater city."

o3-mini low (2025-01-31)
Player 1
ELO: 1,011.919 1,004.479 (-7.4)
SVG by o3-mini low (2025-01-31) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradient for the jellyfish balloon umbrella -->
    <radialGradient id="jellyGradient" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#ff77ff" />
      <stop offset="50%" stop-color="#ffcc00" />
      <stop offset="100%" stop-color="#00ccff" />
    </radialGradient>
    <!-- Gradient for the underwater city glow -->
    <linearGradient id="cityGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#004466" />
      <stop offset="100%" stop-color="#001122" />
    </linearGradient>
    <!-- Pattern for underwater city windows -->
    <pattern id="windowPattern" patternUnits="userSpaceOnUse" width="4" height="4">
      <rect width="4" height="4" fill="#001122" />
      <circle cx="2" cy="2" r="1" fill="#66ccff" />
    </pattern>
  </defs>
  <!-- Underwater background -->
  <rect x="0" y="0" width="300" height="300" fill="#002244" />
  
  <!-- Underwater city -->
  <g id="city" opacity="0.6">
    <!-- City silhouette -->
    <rect x="0" y="200" width="300" height="100" fill="url(#cityGradient)" />
    <!-- Building variations -->
    <rect x="15" y="170" width="20" height="30" fill="url(#windowPattern)" />
    <rect x="50" y="160" width="15" height="40" fill="url(#windowPattern)" />
    <rect x="80" y="180" width="25" height="20" fill="url(#windowPattern)" />
    <rect x="120" y="150" width="20" height="50" fill="url(#windowPattern)" />
    <rect x="150" y="165" width="18" height="35" fill="url(#windowPattern)" />
    <rect x="180" y="155" width="22" height="45" fill="url(#windowPattern)" />
    <rect x="215" y="170" width="20" height="30" fill="url(#windowPattern)" />
    <rect x="245" y="160" width="15" height="40" fill="url(#windowPattern)" />
  </g>
  
  <!-- Hot-air balloon basket (jellyfish bell) -->
  <g id="jellyBalloon">
    <!-- Jellyfish umbrella shape using a soft blob path -->
    <path d="M150,70 
             C120,70 100,95 100,125 
             C100,155 140,180 150,180 
             C160,180 200,155 200,125 
             C200,95 180,70 150,70 Z" fill="url(#jellyGradient)" stroke="#ffffff" stroke-width="1"/>
    <!-- Jellyfish tentacles -->
    <g stroke="#ffccff" stroke-width="1.2" fill="none">
      <path d="M125,180 C120,200 110,210 120,230" />
      <path d="M135,180 C133,205 128,220 135,240" />
      <path d="M150,180 C148,205 150,220 150,245" />
      <path d="M165,180 C163,205 168,220 165,240" />
      <path d="M185,180 C182,205 190,220 185,235" />
    </g>
    <!-- Hot-air balloon basket (as if attached to the jellyfish) -->
    <rect x="143" y="250" width="14" height="10" fill="#8B4513" stroke="#552200" stroke-width="1"/>
    <line x1="150" y1="230" x2="150" y2="250" stroke="#ffffff" stroke-width="1"/>
  </g>
  
  <!-- Bubbles rising in the water -->
  <g id="bubbles" fill="none" stroke="#aaddff" stroke-width="0.8">
    <circle cx="40" cy="80" r="3" />
    <circle cx="60" cy="50" r="2" />
    <circle cx="220" cy="60" r="3" />
    <circle cx="250" cy="90" r="2.5" />
    <circle cx="180" cy="40" r="2" />
  </g>
  
  <!-- Additional glow effect around the city -->
  <filter id="glow">
    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
    <feMerge>
      <feMergeNode in="coloredBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <rect x="0" y="200" width="300" height="100" fill="none" filter="url(#glow)" />
</svg>
Gemini 2.5 Pro Preview 05-06
Player 2
ELO: 1,219.381 1,226.821 (+7.4)
SVG by Gemini 2.5 Pro Preview 05-06 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradients -->
    <linearGradient id="deepSeaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#000020; stop-opacity:1" />
      <stop offset="60%" style="stop-color:#001538; stop-opacity:1" />
      <stop offset="100%" style="stop-color:#0B3050; stop-opacity:1" />
    </linearGradient>

    <radialGradient id="jellyfishBellGradient" cx="50%" cy="40%" r="70%" fx="50%" fy="30%">
      <stop offset="0%" style="stop-color:#FF99FF; stop-opacity:0.95" /> <!-- Light Pink/Magenta -->
      <stop offset="30%" style="stop-color:#FFB3E6; stop-opacity:0.85" /> <!-- Lighter Pink -->
      <stop offset="60%" style="stop-color:#99DDFF; stop-opacity:0.75" /> <!-- Light Cyan/Blue -->
      <stop offset="100%" style="stop-color:#CC99FF; stop-opacity:0.65" /> <!-- Light Purple -->
    </radialGradient>
    
    <linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#FFB3E6; stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#99DDFF; stop-opacity:0.5" />
    </linearGradient>

    <radialGradient id="cityCoreGlow" cx="50%" cy="100%" r="100%" fx="50%" fy="100%">
      <stop offset="0%" style="stop-color:#FFFF99; stop-opacity:0.5"/> <!-- Yellowish glow -->
      <stop offset="30%" style="stop-color:#99FFFF; stop-opacity:0.3"/> <!-- Cyanish glow -->
      <stop offset="100%" style="stop-color:#99FFFF; stop-opacity:0"/>
    </radialGradient>

    <radialGradient id="windowGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#FFFFDD; stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#FFFFDD; stop-opacity:0"/>
    </radialGradient>

    <!-- Filters -->
    <filter id="blurGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="2.5" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/> <!-- Keep original sharp on top -->
      </feMerge>
    </filter>
    <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" in="SourceAlpha" result="blur"/>
       <feOffset dy="1" dx="0" in="blur" result="offsetBlur"/>
      <feSpecularLighting surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#ffeeaa" in="offsetBlur" result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
      <feMerge>
        <feMergeNode in="litPaint"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
     <filter id="slightBlur" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.5" result="blur"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="300" height="300" fill="url(#deepSeaGradient)" />

  <!-- Optional: Distant light rays from above (surface) -->
  <path d="M100 0 L50 300 L150 300 Z" fill="#5070A0" opacity="0.03" transform="skewX(-15)"/>
  <path d="M200 0 L150 300 L250 300 Z" fill="#5070A0" opacity="0.03" transform="skewX(15)"/>


  <!-- Underwater City -->
  <g id="underwaterCity" transform="translate(0, 30)"> 
    <!-- City general glow (large blurred shape) -->
    <ellipse cx="150" cy="270" rx="150" ry="60" fill="url(#cityCoreGlow)" opacity="0.9"/>

    <!-- City structures -->
    <g id="cityStructures">
      <!-- Structure 1 (Spire with dome) -->
      <path d="M60,270 L70,220 Q85,200 100,220 L110,270 Z" fill="#10355F" stroke="#305070" stroke-width="1"/>
      <circle cx="85" cy="220" r="18" fill="#15406A" filter="url(#softGlow)"/>
      <circle cx="85" cy="220" r="10" fill="#70B0FF" filter="url(#blurGlow)" opacity="0.7"/>
      <circle cx="85" cy="220" r="3" fill="url(#windowGlow)"/>

      <!-- Structure 2 (Central taller spire) -->
      <path d="M140,270 L145,190 Q150,180 155,190 L160,270 Z" fill="#184060" stroke="#386080" stroke-width="1.5"/>
      <polygon points="150,185 142,200 158,200" fill="#70B0FF" filter="url(#blurGlow)" opacity="0.8"/>
      <circle cx="150" cy="190" r="4" fill="url(#windowGlow)"/>
      <circle cx="148" cy="210" r="1.5" fill="url(#windowGlow)" opacity="0.8"/>
      <circle cx="152" cy="210" r="1.5" fill="url(#windowGlow)" opacity="0.8"/>
      <circle cx="150" cy="230" r="2" fill="url(#windowGlow)"/>


      <!-- Structure 3 (Organic/Coral like) -->
      <path d="M220,270 C210,240 230,230 240,240 C250,250 245,270 220,270 Z" fill="#204560" stroke="#406585" stroke-width="1" filter="url(#softGlow)"/>
      <path d="M230,245 Q225,235 235,230 Q245,235 240,245" fill="#80C0FF" filter="url(#blurGlow)" opacity="0.6"/>
      <circle cx="230" cy="240" r="2" fill="url(#windowGlow)"/>
      <circle cx="238" cy="238" r="1.5" fill="url(#windowGlow)"/>

      <!-- Smaller background structures -->
      <path d="M30,270 L35,240 L40,245 L45,240 L50,270Z" fill="#0A2840" opacity="0.7"/>
      <path d="M190,270 L195,250 L200,255 L205,250 L210,270Z" fill="#0A2840" opacity="0.7"/>
      <path d="M100,270 C105,250 115,250 120,270Z" fill="#0E2E48" opacity="0.8"/>
      <circle cx="110" cy="255" r="3" fill="#60A0DD" filter="url(#blurGlow)" opacity="0.5"/>
    </g>
  </g>
  
  <!-- Jellyfish Hot Air Balloon Group -->
  <g transform="translate(0, -20)"> <!-- Group to position entire Jellyfish assembly -->
    <!-- Subtle light cone from Jellyfish -->
    <polygon points="150,170 120,270 180,270" fill="url(#jellyfishBellGradient)" opacity="0.08" filter="url(#blurGlow)"/>

    <!-- Basket -->
    <g id="basket">
      <rect x="142" y="185" width="16" height="12" rx="2" ry="2" fill="#7A3D14" stroke="#5A2D0C" stroke-width="1"/>
      <!-- Ropes connecting basket to bell -->
      <path d="M144,185 Q130,175 120,165" stroke="#D2B48C" stroke-width="1" fill="none"/>
      <path d="M156,185 Q170,175 180,165" stroke="#D2B48C" stroke-width="1" fill="none"/>
      <path d="M150,185 Q150,177 150,170" stroke="#D2B48C" stroke-width="1.5" fill="none"/>
    </g>

    <!-- Tentacles -->
    <g id="tentacles" filter="url(#slightBlur)">
      <path d="M150,170 Q140,200 150,230 Q160,260 150,290" stroke="url(#tentacleGradient)" stroke-width="5" fill="none" stroke-linecap="round" opacity="0.7"/>
      <path d="M130,165 Q115,210 125,250 Q135,280 125,285" stroke="url(#tentacleGradient)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.6"/>
      <path d="M170,165 Q185,210 175,250 Q165,280 175,285" stroke="url(#tentacleGradient)" stroke-width="4" fill="none" stroke-linecap="round" opacity="0.6"/>

      <path d="M115,155 Q105,180 120,210 Q130,240 115,260" stroke="#FFC0CB" stroke-width="1.5" fill="none" opacity="0.5" stroke-dasharray="3 2"/>
      <path d="M185,155 Q195,180 180,210 Q170,240 185,260" stroke="#ADD8E6" stroke-width="1.5" fill="none" opacity="0.5" stroke-dasharray="3 2"/>
      <path d="M140,170 Q145,190 135,210 Q125,230 140,245" stroke="#FFDAE9" stroke-width="2" fill="none" opacity="0.6"/>
      <path d="M160,170 Q155,190 165,210 Q175,230 160,245" stroke="#B0E0E6" stroke-width="2" fill="none" opacity="0.6"/>
      
      <path d="M120,150 Q100,190 110,230" stroke="#FF99FF" stroke-width="1" fill="none" opacity="0.7"/>
      <circle cx="110" cy="230" r="3" fill="#FF99FF" filter="url(#blurGlow)" opacity="0.8"/>
      
      <path d="M180,150 Q200,190 190,230" stroke="#99DDFF" stroke-width="1" fill="none" opacity="0.7"/>
      <circle cx="190" cy="230" r="3" fill="#99DDFF" filter="url(#blurGlow)" opacity="0.8"/>
    </g>

    <!-- Jellyfish Bell -->
    <g id="jellyfishBell">
      <!-- Bell Path (Main Shape) -->
      <path d="M150,30 Q80,35 60,100 C60,140 90,165 150,170 C210,165 240,140 240,100 Q220,35 150,30 Z" 
            fill="url(#jellyfishBellGradient)" 
            stroke="#FFA07A" stroke-width="0.5" stroke-opacity="0.3"
            />
      <!-- Bell inner glow (burner effect) -->
      <ellipse cx="150" cy="95" rx="45" ry="30" fill="#FFFF99" opacity="0.25" filter="url(#blurGlow)"/>
      <ellipse cx="150" cy="95" rx="25" ry="15" fill="#FFFFE0" opacity="0.35"/>
      
      <!-- Bell surface pattern/texture (subtle lines) -->
       <path d="M150,30 Q120,65 100,100 M150,30 Q180,65 200,100 M150,30 Q150,70 150,110 M90,55 C100,75 105,95 100,115 M210,55 C200,75 195,95 200,115" 
            stroke="#FFFFFF" stroke-width="0.7" stroke-opacity="0.1" fill="none"/>
    </g>
  </g> <!-- End of Jellyfish Hot Air Balloon Group -->

  <!-- Foreground Bubbles / Particles with Animation -->
  <g id="particles">
    <circle cx="50" cy="150" r="3" fill="#ADD8E6" opacity="0.3">
      <animate attributeName="cy" values="320;20;320" dur="15s" repeatCount="indefinite" begin="-2s"/>
      <animate attributeName="cx" values="50;60;40;50" dur="11s" repeatCount="indefinite" begin="-2s"/>
      <animate attributeName="r" values="3;2;3.5;3" dur="9s" repeatCount="indefinite" begin="-2s"/>
    </circle>
    <circle cx="250" cy="100" r="2" fill="#FFFFFF" opacity="0.2">
      <animate attributeName="cy" values="320;-20;320" dur="18s" repeatCount="indefinite" begin="-5s"/>
      <animate attributeName="cx" values="250;240;260;250" dur="13s" repeatCount="indefinite" begin="-5s"/>
    </circle>
    <circle cx="100" cy="250" r="4" fill="#99DDFF" opacity="0.25">
      <animate attributeName="cy" values="330;50;330" dur="20s" begin="-10s" repeatCount="indefinite"/>
       <animate attributeName="r" values="4;2.5;4.5;4" dur="12s" repeatCount="indefinite" begin="-10s"/>
    </circle>
     <circle cx="200" cy="50" r="2.5" fill="#E0FFFF" opacity="0.3">
      <animate attributeName="cy" values="310;-10;310" dur="16s" begin="-7s" repeatCount="indefinite"/>
      <animate attributeName="cx" values="200;215;190;200" dur="10s" repeatCount="indefinite" begin="-7s"/>
    </circle>
    <circle cx="150" cy="290" r="1.5" fill="#FFFFFF" opacity="0.15">
        <animate attributeName="cy" values="320;200;320" dur="12s" begin="-3s" repeatCount="indefinite"/>
    </circle>
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Gemini 2.5 Pro Preview 05-06 Player 2

Judge's Analysis

    Player 2's submission demonstrates greater creativity and technical quality, with a more detailed and atmospheric depiction of the jellyfish-shaped hot air balloon and glowing underwater city.

    The use of lighting, gradients, and intricate details enhances the visual appeal and better aligns with the prompt.

    Player 1's design, while colorful, lacks the depth and immersive quality seen in Player 2's work.

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
26
Player 2
47
Rectangles

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

Player 1
13
Player 2
2
Circles

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

Player 1
6
Player 2
17
Ellipses

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

Player 1
—
Player 2
3
Lines

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

Player 1
1
Player 2
—
Polygons

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

Player 1
—
Player 2
2
Paths

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

Player 1
6
Player 2
23
Groups

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

Player 1
4
Player 2
7

Visual Effects Metrics

Gradients

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

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

The number of elements with stroke attributes in the SVG.

Player 1
5
Player 2
18

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
12
Player 2
27

Interactivity Metrics

Animations

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

Player 1
—
Player 2
10
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
—
Player 2
4

Complexity Metrics

Path Commands

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

Player 1
16
Player 2
87
Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1
1
Player 2
1
Defs Elements

The number of elements defined within the defs element in the SVG.

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

Match #2700 May 09, 2025

"“Two fish playing chess underwater.”"

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o3-mini low (2025-01-31)
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2500 May 09, 2025

"A floating island with a single tree and roots dangling into the clouds."

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o3-mini low (2025-01-31)
vs
Gemini 2.5 Pro Preview 05-06
View
Match #2384 May 09, 2025

"An ice cream cone melting into the shape of a famous landmark."

P1
SVG by o3-mini low (2025-01-31)
P2
SVG by Gemini 2.5 Pro Preview 05-06
o3-mini low (2025-01-31)
vs
Gemini 2.5 Pro Preview 05-06
View