GPT-4o
Challenge Creator
Creative Challenge
"A snail racing a rocket on a rainbow track."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF0000;stop-opacity:1" />
<stop offset="16.6%" style="stop-color:#FF7F00;stop-opacity:1" />
<stop offset="33.3%" style="stop-color:#FFFF00;stop-opacity:1" />
<stop offset="50%" style="stop-color:#00FF00;stop-opacity:1" />
<stop offset="66.6%" style="stop-color:#0000FF;stop-opacity:1" />
<stop offset="83.3%" style="stop-color:#4B0082;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B00FF;stop-opacity:1" />
</linearGradient>
<radialGradient id="snailShell" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />
</radialGradient>
<linearGradient id="rocketBody" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#CCCCCC;stop-opacity:1" />
<stop offset="100%" style="stop-color:#666666;stop-opacity:1" />
</linearGradient>
<radialGradient id="rocketFlame" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#FF4500;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFD700;stop-opacity:0" />
</radialGradient>
</defs>
<!-- Rainbow Track -->
<path d="M50,250 C75,200 225,200 250,250" stroke="url(#rainbow)" stroke-width="20" fill="none" stroke-linecap="round" />
<!-- Snail -->
<g transform="translate(70, 230)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="15" ry="8" fill="#8B4513" />
<!-- Shell -->
<circle cx="20" cy="0" r="10" fill="url(#snailShell)" />
<!-- Eyes -->
<circle cx="-5" cy="-4" r="2" fill="#000" />
<circle cx="-5" cy="4" r="2" fill="#000" />
<!-- Antennae -->
<line x1="-5" y1="-4" x2="-10" y2="-10" stroke="#000" stroke-width="1" />
<line x1="-5" y1="4" x2="-10" y2="10" stroke="#000" stroke-width="1" />
</g>
<!-- Rocket -->
<g transform="translate(220, 210)">
<!-- Body -->
<polygon points="0,-20 5,-10 5,10 -5,10 -5,-10" fill="url(#rocketBody)" />
<!-- Nose Cone -->
<polygon points="0,-30 -7,-20 7,-20" fill="#FF0000" />
<!-- Fins -->
<polygon points="-5,10 -15,15 -5,15" fill="#00CED1" />
<polygon points="5,10 15,15 5,15" fill="#00CED1" />
<!-- Window -->
<circle cx="0" y="-5" r="3" fill="#1E90FF" />
<!-- Flame -->
<path d="M0,15 C-3,20 0,25 3,20 Z" fill="url(#rocketFlame)" />
</g>
<!-- Finish Line -->
<line x1="50" y1="250" x2="250" y2="250" stroke="#FFFFFF" stroke-width="2" />
<text x="150" y="245" font-family="Arial" font-size="10" fill="#FFFFFF" text-anchor="middle">Finish Line</text>
<!-- Background Elements -->
<circle cx="150" cy="50" r="30" fill="url(#rainbow)" opacity="0.3" />
<ellipse cx="80" cy="80" rx="40" ry="20" fill="#ADD8E6" opacity="0.2" />
<ellipse cx="220" cy="100" rx="30" ry="15" fill="#FFD700" opacity="0.2" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients -->
<defs>
<!-- Rainbow Track gradient -->
<linearGradient id="rainbow" x1="0" y1="200" x2="300" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ff2a2a"/>
<stop offset="16%" stop-color="#ff7b2a"/>
<stop offset="33%" stop-color="#ffee2a"/>
<stop offset="50%" stop-color="#36e24e"/>
<stop offset="66%" stop-color="#2a9cff"/>
<stop offset="83%" stop-color="#7f2aff"/>
<stop offset="100%" stop-color="#ea2aff"/>
</linearGradient>
<!-- Snail body gradient -->
<radialGradient id="snailBodyGrad" cx="60%" cy="50%" r="70%" fx="70%" fy="60%">
<stop offset="0%" stop-color="#e6fa97"/>
<stop offset="65%" stop-color="#a3c56e"/>
<stop offset="100%" stop-color="#6b8e23"/>
</radialGradient>
<!-- Snail shell gradient -->
<radialGradient id="snailShellGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#faa948"/>
<stop offset="90%" stop-color="#b97318"/>
</radialGradient>
<!-- Rocket body gradient -->
<linearGradient id="rocketBodyGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e9e9fa"/>
<stop offset="100%" stop-color="#4745ac"/>
</linearGradient>
<!-- Rocket flame gradient -->
<radialGradient id="flameGrad" cx="50%" cy="40%" r="100%">
<stop offset="0%" stop-color="#fff89e"/>
<stop offset="33%" stop-color="#ffaa1c"/>
<stop offset="60%" stop-color="#fc5a13"/>
<stop offset="100%" stop-color="#ce1b01"/>
</radialGradient>
<!-- Shadow gradient -->
<radialGradient id="shadowGrad" cx="60%" cy="70%" r="70%">
<stop offset="0%" stop-color="#00000055"/>
<stop offset="100%" stop-color="transparent"/>
</radialGradient>
</defs>
<!-- Rainbow Track -->
<path d="M 30 250 Q 80 170 120 210 Q 160 250 200 210 Q 240 170 270 60"
fill="none" stroke="url(#rainbow)" stroke-width="28" stroke-linecap="round"/>
<path d="M 30 250 Q 80 170 120 210 Q 160 250 200 210 Q 240 170 270 60"
fill="none" stroke="#ebebeb55" stroke-width="6" stroke-linecap="round" stroke-dasharray="10,8"/>
<!-- Track highlights -->
<ellipse cx="100" cy="200" rx="9" ry="3" fill="#ffffff70"/>
<ellipse cx="175" cy="220" rx="12" ry="4" fill="#fff9" />
<!-- Snail's shadow -->
<ellipse cx="74" cy="195" rx="23" ry="8" fill="url(#shadowGrad)" opacity="0.8"/>
<!-- Snail body -->
<ellipse cx="76" cy="186" rx="30" ry="14" fill="url(#snailBodyGrad)" stroke="#545b32" stroke-width="1"/>
<!-- Snail underbelly -->
<ellipse cx="85" cy="192" rx="17" ry="7" fill="#bcd88b" opacity="0.6"/>
<!-- Snail head -->
<ellipse cx="64" cy="175" rx="12" ry="10" fill="url(#snailBodyGrad)" stroke="#545b32" stroke-width="0.8"/>
<!-- Snail smile -->
<path d="M68 179 Q 64 183 61 177" fill="none" stroke="#605622" stroke-width="1" stroke-linecap="round"/>
<!-- Snail eye stalks -->
<line x1="69" y1="170" x2="73" y2="162" stroke="#627036" stroke-width="2" stroke-linecap="round"/>
<line x1="62" y1="168" x2="57" y2="160" stroke="#627036" stroke-width="2" stroke-linecap="round"/>
<!-- Snail eyes -->
<ellipse cx="73.5" cy="160.5" rx="2" ry="2.2" fill="#fff"/>
<ellipse cx="57" cy="160.5" rx="2" ry="2.2" fill="#fff"/>
<ellipse cx="73.5" cy="160.5" rx="0.8" ry="0.9" fill="#111"/>
<ellipse cx="57" cy="160.5" rx="0.8" ry="0.9" fill="#111"/>
<!-- Snail shell -->
<ellipse cx="100" cy="184" rx="19" ry="18" fill="url(#snailShellGrad)" stroke="#a35812" stroke-width="2"/>
<path d="M90 185 Q 96 193 105 185 Q 116 173 97 176 Q 84.5 174 93 182 Q 90 185 105 190"
fill="none" stroke="#fffefd88" stroke-width="1.7"/>
<!-- Shell spiral -->
<path d="M107 183 Q 100 188 97 181 Q 99 177 103 181 Q 105 184 103 183"
fill="none" stroke="#c88120" stroke-width="2" stroke-linecap="round"/>
<!-- Rocket shadow -->
<ellipse cx="205" cy="194" rx="22" ry="7" fill="url(#shadowGrad)" opacity="0.7"/>
<!-- Rocket body -->
<rect x="208" y="150" width="36" height="60" rx="18" fill="url(#rocketBodyGrad)" stroke="#343174" stroke-width="2"/>
<!-- Rocket nose cone -->
<polygon points="226,145 218,162 234,162" fill="#e1644a" stroke="#b32b06" stroke-width="2"/>
<!-- Rocket window -->
<ellipse cx="226" cy="168" rx="6" ry="7" fill="#a2eaf9" stroke="#5dd2ea" stroke-width="1"/>
<!-- Window reflect -->
<ellipse cx="224" cy="167" rx="2" ry="1.2" fill="#fff" opacity="0.7"/>
<!-- Rocket wings -->
<polygon points="208,187 194,205 208,205" fill="#f4793d" stroke="#c44e08" stroke-width="1.2"/>
<polygon points="244,187 258,205 244,205" fill="#f4793d" stroke="#c44e08" stroke-width="1.2"/>
<!-- Rocket base -->
<ellipse cx="226" cy="210" rx="13" ry="5" fill="#736be7" opacity="0.85"/>
<!-- Flames -->
<ellipse cx="226" cy="217" rx="11" ry="7" fill="url(#flameGrad)" opacity="0.8">
<animate attributeName="rx" values="10;12;10" dur="0.6s" repeatCount="indefinite"/>
<animate attributeName="ry" values="8;6;8" dur="0.6s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;1;0.8" dur="0.6s" repeatCount="indefinite"/>
</ellipse>
<ellipse cx="226" cy="221" rx="6" ry="3" fill="#feffb2" opacity="0.5">
<animate attributeName="rx" values="8;5;8" dur="0.5s" repeatCount="indefinite"/>
<animate attributeName="ry" values="3;5;3" dur="0.5s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.3;0.7;0.3" dur="0.5s" repeatCount="indefinite"/>
</ellipse>
<!-- Rocket motion streaks -->
<path d="M246 235 C 238 219 230 235 222 219" fill="none" stroke="#ffe576" stroke-width="2" opacity="0.4"/>
<path d="M234 238 Q 226 225 217 236" fill="none" stroke="#fff" stroke-width="1.2" opacity="0.25"/>
<!-- Motion effect behind rocket -->
<ellipse cx="235" cy="229" rx="20" ry="3.5" fill="#fcd703" opacity="0.22"/>
<!-- Comic-style racing lines for snail -->
<path d="M51 185 Q 36 185 34 170" stroke="#a2ff63" stroke-width="3.5" fill="none" opacity="0.3"/>
<path d="M49 188 Q 33 191 30 182" stroke="#7ed245" stroke-width="2.3" fill="none" opacity="0.24"/>
<path d="M49 193 Q 37 201 27 195" stroke="#82cf62" stroke-width="2" fill="none" opacity="0.28"/>
<!-- Dramatic sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)"/>
<defs>
<radialGradient id="skyGrad" cx="70%" cy="25%" r="100%">
<stop offset="0%" stop-color="#fff8fb"/>
<stop offset="56%" stop-color="#cfd8fa"/>
<stop offset="100%" stop-color="#8ae1ff" />
</radialGradient>
</defs>
<!-- Distant clouds -->
<ellipse cx="70" cy="62" rx="12" ry="5" fill="#fff" opacity="0.5"/>
<ellipse cx="90" cy="72" rx="18" ry="7" fill="#fff" opacity="0.4"/>
<ellipse cx="155" cy="42" rx="20" ry="6" fill="#fff" opacity="0.38"/>
<ellipse cx="210" cy="78" rx="25" ry="8" fill="#fff" opacity="0.45"/>
<ellipse cx="250" cy="110" rx="12" ry="6" fill="#fff" opacity="0.52"/>
<!-- Start flag for fun racing vibe -->
<rect x="35" y="240" width="10" height="25" rx="2" fill="#ffee91" stroke="#c79f30" stroke-width="1"/>
<rect x="40" y="243" width="18" height="12" rx="2"
fill="#fff"/>
<g>
<rect x="40" y="243" width="3" height="3" fill="#222"/>
<rect x="46" y="246" width="3" height="3" fill="#222"/>
<rect x="52" y="243" width="3" height="3" fill="#222"/>
<rect x="58" y="246" width="3" height="3" fill="#222"/>
<rect x="46" y="243" width="3" height="3" fill="#fff"/>
<rect x="52" y="246" width="3" height="3" fill="#fff"/>
<rect x="58" y="243" width="3" height="3" fill="#fff"/>
<rect x="40" y="246" width="3" height="3" fill="#fff"/>
</g>
<!-- Finish line in distance -->
<rect x="265" y="52" width="9" height="20" rx="2" fill="#ffee91" stroke="#c79f30" stroke-width="0.7"/>
<rect x="268" y="55" width="13" height="11" rx="2" fill="#fff"/>
<g>
<rect x="268" y="55" width="3" height="3" fill="#222"/>
<rect x="274" y="58" width="3" height="3" fill="#222"/>
<rect x="271" y="55" width="3" height="3" fill="#fff"/>
<rect x="268" y="58" width="3" height="3" fill="#fff"/>
<rect x="274" y="55" width="3" height="3" fill="#fff"/>
<rect x="271" y="58" width="3" height="3" fill="#222"/>
</g>
<!-- Title - whimsy handwritten style -->
<text x="150" y="40" text-anchor="middle"
font-family="'Comic Sans MS', Comic, cursive"
font-size="18"
font-weight="bold"
letter-spacing="1"
fill="#8732d2"
stroke="#fff"
stroke-width="1"
opacity="0.85"
>
Snail vs Rocket: Rainbow Race!
</text>
<!-- Speed lines on track (behind rocket) -->
<rect x="245" y="160" width="14" height="2.5" rx="1" fill="#fff" opacity="0.45" />
<rect x="250" y="168" width="18" height="2.2" rx="1" fill="#ffd81e" opacity="0.25" />
<rect x="247" y="175" width="13" height="2" rx="1" fill="#34a5ff" opacity="0.15" />
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
O1-mini (2024-09-12)
Player 1
Judge's Analysis
Player 1's image adheres more closely to the prompt by clearly depicting a snail and a rocket racing on a rainbow track with a finish line, making it easy to interpret the theme.
While Player 2's image is visually appealing with a soft color gradient, it lacks a clear representation of the race or a rainbow track, making it less effective in conveying the prompt's idea.
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
17
Player 2
61
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
—
Player 2
23
Circles
The number of circle elements (circle) in the SVG.
Player 1
5
Player 2
—
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
3
Player 2
23
Lines
The number of line elements (line) in the SVG.
Player 1
3
Player 2
2
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
4
Player 2
3
Paths
The number of path elements (path) in the SVG.
Player 1
2
Player 2
10
Groups
The number of group elements (g) in the SVG.
Player 1
2
Player 2
2
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
7
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
—
Player 2
—
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
3
Player 2
22
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
4
Player 2
23
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
8
Player 2
50
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
6
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
2
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
5
Player 2
29
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
4
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
1
Player 2
1
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.
