Back

SVG Drawing Match #221

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A cloud with a fishbowl inside, tiny fish swimming among stars"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,136.403 1,148.981 (+12.6)
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 reusable elements -->
  <defs>
    <!-- Cloud gradient -->
    <linearGradient id="cloudGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#e0e6ff" />
    </linearGradient>
    
    <!-- Bowl glass effect -->
    <radialGradient id="bowlGradient" cx="50%" cy="40%" r="60%" fx="40%" fy="30%">
      <stop offset="0%" stop-color="rgba(173, 216, 230, 0.7)" />
      <stop offset="70%" stop-color="rgba(135, 206, 250, 0.5)" />
      <stop offset="100%" stop-color="rgba(135, 206, 250, 0.3)" />
    </radialGradient>
    
    <!-- Bowl rim gradient -->
    <linearGradient id="rimGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#a0d8ef" />
      <stop offset="50%" stop-color="#d6f0ff" />
      <stop offset="100%" stop-color="#a0d8ef" />
    </linearGradient>
    
    <!-- Water gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="rgba(64, 164, 223, 0.5)" />
      <stop offset="100%" stop-color="rgba(13, 71, 161, 0.5)" />
    </linearGradient>
    
    <!-- Cosmic background gradient -->
    <linearGradient id="cosmicGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f0c29" />
      <stop offset="50%" stop-color="#302b63" />
      <stop offset="100%" stop-color="#24243e" />
    </linearGradient>
    
    <!-- Star gradient -->
    <radialGradient id="starGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffffa8" />
      <stop offset="80%" stop-color="#ffda00" />
      <stop offset="100%" stop-color="#ffb700" />
    </radialGradient>
    
    <!-- Tiny star gradient -->
    <radialGradient id="tinyStarGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#f0f0f0" />
    </radialGradient>
    
    <!-- Glow filter for stars -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Fish definitions -->
    <g id="fish1">
      <path d="M0,0 C3,-4 8,-4 12,0 C16,4 20,4 24,0 L22,5 L24,10 C20,6 16,6 12,10 C8,14 3,14 0,10 L2,5 L0,0Z" fill="#FF9800" />
      <circle cx="5" cy="4" r="1.5" fill="black" />
      <path d="M24,0 L30,3 L30,-3 Z" fill="#FF9800" />
      <path d="M4,0 C6,-2 10,-2 12,0" fill="none" stroke="#FF5722" stroke-width="0.5" />
    </g>
    
    <g id="fish2">
      <path d="M0,5 Q10,0 15,5 Q20,10 15,15 Q10,20 0,15 L3,10 L0,5Z" fill="#2196F3" />
      <circle cx="5" cy="9" r="1.5" fill="black" />
      <path d="M0,5 L-5,8 L-5,2 Z" fill="#2196F3" />
      <path d="M5,5 C7,3 11,3 13,5" fill="none" stroke="#0D47A1" stroke-width="0.5" />
    </g>
    
    <g id="fish3">
      <path d="M0,0 Q10,-5 15,0 Q20,5 15,10 Q10,15 0,10 L3,5 L0,0Z" fill="#EC407A" />
      <circle cx="5" cy="4" r="1.5" fill="black" />
      <path d="M0,0 L-5,3 L-5,-3 Z" fill="#EC407A" />
      <path d="M5,2 C7,0 11,0 13,2" fill="none" stroke="#C2185B" stroke-width="0.5" />
    </g>
    
    <g id="goldfish">
      <path d="M0,0 C3,-4 8,-4 12,0 C16,4 20,4 24,0 L22,5 L24,10 C20,6 16,6 12,10 C8,14 3,14 0,10 L2,5 L0,0Z" fill="#FFD700" />
      <circle cx="5" cy="4" r="1.5" fill="black" />
      <path d="M24,0 L30,3 L30,-3 Z" fill="#FFD700" />
      <path d="M4,0 C6,-2 10,-2 12,0" fill="none" stroke="#FF8C00" stroke-width="0.5" />
      <path d="M12,0 Q16,4 12,10" fill="none" stroke="#FF8C00" stroke-width="0.5" />
    </g>
    
    <!-- Star definition -->
    <path id="star" d="M0,-5 L1.5,-1.5 L5.5,-1.5 L2,1 L3.5,5 L0,2.5 L-3.5,5 L-2,1 L-5.5,-1.5 L-1.5,-1.5 Z" fill="url(#starGradient)" filter="url(#starGlow)" />
    
    <!-- Tiny star definition -->
    <circle id="tinyStar" r="0.5" fill="url(#tinyStarGradient)" />
    
    <!-- Nebula definition -->
    <radialGradient id="nebulaGradient1" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="rgba(138, 43, 226, 0.2)" />
      <stop offset="100%" stop-color="rgba(138, 43, 226, 0)" />
    </radialGradient>
    
    <radialGradient id="nebulaGradient2" cx="50%" cy="50%" r="70%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="rgba(64, 224, 208, 0.15)" />
      <stop offset="100%" stop-color="rgba(64, 224, 208, 0)" />
    </radialGradient>
    
    <!-- Bubble definition -->
    <g id="bubble">
      <circle r="3" fill="rgba(255, 255, 255, 0.3)" />
      <circle r="2.5" fill="rgba(255, 255, 255, 0.1)" />
      <circle cx="1" cy="-1" r="0.8" fill="rgba(255, 255, 255, 0.6)" />
    </g>
  </defs>
  
  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#cosmicGradient)" />
  
  <!-- Nebula effects -->
  <ellipse cx="50" cy="80" rx="100" ry="60" fill="url(#nebulaGradient1)" />
  <ellipse cx="250" cy="50" rx="80" ry="70" fill="url(#nebulaGradient2)" />
  <ellipse cx="150" cy="250" rx="120" ry="40" fill="url(#nebulaGradient1)" opacity="0.6" />
  
  <!-- Tiny background stars -->
  <g>
    <use href="#tinyStar" transform="translate(20, 30)" />
    <use href="#tinyStar" transform="translate(50, 40)" />
    <use href="#tinyStar" transform="translate(80, 20)" />
    <use href="#tinyStar" transform="translate(120, 35)" />
    <use href="#tinyStar" transform="translate(170, 25)" />
    <use href="#tinyStar" transform="translate(210, 40)" />
    <use href="#tinyStar" transform="translate(250, 20)" />
    <use href="#tinyStar" transform="translate(280, 35)" />
    <use href="#tinyStar" transform="translate(30, 70)" />
    <use href="#tinyStar" transform="translate(70, 80)" />
    <use href="#tinyStar" transform="translate(110, 75)" />
    <use href="#tinyStar" transform="translate(160, 85)" />
    <use href="#tinyStar" transform="translate(200, 70)" />
    <use href="#tinyStar" transform="translate(240, 80)" />
    <use href="#tinyStar" transform="translate(270, 75)" />
    <use href="#tinyStar" transform="translate(50, 220)" />
    <use href="#tinyStar" transform="translate(90, 240)" />
    <use href="#tinyStar" transform="translate(130, 230)" />
    <use href="#tinyStar" transform="translate(180, 250)" />
    <use href="#tinyStar" transform="translate(220, 235)" />
    <use href="#tinyStar" transform="translate(260, 245)" />
    <use href="#tinyStar" transform="translate(40, 260)" />
    <use href="#tinyStar" transform="translate(80, 280)" />
    <use href="#tinyStar" transform="translate(120, 265)" />
    <use href="#tinyStar" transform="translate(170, 275)" />
    <use href="#tinyStar" transform="translate(210, 260)" />
    <use href="#tinyStar" transform="translate(250, 270)" />
  </g>
  
  <!-- Cloud -->
  <path d="M60,80 Q80,50 110,60 Q125,30 150,40 Q180,20 210,50 Q250,40 260,80 Q290,90 270,120 Q280,150 250,160 Q260,190 230,200 Q200,230 170,210 Q140,240 110,210 Q80,230 60,200 Q30,190 40,160 Q10,140 30,110 Q20,90 60,80" 
        fill="url(#cloudGradient)" stroke="#d9e1ff" stroke-width="2" />
  
  <!-- Stars outside fishbowl (in cloud) -->
  <use href="#star" transform="translate(80,100) scale(1)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(220,80) scale(1.2)">
    <animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(180,60) scale(0.9)">
    <animate attributeName="opacity" values="0.6;0.9;0.6" dur="4s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(120,70) scale(1.1)">
    <animate attributeName="opacity" values="0.5;0.9;0.5" dur="3.5s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(100,120) scale(0.7)">
    <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(150,90) scale(0.8)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="3.8s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(200,110) scale(1)">
    <animate attributeName="opacity" values="0.5;0.8;0.5" dur="3.2s" repeatCount="indefinite" />
  </use>
  
  <!-- Fishbowl -->
  <ellipse cx="150" cy="200" rx="70" ry="20" fill="url(#rimGradient)" />
  <ellipse cx="150" cy="190" rx="70" ry="20" fill="none" stroke="#a0d8ef" stroke-width="2" />
  
  <!-- Fishbowl glass -->
  <path d="M80,190 Q80,120 150,120 Q220,120 220,190" fill="url(#bowlGradient)" stroke="#a0d8ef" stroke-width="2" />
  
  <!-- Water in fishbowl -->
  <path d="M85,180 Q85,125 150,125 Q215,125 215,180 Q215,190 150,190 Q85,190 85,180" fill="url(#waterGradient)" />
  
  <!-- Stars inside fishbowl -->
  <use href="#star" transform="translate(110,140) scale(0.8)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(180,150) scale(0.6)">
    <animate attributeName="opacity" values="0.6;1;0.6" dur="2.5s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(140,170) scale(0.5)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(165,135) scale(0.7)">
    <animate attributeName="opacity" values="0.6;1;0.6" dur="3.5s" repeatCount="indefinite" />
  </use>
  <use href="#star" transform="translate(125,155) scale(0.4)">
    <animate attributeName="opacity" values="0.7;1;0.7" dur="2.8s" repeatCount="indefinite" />
  </use>
  
  <!-- Tiny stars inside fishbowl -->
  <use href="#tinyStar" transform="translate(100, 165)" />
  <use href="#tinyStar" transform="translate(120, 150)" />
  <use href="#tinyStar" transform="translate(145, 160)" />
  <use href="#tinyStar" transform="translate(160, 140)" />
  <use href="#tinyStar" transform="translate(185, 165)" />
  <use href="#tinyStar" transform="translate(195, 145)" />
  <use href="#tinyStar" transform="translate(105, 130)" />
  <use href="#tinyStar" transform="translate(135, 125)" />
  <use href="#tinyStar" transform="translate(170, 130)" />
  <use href="#tinyStar" transform="translate(200, 160)" />
  
  <!-- Bubbles -->
  <g>
    <use href="#bubble" transform="translate(130,150) scale(0.5)">
      <animate attributeName="transform" values="translate(130,150) scale(0.5);translate(128,135) scale(0.5);translate(126,120) scale(0.5)" dur="8s" repeatCount="indefinite" />
    </use>
  </g>
  <g>
    <use href="#bubble" transform="translate(160,160) scale(0.4)">
      <animate attributeName="transform" values="translate(160,160) scale(0.4);translate(158,145) scale(0.4);translate(156,130) scale(0.4)" dur="6s" repeatCount="indefinite" />
    </use>
  </g>
  <g>
    <use href="#bubble" transform="translate(175,165) scale(0.3)">
      <animate attributeName="transform" values="translate(175,165) scale(0.3);translate(173,150) scale(0.3);translate(171,135) scale(0.3)" dur="10s" repeatCount="indefinite" />
    </use>
  </g>
  <g>
    <use href="#bubble" transform="translate(145,170) scale(0.2)">
      <animate attributeName="transform" values="translate(145,170) scale(0.2);translate(143,155) scale(0.2);translate(141,140) scale(0.2)" dur="7s" repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Fish in fishbowl -->
  <!-- Orange fish swimming left to right -->
  <g>
    <use href="#fish1" transform="translate(110,160) scale(0.8)">
      <animate attributeName="transform" values="translate(110,160) scale(0.8);translate(190,150) scale(0.8)" dur="15s" repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Blue fish swimming right to left -->
  <g>
    <use href="#fish2" transform="translate(190,150) scale(0.7) rotate(180)">
      <animate attributeName="transform" values="translate(190,150) scale(0.7) rotate(180);translate(100,160) scale(0.7) rotate(180)" dur="12s" repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Pink fish swimming in a curve pattern -->
  <g>
    <use href="#fish3" transform="translate(140,130) scale(0.7) rotate(45)">
      <animate attributeName="transform" 
               values="translate(140,130) scale(0.7) rotate(45);
                      translate(180,150) scale(0.7) rotate(90);
                      translate(160,180) scale(0.7) rotate(135);
                      translate(120,160) scale(0.7) rotate(180);
                      translate(140,130) scale(0.7) rotate(45)" 
               dur="18s" 
               repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Gold fish swimming in a figure 8 pattern -->
  <g>
    <use href="#goldfish" transform="translate(150,150) scale(0.6) rotate(0)">
      <animate attributeName="transform" 
               values="translate(150,150) scale(0.6) rotate(0);
                      translate(180,135) scale(0.6) rotate(45);
                      translate(150,150) scale(0.6) rotate(90);
                      translate(120,165) scale(0.6) rotate(135);
                      translate(150,180) scale(0.6) rotate(180);
                      translate(180,165) scale(0.6) rotate(225);
                      translate(150,150) scale(0.6) rotate(270);
                      translate(120,135) scale(0.6) rotate(315);
                      translate(150,150) scale(0.6) rotate(360)" 
               dur="20s" 
               repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Reflection on fishbowl glass -->
  <path d="M95,150 Q100,140 110,145" stroke="rgba(255,255,255,0.4)" fill="none" stroke-width="2" />
  <path d="M205,150 Q200,140 190,145" stroke="rgba(255,255,255,0.4)" fill="none" stroke-width="2" />
</svg>
o1-mini (2024-09-12)
Player 2
ELO: 1,060.929 1,048.351 (-12.6)
SVG by o1-mini (2024-09-12) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="bgGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#1e3c72"/>
      <stop offset="100%" stop-color="#2a5298"/>
    </radialGradient>
    <radialGradient id="cloudGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff"/>
      <stop offset="100%" stop-color="#f0f0f0"/>
    </radialGradient>
    <linearGradient id="bowlGradient" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#a0d8ef" stop-opacity="0.8"/>
      <stop offset="100%" stop-color="#76c1fa" stop-opacity="0.8"/>
    </linearGradient>
    <radialGradient id="starGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="70%" stop-color="#fffacd" />
      <stop offset="100%" stop-color="transparent" />
    </radialGradient>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#bgGradient)" />
  
  <!-- Cloud -->
  <g id="cloud">
    <ellipse cx="150" cy="100" rx="60" ry="40" fill="url(#cloudGradient)" />
    <ellipse cx="110" cy="100" rx="40" ry="30" fill="url(#cloudGradient)" />
    <ellipse cx="190" cy="100" rx="40" ry="30" fill="url(#cloudGradient)" />
    <ellipse cx="150" cy="80" rx="50" ry="35" fill="url(#cloudGradient)" />
  </g>
  
  <!-- Fishbowl -->
  <ellipse cx="150" cy="100" rx="50" ry="30" fill="url(#bowlGradient)" stroke="#5dade2" stroke-width="2" />
  <ellipse cx="150" cy="100" rx="50" ry="30" fill="none" stroke="#85c1e9" stroke-width="1" opacity="0.5" />
  
  <!-- Fish -->
  <g id="fish">
    <!-- Fish 1 -->
    <path d="M140,95 Q135,100 140,105 Q135,100 140,95" fill="#ff7f50" />
    <circle cx="140" cy="100" r="2" fill="#000" />
    <!-- Fish 2 -->
    <path d="M160,90 Q155,95 160,100 Q155,95 160,90" fill="#7fffd4" />
    <circle cx="160" cy="95" r="2" fill="#000" />
    <!-- Fish 3 -->
    <path d="M150,110 Q145,115 150,120 Q145,115 150,110" fill="#dda0dd" />
    <circle cx="150" cy="115" r="2" fill="#000" />
  </g>
  
  <!-- Stars -->
  <g id="stars">
    <polygon points="50,30 54,38 63,39 56,44 59,53 50,48 41,53 44,44 37,39 46,38" fill="url(#starGradient)" />
    <polygon points="250,60 254,68 263,69 256,74 259,83 250,78 241,83 244,74 237,69 246,68" fill="url(#starGradient)" />
    <polygon points="80,220 84,228 93,229 86,234 89,243 80,238 71,243 74,234 67,229 76,228" fill="url(#starGradient)" />
    <polygon points="210,250 214,258 223,259 216,264 219,273 210,268 201,273 204,264 197,259 206,258" fill="url(#starGradient)" />
  </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 submission effectively captures the whimsical concept of a fishbowl inside a cloud, with colorful fish and stars.

    The composition is visually appealing and technically well-executed, featuring a dynamic and engaging scene.

    In contrast, Player 2's image is simpler and lacks the detail and creativity present in Player 1'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
33
Player 2
17
Rectangles

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

Player 1
1
Player 2
1
Circles

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

Player 1
8
Player 2
3
Ellipses

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

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

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

Player 1
19
Player 2
3
Groups

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

Player 1
14
Player 2
3

Visual Effects Metrics

Gradients

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

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

The number of elements with stroke attributes in the SVG.

Player 1
10
Player 2
2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
34
Player 2
14

Interactivity Metrics

Animations

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

Player 1
20
Player 2
—
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
57
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
97
Player 2
9
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
17
Player 2
4
Use Elements

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

Player 1
57
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 #1095 Mar 13, 2025

"A floating island with giant clock gears; minimalist style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o1-mini (2024-09-12)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o1-mini (2024-09-12)
View
Match #333 Mar 13, 2025

"A jellyfish wearing a top hat, floating above a city skyline"

P1
SVG by o1-mini (2024-09-12)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o1-mini (2024-09-12)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #153 Mar 13, 2025

"Octopus in a teacup balancing a pirate ship hat"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o1-mini (2024-09-12)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o1-mini (2024-09-12)
View