GPT-4o
Challenge Creator
Creative Challenge
"An upside-down city skyline reflected in a lake shaped like a giant key."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="180" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#48b1f3"/>
<stop offset="70%" stop-color="#d2e7fa"/>
<stop offset="100%" stop-color="#fef5e6"/>
</linearGradient>
<!-- Keylake Water Gradient -->
<radialGradient id="lakeGrad" cx="120" cy="200" r="110" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#a8eafc"/>
<stop offset="60%" stop-color="#61c3ef"/>
<stop offset="100%" stop-color="#215886"/>
</radialGradient>
<!-- Reflection Overlay Gradient -->
<linearGradient id="reflectGrad" x1="0" y1="160" x2="0" y2="300" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ffffff77"/>
<stop offset="50%" stop-color="#a6edfa33"/>
<stop offset="100%" stop-color="#21588633"/>
</linearGradient>
<!-- Building Windows Pattern -->
<pattern id="windows" patternUnits="userSpaceOnUse" width="12" height="8">
<rect x="2" y="2" width="3" height="3" fill="#fff8a7"/>
<rect x="7" y="2" width="3" height="3" fill="#ffe568"/>
</pattern>
<!-- Water Ripple Effect -->
<filter id="ripple" x="-10%" y="-10%" width="120%" height="120%">
<feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="2" seed="3" result="turb1"/>
<feDisplacementMap in2="turb1" in="SourceGraphic" scale="7" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- Distant Sun -->
<radialGradient id="sunGrad" cx="150" cy="60" r="30" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fff6b9" stop-opacity="1"/>
<stop offset="70%" stop-color="#fcd77f" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#ffe68a" stop-opacity="0"/>
</radialGradient>
<!-- Key shine -->
<radialGradient id="keyShine" cx="230" cy="200" r="44" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FFFBB9" stop-opacity="0.55"/>
<stop offset="60%" stop-color="#FFFBB900" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="180" fill="url(#skyGrad)"/>
<!-- Sun glow -->
<circle cx="150" cy="65" r="30" fill="url(#sunGrad)" />
<!-- Upside-down City Skyline (upper half, y 65-155, upside down) -->
<g>
<!-- Tall building backdrops -->
<g>
<rect x="45" y="75" width="28" height="65" fill="#cee9fa"/>
<rect x="78" y="98" width="15" height="47" fill="#b3d2f2"/>
<rect x="98" y="85" width="16" height="64" fill="#4baddb"/>
<rect x="117" y="100" width="28" height="39" fill="#579ec6"/>
<rect x="149" y="83" width="33" height="55" fill="#357aad"/>
<rect x="186" y="96" width="15" height="42" fill="#cde7fa"/>
<rect x="205" y="72" width="25" height="60" fill="#60aad9"/>
<rect x="233" y="105" width="18" height="30" fill="#88c9f2"/>
</g>
<!-- Building Fronts With Windows -->
<g>
<rect x="51" y="85" width="22" height="55" fill="url(#windows)" opacity="0.9"/>
<rect x="105" y="94" width="10" height="45" fill="url(#windows)" opacity="0.88"/>
<rect x="156" y="91" width="14" height="44" fill="url(#windows)" opacity="0.88"/>
<rect x="209" y="82" width="15" height="45" fill="url(#windows)" opacity="0.95"/>
<rect x="86" y="108" width="6" height="32" fill="url(#windows)" opacity="0.78"/>
<rect x="242" y="110" width="6" height="18" fill="url(#windows)" opacity="0.7"/>
</g>
<!-- Pointy Roofs & Towers -->
<polygon points="59,75 62,61 66,75" fill="#7eaff2"/>
<rect x="222" y="72" width="2.5" height="14" fill="#cee9fa"/>
<polygon points="214,72 218,60 222,72" fill="#c3e2fa"/>
<rect x="157" y="83" width="2.5" height="8" fill="#4baddb"/>
<polygon points="164,83 165.5,80 167,83" fill="#ffffff99"/>
<polygon points="113,100 119,82 125,100" fill="#d7f7fa"/>
<!-- Rooftop Antennas -->
<rect x="134" y="83" width="1.5" height="7" fill="#9ee3e0"/>
<circle cx="134.75" cy="82.5" r="1" fill="#ffe56c"/>
<rect x="143" y="90" width="1.2" height="12" fill="#9ee3e0"/>
<circle cx="143.7" cy="89.7" r="0.7" fill="#ffe56c"/>
</g>
<!-- The Key-shaped lake (main shape, with color/gradient) -->
<g>
<!-- Outer Key Shape -->
<path id="keylake"
d="M119,172
q-29,18 -34,44
q-8,44 59,54
q41,4 76,-20
q24,-17 33,-47
q7,-24 -16,-42
q-18,-13 -39,-16
q-5.5,-0.7 -12,-0.6
q-3.5,0.1 -10,0.6
l-10,0
a34,34 0 1 0 -22,0
M174,226
l30,0
l0,11
l11,0
l0,17
l-41,0
l0,-17
l11,0
z"
fill="url(#lakeGrad)" stroke="#2972a3" stroke-width="2" filter="url(#ripple)"/>
<!-- Inner lake shine -->
<ellipse cx="210" cy="200" rx="45" ry="17" fill="url(#keyShine)" opacity="0.35"/>
<!-- Keyhole -->
<ellipse cx="119" cy="172" rx="13" ry="12" fill="#7ad2f7" opacity="0.68" filter="url(#ripple)"/>
<ellipse cx="119" cy="172" rx="8.5" ry="7" fill="#f6fbff" opacity="0.44"/>
</g>
<!-- City Reflection (downwards in key-lake shape, blurred, wavy, lighter) -->
<g opacity="0.57">
<g filter="url(#ripple)">
<g transform="scale(1,-1) translate(0,-325)">
<!-- Reflection buildings, simplified/light colors -->
<rect x="45" y="75" width="28" height="58" fill="#fffff8" opacity="0.23"/>
<rect x="78" y="98" width="15" height="38" fill="#fafdff" opacity="0.13"/>
<rect x="98" y="85" width="16" height="50" fill="#c5ebfa" opacity="0.15"/>
<rect x="149" y="83" width="33" height="44" fill="#d6f6ff" opacity="0.13"/>
<rect x="205" y="72" width="25" height="49" fill="#e2f8ff" opacity="0.16"/>
<rect x="233" y="105" width="18" height="23" fill="#deebff" opacity="0.12"/>
<!-- Reflection building windows, blurred -->
<rect x="51" y="85" width="22" height="38" fill="#fff9c1" opacity="0.08"/>
<rect x="156" y="91" width="14" height="33" fill="#fff3bc" opacity="0.07"/>
</g>
<!-- In-lake reflection fade overlay -->
<path d="M119,172 q-29,18 -34,44 q-8,44 59,54 q41,4 76,-20 q24,-17 33,-47 q7,-24 -16,-42 q-18,-13 -39,-16 q-5.5,-0.7 -12,-0.6 q-3.5,0.1 -10,0.6 l-10,0 a34,34 0 1 0 -22,0"
fill="url(#reflectGrad)"/>
</g>
</g>
<!-- Key Notches (shadows on lake) -->
<rect x="174" y="226" width="30" height="7" fill="#175b93" opacity="0.11"/>
<rect x="204" y="237" width="11" height="7" fill="#175b93" opacity="0.09"/>
<rect x="215" y="237" width="11" height="7" fill="#0d314c" opacity="0.09"/>
<rect x="174" y="254" width="41" height="7" fill="#1a3d63" opacity="0.07"/>
<!-- Key Outline for crispness -->
<path d="M119,172
q-29,18 -34,44
q-8,44 59,54
q41,4 76,-20
q24,-17 33,-47
q7,-24 -16,-42
q-18,-13 -39,-16
q-5.5,-0.7 -12,-0.6
q-3.5,0.1 -10,0.6
l-10,0
a34,34 0 1 0 -22,0
M174,226
l30,0
l0,11
l11,0
l0,17
l-41,0
l0,-17
l11,0
z"
fill="none" stroke="#0e273e" stroke-width="2.2" opacity="0.29"/>
<!-- Water Ripples on Lake Surface -->
<ellipse cx="167" cy="222" rx="67" ry="13" fill="none" stroke="#ffffffcc" stroke-width="2" opacity="0.19"/>
<ellipse cx="120" cy="220" rx="28" ry="7" fill="none" stroke="#f1fcfe" stroke-width="1" opacity="0.13"/>
<ellipse cx="210" cy="245" rx="35" ry="7.5" fill="none" stroke="#fff" stroke-width="1.2" opacity="0.08"/>
<!-- Decorative stylized sparkles and glimmers on water -->
<g opacity="0.08">
<ellipse cx="95" cy="212" rx="3" ry="1" fill="#fff"/>
<ellipse cx="188" cy="244" rx="2" ry="0.6" fill="#fff"/>
<ellipse cx="225" cy="215" rx="3.2" ry="1.2" fill="#fff"/>
<rect x="135" y="253" width="5" height="1.1" fill="#fff" rx="0.51"/>
<ellipse cx="161" cy="263" rx="4" ry="1" fill="#fff"/>
<ellipse cx="215" cy="260" rx="2.5" ry="0.5" fill="#fff"/>
</g>
<!-- Artistic clouds in sky -->
<g opacity="0.21">
<ellipse cx="55" cy="55" rx="16" ry="6" fill="#fff"/>
<ellipse cx="75" cy="68" rx="8" ry="3" fill="#fff"/>
<ellipse cx="134" cy="49" rx="21" ry="7" fill="#fff"/>
<ellipse cx="220" cy="62" rx="13" ry="4" fill="#fff"/>
<ellipse cx="196" cy="81" rx="16" ry="6" fill="#fff"/>
</g>
<!-- Foreground reeds/grass -->
<g>
<path d="M27,238 q2,-21 16,-36" stroke="#34748e" stroke-width="3" fill="none"/>
<path d="M40,251 q-2,-20 11,-32" stroke="#2e5f7c" stroke-width="2" fill="none"/>
<path d="M50,249 q4,-13 15,-20" stroke="#4388b4" stroke-width="1.6" fill="none"/>
<path d="M266,237 q-1,-21 -13,-32" stroke="#34748e" stroke-width="3" fill="none"/>
<path d="M252,252 q2,-22 -10,-34" stroke="#5ebef7" stroke-width="2" fill="none"/>
<path d="M240,250 q-3,-14 -12,-18" stroke="#74bcf7" stroke-width="1.5" fill="none"/>
<ellipse cx="40" cy="250" rx="2" ry="6" fill="#59cb93" opacity="0.39"/>
<ellipse cx="260" cy="251" rx="2.2" ry="5" fill="#55eacf" opacity="0.22"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FFDEE9"/>
<stop offset="100%" stop-color="#B5FFFC"/>
</linearGradient>
<!-- Water gradient -->
<linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#A0E9FF"/>
<stop offset="100%" stop-color="#005B96"/>
</linearGradient>
<!-- Sun gradient -->
<radialGradient id="sunGrad" cx="240" cy="60" r="50" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#FFF9C4"/>
<stop offset="100%" stop-color="#FFE57F"/>
</radialGradient>
<!-- Clip path for key-shaped lake -->
<clipPath id="keyClip">
<!-- Key head -->
<path d="M60,200 a20,20 0 1,0 0,40 a20,20 0 1,0 0,-40" />
<!-- Key shaft and teeth -->
<path d="M80,210 L200,210 L200,220 L180,220 L180,230 L170,230 L170,220 L160,220 L160,230 L150,230 L150,220 L80,220 Z" />
</clipPath>
<!-- Blur filter for reflection -->
<filter id="refBlur" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGrad)" />
<!-- Sun -->
<circle cx="240" cy="60" r="50" fill="url(#sunGrad)" />
<!-- City skyline above lake -->
<g id="skyline">
<rect x="40" y="160" width="20" height="40" fill="#333"/>
<rect x="70" y="150" width="30" height="50" fill="#444"/>
<rect x="110" y="170" width="25" height="30" fill="#222"/>
<rect x="145" y="155" width="35" height="45" fill="#555"/>
<rect x="190" y="165" width="30" height="35" fill="#333"/>
<rect x="230" y="160" width="20" height="40" fill="#444"/>
<!-- Windows -->
<g fill="#FFEB3B">
<rect x="72" y="160" width="5" height="8"/>
<rect x="82" y="175" width="5" height="8"/>
<rect x="115" y="180" width="4" height="7"/>
<rect x="150" y="165" width="6" height="8"/>
<rect x="155" y="185" width="6" height="7"/>
<rect x="195" y="170" width="5" height="8"/>
<rect x="235" y="175" width="4" height="7"/>
</g>
</g>
<!-- Key-shaped lake -->
<path clip-path="url(#keyClip)" d="
M60,200 a20,20 0 1,0 0,40 a20,20 0 1,0 0,-40
M80,210 L200,210 L200,220 L180,220 L180,230 L170,230 L170,220 L160,220 L160,230 L150,230 L150,220 L80,220 Z"
fill="url(#waterGrad)" stroke="#004F8B" stroke-width="2"/>
<!-- Reflection of skyline inside key-shaped lake -->
<g clip-path="url(#keyClip)" filter="url(#refBlur)" opacity="0.6"
transform="translate(0,440) scale(1,-1)">
<use href="#skyline" fill="#DDD" />
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
O4-mini low (2025-04-16)
Player 2
Judge's Analysis
Player 2's submission adheres more closely to the prompt by clearly incorporating a city skyline above a lake distinctly shaped like a key.
While Player 1 has an interesting design, the key shape is not as evident, making Player 2's work more aligned with the idea and visually cohesive.
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
68
Player 2
18
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
34
Player 2
14
Circles
The number of circle elements (circle) in the SVG.
Player 1
3
Player 2
1
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
18
Player 2
—
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
4
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
9
Player 2
3
Groups
The number of group elements (g) in the SVG.
Player 1
10
Player 2
3
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
3
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
1
Elements with Opacity
The number of elements with opacity attributes in the SVG.
Player 1
30
Player 2
1
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
11
Player 2
1
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
49
Player 2
13
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
1
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
63
Player 2
32
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
Player 2
5
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
1
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.
