GPT-4o
Challenge Creator
Creative Challenge
"A cat balancing on a unicycle juggling fish in the rain."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for background sky -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEFA"/>
<stop offset="100%" stop-color="#1E90FF"/>
</linearGradient>
<!-- Gradient for unicycle rim -->
<radialGradient id="rimGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FF8C00"/>
</radialGradient>
<!-- Pattern for raindrops -->
<pattern id="raindropPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1.5" fill="#ADD8E6"/>
</pattern>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Rain overlay -->
<rect width="300" height="300" fill="url(#raindropPattern)" opacity="0.4" />
<!-- Unicycle Rim -->
<circle cx="150" cy="220" r="30" fill="url(#rimGradient)" stroke="#333" stroke-width="2" />
<!-- Unicycle Spokes -->
<line x1="150" y1="220" x2="150" y2="190" stroke="#333" stroke-width="1.5"/>
<line x1="150" y1="220" x2="178" y2="205" stroke="#333" stroke-width="1.5"/>
<line x1="150" y1="220" x2="150" y2="250" stroke="#333" stroke-width="1.5"/>
<line x1="150" y1="220" x2="122" y2="205" stroke="#333" stroke-width="1.5"/>
<!-- Cat body balancing atop the unicycle -->
<g id="cat" transform="translate(150, 220)">
<!-- Cat belly/body -->
<ellipse cx="0" cy="-35" rx="18" ry="25" fill="#FFDAB9" stroke="#D2691E" stroke-width="2"/>
<!-- Cat head -->
<circle cx="0" cy="-65" r="12" fill="#FFDAB9" stroke="#D2691E" stroke-width="2"/>
<!-- Cat ears -->
<polygon points="-8,-75 0,-90 2,-75" fill="#FFDAB9" stroke="#D2691E" stroke-width="1"/>
<polygon points="8,-75 0,-90 -2,-75" fill="#FFDAB9" stroke="#D2691E" stroke-width="1"/>
<!-- Cat eyes -->
<circle cx="-4" cy="-67" r="1.5" fill="#000"/>
<circle cx="4" cy="-67" r="1.5" fill="#000"/>
<!-- Cat whiskers -->
<line x1="-10" y1="-65" x2="-20" y2="-63" stroke="#A0522D" stroke-width="1"/>
<line x1="10" y1="-65" x2="20" y2="-63" stroke="#A0522D" stroke-width="1"/>
<!-- Cat tail -->
<path d="M18,-20 C35,-15, 40,0, 25,5" fill="none" stroke="#FFDAB9" stroke-width="4" stroke-linecap="round"/>
</g>
<!-- Fish juggling -->
<!-- Using a repetitive group with fish shapes arcing above the cat -->
<g id="fish-group" transform="translate(150, 150)">
<!-- Fish 1 -->
<g transform="rotate(-20)">
<path d="M0,0 Q15,-5 20,0 Q15,5 0,0" fill="#FF6347" stroke="#C04000" stroke-width="1"/>
<circle cx="17" cy="-1" r="1" fill="#fff"/>
</g>
<!-- Fish 2 -->
<g transform="rotate(20)">
<path d="M0,0 Q15,-5 20,0 Q15,5 0,0" fill="#32CD32" stroke="#228B22" stroke-width="1"/>
<circle cx="17" cy="-1" r="1" fill="#fff"/>
</g>
<!-- Fish 3 -->
<g transform="translate(5,-20)">
<path d="M0,0 Q15,-5 20,0 Q15,5 0,0" fill="#1E90FF" stroke="#104E8B" stroke-width="1"/>
<circle cx="17" cy="-1" r="1" fill="#fff"/>
</g>
</g>
<!-- Unicycle stand (a simple vertical line as artistic expression) -->
<line x1="150" y1="220" x2="150" y2="260" stroke="#333" stroke-width="3" stroke-linecap="round"/>
<!-- Ground shadow for added realism -->
<ellipse cx="150" cy="265" rx="35" ry="7" fill="black" opacity="0.2"/>
<!-- Additional raindrops for dynamic motion -->
<g stroke="#ADD8E6" stroke-width="1">
<line x1="50" y1="30" x2="50" y2="45" stroke-linecap="round"/>
<line x1="80" y1="10" x2="80" y2="25" stroke-linecap="round"/>
<line x1="110" y1="40" x2="110" y2="55" stroke-linecap="round"/>
<line x1="140" y1="20" x2="140" y2="35" stroke-linecap="round"/>
<line x1="170" y1="50" x2="170" y2="65" stroke-linecap="round"/>
<line x1="200" y1="15" x2="200" y2="30" stroke-linecap="round"/>
<line x1="230" y1="35" x2="230" y2="50" stroke-linecap="round"/>
<line x1="260" y1="25" x2="260" y2="40" stroke-linecap="round"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="sky" cx="50%" cy="40%" r="98%">
<stop offset="0%" stop-color="#8ec2ff"/>
<stop offset="70%" stop-color="#437ee3"/>
<stop offset="100%" stop-color="#1f315a"/>
</radialGradient>
<radialGradient id="catFur" cx="60%" cy="40%" r="80%">
<stop offset="0%" stop-color="#ffefb3" />
<stop offset="80%" stop-color="#f0a12d" />
<stop offset="100%" stop-color="#d17504" />
</radialGradient>
<linearGradient id="unicycleFrame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6cdbe4" />
<stop offset="100%" stop-color="#256774" />
</linearGradient>
<linearGradient id="fishBody" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e4f1a3" />
<stop offset="70%" stop-color="#2fd4e6" />
<stop offset="100%" stop-color="#2f9fe6" />
</linearGradient>
<radialGradient id="rim" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#f0fafb"/>
<stop offset="80%" stop-color="#9797a8"/>
<stop offset="100%" stop-color="#232443"/>
</radialGradient>
<radialGradient id="rainDrop" cx="50%" cy="0%" r="70%">
<stop offset="0%" stop-color="#beeaff" />
<stop offset="100%" stop-color="#2070b8" />
</radialGradient>
<linearGradient id="umbrella" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fc4e57"/>
<stop offset="100%" stop-color="#922169"/>
</linearGradient>
<pattern id="fishScale" patternUnits="userSpaceOnUse" width="8" height="8">
<path d="M8,4 A4,4 0 0,1 0,4" fill="#b7f2fa" />
</pattern>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="3" stdDeviation="2" flood-color="#444" flood-opacity="0.4"/>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#sky)" />
<!-- Rain -->
<g>
<g>
<ellipse cx="30" cy="50" rx="2" ry="8" fill="url(#rainDrop)" opacity="0.5"/>
<ellipse cx="60" cy="160" rx="1.7" ry="7" fill="url(#rainDrop)" opacity="0.5"/>
<ellipse cx="100" cy="120" rx="2" ry="9" fill="url(#rainDrop)" opacity="0.7"/>
<ellipse cx="200" cy="50" rx="2.3" ry="9" fill="url(#rainDrop)" opacity="0.52"/>
<ellipse cx="255" cy="35" rx="1.6" ry="5.3" fill="url(#rainDrop)" opacity="0.6"/>
<ellipse cx="281" cy="150" rx="2" ry="9" fill="url(#rainDrop)" opacity="0.5"/>
<ellipse cx="166" cy="37" rx="1.7" ry="7.5" fill="url(#rainDrop)" opacity="0.4"/>
<ellipse cx="80" cy="200" rx="2.2" ry="8" fill="url(#rainDrop)" opacity="0.6"/>
<ellipse cx="240" cy="185" rx="1.8" ry="7" fill="url(#rainDrop)" opacity="0.45"/>
<ellipse cx="195" cy="215" rx="2" ry="8.5" fill="url(#rainDrop)" opacity="0.5"/>
<ellipse cx="135" cy="90" rx="1.7" ry="7" fill="url(#rainDrop)" opacity="0.52"/>
<ellipse cx="50" cy="265" rx="1.7" ry="7.6" fill="url(#rainDrop)" opacity="0.45"/>
<ellipse cx="110" cy="265" rx="1.7" ry="7.6" fill="url(#rainDrop)" opacity="0.6"/>
<ellipse cx="170" cy="265" rx="1.7" ry="7.6" fill="url(#rainDrop)" opacity="0.7"/>
<ellipse cx="230" cy="245" rx="1.7" ry="7.6" fill="url(#rainDrop)" opacity="0.6"/>
</g>
</g>
<!-- Cat's unicycle shadow -->
<ellipse cx="150" cy="258" rx="28" ry="7" fill="#18203e" opacity="0.25"/>
<!-- Unicycle -->
<g filter="url(#shadow)">
<!-- Wheel outer rim -->
<ellipse cx="150" cy="245" rx="22" ry="22" fill="url(#rim)"/>
<!-- Wheel treads -->
<ellipse cx="150" cy="245" rx="19" ry="19" fill="none" stroke="#636686" stroke-width="3"/>
<!-- Spokes -->
<g stroke="#e1e8f0" stroke-width="1.2">
<line x1="150" y1="245" x2="169" y2="245"/>
<line x1="150" y1="245" x2="150" y2="226"/>
<line x1="150" y1="245" x2="137" y2="260"/>
<line x1="150" y1="245" x2="124" y2="235"/>
<line x1="150" y1="245" x2="155" y2="266"/>
<line x1="150" y1="245" x2="168" y2="257"/>
</g>
<!-- Center hub -->
<circle cx="150" cy="245" r="5" fill="#fafdff" stroke="#b7b7cf" stroke-width="1"/>
<!-- Unicycle frame stem -->
<rect x="147.5" y="195" width="5" height="40" rx="2" fill="url(#unicycleFrame)" />
<!-- Unicycle crank -->
<rect x="143" y="240" width="14" height="4" rx="2" fill="#c3d4dd" transform="rotate(20 150 242)"/>
<!-- Pedals -->
<ellipse cx="144" cy="243.7" rx="2" ry="3.5" fill="#a3add2"/>
<ellipse cx="156.2" cy="246.5" rx="2" ry="3.5" fill="#a3add2"/>
<!-- Unicycle Seat -->
<ellipse cx="150" cy="193.5" rx="14" ry="5.5" fill="#232443" stroke="#636686" stroke-width="2"/>
<ellipse cx="150" cy="192" rx="14" ry="3.3" fill="#fc4e57" opacity="0.65"/>
</g>
<!-- Cat -->
<g>
<!-- Tail -->
<path d="M130 240 Q120 225 150 210 Q175 230 140 245" fill="none" stroke="#d17504" stroke-width="7" stroke-linecap="round" opacity="0.9"/>
<path d="M132 238 Q121 227 151 213 Q171 223 143 242" fill="none" stroke="#ffefb3" stroke-width="3" stroke-linecap="round" opacity="0.7"/>
<!-- Cat Body -->
<ellipse cx="150" cy="215" rx="23" ry="31" fill="url(#catFur)" filter="url(#shadow)"/>
<!-- Cat Belly -->
<ellipse cx="152" cy="225" rx="11.5" ry="14.5" fill="#fff7db" opacity="0.82"/>
<!-- Cat Head -->
<ellipse cx="150" cy="180" rx="18" ry="17" fill="url(#catFur)" filter="url(#shadow)"/>
<!-- Cat Face Highlights -->
<ellipse cx="153" cy="176" rx="7" ry="3.3" fill="#fff8d1" opacity="0.38"/>
<!-- Cat Ears -->
<polygon points="137,164 145,169 141,178" fill="url(#catFur)"/>
<polygon points="163,165 155,171 159,178" fill="url(#catFur)"/>
<polygon points="139,168 143,169 142,175" fill="#fcba67"/>
<polygon points="159,168 155,169 157,175" fill="#fcba67"/>
<!-- Cat Eyes -->
<ellipse cx="145" cy="180" rx="2.2" ry="4.1" fill="#29263b"/>
<ellipse cx="155" cy="180" rx="2.2" ry="4.1" fill="#29263b"/>
<ellipse cx="145" cy="182" rx="0.7" ry="1.2" fill="#f3fdfe"/>
<ellipse cx="155.5" cy="182" rx="0.7" ry="1.2" fill="#f3fdfe"/>
<!-- Cat Nose -->
<ellipse cx="150" cy="186.9" rx="2" ry="1" fill="#fc4e57"/>
<!-- Cat Mouth -->
<path d="M150 188 Q151 190 153 188" stroke="#fc4e57" stroke-width="1" fill="none"/>
<path d="M150 188 Q149 190 147 188" stroke="#fc4e57" stroke-width="1" fill="none"/>
<!-- Cat Whiskers -->
<path d="M137 187 Q130 187 125 185" stroke="#e6b90c" stroke-width="1"/>
<path d="M137 189 Q130 190 125 192" stroke="#e6b90c" stroke-width="1"/>
<path d="M163 187 Q170 184 175 185" stroke="#e6b90c" stroke-width="1"/>
<path d="M163 189 Q170 192 175 192" stroke="#e6b90c" stroke-width="1"/>
<!-- Cat Arms -->
<g filter="url(#shadow)">
<!-- Left arm -->
<ellipse cx="130" cy="200" rx="6.5" ry="15" fill="url(#catFur)" transform="rotate(-32 130 200)"/>
<!-- Right arm -->
<ellipse cx="170" cy="201" rx="6.5" ry="15" fill="url(#catFur)" transform="rotate(32 170 201)"/>
<!-- Left paw -->
<ellipse cx="119" cy="186" rx="4.2" ry="4.4" fill="#fcba67"/>
<ellipse cx="119" cy="186.5" rx="1.8" ry="1.7" fill="#fff7e0"/>
<!-- Right paw -->
<ellipse cx="180.7" cy="189" rx="4.2" ry="4.4" fill="#fcba67"/>
<ellipse cx="180.5" cy="189.3" rx="1.8" ry="1.7" fill="#fffbe8"/>
</g>
<!-- Cat Legs -->
<ellipse cx="140" cy="237" rx="7.3" ry="19" fill="url(#catFur)" transform="rotate(-13 140 237)"/>
<ellipse cx="159" cy="237" rx="7.3" ry="19" fill="url(#catFur)" transform="rotate(13 159 237)"/>
<!-- Left foot/paw -->
<ellipse cx="138" cy="257" rx="4.7" ry="2.5" fill="#fcba67"/>
<ellipse cx="138" cy="255.5" rx="1.6" ry="1.1" fill="#fffbe8"/>
<!-- Right foot/paw -->
<ellipse cx="162" cy="257" rx="4.7" ry="2.5" fill="#fcba67"/>
<ellipse cx="162" cy="255.5" rx="1.6" ry="1.1" fill="#fffbe8"/>
</g>
<!-- Umbrella (held in tail) -->
<g>
<!-- Handle -->
<rect x="137.5" y="238" width="5" height="36" rx="2.2" fill="#573b22" transform="rotate(-17 140 250)" />
<!-- Canopy -->
<ellipse cx="137" cy="218" rx="16" ry="8" fill="url(#umbrella)" />
<!-- Canopy segments -->
<path d="M121 219 C126 213, 138 213, 153 219 Q137 222 121 219Z" fill="#fda7b6" opacity="0.54"/>
<!-- Drip -->
<ellipse cx="153" cy="223" rx="1.3" ry="2.6" fill="url(#rainDrop)" opacity="0.7"/>
<!-- Finial -->
<circle cx="137" cy="211" r="1.6" fill="#a1486d"/>
</g>
<!-- Juggled Fish -->
<g>
<!-- Orbit path -->
<ellipse cx="150" cy="168" rx="38" ry="14" fill="none" stroke="#9ae0ef" stroke-dasharray="4 3" opacity="0.18"/>
<!-- Fish 1 -->
<g>
<ellipse cx="116.5" cy="167" rx="9" ry="4" fill="url(#fishBody)" />
<ellipse cx="116.5" cy="167" rx="7.5" ry="3.2" fill="url(#fishScale)" opacity="0.37"/>
<polygon points="106,167 112,164 112,170" fill="#6fdce2"/>
<!-- Eye -->
<circle cx="122" cy="166" r="0.9" fill="#fff"/>
<circle cx="122" cy="166" r="0.4" fill="#282c2c"/>
<!-- Smile -->
<path d="M119 169 Q120 170 122 169" stroke="#142558" stroke-width="0.8" fill="none"/>
<!-- Fins -->
<polygon points="117,170.5 119,174 116,172" fill="#2895da" opacity="0.67"/>
<polygon points="117,163.5 119.5,161 120,165" fill="#2895da" opacity="0.67"/>
<!-- Water droplets -->
<ellipse cx="109" cy="164" rx="0.75" ry="1.3" fill="url(#rainDrop)" opacity="0.86"/>
<ellipse cx="112" cy="170" rx="0.6" ry="1.2" fill="url(#rainDrop)" opacity="0.75"/>
</g>
<!-- Fish 2 -->
<g>
<ellipse cx="180" cy="157" rx="9" ry="4" fill="url(#fishBody)" />
<ellipse cx="180" cy="157" rx="7.5" ry="3.2" fill="url(#fishScale)" opacity="0.37"/>
<polygon points="190,157 184,154 184,160" fill="#6fdce2"/>
<!-- Eye -->
<circle cx="175" cy="158" r="0.9" fill="#fff"/>
<circle cx="175" cy="158" r="0.4" fill="#282c2c"/>
<!-- Smile -->
<path d="M178 160 Q176 161 175 159" stroke="#142558" stroke-width="0.8" fill="none"/>
<!-- Fins -->
<polygon points="179,154.5 181,152 182,155" fill="#2895da" opacity="0.67"/>
<polygon points="183.5,157 186,159 183,160" fill="#2895da" opacity="0.67"/>
<!-- Water droplets -->
<ellipse cx="187.5" cy="158.6" rx="0.6" ry="1.2" fill="url(#rainDrop)" opacity="0.65"/>
</g>
<!-- Fish 3 -->
<g>
<ellipse cx="154" cy="181" rx="9" ry="4" fill="url(#fishBody)" />
<ellipse cx="154" cy="181" rx="7.5" ry="3.2" fill="url(#fishScale)" opacity="0.37"/>
<polygon points="164,181 158,178 158,184" fill="#6fdce2"/>
<!-- Eye -->
<circle cx="148.7" cy="180" r="0.9" fill="#fff"/>
<circle cx="148.7" cy="180" r="0.4" fill="#282c2c"/>
<!-- Smile -->
<path d="M151.7 183 Q150 184 148.7 181.7" stroke="#142558" stroke-width="0.8" fill="none"/>
<!-- Fins -->
<polygon points="155,185.5 157,190 154,188" fill="#2895da" opacity="0.67"/>
<polygon points="156.5,178 159,180 156,181" fill="#2895da" opacity="0.67"/>
<!-- Water droplets -->
<ellipse cx="162" cy="184.1" rx="0.75" ry="1.3" fill="url(#rainDrop)" opacity="0.81"/>
</g>
</g>
<!-- Water splashes at wheel -->
<g>
<path d="M140 267 Q142 263 150 265 Q158 260 160 267" fill="none" stroke="#c7edfb" stroke-width="2.6" opacity="0.8"/>
<ellipse cx="143" cy="270" rx="2" ry="0.5" fill="#66caf1" opacity="0.62"/>
<ellipse cx="157" cy="270" rx="2" ry="0.5" fill="#66caf1" opacity="0.62"/>
<ellipse cx="150" cy="267" rx="1" ry="2" fill="#a7eafe" opacity="0.62"/>
</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 image excels in creativity, technical quality, and adherence to the prompt.
The detailed depiction of the cat juggling multiple fish while balancing on a unicycle in the rain is visually appealing and well-executed.
In contrast, Player 1's image is more simplistic and lacks the same level of detail and dynamic composition, making Player 2's submission the stronger choice overall.
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
104
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
4
Circles
The number of circle elements (circle) in the SVG.
Player 1
8
Player 2
8
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
2
Player 2
59
Lines
The number of line elements (line) in the SVG.
Player 1
15
Player 2
6
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
2
Player 2
13
Paths
The number of path elements (path) in the SVG.
Player 1
4
Player 2
14
Groups
The number of group elements (g) in the SVG.
Player 1
6
Player 2
12
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
2
Player 2
7
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
—
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
41
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
17
Player 2
17
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
17
Player 2
46
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
5
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
11
Player 2
33
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
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.
