GPT-4o
Challenge Creator
Creative Challenge
"Cat wearing a top hat and balancing on a unicycle under a spotlight."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="spotlight" cx="150" cy="0" r="200" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="rgba(255,255,200,0.8)"/>
<stop offset="60%" stop-color="rgba(255,255,200,0.4)"/>
<stop offset="100%" stop-color="rgba(0,0,0,0)"/>
</radialGradient>
<radialGradient id="wheelGrad" cx="150" cy="260" r="40" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#111"/>
</radialGradient>
<linearGradient id="catFur" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffcc99"/>
<stop offset="100%" stop-color="#cc9966"/>
</linearGradient>
<linearGradient id="hatGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#222"/>
<stop offset="100%" stop-color="#000"/>
</linearGradient>
</defs>
<!-- Stage -->
<circle cx="150" cy="300" r="200" fill="url(#spotlight)"/>
<!-- Unicycle Wheel -->
<circle cx="150" cy="260" r="40" fill="url(#wheelGrad)" stroke="#555" stroke-width="4"/>
<!-- Spokes -->
<g stroke="#888" stroke-width="2">
<line x1="150" y1="260" x2="150" y2="220"/>
<line x1="150" y1="260" x2="190" y2="260"/>
<line x1="150" y1="260" x2="150" y2="300"/>
<line x1="150" y1="260" x2="110" y2="260"/>
</g>
<!-- Frame -->
<line x1="150" y1="220" x2="150" y2="200" stroke="#444" stroke-width="4"/>
<line x1="150" y1="220" x2="140" y2="240" stroke="#444" stroke-width="4"/>
<circle cx="150" cy="200" r="6" fill="#444"/>
<!-- Seat -->
<rect x="135" y="188" width="30" height="6" fill="#333" rx="2"/>
<!-- Cat Body -->
<ellipse cx="150" cy="175" rx="25" ry="20" fill="url(#catFur)" stroke="#aa7744" stroke-width="2"/>
<!-- Cat Head -->
<circle cx="150" cy="145" r="18" fill="url(#catFur)" stroke="#aa7744" stroke-width="2"/>
<!-- Ears -->
<polygon points="135,135 142,120 150,135" fill="url(#catFur)" stroke="#aa7744" stroke-width="2"/>
<polygon points="165,135 158,120 150,135" fill="url(#catFur)" stroke="#aa7744" stroke-width="2"/>
<!-- Eyes -->
<circle cx="142" cy="142" r="3" fill="#000"/>
<circle cx="158" cy="142" r="3" fill="#000"/>
<!-- Nose -->
<polygon points="150,150 147,155 153,155" fill="#d66"/>
<!-- Whiskers -->
<g stroke="#333" stroke-width="1">
<line x1="130" y1="150" x2="145" y2="150"/>
<line x1="155" y1="150" x2="170" y2="150"/>
<line x1="130" y1="153" x2="145" y2="155"/>
<line x1="155" y1="153" x2="170" y2="155"/>
</g>
<!-- Mouth -->
<path d="M147,155 Q150,158 153,155" fill="none" stroke="#900" stroke-width="1"/>
<!-- Tail -->
<path d="M175,180 C190,175 200,200 180,210" stroke="url(#catFur)" stroke-width="6" fill="none" stroke-linecap="round"/>
<!-- Top Hat -->
<g transform="translate(150,120)">
<ellipse cx="0" cy="2" rx="20" ry="6" fill="url(#hatGrad)"/>
<rect x="-15" y="-20" width="30" height="20" fill="url(#hatGrad)" rx="3"/>
<ellipse cx="0" cy="-20" rx="15" ry="4" fill="url(#hatGrad)"/>
<line x1="-15" y1="0" x2="15" y2="0" stroke="#000" stroke-width="2"/>
</g>
</svg>
<svg viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Spotlight gradient -->
<radialGradient id="spotlight" cx="0.5" cy="0.02" r="1.4">
<stop offset="0%" stop-color="#fffce7" stop-opacity="1"/>
<stop offset="60%" stop-color="#ffe57e" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#fef6bc" stop-opacity="0"/>
</radialGradient>
<!-- Cat body gradient -->
<linearGradient id="catBody" x1="150" y1="100" x2="150" y2="220" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FA824C"/>
<stop offset="100%" stop-color="#753422"/>
</linearGradient>
<!-- Hat gradient -->
<linearGradient id="hatGrad" x1="160" y1="55" x2="135" y2="80" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#222838"/>
<stop offset="100%" stop-color="#111019"/>
</linearGradient>
<!-- Unicycle wheel gradient -->
<radialGradient id="wheelGrad" cx="0.5" cy="0.5" r="0.8">
<stop offset="0%" stop-color="#bcd1d5"/>
<stop offset="100%" stop-color="#445268"/>
</radialGradient>
<!-- Floor shadow gradient -->
<radialGradient id="shadowGrad" cx="0.5" cy="0.6" r="0.7">
<stop offset="0%" stop-color="#39342b" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#211b10" stop-opacity="0"/>
</radialGradient>
<!-- Tuxedo shirt gradient -->
<linearGradient id="shirtGrad" x1="147" y1="172" x2="160" y2="212" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ededed"/>
<stop offset="100%" stop-color="#cacace"/>
</linearGradient>
<!-- Tail gradient -->
<radialGradient id="tailGrad" cx="0.6" cy="0.4" r="0.8">
<stop offset="0%" stop-color="#d07835"/>
<stop offset="100%" stop-color="#7e4140"/>
</radialGradient>
<!-- Yellow trim for hat -->
<linearGradient id="hatBand" x1="160" y1="81" x2="135" y2="89" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fbff6a"/>
<stop offset="100%" stop-color="#ffe100"/>
</linearGradient>
<!-- Paw pad color -->
<radialGradient id="pawPad" cx="0.5" cy="0.5" r="0.8">
<stop offset="0%" stop-color="#fad7b4"/>
<stop offset="100%" stop-color="#f8a377"/>
</radialGradient>
</defs>
<!-- Background Spotlight -->
<ellipse cx="150" cy="160" rx="120" ry="180" fill="url(#spotlight)" />
<rect x="0" y="0" width="300" height="300" fill="#23243c" fill-opacity="0.85"/>
<ellipse cx="150" cy="250" rx="60" ry="12" fill="url(#shadowGrad)" />
<!-- Unicycle Wheel -->
<ellipse cx="150" cy="235" rx="32" ry="32" fill="url(#wheelGrad)" stroke="#23243c" stroke-width="3"/>
<ellipse cx="150" cy="235" rx="16" ry="16" fill="#fffef6" fill-opacity="0.15"/>
<circle cx="150" cy="235" r="7" fill="#d4c056" stroke="#a79a2d" stroke-width="1.5"/>
<!-- Wheel spokes -->
<g stroke="#f0e9bd" stroke-width="1.5" opacity="0.5">
<line x1="150" y1="235" x2="150" y2="203"/>
<line x1="150" y1="235" x2="177" y2="247"/>
<line x1="150" y1="235" x2="123" y2="247"/>
<line x1="150" y1="235" x2="167" y2="210"/>
<line x1="150" y1="235" x2="133" y2="210"/>
<line x1="150" y1="235" x2="170" y2="235"/>
<line x1="150" y1="235" x2="130" y2="235"/>
</g>
<!-- Unicycle frame -->
<rect x="146.5" y="185" width="7" height="46" rx="3.5" fill="#c0bdbc" stroke="#58515d" stroke-width="1"/>
<rect x="143" y="192" width="14" height="6" rx="3" fill="#edb643" stroke="#a1861c" stroke-width="1"/>
<rect x="139" y="195" width="22" height="5" rx="2.5" fill="#8c6e3e" stroke="#4a4023" stroke-width="1"/>
<!-- Pedals -->
<rect x="124" y="214" width="12" height="4" rx="2" fill="#ed4c88"/>
<rect x="164" y="204" width="12" height="4" rx="2" fill="#00c1a2"/>
<rect x="150" y="215" width="4" height="17" rx="2" transform="rotate(-18 150 215)" fill="#23243c"/>
<rect x="150" y="202" width="4" height="16" rx="2" transform="rotate(16 150 202)" fill="#23243c"/>
<!-- Cat Tail -->
<path d="M124 210 Q90 195 108 175 Q126 155 143 193" stroke="url(#tailGrad)" stroke-width="8" fill="none" stroke-linecap="round"/>
<!-- Cat Body -->
<ellipse cx="150" cy="165" rx="37" ry="54" fill="url(#catBody)" stroke="#2d1510" stroke-width="2"/>
<!-- Shirt / Tuxedo effect -->
<ellipse cx="150" cy="185" rx="19" ry="34" fill="url(#shirtGrad)" stroke="#f4ece0" stroke-width="1" opacity="0.88"/>
<!-- Bowtie -->
<g>
<ellipse cx="150" cy="175" rx="3.2" ry="2.2" fill="#df4545" stroke="#992f2d" stroke-width="0.6"/>
<ellipse cx="146.7" cy="175" rx="2.2" ry="1.3" fill="#ff4757" />
<ellipse cx="153.3" cy="175" rx="2.2" ry="1.3" fill="#e57c24" />
</g>
<!-- Cat Legs (front) -->
<ellipse cx="130" cy="200" rx="8.5" ry="22" fill="url(#catBody)" stroke="#64231d" stroke-width="2" transform="rotate(-14 130 200)"/>
<ellipse cx="170" cy="200" rx="8.5" ry="22" fill="url(#catBody)" stroke="#64231d" stroke-width="2" transform="rotate(14 170 200)"/>
<!-- Paws -->
<g>
<!-- Left front paw -->
<ellipse cx="119" cy="222" rx="7" ry="4" fill="#eedabc" stroke="#623e2b" stroke-width="1"/>
<ellipse cx="115.5" cy="222" rx="2" ry="1" fill="url(#pawPad)" />
<ellipse cx="119" cy="220.5" rx="0.7" ry="0.6" fill="#f8b273" />
<ellipse cx="122.5" cy="222" rx="1.1" ry="0.9" fill="url(#pawPad)" />
<!-- Right front paw -->
<ellipse cx="181" cy="222" rx="7" ry="4" fill="#eedabc" stroke="#623e2b" stroke-width="1"/>
<ellipse cx="184.5" cy="222" rx="2" ry="1" fill="url(#pawPad)" />
<ellipse cx="181" cy="220.5" rx="0.7" ry="0.6" fill="#f8b273" />
<ellipse cx="177.5" cy="222" rx="1.1" ry="0.9" fill="url(#pawPad)" />
</g>
<!-- Cat Legs (back, in unicycle) -->
<ellipse cx="143" cy="227" rx="7.5" ry="17" fill="url(#catBody)" stroke="#43201c" stroke-width="2" transform="rotate(23 143 227)"/>
<ellipse cx="157" cy="227" rx="7.5" ry="17" fill="url(#catBody)" stroke="#43201c" stroke-width="2" transform="rotate(-23 157 227)"/>
<!-- Cat Head -->
<ellipse cx="150" cy="98" rx="32" ry="35" fill="url(#catBody)" stroke="#240e0b" stroke-width="2.2"/>
<!-- Cat Ears -->
<g>
<!-- Left ear -->
<polygon points="120,78 135,60 139,90" fill="url(#catBody)" stroke="#321b13" stroke-width="2"/>
<polygon points="127,74 133,66 135,80" fill="#fffbee" fill-opacity="0.52"/>
<!-- Right ear -->
<polygon points="180,78 173,61 171,91" fill="url(#catBody)" stroke="#321b13" stroke-width="2"/>
<polygon points="174,73 176.5,68 174,83" fill="#fffbee" fill-opacity="0.48"/>
</g>
<!-- Cat Face -->
<!-- Eyes -->
<ellipse cx="138" cy="98" rx="6" ry="10" fill="#fffde6" stroke="#633f35" stroke-width="1.1"/>
<ellipse cx="138" cy="102.5" rx="3.4" ry="6.5" fill="#425069"/>
<ellipse cx="137.5" cy="104" rx="1.4" ry="2.3" fill="#fff"/>
<ellipse cx="162" cy="98" rx="6" ry="10" fill="#fffde6" stroke="#633f35" stroke-width="1.1"/>
<ellipse cx="162" cy="102.5" rx="3.4" ry="6.5" fill="#425069"/>
<ellipse cx="162.5" cy="104" rx="1.4" ry="2.3" fill="#fff"/>
<!-- Nose -->
<ellipse cx="150" cy="113" rx="3" ry="2.2" fill="#ff8e7e" stroke="#90322f" stroke-width="1"/>
<!-- Mouth -->
<path d="M147 116 Q150 120 153 116" stroke="#a24626" stroke-width="1.4" fill="none" stroke-linecap="round"/>
<path d="M149 117 Q149 119 148 120" stroke="#a24626" stroke-width="1.2" fill="none" stroke-linecap="round"/>
<path d="M151 117 Q151 119 152 120" stroke="#a24626" stroke-width="1.2" fill="none" stroke-linecap="round"/>
<!-- Whiskers -->
<g stroke="#fff8e2" stroke-width="1.2" opacity="0.8">
<path d="M132 115 Q120 112 121 109"/>
<path d="M132 117 Q120 120 121 124"/>
<path d="M132 119 Q116 135 126 120"/>
<path d="M168 115 Q180 112 179 109"/>
<path d="M168 117 Q180 120 179 124"/>
<path d="M168 119 Q184 135 174 120"/>
</g>
<!-- Cat Cheeks -->
<ellipse cx="135" cy="115" rx="4.8" ry="2.2" fill="#ffd0bc" fill-opacity="0.44"/>
<ellipse cx="165" cy="115" rx="4.8" ry="2.2" fill="#ffd0bc" fill-opacity="0.44"/>
<!-- Top Hat -->
<g>
<!-- Hat body -->
<ellipse cx="150" cy="75" rx="19.5" ry="7" fill="#10151f" filter="url(#shadow556)" opacity="0.44"/>
<ellipse cx="150" cy="75" rx="18.5" ry="6" fill="#202438"/>
<rect x="132" y="56" width="36" height="26" rx="8" fill="url(#hatGrad)" stroke="#10151f" stroke-width="2"/>
<!-- Hat band -->
<rect x="132" y="77" width="36" height="7" rx="4" fill="url(#hatBand)" />
<ellipse cx="150" cy="82.5" rx="18.2" ry="4.5" fill="#111019" opacity="0.8"/>
</g>
<!-- The gold sparkles around hat for flair -->
<g opacity="0.7">
<circle cx="120" cy="61" r="1.6" fill="#fff9b8"/>
<circle cx="118" cy="75" r="0.7" fill="#ffe982"/>
<circle cx="133" cy="50" r="0.9" fill="#ffeb8f"/>
<circle cx="166" cy="51" r="1.1" fill="#fae97c"/>
<circle cx="176" cy="64" r="0.8" fill="#f7eea1"/>
<circle cx="180" cy="56" r="1.6" fill="#fff9b8"/>
<circle cx="128" cy="68" r="0.9" fill="#ffe982"/>
<circle cx="182" cy="73" r="1.1" fill="#fae97c"/>
<circle cx="162" cy="85" r="0.8" fill="#f7eea1"/>
</g>
<!-- Circus ring suggestion (abstract, stylized) -->
<ellipse cx="150" cy="262" rx="68" ry="9" fill="none" stroke="#c5175b" stroke-width="3" opacity="0.33"/>
<ellipse cx="150" cy="268" rx="48" ry="7" fill="none" stroke="#f6da41" stroke-width="2.2" opacity="0.26"/>
<!-- Subtle falling spot-lit dust -->
<g opacity="0.11">
<circle cx="172" cy="192" r="1.3" fill="#fff7db"/>
<circle cx="145" cy="180" r="0.6" fill="#fff7db"/>
<circle cx="162" cy="207" r="1" fill="#fff9e1"/>
<circle cx="158" cy="151" r="0.5" fill="#fffde7"/>
<circle cx="129" cy="138" r="0.5" fill="#fff7d1"/>
<circle cx="178" cy="168" r="0.8" fill="#fff7d1"/>
<circle cx="150" cy="198" r="0.85" fill="#fff7d1"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 2
Judge's Analysis
Player 2's submission demonstrates superior creativity, technical quality, and visual appeal.
The detailed rendering of the cat, enhanced spotlight effect, and use of vibrant colors make it more engaging and aligned with the prompt.
Player 1's image, while clear, is simpler and lacks the same level of detail and dynamism as Player 2's submission.
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
27
Player 2
84
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
10
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
3
Player 2
36
Lines
The number of line elements (line) in the SVG.
Player 1
11
Player 2
7
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
3
Player 2
4
Paths
The number of path elements (path) in the SVG.
Player 1
2
Player 2
10
Groups
The number of group elements (g) in the SVG.
Player 1
3
Player 2
8
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
9
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
—
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
—
Player 2
9
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
12
Player 2
29
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
15
Player 2
68
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
6
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
4
Player 2
21
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
4
Player 2
9
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.
