Back

SVG Drawing Match #2549

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Cat balancing on a unicycle while juggling fish under a starlit sky."

GPT-4.1 (2025-04-14)
Player 1
ELO: 1,195.784 1,210.548 (+14.8)
SVG by GPT-4.1 (2025-04-14) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradient for the night sky -->
    <radialGradient id="skyGradient" cx="150" cy="80" r="200" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#423375"/>
      <stop offset="60%" stop-color="#253357"/>
      <stop offset="100%" stop-color="#1b2333"/>
    </radialGradient>
    <!-- Gradient for the unicycle wheel -->
    <radialGradient id="wheelGradient" cx="20" cy="20" r="35" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#aaa"/>
      <stop offset="80%" stop-color="#363636"/>
      <stop offset="100%" stop-color="#111"/>
    </radialGradient>
    <!-- Gradient for the cat's fur -->
    <linearGradient id="catFur" x1="0" x2="0" y1="70" y2="180" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#FCA17D"/>
      <stop offset="45%" stop-color="#E47A3C"/>
      <stop offset="100%" stop-color="#A84B2B"/>
    </linearGradient>
    <!-- Gradient for fish -->
    <linearGradient id="fishBlue" x1="0" x2="32" y1="0" y2="14" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#7FF9F3"/>
      <stop offset="40%" stop-color="#3EC5DC"/>
      <stop offset="100%" stop-color="#1979BD"/>
    </linearGradient>
    <radialGradient id="yellowStar" cx="5" cy="5" r="7" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#ffe980"/>
      <stop offset="70%" stop-color="#ffd600"/>
      <stop offset="100%" stop-color="#f7c200"/>
    </radialGradient>
  </defs>
  
  <!-- Night sky background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
  
  <!-- Stars (random placement, artistic composition) -->
  <g>
    <circle cx="40" cy="40" r="2" fill="url(#yellowStar)" opacity="0.8"/>
    <circle cx="65" cy="25" r="1.3" fill="url(#yellowStar)" opacity="0.6"/>
    <circle cx="100" cy="70" r="1.7" fill="url(#yellowStar)" opacity="0.7"/>
    <circle cx="250" cy="40" r="2.3" fill="url(#yellowStar)" opacity="0.8"/>
    <circle cx="180" cy="20" r="1.2" fill="url(#yellowStar)" opacity="0.7"/>
    <circle cx="210" cy="70" r="1.7" fill="url(#yellowStar)" opacity="0.8"/>
    <circle cx="260" cy="100" r="1.2" fill="url(#yellowStar)" opacity="0.6"/>
    <circle cx="62" cy="90" r="2.2" fill="url(#yellowStar)" opacity="0.8"/>
    <circle cx="120" cy="40" r="1.5" fill="url(#yellowStar)" opacity="0.5"/>
    <circle cx="200" cy="55" r="0.8" fill="url(#yellowStar)" opacity="0.7"/>
    <!-- A stylized shooting star -->
    <g>
      <rect x="170" y="32" width="1.2" height="20" rx="0.8" fill="#fff6b2" transform="rotate(19 171 42)" opacity="0.6"/>
      <circle cx="171" cy="34" r="2.1" fill="#fffdf6"/>
    </g>
  </g>
  
  <!-- Ground shadow -->
  <ellipse cx="150" cy="262" rx="50" ry="10" fill="#161616" opacity="0.32"/>
  
  <!-- Unicycle -->
  <g>
    <!-- Wheel -->
    <ellipse cx="150" cy="243" rx="35" ry="35" fill="url(#wheelGradient)" stroke="#393939" stroke-width="3"/>
    <ellipse cx="150" cy="243" rx="19" ry="19" fill="#212121" opacity="0.46"/>
    <!-- Spokes -->
    <g stroke="#eaeaea" stroke-width="2" opacity="0.6">
      <line x1="150" y1="243" x2="185" y2="243"/>
      <line x1="150" y1="243" x2="170" y2="270"/>
      <line x1="150" y1="243" x2="130" y2="270"/>
      <line x1="150" y1="243" x2="115" y2="243"/>
      <line x1="150" y1="243" x2="130" y2="217"/>
      <line x1="150" y1="243" x2="170" y2="217"/>
    </g>
    <!-- Frame -->
    <rect x="146" y="172" width="8" height="55" rx="3.9" fill="#bbb" stroke="#777" stroke-width="2"/>
    <!-- Pedals -->
    <g>
      <rect x="174" y="243" width="18" height="6.2" rx="2.7" fill="#55586b">
        <animateTransform attributeName="transform" type="rotate" from="0 150 243" to="360 150 243" dur="2s" repeatCount="indefinite"/>
      </rect>
      <rect x="108" y="243" width="18" height="6.2" rx="2.7" fill="#55586b">
        <animateTransform attributeName="transform" type="rotate" from="180 150 243" to="540 150 243" dur="2s" repeatCount="indefinite"/>
      </rect>
    </g>
    <!-- Saddle -->
    <ellipse cx="150" cy="170" rx="24" ry="11" fill="#466bc8" stroke="#22397c" stroke-width="1.7"/>
    <ellipse cx="150" cy="172" rx="12" ry="4" fill="#22397c" opacity="0.36"/>
  </g>
  
  <!-- Cat -->
  <g>
    <!-- Tail (curling) -->
    <path d="M159 198 Q187 215 170 229 Q155 244 142 234 Q128 223 147 209" fill="none" stroke="#A84B2B" stroke-width="6" stroke-linecap="round"/>
    <path d="M153 206 Q180 222 158 230" fill="none" stroke="#FCA17D" stroke-width="3.2" stroke-linecap="round"/>
    <!-- Back Leg -->
    <ellipse cx="164" cy="204" rx="11" ry="22" fill="url(#catFur)" transform="rotate(15 164 204)"/>
    <!-- Body -->
    <ellipse cx="150" cy="185" rx="29" ry="40" fill="url(#catFur)" stroke="#9E5438" stroke-width="2"/>
    <!-- Belly highlight -->
    <ellipse cx="157" cy="195" rx="10" ry="21" fill="#ffeede" opacity="0.36"/>
    <!-- Chest fluff -->
    <ellipse cx="140" cy="185" rx="9" ry="13" fill="#fff8ef" opacity="0.38"/>
    <!-- Front Leg (on pedal) -->
    <ellipse cx="139" cy="211" rx="7.3" ry="17" fill="url(#catFur)" transform="rotate(-18 139 211)"/>
    <!-- Paw on pedal -->
    <ellipse cx="144" cy="226" rx="6.3" ry="3.6" fill="#ffeede" stroke="#c58d5d" stroke-width="1"/>
    <!-- Head -->
    <ellipse cx="150" cy="143" rx="24" ry="24" fill="url(#catFur)" stroke="#9E5438" stroke-width="1.2"/>
    <!-- Left Ear -->
    <path d="M131 131 Q128 117 142 128 Q137 137 131 131" fill="url(#catFur)" stroke="#944024" stroke-width="1.1"/>
    <!-- Right Ear -->
    <path d="M169 130 Q174 115 157 128 Q163 137 169 130" fill="url(#catFur)" stroke="#944024" stroke-width="1.1"/>
    <!-- Face -->
    <g>
      <!-- Eyes -->
      <ellipse cx="143" cy="143" rx="3.2" ry="4" fill="#fff"/>
      <ellipse cx="157" cy="143" rx="3.2" ry="4" fill="#fff"/>
      <ellipse cx="143" cy="143.7" rx="1.2" ry="2" fill="#393b3d"/>
      <ellipse cx="157" cy="143.7" rx="1.2" ry="2" fill="#393b3d"/>
      <!-- Shiny highlights -->
      <ellipse cx="144" cy="143" rx="0.36" ry="0.64" fill="#fff"/>
      <ellipse cx="158" cy="143" rx="0.36" ry="0.64" fill="#fff"/>
      <!-- Nose -->
      <ellipse cx="150" cy="150" rx="2" ry="1.3" fill="#ff645b"/>
      <!-- Mouth smile -->
      <path d="M147.5 152.5 Q150 156 152.5 152.5" fill="none" stroke="#b24b3a" stroke-width="0.9" stroke-linecap="round"/>
      <!-- Whiskers -->
      <g stroke="#fff2d0" stroke-width="1.1" stroke-linecap="round" opacity="0.8">
        <path d="M135 151 Q130 150 133 147"/>
        <path d="M135 148 Q130 143 134 142"/>
        <path d="M165 151 Q170 150 167 147"/>
        <path d="M165 148 Q170 143 166 142"/>
      </g>
      <!-- Blush -->
      <ellipse cx="142" cy="149.5" rx="2.1" ry="1.2" fill="#ffd8cb" opacity="0.7"/>
      <ellipse cx="158" cy="149.5" rx="2.1" ry="1.2" fill="#ffd8cb" opacity="0.7"/>
    </g>
    <!-- Left arm (raised, juggling) -->
    <path d="M130 157 Q110 126 130 116 Q142 111 140 126 Q137 138 146 146" fill="none" stroke="#E47A3C" stroke-width="10" stroke-linecap="round"/>
    <!-- Left paw -->
    <ellipse cx="114" cy="122" rx="6" ry="3" fill="#ffeede" stroke="#c58d5d" stroke-width="1" transform="rotate(-28 114 122)"/>
    <!-- Right arm (raised, juggling) -->
    <path d="M170 157 Q196 123 183 110 Q170 97 163 117 Q162 135 154 146" fill="none" stroke="#E47A3C" stroke-width="10" stroke-linecap="round"/>
    <!-- Right paw -->
    <ellipse cx="189" cy="115" rx="6" ry="3" fill="#ffeede" stroke="#c58d5d" stroke-width="1" transform="rotate(22 189 115)"/>
    <!-- Cat's main body outline accent -->
    <ellipse cx="150" cy="185" rx="28.4" ry="39.3" fill="none" stroke="#fff6f1" stroke-width="1.2" opacity="0.13"/>
  </g>
  
  <!-- Juggling Fish (3, clockwise movement) -->
  <g>
    <g>
      <g>
        <!-- Fish 1 (left) -->
        <g transform="translate(107,87) rotate(-12)">
          <!-- Body -->
          <ellipse cx="0" cy="0" rx="16" ry="7.6" fill="url(#fishBlue)" stroke="#125682" stroke-width="1.3"/>
          <!-- Fin -->
          <ellipse cx="-7" cy="-2.9" rx="5" ry="2.2" fill="#23c3e6" opacity="0.6"/> 
          <!-- Tail -->
          <polygon points="15,0 22,-6 21,6" fill="#63d7e1"/>
          <!-- Eye -->
          <ellipse cx="8.1" cy="-1.1" rx="1.1" ry="1.5" fill="#fff"/>
          <ellipse cx="8.7" cy="-1" rx="0.5" ry="0.7" fill="#221"/>
          <!-- Bubbles (metaphor for juggling movement) -->
          <ellipse cx="24" cy="-3" rx="2.5" ry="2.5" fill="#ade8ff" opacity="0.23">
            <animateTransform attributeName="transform" type="translate" from="0 0" to="7 -25" begin="0s" dur="1.7s" repeatCount="indefinite"/>
          </ellipse>
        </g>
      </g>
      <!-- Fish 2 (top) -->
      <g transform="translate(148,63) rotate(-8)">
        <ellipse cx="0" cy="0" rx="15" ry="6.5" fill="url(#fishBlue)" stroke="#298ed0" stroke-width="1.2"/>
        <ellipse cx="6" cy="0.4" rx="4" ry="1.5" fill="#7cf1e1" opacity="0.54"/>
        <polygon points="-14,0 -19,-5 -19,5" fill="#1fcdd6"/>
        <!-- Eye -->
        <ellipse cx="-7" cy="-1" rx="1" ry="1.3" fill="#fff"/>
        <ellipse cx="-6.5" cy="-1" rx="0.5" ry="0.72" fill="#224"/>
        <!-- Bubbles -->
        <ellipse cx="-23" cy="-2" rx="2.1" ry="2.1" fill="#ade8ff" opacity="0.2">
          <animateTransform attributeName="transform" type="translate" from="0 0" to="-5 -22" begin="0.4s" dur="1.7s" repeatCount="indefinite"/>
        </ellipse>
      </g>
      <!-- Fish 3 (right) -->
      <g transform="translate(195,108) rotate(15)">
        <ellipse cx="0" cy="0" rx="12.5" ry="5.8" fill="url(#fishBlue)" stroke="#1966ad" stroke-width="1.2"/>
        <ellipse cx="-5" cy="2.1" rx="3.1" ry="1.1" fill="#41b6ef" opacity="0.44"/>
        <polygon points="12,0 18,-4 17,4" fill="#20b3e8"/>
        <!-- Eye -->
        <ellipse cx="6.3" cy="1" rx="0.8" ry="1.1" fill="#fff"/>
        <ellipse cx="6.7" cy="1.1" rx="0.39" ry="0.5" fill="#222"/>
        <!-- Bubbles -->
        <ellipse cx="20" cy="1" rx="1.7" ry="1.7" fill="#ade8ff" opacity="0.21">
          <animateTransform attributeName="transform" type="translate" from="0 0" to="4 -16" begin="0.8s" dur="1.7s" repeatCount="indefinite"/>
        </ellipse>
      </g>
    </g>
    <!-- Juggling path arcs (dotted) -->
    <path d="M107 87 Q135 50 148 63 Q161 76 195 108" 
      fill="none" stroke="#ffe980" stroke-width="1.7" stroke-dasharray="3,6" opacity="0.35"/>
    <path d="M195 108 Q155 61 130 116" fill="none" stroke="#99dffe" stroke-width="1.4" stroke-dasharray="2,6" opacity="0.32"/>
  </g>

  <!-- Starlit sparkles under the fish for added magic -->
  <g>
    <g opacity="0.10">
      <polygon points="118,67 119.2,70 122.5,70.1 119.8,71.5 120.7,74.5 118,72.9 115.3,74.5 116.2,71.5 113.5,70.1 116.8,70" fill="#fffbe0"/>
      <polygon points="153,50 154,51.5 156,51.6 154.3,52.6 155,54.4 153,53.3 151,54.4 151.7,52.6 150,51.6 152,51.5" fill="#fffbe0"/>
      <polygon points="180,89 181,91 183,91 181.5,92 182,94 180,93 178,94 178.5,92 177,91 179,91" fill="#fffbe0"/>
    </g>
  </g>
</svg>
Claude 3.5 Sonnet (2024-10-22)
Player 2
ELO: 1,168.898 1,154.134 (-14.8)
SVG by Claude 3.5 Sonnet (2024-10-22) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="sky" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#0B1033"/>
      <stop offset="100%" style="stop-color:#1B2C5C"/>
    </radialGradient>
    <pattern id="stars" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="0.5" fill="white" opacity="0.8"/>
      <circle cx="5" cy="25" r="0.3" fill="white" opacity="0.6"/>
      <circle cx="25" cy="5" r="0.4" fill="white" opacity="0.7"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#sky)"/>
  <rect x="0" y="0" width="300" height="300" fill="url(#stars)"/>
  
  <!-- Moon -->
  <circle cx="250" cy="50" r="20" fill="#FFE5B4"/>
  <circle cx="240" cy="45" r="5" fill="#FFD700" opacity="0.5"/>
  
  <!-- Unicycle -->
  <circle cx="150" cy="220" r="30" fill="none" stroke="#FF4040" stroke-width="4"/>
  <line x1="150" y1="190" x2="150" y2="140" stroke="#FF4040" stroke-width="4"/>
  <circle cx="150" cy="220" r="5" fill="#FF4040"/>
  
  <!-- Cat -->
  <path d="M120,140 Q150,120 180,140 L150,160 Z" fill="#808080"/>
  <ellipse cx="150" cy="130" rx="35" ry="30" fill="#808080"/>
  <path d="M130,110 L140,95 L150,110 M150,110 L160,95 L170,110" fill="none" stroke="#808080" stroke-width="2"/>
  <circle cx="140" cy="125" r="3" fill="#000"/>
  <circle cx="160" cy="125" r="3" fill="#000"/>
  
  <!-- Juggling Fish -->
  <path d="M100,160 Q120,150 100,140" fill="#4169E1" transform="rotate(-30,100,150)">
    <animateTransform attributeName="transform" type="rotate" from="-30 100 150" to="330 100 150" dur="2s" repeatCount="indefinite"/>
  </path>
  <path d="M200,160 Q220,150 200,140" fill="#4169E1" transform="rotate(90,200,150)">
    <animateTransform attributeName="transform" type="rotate" from="90 200 150" to="450 200 150" dur="2s" repeatCount="indefinite"/>
  </path>
  <path d="M150,80 Q170,70 150,60" fill="#4169E1" transform="rotate(210,150,70)">
    <animateTransform attributeName="transform" type="rotate" from="210 150 70" to="570 150 70" dur="2s" repeatCount="indefinite"/>
  </path>
  
  <!-- Motion Lines -->
  <path d="M140,135 Q120,140 100,130" stroke="#FFF" stroke-width="0.5" fill="none" opacity="0.3"/>
  <path d="M160,135 Q180,140 200,130" stroke="#FFF" stroke-width="0.5" fill="none" opacity="0.3"/>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is GPT-4.1 (2025-04-14) Player 1

Judge's Analysis

    Player 1's submission adheres more closely to the prompt with a clear depiction of a cat on a unicycle juggling fish under a starlit sky.

    The design is more detailed and visually engaging, showing creativity and strong technical execution.

    Player 2's submission, while minimalist, lacks clarity in representing the juggling fish and overall prompt elements.

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
80
Player 2
20
Rectangles

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

Player 1
5
Player 2
2
Circles

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

Player 1
11
Player 2
9
Ellipses

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

Player 1
39
Player 2
1
Lines

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

Player 1
6
Player 2
1
Polygons

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

Player 1
6
Player 2
—
Paths

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

Player 1
13
Player 2
7
Groups

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

Player 1
16
Player 2
—

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
1
Patterns

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

Player 1
—
Player 2
1
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
30
Player 2
6
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
23
Player 2
5

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
53
Player 2
8

Interactivity Metrics

Animations

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

Player 1
5
Player 2
3
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
8
Player 2
3

Complexity Metrics

Path Commands

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

Player 1
35
Player 2
20
Max Group Nesting

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

Player 1
3
Player 2
—
Defs Elements

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

Player 1
5
Player 2
2
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 #2626 May 09, 2025

"A snail racing a rocket on a winding rainbow road under a starry sky."

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by GPT-4.1 (2025-04-14)
Claude 3.5 Sonnet (2024-10-22)
vs
GPT-4.1 (2025-04-14)
View
Match #2375 May 09, 2025

"A snail racing against a rocket on a rainbow track."

P1
SVG by GPT-4.1 (2025-04-14)
P2
SVG by Claude 3.5 Sonnet (2024-10-22)
GPT-4.1 (2025-04-14)
vs
Claude 3.5 Sonnet (2024-10-22)
View
Match #2206 May 08, 2025

"Two trees shaking hands under a glowing, smiling moon."

P1
SVG by Claude 3.5 Sonnet (2024-10-22)
P2
SVG by GPT-4.1 (2025-04-14)
Claude 3.5 Sonnet (2024-10-22)
vs
GPT-4.1 (2025-04-14)
View