GPT-4o
Challenge Creator
Creative Challenge
"A whale-shaped hot air balloon floating over a city skyline at sunset."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Gradient Definitions -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a2a6c" />
<stop offset="40%" stop-color="#b21f1f" />
<stop offset="70%" stop-color="#fdbb2d" />
<stop offset="100%" stop-color="#ff7e5f" />
</linearGradient>
<linearGradient id="whaleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#2c3e50" />
<stop offset="50%" stop-color="#4ca1af" />
<stop offset="100%" stop-color="#2c3e50" />
</linearGradient>
<linearGradient id="basketGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#8B4513" />
<stop offset="100%" stop-color="#5D2906" />
</linearGradient>
<radialGradient id="sunGlow" cx="75%" cy="25%" r="50%">
<stop offset="0%" stop-color="#ff7e5f" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ff7e5f" stop-opacity="0" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<pattern id="buildingPattern" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="5" height="5" fill="#FFD700" opacity="0.5" />
</pattern>
</defs>
<!-- Sky Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<circle cx="225" cy="75" r="40" fill="#ff7e5f" filter="url(#glow)" />
<circle cx="225" cy="75" r="60" fill="url(#sunGlow)" />
<!-- City Skyline -->
<g id="cityscape">
<!-- Background Buildings -->
<rect x="0" y="200" width="300" height="100" fill="#1a1a2e" />
<rect x="10" y="170" width="20" height="30" fill="#16213e" />
<rect x="40" y="150" width="25" height="50" fill="#16213e" />
<rect x="75" y="180" width="30" height="20" fill="#16213e" />
<rect x="115" y="160" width="20" height="40" fill="#16213e" />
<rect x="145" y="140" width="35" height="60" fill="#16213e" />
<rect x="190" y="170" width="25" height="30" fill="#16213e" />
<rect x="225" y="155" width="15" height="45" fill="#16213e" />
<rect x="250" y="165" width="40" height="35" fill="#16213e" />
<!-- Building Windows -->
<g fill="#f9ca24" opacity="0.8">
<!-- Building 1 -->
<rect x="13" y="175" width="4" height="4" />
<rect x="23" y="175" width="4" height="4" />
<rect x="13" y="185" width="4" height="4" />
<rect x="23" y="185" width="4" height="4" />
<!-- Building 2 -->
<rect x="45" y="155" width="4" height="4" />
<rect x="55" y="155" width="4" height="4" />
<rect x="45" y="165" width="4" height="4" />
<rect x="55" y="165" width="4" height="4" />
<rect x="45" y="175" width="4" height="4" />
<rect x="55" y="175" width="4" height="4" />
<!-- More Windows -->
<rect x="80" y="185" width="4" height="4" />
<rect x="90" y="185" width="4" height="4" />
<rect x="120" y="165" width="4" height="4" />
<rect x="120" y="175" width="4" height="4" />
<rect x="120" y="185" width="4" height="4" />
<!-- Tallest Building -->
<rect x="150" y="145" width="5" height="5" />
<rect x="160" y="145" width="5" height="5" />
<rect x="170" y="145" width="5" height="5" />
<rect x="150" y="155" width="5" height="5" />
<rect x="160" y="155" width="5" height="5" />
<rect x="170" y="155" width="5" height="5" />
<rect x="150" y="165" width="5" height="5" />
<rect x="160" y="165" width="5" height="5" />
<rect x="170" y="165" width="5" height="5" />
<rect x="150" y="175" width="5" height="5" />
<rect x="160" y="175" width="5" height="5" />
<rect x="170" y="175" width="5" height="5" />
<!-- Remaining Buildings -->
<rect x="195" y="175" width="4" height="4" />
<rect x="205" y="175" width="4" height="4" />
<rect x="195" y="185" width="4" height="4" />
<rect x="205" y="185" width="4" height="4" />
<rect x="230" y="160" width="4" height="4" />
<rect x="230" y="170" width="4" height="4" />
<rect x="230" y="180" width="4" height="4" />
<rect x="255" y="170" width="4" height="4" />
<rect x="265" y="170" width="4" height="4" />
<rect x="275" y="170" width="4" height="4" />
<rect x="255" y="180" width="4" height="4" />
<rect x="265" y="180" width="4" height="4" />
<rect x="275" y="180" width="4" height="4" />
</g>
<!-- Foreground Buildings with Pattern -->
<rect x="20" y="190" width="40" height="10" fill="url(#buildingPattern)" />
<rect x="100" y="180" width="30" height="20" fill="url(#buildingPattern)" />
<rect x="210" y="185" width="45" height="15" fill="url(#buildingPattern)" />
</g>
<!-- Whale-shaped Hot Air Balloon -->
<g id="whaleballoon" transform="translate(150, 100) scale(0.8)">
<!-- Whale Body -->
<path d="M0,0 Q-40,-20 -80,10 Q-100,30 -90,60 Q-70,80 -40,75 Q-20,80 -10,60 L-10,80 Q10,90 20,80 L20,60 Q30,80 50,75 Q80,80 100,60 Q110,30 90,10 Q50,-20 0,0 Z" fill="url(#whaleGradient)" />
<!-- Whale Eye -->
<circle cx="-60" cy="30" r="5" fill="white" />
<circle cx="-60" cy="30" r="2" fill="black" />
<!-- Whale Fin -->
<path d="M50,30 Q70,10 80,30 Q70,40 50,30 Z" fill="#2c3e50" />
<!-- Whale Tail -->
<path d="M100,40 Q120,20 130,40 Q120,60 100,40 Z" fill="#2c3e50" />
<!-- Balloon Ropes -->
<line x1="-60" y1="75" x2="-50" y2="110" stroke="#8B4513" stroke-width="1" />
<line x1="-20" y1="75" x2="-40" y2="110" stroke="#8B4513" stroke-width="1" />
<line x1="20" y1="75" x2="40" y2="110" stroke="#8B4513" stroke-width="1" />
<line x1="60" y1="75" x2="50" y2="110" stroke="#8B4513" stroke-width="1" />
<!-- Basket -->
<rect x="-50" y="110" width="100" height="20" rx="5" ry="5" fill="url(#basketGradient)" />
<line x1="-45" y1="115" x2="-45" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="-30" y1="115" x2="-30" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="-15" y1="115" x2="-15" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="0" y1="115" x2="0" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="15" y1="115" x2="15" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="30" y1="115" x2="30" y2="125" stroke="#8B4513" stroke-width="2" />
<line x1="45" y1="115" x2="45" y2="125" stroke="#8B4513" stroke-width="2" />
<!-- Water Spout -->
<path d="M-10,10 C-5,-10 5,-10 10,10 C15,0 20,5 15,15 C10,25 -5,25 -10,15 C-15,5 -15,0 -10,10 Z" fill="#a8e6cf" opacity="0.7">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="
M-10,10 C-5,-10 5,-10 10,10 C15,0 20,5 15,15 C10,25 -5,25 -10,15 C-15,5 -15,0 -10,10 Z;
M-10,5 C-5,-15 5,-15 10,5 C15,-5 20,0 15,10 C10,20 -5,20 -10,10 C-15,0 -15,-5 -10,5 Z;
M-10,10 C-5,-10 5,-10 10,10 C15,0 20,5 15,15 C10,25 -5,25 -10,15 C-15,5 -15,0 -10,10 Z" />
</path>
</g>
<!-- Cloud Elements -->
<g fill="white" opacity="0.8">
<ellipse cx="50" cy="50" rx="25" ry="15" />
<ellipse cx="70" cy="45" rx="20" ry="10" />
<ellipse cx="30" cy="45" rx="15" ry="10" />
<ellipse cx="250" cy="60" rx="20" ry="10" />
<ellipse cx="230" cy="55" rx="15" ry="8" />
<ellipse cx="270" cy="55" rx="18" ry="9" />
</g>
<!-- Stars that appear as the sky darkens -->
<g fill="white">
<circle cx="30" cy="30" r="1" opacity="0.7" />
<circle cx="60" cy="20" r="1.5" opacity="0.5" />
<circle cx="90" cy="40" r="1" opacity="0.6" />
<circle cx="120" cy="25" r="1.2" opacity="0.7" />
<circle cx="200" cy="35" r="1" opacity="0.5" />
<circle cx="230" cy="15" r="1.3" opacity="0.6" />
<circle cx="260" cy="30" r="1" opacity="0.7" />
<circle cx="280" cy="10" r="1.5" opacity="0.5" />
</g>
<!-- Animation for the balloon -->
<animateTransform
href="#whaleballoon"
attributeName="transform"
type="translate"
from="150,100"
to="150,95"
dur="4s"
repeatCount="indefinite"
additive="sum"
values="150,100; 150,95; 150,100"
keyTimes="0; 0.5; 1" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sunsetSky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2c003e; stop-opacity:1" />
<stop offset="25%" style="stop-color:#5A006F; stop-opacity:1" />
<stop offset="50%" style="stop-color:#E84A5F; stop-opacity:1" />
<stop offset="75%" style="stop-color:#FF8C42; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFD369; stop-opacity:1" />
</linearGradient>
<radialGradient id="whaleBodyGradient" cx="50%" cy="30%" r="70%" fx="70%" fy="30%">
<stop offset="0%" style="stop-color:#A2D2FF;" />
<stop offset="40%" style="stop-color:#78C0E0;" />
<stop offset="100%" style="stop-color:#4A7C9B;" />
</radialGradient>
<linearGradient id="basketGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C68858;" />
<stop offset="100%" style="stop-color:#8B5A2B;" />
</linearGradient>
<radialGradient id="flameGradient" cx="50%" cy="80%" r="70%" fx="50%" fy="100%">
<stop offset="0%" style="stop-color:#FFFF00; stop-opacity:1" />
<stop offset="40%" style="stop-color:#FFA500; stop-opacity:0.9" />
<stop offset="100%" style="stop-color:#FF4500; stop-opacity:0.5" />
</radialGradient>
<linearGradient id="whaleHighlightGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="white" stop-opacity="0.25"/>
<stop offset="50%" stop-color="white" stop-opacity="0.1"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</linearGradient>
<filter id="sunBlurEffect">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
</defs>
<!-- Background Sky -->
<rect width="300" height="300" fill="url(#sunsetSky)" />
<!-- Subtle Stars -->
<g opacity="0.8">
<circle cx="50" cy="30" r="0.8" fill="white" opacity="0.7"/>
<circle cx="100" cy="50" r="1" fill="white" opacity="0.6"/>
<circle cx="200" cy="25" r="0.7" fill="white" opacity="0.8"/>
<circle cx="250" cy="60" r="0.9" fill="white" opacity="0.5"/>
<circle cx="150" cy="15" r="1.1" fill="white" opacity="0.7"/>
<circle cx="25" cy="70" r="0.6" fill="white" opacity="0.6"/>
<circle cx="275" cy="40" r="0.8" fill="white" opacity="0.5"/>
</g>
<!-- City Skyline -->
<g id="citySkylineGroup" transform="translate(0, 100)">
<!-- Setting Sun (blurred disc) -->
<circle cx="150" cy="148" r="30" fill="#FFE399" opacity="0.45" filter="url(#sunBlurEffect)"/>
<!-- Building Layer 1 (Darkest, Furthest) -->
<path d="M0 150 L0 130 Q10 125 20 130 L20 150 Z
M25 150 L25 120 L35 115 L45 120 L45 150 Z
M50 150 L50 135 Q60 132 70 135 L70 150 Z
M75 150 L75 110 L95 110 L95 150 Z
M100 150 L100 125 Q110 120 120 125 L120 150 Z
M125 150 L125 140 L145 140 L145 150 Z
M150 150 L150 115 L160 110 L170 115 L170 150 Z
M175 150 L175 130 L195 130 L195 150 Z
M200 150 L200 120 Q210 118 220 120 L220 150 Z
M225 150 L225 135 L245 135 L245 150 Z
M250 150 L250 105 L270 105 L270 150 Z
M275 150 L275 125 Q285 122 295 125 L300 125 L300 150 Z"
fill="#20002c" opacity="0.85"/>
<!-- Building Layer 2 (Slightly Lighter, Closer) -->
<path d="M10 150 L10 135 Q20 132 30 135 L30 150 Z
M35 150 L35 115 L45 110 L55 115 L55 150 Z
M60 150 L60 125 Q70 123 80 125 L80 150 Z
M90 150 L90 105 L110 105 L110 150 Z
M115 150 L115 130 L135 130 L135 150 Z
M140 150 L140 120 L150 115 L160 120 L160 150 Z
M170 150 L170 138 L190 138 L190 150 Z
M195 150 L195 110 L215 110 L215 150 Z
M220 150 L220 128 Q230 125 240 128 L240 150 Z
M255 150 L255 132 L275 132 L275 150 Z
M280 150 L280 118 L290 115 L300 118 L300 150 Z"
fill="#300542" opacity="0.9" transform="translate(5, 10)"/>
<!-- Tiny Windows -->
<g id="cityWindows" fill="#FFD369" opacity="0.65">
<rect x="38" y="120" width="2" height="3"/> <rect x="42" y="125" width="2" height="3"/>
<rect x="93" y="115" width="2" height="3"/> <rect x="93" y="125" width="2" height="3"/>
<rect x="153" y="120" width="2" height="3"/> <rect x="157" y="125" width="2" height="3"/>
<rect x="205" y="130" width="2" height="3"/> <rect x="205" y="135" width="2" height="3"/>
<rect x="255" y="110" width="2" height="3"/> <rect x="255" y="120" width="2" height="3"/>
<g transform="translate(5,10)">
<rect x="15" y="138" width="2" height="3"/> <rect x="28" y="140" width="2" height="3"/>
<rect x="65" y="130" width="2" height="3"/> <rect x="120" y="135" width="2" height="3"/>
<rect x="175" y="142" width="2" height="3"/> <rect x="228" y="133" width="2" height="3"/>
<rect x="285" y="122" width="2" height="3"/>
</g>
</g>
</g>
<!-- Whale Hot Air Balloon -->
<g id="whaleBalloonAssembly" transform="translate(150, 110) scale(0.9)">
<!-- Whale Body -->
<path id="whaleBodyPath"
d="M -90 5 C -100 -30 -70 -65 -40 -70 C 0 -75 50 -70 80 -40 C 100 -20 105 10 90 30 C 75 45 30 50 -20 45 C -60 40 -95 30 -90 5 Z"
fill="url(#whaleBodyGradient)" stroke="#2E4053" stroke-width="1.5"/>
<!-- Whale Highlight -->
<path id="whaleHighlightPath"
d="M -70 -50 C -30 -65, 40 -60, 70 -30 Q 75 0 60 15 C 20 25 -30 25 -60 5 Q -80 -20 -70 -50 Z"
fill="url(#whaleHighlightGradient)" />
<!-- Whale Tail Flukes -->
<path d="M -90 5 C -115 0 -125 -25 -105 -30 L -95 -20 C -85 -35 -85 0 -90 5 Z"
fill="url(#whaleBodyGradient)" stroke="#2E4053" stroke-width="1.5" transform="rotate(-5 -90 5)"/>
<path d="M -90 5 C -115 10 -125 35 -105 40 L -95 30 C -85 45 -85 10 -90 5 Z"
fill="url(#whaleBodyGradient)" stroke="#2E4053" stroke-width="1.5" transform="rotate(5 -90 5)"/>
<!-- Pectoral Fin -->
<path d="M 30 20 C 40 15, 55 30, 45 40 Q 35 35, 30 20 Z"
fill="url(#whaleBodyGradient)" stroke="#2E4053" stroke-width="1" transform="rotate(15 30 20)"/>
<!-- Eye -->
<g id="whaleEye">
<circle cx="70" cy="-25" r="4" fill="white"/>
<circle cx="71" cy="-26" r="2.5" fill="#1C2833"/>
<circle cx="70.5" cy="-26.5" r="0.8" fill="white" opacity="0.7"/> <!-- Eye highlight -->
</g>
<!-- Mouth Line (subtle smile) -->
<path d="M 80 -25 Q 70 -18 55 -15" stroke="#2E4053" stroke-width="0.8" fill="none" opacity="0.7"/>
<!-- Burner Area -->
<ellipse cx="0" cy="40" rx="20" ry="10" fill="#333" opacity="0.4"/> <!-- Opening -->
<ellipse cx="0" cy="35" rx="25" ry="18" fill="url(#flameGradient)" transform="scale(1, 0.75) translate(0,2)" opacity="0.9"/> <!-- Flame -->
<!-- Basket Assembly -->
<g id="basketGroup" transform="translate(0, 75)">
<!-- Ropes -->
<line x1="-15" y1="-35" x2="-10" y2="0" stroke="#6D4C41" stroke-width="1.2"/>
<line x1="15" y1="-35" x2="10" y2="0" stroke="#6D4C41" stroke-width="1.2"/>
<line x1="-6" y1="-36" x2="-3" y2="0" stroke="#6D4C41" stroke-width="1"/>
<line x1="6" y1="-36" x2="3" y2="0" stroke="#6D4C41" stroke-width="1"/>
<!-- Basket -->
<rect x="-12" y="0" width="24" height="18" rx="3" ry="3" fill="url(#basketGradient)" stroke="#5D4037" stroke-width="1.2"/>
<!-- Basket Texture Lines -->
<line x1="-12" y1="5" x2="12" y2="5" stroke="#8B5A2B" stroke-width="0.8" opacity="0.7"/>
<line x1="-12" y1="10" x2="12" y2="10" stroke="#8B5A2B" stroke-width="0.8" opacity="0.7"/>
<line x1="-12" y1="15" x2="12" y2="15" stroke="#8B5A2B" stroke-width="0.8" opacity="0.7"/>
</g>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 2
Judge's Analysis
Player 2's submission has a more polished execution and better integration of the whale into the hot air balloon concept, with a clear depiction of the flame and basket.
The city skyline and gradient sunset background are visually appealing and well-composed.
While Player 1's image is creative, its execution is less refined, and the whale design feels simpler and less integrated into the hot air balloon aesthetic.
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
88
Player 2
47
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
55
Player 2
19
Circles
The number of circle elements (circle) in the SVG.
Player 1
12
Player 2
11
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
6
Player 2
2
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
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
4
Player 2
8
Groups
The number of group elements (g) in the SVG.
Player 1
5
Player 2
7
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
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
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
12
Player 2
19
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
11
Player 2
13
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
15
Player 2
11
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
2
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
1
Player 2
9
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
27
Player 2
150
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
2
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
6
Player 2
6
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 #2718
May 09, 2025
"A giraffe roller-skating on a rainbow under a starry night sky."
P1
P2
Match #2630
May 09, 2025
"Octopus juggling pumpkins under a disco ball."
P1
P2
Match #2430
May 09, 2025
"A floating island with a single twisted tree and glowing mushrooms sparking in the twilight."
P1
P2
Match #2252
May 09, 2025
"A snail racing a cheetah on a rainbow road."
P1
P2
