GPT-4o
Challenge Creator
Creative Challenge
"A fish-shaped hot air balloon floating above a city at sunset."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky & Sun -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4527a0"/>
<stop offset="45%" stop-color="#9c27b0"/>
<stop offset="75%" stop-color="#ff7043"/>
<stop offset="100%" stop-color="#ffb74d"/>
</linearGradient>
<radialGradient id="sunGrad" cx="0.75" cy="0.9" r="0.35">
<stop offset="0%" stop-color="#fff9c4" stop-opacity="1"/>
<stop offset="40%" stop-color="#ffe082" stop-opacity="0.8"/>
<stop offset="75%" stop-color="#ffca28" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#ffca28" stop-opacity="0"/>
</radialGradient>
<!-- Fish -->
<linearGradient id="fishGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff8a65"/>
<stop offset="60%" stop-color="#ff5252"/>
<stop offset="100%" stop-color="#ff1744"/>
</linearGradient>
<!-- Scale pattern -->
<pattern id="scalePattern" patternUnits="userSpaceOnUse" width="14" height="14">
<path d="M0 14 A7 7 0 0 1 14 14 A7 7 0 0 1 0 14" fill="rgba(255,255,255,0.25)"/>
</pattern>
<!-- Basket -->
<linearGradient id="basketGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8d6e63"/>
<stop offset="100%" stop-color="#5d4037"/>
</linearGradient>
<!-- Shadow filter -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.5)"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<circle cx="235" cy="270" r="90" fill="url(#sunGrad)"/>
<!-- City skyline -->
<g fill="#311b51">
<path d="M0 255V300H300V244L280 244V220L262 220V244H245V208L230 208V244H215V228L190 228V244H175V215L160 215V244H145V230L125 230V244H110V210L92 210V244H75V225L55 225V244H40V233L20 233V255Z"/>
</g>
<!-- Fish-shaped hot air balloon -->
<g transform="translate(150 120)" filter="url(#shadow)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="65" ry="38" fill="url(#fishGrad)"/>
<ellipse cx="0" cy="0" rx="65" ry="38" fill="url(#scalePattern)"/>
<!-- Tail -->
<path d="M65 0 L95 -22 L95 22 Z" fill="url(#fishGrad)"/>
<!-- Fins -->
<path d="M-15 -38 L5 -55 L25 -38 Z" fill="url(#fishGrad)"/>
<path d="M-40 0 L-60 -12 L-60 12 Z" fill="url(#fishGrad)"/>
<!-- Eye -->
<circle cx="35" cy="-5" r="7" fill="#fff"/>
<circle cx="37" cy="-5" r="3.5" fill="#000"/>
<!-- Ropes -->
<line x1="-18" y1="38" x2="-12" y2="85" stroke="#8d6e63" stroke-width="2"/>
<line x1="18" y1="38" x2="12" y2="85" stroke="#8d6e63" stroke-width="2"/>
<!-- Basket -->
<rect x="-22" y="85" width="44" height="28" rx="5" fill="url(#basketGrad)"/>
<line x1="-22" y1="95" x2="22" y2="95" stroke="rgba(255,255,255,0.15)" stroke-width="2"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sunset sky gradient -->
<linearGradient id="sunsetSky" x1="0" y1="300" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fead5a"/>
<stop offset="35%" stop-color="#fd9962"/>
<stop offset="70%" stop-color="#fe7da4"/>
<stop offset="100%" stop-color="#4346b5"/>
</linearGradient>
<!-- Body of fish gradient -->
<linearGradient id="fishBody" x1="65" y1="80" x2="235" y2="130" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#42e1d8"/>
<stop offset="40%" stop-color="#2599e2"/>
<stop offset="80%" stop-color="#f75ee5"/>
<stop offset="100%" stop-color="#ffb73e"/>
</linearGradient>
<!-- Fish scale pattern -->
<pattern id="scalePattern" patternUnits="userSpaceOnUse" width="16" height="14">
<path d="M0,14 C4,7 12,7 16,14" fill="none" stroke="#c6f4ee" stroke-width="2"/>
</pattern>
<!-- City window pattern -->
<pattern id="windows" patternUnits="userSpaceOnUse" width="8" height="14">
<rect x="2" y="2" width="4" height="6" fill="#fffbbd" opacity="0.65"/>
<rect x="2" y="10" width="4" height="2" fill="#ffec9f" opacity="0.65"/>
</pattern>
<!-- Sun radial gradient -->
<radialGradient id="sunGlow" cx="0.8" cy="0.85" r="0.22">
<stop offset="0%" stop-color="#ffe497" stop-opacity="1"/>
<stop offset="80%" stop-color="#fd9962" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#fe7da4" stop-opacity="0"/>
</radialGradient>
<!-- Fish fin gradient -->
<linearGradient id="finGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffb73e"/>
<stop offset="60%" stop-color="#fd5d68"/>
<stop offset="100%" stop-color="#d04de5"/>
</linearGradient>
<!-- Balloon strings -->
<linearGradient id="stringGradient" x1="0" y1="1" x2="0.6" y2="0" gradientUnits="objectBoundingBox">
<stop offset="0%" stop-color="#bb4904"/>
<stop offset="100%" stop-color="#ffe497"/>
</linearGradient>
</defs>
<!-- Sunset sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#sunsetSky)"/>
<!-- Sun with glow effect -->
<circle cx="240" cy="240" r="38" fill="url(#sunGlow)" opacity="0.75"/>
<!-- City skyline: buildings silhouettes -->
<g>
<!-- Back row buildings (darker) -->
<g opacity="0.59">
<rect x="30" y="205" width="40" height="80" fill="#5d2f45"/>
<rect x="82" y="217" width="32" height="68" fill="#6e3660"/>
<rect x="121" y="198" width="42" height="87" fill="#673063"/>
<rect x="173" y="224" width="30" height="61" fill="#6e3660"/>
<rect x="210" y="210" width="35" height="75" fill="#5d2f45"/>
<rect x="252" y="232" width="15" height="53" fill="#8e487e"/>
</g>
<!-- Foreground buildings (lighter, patterned windows) -->
<g>
<rect x="0" y="245" width="34" height="55" fill="#b2a5e0"/>
<rect x="40" y="246" width="28" height="54" fill="#ffd69e" fill-opacity="0.94"/>
<rect x="72" y="249" width="27" height="51" fill="#ffefcc"/>
<rect x="106" y="240" width="44" height="60" fill="#485fad" fill-opacity="0.75"/>
<rect x="154" y="251" width="29" height="49" fill="#5c194a"/>
<rect x="187" y="260" width="25" height="40" fill="#ae2690"/>
<rect x="218" y="250" width="36" height="50" fill="#ffd69e"/>
<rect x="260" y="265" width="22" height="35" fill="#e782ff"/>
<!-- Windows: only for foreground buildings -->
<rect x="0" y="245" width="34" height="55" fill="url(#windows)"/>
<rect x="40" y="246" width="28" height="54" fill="url(#windows)"/>
<rect x="72" y="249" width="27" height="51" fill="url(#windows)"/>
<rect x="106" y="240" width="44" height="60" fill="url(#windows)"/>
<rect x="154" y="251" width="29" height="49" fill="url(#windows)"/>
<rect x="218" y="250" width="36" height="50" fill="url(#windows)"/>
<rect x="260" y="265" width="22" height="35" fill="url(#windows)"/>
</g>
</g>
<!-- Fish hot air balloon main body shadow -->
<ellipse cx="150" cy="120" rx="72" ry="38" fill="#000" opacity="0.10"/>
<!-- Fish hot air balloon main body -->
<ellipse cx="150" cy="110" rx="70" ry="36" fill="url(#fishBody)" stroke="#3986a6" stroke-width="3"/>
<!-- Fish scales overlay -->
<ellipse cx="150" cy="112" rx="66" ry="30" fill="url(#scalePattern)" opacity="0.4"/>
<!-- Fish tail fin -->
<g>
<path d="M219,106
C238,90 260,93 246,113
C259,120 238,135 219,124
C224,122 227,114 219,106
Z"
fill="url(#finGradient)" stroke="#fd5d68" stroke-width="2"/>
<path d="M217,113 Q230,104 237,111" fill="none" stroke="#fff1e9" stroke-width="2" opacity="0.37"/>
<path d="M240,116 Q228,118 228,128" fill="none" stroke="#fff1e9" stroke-width="2" opacity="0.37"/>
</g>
<!-- Fish top fin -->
<path d="M124,74 Q149,30 180,64 Q160,86 124,74 Z" fill="url(#finGradient)" opacity="0.80" stroke="#fd5d68" stroke-width="1.5"/>
<path d="M136,70 Q149,46 164,65" fill="none" stroke="#fff1e9" stroke-width="1" opacity="0.37"/>
<!-- Fish bottom fin -->
<path d="M168,144 Q185,170 160,138 Q139,158 134,144" fill="url(#finGradient)" opacity="0.8" stroke="#fd5d68" stroke-width="1.5"/>
<path d="M160,139 Q171,157 155,145" fill="none" stroke="#fff1e9" stroke-width="1" opacity="0.37"/>
<!-- Fish face: mouth and eye -->
<g>
<!-- Cheek blush -->
<ellipse cx="85" cy="113" rx="8" ry="4" fill="#ffeef0" opacity="0.7"/>
<!-- Eye -->
<ellipse cx="82" cy="105" rx="6" ry="6" fill="#fff"/>
<ellipse cx="84" cy="107" rx="2.2" ry="2.2" fill="#363565"/>
<ellipse cx="83" cy="104" rx="1" ry="1" fill="#fff" opacity="0.9"/>
<!-- Eyelash -->
<path d="M78,102 Q79,101 80,102" stroke="#f75ee5" stroke-width="1.2" fill="none"/>
<!-- Smile/mouth -->
<path d="M77,120 Q83,126 92,118" stroke="#ea4074" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Nostril -->
<ellipse cx="88" cy="110" rx="1.2" ry="0.7" fill="#00516d" opacity="0.20"/>
</g>
<!-- Lateral lines and gills (decorative) -->
<g opacity="0.40">
<path d="M99,100 Q110,120 150,117 Q180,115 198,106" stroke="#f75ee5" stroke-width="2" fill="none"/>
<path d="M107,116 Q133,132 166,120" stroke="#fffbbd" stroke-width="1" fill="none"/>
<path d="M119,122 Q147,141 175,122" stroke="#fd5d68" stroke-width="1" fill="none" opacity="0.59"/>
<ellipse cx="103" cy="115" rx="3" ry="1" fill="#fd5d68" />
</g>
<!-- Suspended basket with ropes under fish (hot air balloon basket) -->
<g>
<!-- Strings -->
<path d="M128,144 Q110,175 120,222" stroke="url(#stringGradient)" stroke-width="2.5" fill="none"/>
<path d="M172,145 Q192,176 180,223" stroke="url(#stringGradient)" stroke-width="2.5" fill="none"/>
<path d="M150,147 Q150,189 150,228" stroke="url(#stringGradient)" stroke-width="2.4" fill="none"/>
<!-- Basket shadow -->
<ellipse cx="150" cy="238" rx="24" ry="6" fill="#875c1c" opacity="0.32"/>
<!-- Basket -->
<rect x="127" y="220" width="46" height="24" rx="8" fill="#fdc984" stroke="#b07331" stroke-width="3"/>
<rect x="133" y="229" width="34" height="9" rx="2" fill="#ffe497" opacity="0.75"/>
<!-- Basket lines -->
<path d="M143,222 v22" stroke="#b07331" stroke-width="1"/>
<path d="M157,222 v22" stroke="#b07331" stroke-width="1"/>
<path d="M133,236 h34" stroke="#b07331" stroke-width="1"/>
<!-- Passengers as silhouettes -->
<ellipse cx="145" cy="234" rx="3" ry="4" fill="#99501f"/>
<ellipse cx="155" cy="236" rx="3" ry="4" fill="#eb753c"/>
<ellipse cx="162" cy="235" rx="2.2" ry="3" fill="#ffd7c4"/>
<!-- Decorative fire/spark at bottom -->
<ellipse cx="150" cy="245" rx="3.5" ry="6" fill="#ffb73e" opacity="0.95"/>
<ellipse cx="150" cy="248" rx="1" ry="2.5" fill="#fff7a8" opacity="0.75"/>
</g>
<!-- Atmosphere: a few clouds -->
<g>
<ellipse cx="50" cy="75" rx="16" ry="5.5" fill="#fff" opacity="0.29"/>
<ellipse cx="202" cy="43" rx="13" ry="4.5" fill="#fff" opacity="0.22"/>
<ellipse cx="280" cy="95" rx="19" ry="6" fill="#fff" opacity="0.2"/>
<ellipse cx="55" cy="130" rx="10" ry="3.2" fill="#fff" opacity="0.16"/>
<ellipse cx="133" cy="60" rx="14" ry="4.2" fill="#fff" opacity="0.18"/>
<ellipse cx="246" cy="126" rx="10" ry="3.2" fill="#fff" opacity="0.16"/>
</g>
<!-- Decorative sparkles and "stars" in the upper sky -->
<g>
<circle cx="19" cy="41" r="1.2" fill="#fff" opacity="0.43"/>
<circle cx="189" cy="13" r="0.6" fill="#fffcf8" opacity="0.41"/>
<circle cx="51" cy="19" r="0.9" fill="#ffefcc" opacity="0.47"/>
<circle cx="283" cy="39" r="1.4" fill="#fff8d6" opacity="0.53"/>
<circle cx="163" cy="25" r="0.7" fill="#fff" opacity="0.47"/>
<circle cx="122" cy="43" r="1.1" fill="#fff" opacity="0.32"/>
</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 technical quality and creativity with a more detailed and colorful fish design, as well as a vibrant cityscape below.
The inclusion of atmospheric elements like stars and clouds enhances the sunset setting, making the composition more dynamic.
Player 1's design is simpler and less visually engaging in comparison, though it adheres to the prompt effectively.
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
15
Player 2
73
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
26
Circles
The number of circle elements (circle) in the SVG.
Player 1
3
Player 2
7
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
2
Player 2
21
Lines
The number of line elements (line) in the SVG.
Player 1
3
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
5
Player 2
19
Groups
The number of group elements (g) in the SVG.
Player 1
2
Player 2
9
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
5
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
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
—
Player 2
33
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
3
Player 2
21
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
17
Player 2
43
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
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
52
Player 2
45
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
6
Player 2
7
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.
