GPT-4o
Challenge Creator
Creative Challenge
"Two robots playing chess under a glowing neon streetlight at midnight."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Neon glow for streetlight -->
<radialGradient id="neonGlow" cx="50%" cy="10%" r="70%">
<stop offset="0%" stop-color="#fff9c4" stop-opacity="1"/>
<stop offset="60%" stop-color="#ffd600" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#00e676" stop-opacity="0"/>
</radialGradient>
<!-- Robot gradients -->
<linearGradient id="botA" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00d1ff"/>
<stop offset="100%" stop-color="#007ad9"/>
</linearGradient>
<linearGradient id="botB" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff26e2"/>
<stop offset="100%" stop-color="#8503a8"/>
</linearGradient>
<!-- Chessboard pattern -->
<pattern id="chessBoard" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="#2e2e2e"/>
<rect x="0" y="0" width="10" height="10" fill="#444"/>
<rect x="10" y="10" width="10" height="10" fill="#444"/>
</pattern>
<!-- Electric Circuit Path (background) -->
<linearGradient id="circuit" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0ff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#9f6fff" stop-opacity="0"/>
</linearGradient>
<!-- Ground shadow -->
<radialGradient id="tableShadow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#212121" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#111111" stop-opacity="0"/>
</radialGradient>
<!-- Neon chess piece highlight -->
<radialGradient id="pieceGlow" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#fff3"/>
<stop offset="80%" stop-color="#fff0"/>
</radialGradient>
</defs>
<!-- Night sky background -->
<rect x="0" y="0" width="300" height="300" fill="#0c1023"/>
<!-- Electric circuit pattern in background -->
<g opacity="0.16">
<path d="M40 40 H150 V70 H260" stroke="url(#circuit)" stroke-width="3" fill="none"/>
<path d="M70 150 V250 H100" stroke="url(#circuit)" stroke-width="2" fill="none"/>
<path d="M220 60 V130 H270" stroke="url(#circuit)" stroke-width="1.5" fill="none"/>
<path d="M220 240 H180 V190" stroke="url(#circuit)" stroke-width="2" fill="none"/>
</g>
<!-- Neon streetlight glow -->
<ellipse cx="150" cy="64" rx="78" ry="44" fill="url(#neonGlow)" />
<!-- Streetlight pole -->
<rect x="143" y="30" width="14" height="70" rx="7" fill="#141e27"/>
<!-- Lamp head -->
<ellipse cx="150" cy="30" rx="26" ry="10" fill="#323c3c" stroke="#00ffd4" stroke-width="2"/>
<ellipse cx="150" cy="30" rx="12" ry="5" fill="#faffba" opacity="0.7" />
<!-- Lamp glow core -->
<ellipse cx="150" cy="36" rx="18" ry="8" fill="#e0ff95" opacity="0.4"/>
<!-- Table Shadow -->
<ellipse cx="150" cy="215" rx="68" ry="18" fill="url(#tableShadow)" />
<!-- Chess Table -->
<rect x="82" y="170" width="136" height="30" rx="12" fill="#202830" stroke="#55fff5" stroke-width="2"/>
<!-- Chessboard -->
<rect x="108" y="158" width="84" height="28" rx="4" fill="url(#chessBoard)" stroke="#00f0ff" stroke-width="1"/>
<!-- Chess pieces (artistic, neon pawns, kings, etc.) -->
<!-- Blue side -->
<circle cx="118" cy="170" r="4.2" fill="#65fcff" stroke="#fff" stroke-width="1"/>
<ellipse cx="124" cy="182" rx="3.2" ry="5" fill="url(#botA)" filter="url(#glow)"/>
<circle cx="133" cy="165" r="2.3" fill="#84e9fb"/>
<ellipse cx="143" cy="178" rx="2.2" ry="3.5" fill="#00e6ff"/>
<!-- Purple side -->
<circle cx="166" cy="178" r="4.2" fill="#ef84ff" stroke="#fff" stroke-width="1"/>
<ellipse cx="175" cy="170" rx="3.2" ry="5" fill="url(#botB)" />
<circle cx="186" cy="181" r="2.5" fill="#d45bff"/>
<ellipse cx="193" cy="164" rx="2.2" ry="3.5" fill="#ff6ef8"/>
<!-- Chess king with glow -->
<g>
<ellipse cx="150" cy="172" rx="4.2" ry="7" fill="#fffde4" stroke="#44ffe8" stroke-width="1"/>
<ellipse cx="150" cy="172" rx="8" ry="12" fill="url(#pieceGlow)" />
<rect x="148" y="163" width="4" height="8" rx="2" fill="#ffeb3b"/>
<rect x="149.2" y="162" width="1.5" height="3.5" rx="1" fill="#fff"/>
</g>
<!-- Table legs -->
<rect x="88" y="197" width="10" height="31" rx="4" fill="#19394b"/>
<rect x="202" y="197" width="10" height="31" rx="4" fill="#19394b"/>
<!-- BOT LEFT (Blue, playful posture) -->
<!-- Arm reaching for piece -->
<g>
<rect x="98" y="140" width="8" height="34" rx="6" fill="url(#botA)" stroke="#65fcff" stroke-width="2" transform="rotate(16 102 157)"/>
<!-- Gripper -->
<ellipse cx="110" cy="169" rx="6" ry="3.2" fill="#b8f6ff" opacity="0.7" />
<ellipse cx="110" cy="171.5" rx="2" ry="2.5" fill="#aefcff" />
</g>
<!-- Legs -->
<g>
<rect x="90" y="198" width="7.8" height="34" rx="5" fill="url(#botA)" />
<rect x="120" y="198" width="7.8" height="34" rx="5" fill="#2499fb"/>
</g>
<!-- Chest -->
<rect x="96" y="155" width="36" height="30" rx="10" fill="url(#botA)" stroke="#65fcff" stroke-width="2"/>
<!-- Head -->
<ellipse cx="114" cy="147" rx="14" ry="12" fill="#c7f8ff" stroke="#00e6ff" stroke-width="2"/>
<ellipse cx="114" cy="145" rx="9" ry="5" fill="#5ee7ff" opacity="0.65"/>
<!-- Eyes -->
<ellipse cx="110" cy="147" rx="2.2" ry="2.8" fill="#fff" stroke="#00fff7" stroke-width="1"/>
<ellipse cx="118" cy="147" rx="2.2" ry="2.8" fill="#fff" stroke="#00fff7" stroke-width="1"/>
<ellipse cx="110" cy="147" rx="1" ry="1.2" fill="#13bfff"/>
<ellipse cx="118" cy="147" rx="1" ry="1.2" fill="#13bfff"/>
<!-- Cute mouth -->
<ellipse cx="114" cy="151" rx="2" ry="0.5" fill="#00e6ff"/>
<!-- Antenna -->
<rect x="113" y="133" width="2" height="8" rx="1" fill="#0ff"/>
<circle cx="114" cy="132" r="2.1" fill="#fff" stroke="#00e6ff" stroke-width="1"/>
<ellipse cx="114" cy="132" rx="4" ry="3" fill="#c4ffc6" opacity="0.34"/>
<!-- Other arm resting on table -->
<g>
<rect x="124" y="172" width="6" height="21" rx="4" fill="url(#botA)" stroke="#65fcff" stroke-width="1.5"/>
<ellipse cx="130" cy="190" rx="5" ry="2.5" fill="#b8f6ff" opacity="0.75"/>
</g>
<!-- BOT RIGHT (Pink/Purple, leaning in, strategic) -->
<!-- Arm reaching for piece -->
<g>
<rect x="202" y="146" width="8" height="34" rx="6" fill="url(#botB)" stroke="#ff90f5" stroke-width="2" transform="rotate(-12 206 163)"/>
<!-- Gripper -->
<ellipse cx="198" cy="171" rx="6" ry="3.2" fill="#ffbdfa" opacity="0.75"/>
<ellipse cx="198" cy="173.5" rx="2" ry="2.5" fill="#ffe8fd" />
</g>
<!-- Legs -->
<g>
<rect x="200" y="198" width="7.8" height="33" rx="5" fill="url(#botB)" />
<rect x="222" y="198" width="7.8" height="33" rx="5" fill="#a020f0"/>
</g>
<!-- Chest -->
<rect x="188" y="157" width="36" height="30" rx="10" fill="url(#botB)" stroke="#ff66fb" stroke-width="2"/>
<!-- Head -->
<ellipse cx="206" cy="149" rx="14" ry="12" fill="#fbd7ff" stroke="#e758fe" stroke-width="2"/>
<ellipse cx="206" cy="147" rx="9" ry="5" fill="#ff79fa" opacity="0.63"/>
<!-- Eyes -->
<ellipse cx="210" cy="150" rx="2.2" ry="2.8" fill="#fff" stroke="#fe53e6" stroke-width="1"/>
<ellipse cx="202" cy="150" rx="2.2" ry="2.8" fill="#fff" stroke="#ff53d2" stroke-width="1"/>
<ellipse cx="210" cy="150" rx="1" ry="1.2" fill="#da46f9"/>
<ellipse cx="202" cy="150" rx="1" ry="1.2" fill="#da46f9"/>
<!-- Mouth: a subtle strategic curve -->
<path d="M202 154 Q206 155 210 153" stroke="#e03ffa" stroke-width="1" fill="none"/>
<!-- Antenna -->
<rect x="205" y="135" width="2" height="8" rx="1" fill="#fd25ff"/>
<ellipse cx="206" cy="134" rx="2.1" ry="2.1" fill="#fff" stroke="#d053fc" stroke-width="1"/>
<ellipse cx="206" cy="134" rx="4" ry="2.5" fill="#fee6ff" opacity="0.3"/>
<!-- Other arm folded (contour only) -->
<g>
<rect x="193" y="181" width="7" height="19" rx="5" fill="url(#botB)" stroke="#ff99f9" stroke-width="1"/>
<ellipse cx="194" cy="199" rx="4" ry="2" fill="#ffcaf9" opacity="0.6"/>
</g>
<!-- Table light reflection -->
<ellipse cx="150" cy="188" rx="56" ry="7" fill="#faffba" opacity="0.11"/>
<!-- Moon and stars for midnight -->
<ellipse cx="46" cy="32" rx="19" ry="19" fill="#ddfaff" opacity="0.85"/>
<ellipse cx="51" cy="33" rx="13" ry="13" fill="#0c1023"/>
<!-- Scattered stars -->
<circle cx="260" cy="50" r="1.2" fill="#fffcc4" opacity="0.8"/>
<circle cx="22" cy="80" r="1.5" fill="#cbffff" opacity="0.6"/>
<circle cx="120" cy="24" r="0.8" fill="#fffbb5" opacity="0.8"/>
<circle cx="273" cy="23" r="1.1" fill="#fffdf7" opacity="0.55"/>
<circle cx="230" cy="60" r="0.7" fill="#cef9f7" opacity="0.6"/>
<circle cx="44" cy="60" r="1" fill="#e1fffd" opacity="0.7"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with dark midnight sky -->
<rect width="300" height="300" fill="url(#skyGrad)" />
<defs>
<!-- Gradient for the night sky -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0d0d2b"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
<!-- Glow effect for streetlight -->
<radialGradient id="neonGlow" cx="50%" cy="0%" r="150%" fx="50%" fy="0%">
<stop offset="0%" stop-color="#00ffff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#00ffff" stop-opacity="0"/>
</radialGradient>
<!-- Pattern for chessboard -->
<pattern id="chessPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="#333"/>
<rect x="0" y="0" width="5" height="5" fill="#999"/>
<rect x="5" y="5" width="5" height="5" fill="#999"/>
</pattern>
</defs>
<!-- Neon streetlight with glowing halo -->
<g id="streetlight" transform="translate(150,15)">
<ellipse cx="0" cy="0" rx="35" ry="10" fill="url(#neonGlow)"/>
<rect x="-3" y="0" width="6" height="70" fill="#ccc" />
<circle cx="0" cy="0" r="6" fill="#00ffff" stroke="#00ffff" stroke-width="1"/>
</g>
<!-- Ground for ambiance -->
<rect y="220" width="300" height="80" fill="url(#groundGrad)" />
<defs>
<linearGradient id="groundGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#101010"/>
<stop offset="100%" stop-color="#000000"/>
</linearGradient>
</defs>
<!-- Chess table as the board -->
<rect x="90" y="170" width="120" height="30" fill="#444" stroke="#222" stroke-width="2"/>
<rect x="92" y="172" width="116" height="26" fill="url(#chessPattern)"/>
<!-- Robot 1: left side -->
<g id="robot1" transform="translate(80,130)">
<!-- Body -->
<rect x="0" y="20" width="30" height="30" fill="#888" stroke="#555" stroke-width="1"/>
<!-- Head -->
<rect x="5" y="0" width="20" height="20" fill="#bbb" stroke="#888" stroke-width="1" rx="3" ry="3"/>
<!-- Eyes -->
<circle cx="10" cy="8" r="2" fill="#00ff00"/>
<circle cx="20" cy="8" r="2" fill="#00ff00"/>
<!-- Arms -->
<rect x="-8" y="25" width="8" height="5" fill="#888" stroke="#555" stroke-width="1"/>
<rect x="30" y="25" width="8" height="5" fill="#888" stroke="#555" stroke-width="1"/>
<!-- Legs -->
<rect x="8" y="50" width="5" height="10" fill="#666" />
<rect x="17" y="50" width="5" height="10" fill="#666" />
</g>
<!-- Robot 2: right side -->
<g id="robot2" transform="translate(190,130)">
<!-- Body with a slightly futuristic look -->
<rect x="0" y="20" width="30" height="30" fill="#6a6" stroke="#484" stroke-width="1"/>
<!-- Head -->
<rect x="5" y="0" width="20" height="20" fill="#8f8" stroke="#6a6" stroke-width="1" rx="4" ry="4"/>
<!-- Eyes with digital sparkle -->
<circle cx="12" cy="8" r="2" fill="#ffff00"/>
<circle cx="18" cy="8" r="2" fill="#ffff00"/>
<!-- Arms, one holding a chess piece -->
<rect x="-8" y="25" width="8" height="5" fill="#6a6" stroke="#484" stroke-width="1"/>
<rect x="30" y="25" width="8" height="5" fill="#6a6" stroke="#484" stroke-width="1"/>
<!-- Chess Piece in right hand as a small sphere -->
<circle cx="40" cy="27" r="3" fill="#fff" stroke="#ccc" stroke-width="0.5"/>
<!-- Legs -->
<rect x="8" y="50" width="5" height="10" fill="#578" />
<rect x="17" y="50" width="5" height="10" fill="#578" />
</g>
<!-- Floating digital effects around the chessboard -->
<g id="digital" opacity="0.8">
<circle cx="150" cy="180" r="1.5" fill="#0ff"/>
<circle cx="140" cy="175" r="1" fill="#0ff"/>
<circle cx="160" cy="183" r="1" fill="#0ff"/>
<circle cx="155" cy="190" r="1.2" fill="#0ff"/>
<circle cx="145" cy="185" r="1" fill="#0ff"/>
<circle cx="150" cy="170" r="1" fill="#0ff"/>
</g>
<!-- Visual shadow under robots -->
<ellipse cx="95" cy="85" rx="15" ry="5" fill="rgba(0,0,0,0.3)"/>
<ellipse cx="245" cy="85" rx="15" ry="5" fill="rgba(0,0,0,0.3)"/>
<!-- Additional neon lines to evoke a cyberpunk feel -->
<line x1="50" y1="230" x2="250" y2="230" stroke="#00ffff" stroke-width="0.8" stroke-dasharray="4,3" opacity="0.5"/>
<line x1="55" y1="240" x2="245" y2="240" stroke="#ff00ff" stroke-width="0.8" stroke-dasharray="4,3" opacity="0.5"/>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 1
Judge's Analysis
Player 1's submission is more visually appealing, with glowing neon colors and a well-lit streetlight that enhances the midnight atmosphere.
The robots are expressive and interact with a chessboard that fits the prompt creatively.
In contrast, Player 2's submission lacks detail and polish, with simpler robot designs and a less immersive depiction of the scene.
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
75
Player 2
37
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
23
Player 2
20
Circles
The number of circle elements (circle) in the SVG.
Player 1
11
Player 2
12
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
36
Player 2
3
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
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
—
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
4
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
3
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
—
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
19
Player 2
3
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
25
Player 2
13
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
65
Player 2
23
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
2
Player 2
3
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
15
Player 2
—
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
7
Player 2
4
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.
