GPT-4o
Challenge Creator
Creative Challenge
"A tiny snail racing a rocket on a curved rainbow road."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Rainbow gradient stripes pattern -->
<linearGradient id="rainbowGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#FF0000"/>
<stop offset="14%" stop-color="#FF7F00"/>
<stop offset="28%" stop-color="#FFFF00"/>
<stop offset="42%" stop-color="#00FF00"/>
<stop offset="57%" stop-color="#0000FF"/>
<stop offset="71%" stop-color="#4B0082"/>
<stop offset="85%" stop-color="#8B00FF"/>
<stop offset="100%" stop-color="#FF1493"/>
</linearGradient>
<!-- Pattern of colored stripes for the rainbow road -->
<pattern id="rainbowStripes" patternUnits="userSpaceOnUse" width="21" height="21" patternTransform="rotate(45)">
<rect width="3" height="21" fill="#FF0000"/>
<rect x="3" width="3" height="21" fill="#FF7F00"/>
<rect x="6" width="3" height="21" fill="#FFFF00"/>
<rect x="9" width="3" height="21" fill="#00FF00"/>
<rect x="12" width="3" height="21" fill="#0000FF"/>
<rect x="15" width="3" height="21" fill="#4B0082"/>
<rect x="18" width="3" height="21" fill="#8B00FF"/>
</pattern>
<!-- Glow for rocket flame -->
<radialGradient id="flameGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FF4500" stop-opacity="0.9"/>
<stop offset="70%" stop-color="#FF8C00" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#FFD700" stop-opacity="0"/>
</radialGradient>
<!-- Flame shape gradient -->
<radialGradient id="flameGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="50%" stop-color="#FF4500"/>
<stop offset="100%" stop-color="#8B0000"/>
</radialGradient>
<!-- Shell gradient -->
<radialGradient id="shellGradient" cx="40%" cy="40%" r="70%">
<stop offset="0%" stop-color="#9C27B0" />
<stop offset="100%" stop-color="#4A148C" />
</radialGradient>
<!-- Shell spiral pattern -->
<pattern id="shellSpiral" patternUnits="userSpaceOnUse" width="24" height="24" patternTransform="rotate(20)">
<circle cx="12" cy="12" r="12" fill="none" stroke="#B388FF" stroke-width="1.3"/>
<circle cx="12" cy="12" r="8" fill="none" stroke="#7B1FA2" stroke-width="1"/>
<circle cx="12" cy="12" r="4" fill="none" stroke="#9C27B0" stroke-width="1"/>
</pattern>
<!-- Shell highlight -->
<radialGradient id="shellHighlight" cx="30%" cy="30%" r="40%">
<stop offset="0%" stop-color="#E1BEE7" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#7B1FA2" stop-opacity="0"/>
</radialGradient>
<!-- Snail body gradient -->
<radialGradient id="snailBody" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#FFE0B2"/>
<stop offset="100%" stop-color="#FFCC80" />
</radialGradient>
<!-- Rocket body gradient -->
<linearGradient id="rocketBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ECEFF1"/>
<stop offset="70%" stop-color="#78909C"/>
<stop offset="100%" stop-color="#455A64"/>
</linearGradient>
<!-- Rocket window gradient -->
<radialGradient id="rocketWindowGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#A7FFEB" />
<stop offset="100%" stop-color="#00796B" />
</radialGradient>
<!-- Rocket fins gradient -->
<linearGradient id="rocketFinGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FF1744" />
<stop offset="100%" stop-color="#C51162" />
</linearGradient>
<!-- Star sparkle gradient -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.8"/>
<stop offset="100%" stop-color="yellow" stop-opacity="0"/>
</radialGradient>
<!-- Subtle shadow for snail -->
<filter id="snailShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-color="#000" flood-opacity="0.3"/>
</filter>
<!-- Subtle shadow for rocket -->
<filter id="rocketShadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="1" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.4"/>
</filter>
</defs>
<!-- Background gradient sky with subtle grain -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<defs>
<radialGradient id="skyGradient" cx="50%" cy="70%" r="90%">
<stop offset="0%" stop-color="#0d1a26"/>
<stop offset="100%" stop-color="#1a232f"/>
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Faint night stars -->
<g stroke="none" fill="white" fill-opacity="0.15">
<circle cx="15" cy="20" r="1.3"/>
<circle cx="55" cy="50" r="0.8"/>
<circle cx="110" cy="40" r="1"/>
<circle cx="80" cy="15" r="0.7"/>
<circle cx="270" cy="30" r="1"/>
<circle cx="230" cy="15" r="1"/>
<circle cx="240" cy="70" r="0.9"/>
<circle cx="290" cy="95" r="1.2"/>
</g>
<!-- Rainbow curved road -->
<g filter="url(#roadShadow)">
<path id="roadPath" d="M 10 270 C 80 170 210 140 260 50" stroke="url(#rainbowGradient)" stroke-width="14" fill="none" stroke-linecap="round" />
<path d="M 10 270 C 80 170 210 140 260 50" stroke="url(#rainbowStripes)" stroke-width="12" fill="none" stroke-linejoin="round" stroke-linecap="round" />
</g>
<filter id="roadShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="1.6" flood-color="#000" flood-opacity="0.25"/>
</filter>
<!-- Road Edge Highlights -->
<path d="M 10 270 C 80 170 210 140 260 50" stroke="white" stroke-width="2" fill="none" opacity="0.15" stroke-linecap="round" filter="url(#roadEdgeGlow)"/>
<filter id="roadEdgeGlow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="white" flood-opacity="0.12"/>
</filter>
<!-- Tiny Snail on the road -->
<g transform="translate(70 175)" filter="url(#snailShadow)" >
<!-- Snail body -->
<ellipse cx="0" cy="12" rx="8" ry="5" fill="url(#snailBody)"/>
<ellipse cx="0" cy="14" rx="12" ry="6" fill="url(#snailBody)" />
<!-- Head -->
<circle cx="10" cy="10" r="5" fill="url(#snailBody)" />
<!-- Tentacles -->
<line x1="13" y1="6" x2="16" y2="2" stroke="#A1887F" stroke-width="1.2" stroke-linecap="round" />
<line x1="11" y1="7" x2="15" y2="3" stroke="#A1887F" stroke-width="1" stroke-linecap="round" />
<circle cx="16" cy="2" r="1.1" fill="#4E342E" />
<circle cx="15" cy="3" r="1.1" fill="#4E342E" />
<!-- Shell base circle -->
<circle cx="-4" cy="8" r="12" fill="url(#shellGradient)" />
<!-- Spiral pattern for shell -->
<circle cx="-4" cy="8" r="12" fill="url(#shellSpiral)" opacity="0.85" />
<!-- Shell highlight -->
<circle cx="-9" cy="6" r="10" fill="url(#shellHighlight)" opacity="0.7" />
<!-- Shell shadow to create depth -->
<ellipse cx="-4" cy="13" rx="11" ry="5" fill="rgba(0,0,0,0.15)" />
</g>
<!-- Rocket racing on the rainbow curve -->
<g transform="translate(190 110) rotate(-35)" filter="url(#rocketShadow)">
<!-- Rocket Main Body -->
<ellipse cx="0" cy="0" rx="14" ry="33" fill="url(#rocketBody)" stroke="#263238" stroke-width="1" />
<!-- Body side highlight -->
<ellipse cx="-5" cy="-5" rx="10" ry="28" fill="white" opacity="0.15" />
<ellipse cx="2" cy="15" rx="12" ry="26" fill="white" opacity="0.07" />
<!-- Rocket Nose cone -->
<polygon points="0,-33 12,-12 -12,-12" fill="#cfd8dc" stroke="#263238" stroke-width="1" />
<polygon points="0,-31 10,-13 -10,-13" fill="#eceff1" opacity="0.9" />
<!-- Rocket window -->
<circle cx="2" cy="3" r="7" fill="url(#rocketWindowGradient)" stroke="#004D40" stroke-width="1" />
<circle cx="2" cy="3" r="5" fill="url(#rocketWindowGradient)" opacity="0.85"/>
<!-- Window highlight -->
<ellipse cx="5" cy="0" rx="3.5" ry="5" fill="white" opacity="0.3" />
<ellipse cx="0" cy="6" rx="2" ry="4" fill="white" opacity="0.2" />
<!-- Fins -->
<path d="M -9 11 L -16 28 L -1 25 Z" fill="url(#rocketFinGradient)" stroke="#880E4F" stroke-width="0.5"/>
<path d="M 9 11 L 16 28 L 1 25 Z" fill="url(#rocketFinGradient)" stroke="#880E4F" stroke-width="0.5"/>
<path d="M 0 32 L -7 50 L 7 50 Z" fill="url(#rocketFinGradient)" stroke="#880E4F" stroke-width="0.5"/>
<!-- Exhaust flame glow -->
<ellipse cx="0" cy="52" rx="14" ry="20" fill="url(#flameGlow)" />
<!-- Flame shape -->
<path d="M0 33
Q -8 50, 0 57
Q 8 50, 0 33 Z" fill="url(#flameGradient)" />
<!-- Sparkles near flame -->
<g fill="url(#starGlow)" opacity="0.65" filter="url(#flicker)">
<circle cx="-10" cy="52" r="3" />
<circle cx="10" cy="55" r="2.5" />
<circle cx="2" cy="47" r="4" />
</g>
</g>
<filter id="flicker" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence id="turbulence" baseFrequency="0.05" numOctaves="2" result="turb" />
<feDisplacementMap in="SourceGraphic" in2="turb" scale="2" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- Motion blur lines for rocket to emphasize speed -->
<g stroke="#FF4081" stroke-width="1.8" stroke-linecap="round" opacity="0.45">
<line x1="230" y1="115" x2="245" y2="140"/>
<line x1="220" y1="110" x2="235" y2="135"/>
<line x1="210" y1="100" x2="225" y2="130"/>
</g>
<!-- Motion swirl behind snail -->
<g transform="translate(70 175)" opacity="0.3" stroke="#7C4DFF" stroke-width="1" fill="none" filter="url(#snailShadow)">
<path d="M0 22 C-5 25 -10 20 -10 12 C-10 4 -5 0 0 5" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background Sky -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87ceeb"/>
<stop offset="100%" stop-color="#f0f8ff"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Rainbow Road (curved path) -->
<path id="rainbowRoad" d="M30,250 Q150,50 270,250" fill="none" stroke="url(#rainbowGradient)" stroke-width="15" stroke-linecap="round"/>
<defs>
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="20%" stop-color="#ff7f00"/>
<stop offset="40%" stop-color="#ffff00"/>
<stop offset="60%" stop-color="#00ff00"/>
<stop offset="80%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#8b00ff"/>
</linearGradient>
</defs>
<!-- Snail (bottom left, on the rainbow road) -->
<!-- Shell Patterned with concentric circles -->
<g id="snail" transform="translate(80,220)">
<!-- Shell -->
<circle cx="0" cy="0" r="20" fill="#8B4513" stroke="#654321" stroke-width="2"/>
<!-- Concentric spirals for shell pattern -->
<circle cx="0" cy="0" r="10" fill="none" stroke="#D2B48C" stroke-width="2"/>
<circle cx="0" cy="0" r="15" fill="none" stroke="#A0522D" stroke-width="2"/>
<!-- Body -->
<ellipse cx="0" cy="15" rx="8" ry="4" fill="#556B2F"/>
<!-- Tentacles -->
<line x1="3" y1="0" x2="8" y2="-2" stroke="#556B2F" stroke-width="1"/>
<line x1="-3" y1="0" x2="-8" y2="-2" stroke="#556B2F" stroke-width="1"/>
</g>
<!-- Rocket (top right, on the rainbow road) -->
<g id="rocket" transform="translate(220,80)">
<!-- Rocket Body -->
<rect x="-5" y="0" width="10" height="20" rx="2" ry="2" fill="#C0C0C0" stroke="#888" stroke-width="1"/>
<!-- Nose Cone -->
<polygon points="0,-10 5,0 -5,0" fill="#FF6347"/>
<!-- Fins -->
<polygon points="-5,20 0,16 -5,14" fill="#1E90FF"/>
<polygon points="5,20 0,16 5,14" fill="#1E90FF"/>
<!-- Flame (thrust) -->
<polygon points="0,20 2,25 -2,25" fill="orange" opacity="0.7"/>
</g>
<!-- Optional: Sun with rays to add vibrancy -->
<circle cx="50" cy="50" r="15" fill="#FFD700"/>
<g stroke="#FFA500" stroke-width="2">
<line x1="50" y1="5" x2="50" y2="20"/>
<line x1="50" y1="80" x2="50" y2="95"/>
<line x1="5" y1="50" x2="20" y2="50"/>
<line x1="80" y1="50" x2="95" y2="50"/>
<line x1="65" y1="15" x2="75" y2="25"/>
<line x1="65" y1="85" x2="75" y2="75"/>
<line x1="15" y1="65" x2="25" y2="75"/>
<line x1="85" y1="65" x2="75" y2="75"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 mini (2025-04-14)
Player 1
Judge's Analysis
Player 1's submission demonstrates greater creativity and adherence to the prompt by incorporating a dynamic, curved rainbow road with a sense of movement from both the snail and the rocket.
The dark background adds contrast and enhances visual appeal, suggesting a space setting.
Player 2's submission, while colorful, lacks the same level of dynamism and detail, with a simpler composition and minimal interaction between the elements.
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
55
Player 2
22
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
9
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
22
Player 2
4
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
9
Player 2
1
Lines
The number of line elements (line) in the SVG.
Player 1
5
Player 2
10
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
2
Player 2
4
Paths
The number of path elements (path) in the SVG.
Player 1
8
Player 2
1
Groups
The number of group elements (g) in the SVG.
Player 1
7
Player 2
3
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
11
Player 2
2
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
2
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
5
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
12
Player 2
1
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
17
Player 2
8
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
39
Player 2
19
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
3
Player 2
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
25
Player 2
2
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
15
Player 2
2
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.
