GPT-4o
Challenge Creator
Creative Challenge
"A snail racing a rocket under a starry sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky gradient -->
<radialGradient id="skyGradient" cx="50%" cy="0%" r="120%">
<stop offset="0%" stop-color="#2a1a5a"/>
<stop offset="40%" stop-color="#1a1a3e"/>
<stop offset="100%" stop-color="#0a0a1a"/>
</radialGradient>
<!-- Snail shell gradient -->
<radialGradient id="shellGradient" cx="25%" cy="25%" r="75%">
<stop offset="0%" stop-color="#ffee88"/>
<stop offset="30%" stop-color="#ffaa33"/>
<stop offset="70%" stop-color="#cc6600"/>
<stop offset="100%" stop-color="#883300"/>
</radialGradient>
<!-- Rocket gradient -->
<linearGradient id="rocketGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff4466"/>
<stop offset="50%" stop-color="#cc1133"/>
<stop offset="100%" stop-color="#990022"/>
</linearGradient>
<!-- Flame gradient -->
<radialGradient id="flameGradient" cx="70%" cy="50%" r="80%">
<stop offset="0%" stop-color="#ffff99"/>
<stop offset="30%" stop-color="#ff8800"/>
<stop offset="70%" stop-color="#ff3300"/>
<stop offset="100%" stop-color="#aa0000"/>
</radialGradient>
<!-- Track gradient -->
<linearGradient id="trackGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#333333"/>
<stop offset="100%" stop-color="#111111"/>
</linearGradient>
<!-- Star glow -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="transparent"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Constellation of stars -->
<g opacity="0.9">
<circle cx="45" cy="25" r="2.5" fill="#ffffff">
<animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/>
</circle>
<circle cx="120" cy="15" r="2" fill="#ffff99"/>
<circle cx="200" cy="30" r="3" fill="#ffffff"/>
<circle cx="260" cy="40" r="1.5" fill="#ccccff">
<animate attributeName="opacity" values="0.3;0.9;0.3" dur="3s" repeatCount="indefinite"/>
</circle>
<circle cx="80" cy="55" r="2" fill="#ffffff"/>
<circle cx="170" cy="45" r="1.5" fill="#ffff99"/>
<circle cx="285" cy="20" r="2.5" fill="#ffffff"/>
<circle cx="30" cy="65" r="1" fill="#ccccff"/>
<circle cx="150" cy="10" r="1.5" fill="#ffffff"/>
<circle cx="220" cy="60" r="1" fill="#ffff99"/>
<circle cx="100" cy="35" r="1.5" fill="#ffffff"/>
<circle cx="180" cy="75" r="1" fill="#ccccff"/>
</g>
<!-- Sparkling star effects -->
<g opacity="0.7">
<path d="M 45 20 L 47 25 L 45 30 L 43 25 Z" fill="#ffffff">
<animateTransform attributeName="transform" type="rotate" values="0 45 25;360 45 25" dur="4s" repeatCount="indefinite"/>
</path>
<path d="M 40 25 L 50 25 M 45 20 L 45 30" stroke="#ffffff" stroke-width="0.5"/>
<path d="M 200 27 L 201 30 L 200 33 L 199 30 Z" fill="#ffff99"/>
<path d="M 285 17 L 287 20 L 285 23 L 283 20 Z" fill="#ffffff"/>
</g>
<!-- Racing track -->
<rect x="0" y="210" width="300" height="90" fill="url(#trackGradient)"/>
<rect x="0" y="210" width="300" height="4" fill="#ffffff" opacity="0.4"/>
<rect x="0" y="245" width="300" height="3" fill="#ffff00"/>
<rect x="0" y="280" width="300" height="2" fill="#ffffff" opacity="0.3"/>
<!-- Dashed center line -->
<g stroke="#ffffff" stroke-width="2" opacity="0.5" stroke-dasharray="8,6">
<line x1="0" y1="230" x2="300" y2="230"/>
</g>
<!-- TURBO SNAIL (winning!) -->
<!-- Speed aura around snail -->
<ellipse cx="235" cy="250" rx="45" ry="15" fill="#44ff44" opacity="0.2">
<animate attributeName="rx" values="45;50;45" dur="0.5s" repeatCount="indefinite"/>
</ellipse>
<!-- Snail body with motion streak -->
<ellipse cx="230" cy="252" rx="30" ry="12" fill="#66dd66" opacity="0.7"/>
<ellipse cx="235" cy="250" rx="28" ry="10" fill="#77ee77"/>
<!-- Snail head -->
<ellipse cx="265" cy="245" rx="16" ry="9" fill="#77ee77"/>
<!-- Determined snail expression -->
<ellipse cx="272" cy="243" rx="3" ry="2" fill="#222222"/>
<path d="M 266 248 Q 272 250 278 248" stroke="#444444" stroke-width="1.5" fill="none"/>
<!-- Snail tentacles with focused eyes -->
<line x1="278" y1="242" x2="288" y2="234" stroke="#77ee77" stroke-width="4" stroke-linecap="round"/>
<line x1="272" y1="240" x2="282" y2="232" stroke="#77ee77" stroke-width="4" stroke-linecap="round"/>
<circle cx="288" cy="234" r="4" fill="#ffffff"/>
<circle cx="282" cy="232" r="4" fill="#ffffff"/>
<circle cx="289" cy="234" r="2.5" fill="#000000"/>
<circle cx="283" cy="232" r="2.5" fill="#000000"/>
<!-- Eye gleam -->
<circle cx="290" cy="232" r="1" fill="#ffffff"/>
<circle cx="284" cy="230" r="1" fill="#ffffff"/>
<!-- Epic snail shell -->
<circle cx="220" cy="237" r="25" fill="url(#shellGradient)"/>
<!-- Detailed shell spiral -->
<path d="M 220 237 Q 200 220 220 205 Q 240 220 225 237 Q 205 250 220 237" fill="none" stroke="#995500" stroke-width="4"/>
<path d="M 220 237 Q 232 228 226 237 Q 212 244 220 237" fill="none" stroke="#995500" stroke-width="3"/>
<path d="M 220 237 Q 225 234 223 237" fill="none" stroke="#995500" stroke-width="2"/>
<circle cx="220" cy="237" r="5" fill="#ffcc66"/>
<!-- MEGA SPEED LINES for snail -->
<g opacity="0.8">
<line x1="130" y1="245" x2="180" y2="245" stroke="#66ff66" stroke-width="6"/>
<line x1="120" y1="250" x2="175" y2="250" stroke="#44dd44" stroke-width="5"/>
<line x1="140" y1="240" x2="185" y2="240" stroke="#88ff88" stroke-width="4"/>
<line x1="110" y1="255" x2="170" y2="255" stroke="#aaffaa" stroke-width="4"/>
<line x1="150" y1="235" x2="190" y2="235" stroke="#ccffcc" stroke-width="3"/>
</g>
<!-- Snail turbo dust -->
<ellipse cx="160" cy="260" rx="25" ry="10" fill="#666666" opacity="0.4"/>
<ellipse cx="145" cy="265" rx="18" ry="8" fill="#888888" opacity="0.3"/>
<ellipse cx="170" cy="268" rx="12" ry="6" fill="#aaaaaa" opacity="0.2"/>
<!-- Rocket (desperately trying to catch up) -->
<!-- Rocket body -->
<ellipse cx="160" cy="220" rx="38" ry="12" fill="url(#rocketGradient)"/>
<!-- Rocket nose cone -->
<path d="M 198 220 L 220 214 L 220 226 Z" fill="#cccccc"/>
<!-- Rocket fins -->
<path d="M 122 210 L 110 200 L 135 216 Z" fill="#555555"/>
<path d="M 122 230 L 110 240 L 135 224 Z" fill="#555555"/>
<!-- Rocket window -->
<ellipse cx="180" cy="220" rx="10" ry="8" fill="#66ccff" opacity="0.8"/>
<circle cx="175" cy="218" r="2" fill="#ffffff" opacity="0.9"/>
<!-- Rocket exhaust (maximum power!) -->
<ellipse cx="100" cy="220" rx="30" ry="10" fill="url(#flameGradient)"/>
<ellipse cx="80" cy="220" rx="20" ry="8" fill="#ffff99"/>
<ellipse cx="65" cy="220" rx="12" ry="6" fill="#ffffff"/>
<ellipse cx="50" cy="220" rx="6" ry="4" fill="#88ffff"/>
<!-- Rocket speed lines -->
<g opacity="0.7">
<line x1="20" y1="216" x2="70" y2="216" stroke="#ff6600" stroke-width="4"/>
<line x1="15" y1="224" x2="65" y2="224" stroke="#ff4400" stroke-width="3"/>
<line x1="30" y1="212" x2="75" y2="212" stroke="#ff8800" stroke-width="3"/>
<line x1="10" y1="228" x2="60" y2="228" stroke="#ffaa00" stroke-width="2"/>
</g>
<!-- Finish line (snail is winning!) -->
<rect x="275" y="200" width="12" height="80" fill="#ffffff"/>
<rect x="275" y="200" width="12" height="8" fill="#000000"/>
<rect x="275" y="216" width="12" height="8" fill="#000000"/>
<rect x="275" y="232" width="12" height="8" fill="#000000"/>
<rect x="275" y="248" width="12" height="8" fill="#000000"/>
<rect x="275" y="264" width="12" height="8" fill="#000000"/>
<!-- Victory sparkles around winning snail -->
<g opacity="0.9">
<path d="M 270 225 L 274 229 L 270 233 L 266 229 Z" fill="#ffff66">
<animateTransform attributeName="transform" type="rotate" values="0 270 229;360 270 229" dur="1s" repeatCount="indefinite"/>
</path>
<path d="M 270 220 L 270 238 M 262 229 L 278 229" stroke="#ffff66" stroke-width="1.5"/>
<path d="M 190 200 L 193 203 L 190 206 L 187 203 Z" fill="#66ff66"/>
<path d="M 250 270 L 252 272 L 250 274 L 248 272 Z" fill="#ffffff"/>
<path d="M 240 210 L 241 211 L 240 212 L 239 211 Z" fill="#ffff99"/>
<path d="M 290 260 L 292 262 L 290 264 L 288 262 Z" fill="#88ff88"/>
</g>
<!-- Motion blur trails -->
<g opacity="0.3">
<ellipse cx="220" cy="252" rx="35" ry="6" fill="#77ee77"/>
<ellipse cx="150" cy="222" rx="30" ry="5" fill="#ff4466"/>
</g>
<!-- Cheering crowd particles -->
<g opacity="0.6">
<circle cx="50" cy="190" r="1" fill="#ffff00"/>
<circle cx="100" cy="185" r="1.5" fill="#ff6600"/>
<circle cx="150" cy="180" r="1" fill="#66ff66"/>
<circle cx="200" cy="175" r="1" fill="#ffffff"/>
<circle cx="250" cy="170" r="1.5" fill="#ffff99"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#001d3d" />
<stop offset="100%" stop-color="#000000" />
</linearGradient>
<radialGradient id="snailBodyGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffde59" />
<stop offset="100%" stop-color="#ffad33" />
</radialGradient>
<linearGradient id="rocketBodyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff6f61" />
<stop offset="100%" stop-color="#d22d2d" />
</linearGradient>
<pattern id="shellPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="none" />
<path d="M0,0 L10,10 M10,0 L0,10" stroke="#cf7500" stroke-width="1"/>
</pattern>
</defs>
<!-- Background: Starry sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Create stars -->
<g fill="#fff">
<circle cx="40" cy="35" r="1.5" />
<circle cx="120" cy="50" r="1" />
<circle cx="200" cy="20" r="1.2" />
<circle cx="250" cy="60" r="1" />
<circle cx="70" cy="90" r="1.3" />
<circle cx="180" cy="80" r="1" />
<circle cx="260" cy="130" r="1.5" />
<circle cx="30" cy="150" r="1" />
<circle cx="100" cy="180" r="1.2" />
<circle cx="220" cy="200" r="1" />
<circle cx="150" cy="220" r="1.5" />
<circle cx="280" cy="250" r="1" />
<circle cx="60" cy="260" r="1.2" />
<circle cx="200" cy="280" r="1" />
<circle cx="40" cy="230" r="1.3" />
</g>
<!-- Snail -->
<g id="snail">
<!-- Snail body -->
<ellipse cx="70" cy="230" rx="20" ry="10" fill="#704214" />
<!-- Snail head -->
<circle cx="55" cy="225" r="6" fill="#704214" />
<!-- Snail eye -->
<circle cx="53" cy="222" r="1.5" fill="#fff" />
<!-- Snail shell -->
<circle cx="80" cy="220" r="15" fill="url(#snailBodyGradient)" />
<circle cx="80" cy="220" r="14" fill="url(#shellPattern)" />
<!-- Snail trail (artistic spiral) -->
<path d="M 70 230 C 90 210, 110 190, 130 170" stroke="#70543E" stroke-width="2" fill="none" stroke-dasharray="4,2"/>
</g>
<!-- Rocket -->
<g id="rocket" transform="translate(150, 160) rotate(-20)">
<!-- Rocket body -->
<path d="M0,0 L10,-40 L0,-80 L-10,-40 Z" fill="url(#rocketBodyGradient)" stroke="#8b0000" stroke-width="1"/>
<!-- Rocket window -->
<circle cx="0" cy="-40" r="3" fill="#cce6ff" stroke="#6699cc" stroke-width="0.5"/>
<!-- Rocket fins -->
<path d="M-10,-40 L-20,-30 L-10,-30 Z" fill="#d22d2d"/>
<path d="M10,-40 L20,-30 L10,-30 Z" fill="#d22d2d"/>
<!-- Rocket flame -->
<path d="M-4,0 C0,15, 0,15, 4,0 Z" fill="url(#rocketBodyGradient)" opacity="0.8"/>
</g>
<!-- Motion effect for the rocket (trail of stars) -->
<g id="rocketTrail" opacity="0.7">
<circle cx="145" cy="170" r="1.5" fill="#fff"/>
<circle cx="140" cy="175" r="1.2" fill="#fff"/>
<circle cx="135" cy="180" r="1" fill="#fff"/>
<circle cx="130" cy="185" r="0.8" fill="#fff"/>
</g>
<!-- A subtle ground line to set the race stage -->
<line x1="0" y1="240" x2="300" y2="240" stroke="#444" stroke-dasharray="5,5" stroke-width="1"/>
<!-- Artistic embellishments: additional sparkles in the sky -->
<g fill="#fff" opacity="0.5">
<polygon points="260,30 262,35 267,35 263,38 265,43 260,40 255,43 257,38 253,35 258,35"/>
<polygon points="100,120 102,125 107,125 103,128 105,133 100,130 95,133 97,128 93,125 98,125"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 Thinking (2025-05-14)
Player 1
Judge's Analysis
Player 1's submission demonstrates greater creativity and adherence to the prompt with the dynamic composition of the snail and rocket racing side by side on a track under a detailed starry sky.
The inclusion of the finish line and expressive use of colors adds to the narrative and visual appeal.
Player 2's image, while cleanly executed, is simpler and lacks the same level of storytelling and detail.
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
82
Player 2
36
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
11
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
26
Player 2
24
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
16
Player 2
1
Lines
The number of line elements (line) in the SVG.
Player 1
12
Player 2
1
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
2
Paths
The number of path elements (path) in the SVG.
Player 1
17
Player 2
6
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
5
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
—
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
17
Player 2
3
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
18
Player 2
5
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
44
Player 2
14
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
5
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 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
71
Player 2
22
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
6
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.