GPT-4o
Challenge Creator
Creative Challenge
"A snail racing a rocket on a rainbow road under a disco ball."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Rainbow road gradient -->
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="16.6%" stop-color="#ff9900" />
<stop offset="33.3%" stop-color="#ffff00" />
<stop offset="50%" stop-color="#00ff00" />
<stop offset="66.6%" stop-color="#0099ff" />
<stop offset="83.3%" stop-color="#6633ff" />
<stop offset="100%" stop-color="#ff00ff" />
</linearGradient>
<!-- Road shine effect -->
<linearGradient id="roadShine" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="white" stop-opacity="0.3" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</linearGradient>
<!-- Disco ball pattern -->
<pattern id="discoPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="#a0a0a0" />
<rect x="0" y="0" width="5" height="5" fill="#e0e0e0" />
<rect x="5" y="5" width="5" height="5" fill="#e0e0e0" />
</pattern>
<!-- Snail shell gradient -->
<linearGradient id="shellGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8B4513" />
<stop offset="25%" stop-color="#CD853F" />
<stop offset="50%" stop-color="#DEB887" />
<stop offset="75%" stop-color="#CD853F" />
<stop offset="100%" stop-color="#8B4513" />
</linearGradient>
<!-- Slime gradient -->
<linearGradient id="slimeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#adff2f" />
<stop offset="100%" stop-color="#32cd32" />
</linearGradient>
<!-- Disco ball gradient -->
<radialGradient id="discoBallGradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="70%" stop-color="#cccccc" />
<stop offset="100%" stop-color="#999999" />
</radialGradient>
<!-- Rocket metallic gradient -->
<linearGradient id="rocketGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f2f2f2" />
<stop offset="50%" stop-color="#cccccc" />
<stop offset="100%" stop-color="#999999" />
</linearGradient>
<!-- Star pattern -->
<pattern id="starPattern" patternUnits="userSpaceOnUse" width="100" height="100">
<circle cx="10" cy="10" r="1" fill="white" />
<circle cx="30" cy="40" r="1.5" fill="white" />
<circle cx="70" cy="20" r="1" fill="white" />
<circle cx="90" cy="50" r="2" fill="white" />
<circle cx="50" cy="80" r="1.5" fill="white" />
<circle cx="20" cy="70" r="1" fill="white" />
<circle cx="80" cy="95" r="1.5" fill="white" />
</pattern>
<!-- Light beam effect -->
<filter id="discoLight" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
<!-- Glow effect -->
<filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur" />
<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 10 -3" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
</defs>
<!-- Space background -->
<rect x="0" y="0" width="300" height="300" fill="#000033" />
<rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" />
<!-- Disco ball light beams -->
<polygon points="150,60 100,190 130,220" fill="#ff3366" opacity="0.15" filter="url(#discoLight)" />
<polygon points="150,60 170,190 200,220" fill="#33ccff" opacity="0.15" filter="url(#discoLight)" />
<polygon points="150,60 50,170 80,210" fill="#66ff33" opacity="0.15" filter="url(#discoLight)" />
<polygon points="150,60 240,170 260,210" fill="#ffcc00" opacity="0.15" filter="url(#discoLight)" />
<!-- Rainbow road -->
<path d="M-20,220 C50,180 100,240 150,200 S250,190 320,230" stroke="url(#rainbowGradient)" stroke-width="30" fill="none" stroke-linecap="round" />
<path d="M-20,220 C50,180 100,240 150,200 S250,190 320,230" stroke="url(#roadShine)" stroke-width="20" fill="none" stroke-linecap="round" opacity="0.5" />
<path d="M-20,220 C50,180 100,240 150,200 S250,190 320,230" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-dasharray="10,15" />
<!-- Start line -->
<rect x="5" y="180" width="10" height="40" fill="black" />
<rect x="5" y="180" width="10" height="40" fill="none" stroke="white" stroke-width="1" />
<line x1="5" y1="185" x2="15" y2="185" stroke="white" stroke-width="1" />
<line x1="5" y1="195" x2="15" y2="195" stroke="white" stroke-width="1" />
<line x1="5" y1="205" x2="15" y2="205" stroke="white" stroke-width="1" />
<line x1="5" y1="215" x2="15" y2="215" stroke="white" stroke-width="1" />
<text x="10" y="175" font-family="Arial" font-size="8" font-weight="bold" fill="#ffffff" text-anchor="middle" filter="url(#neonGlow)">START</text>
<!-- Finish line -->
<rect x="285" y="180" width="10" height="40" fill="black" />
<rect x="285" y="180" width="10" height="40" fill="none" stroke="white" stroke-width="1" />
<line x1="285" y1="185" x2="295" y2="185" stroke="white" stroke-width="1" />
<line x1="285" y1="195" x2="295" y2="195" stroke="white" stroke-width="1" />
<line x1="285" y1="205" x2="295" y2="205" stroke="white" stroke-width="1" />
<line x1="285" y1="215" x2="295" y2="215" stroke="white" stroke-width="1" />
<text x="290" y="175" font-family="Arial" font-size="8" font-weight="bold" fill="#ffffff" text-anchor="middle" filter="url(#neonGlow)">FINISH</text>
<!-- Position markers -->
<circle cx="60" cy="200" r="5" fill="white" opacity="0.7" />
<text x="60" y="203" font-family="Arial" font-size="8" font-weight="bold" fill="black" text-anchor="middle">2</text>
<circle cx="230" cy="185" r="5" fill="white" opacity="0.7" />
<text x="230" y="188" font-family="Arial" font-size="8" font-weight="bold" fill="black" text-anchor="middle">1</text>
<!-- Disco ball setup -->
<rect x="148" y="10" width="4" height="50" fill="#888888" />
<circle cx="150" cy="60" r="25" fill="url(#discoBallGradient)" />
<circle cx="150" cy="60" r="25" fill="url(#discoPattern)" opacity="0.7" />
<circle cx="140" cy="50" r="2" fill="white" opacity="0.9" />
<circle cx="160" cy="55" r="1.5" fill="white" opacity="0.9" />
<circle cx="145" cy="70" r="2" fill="white" opacity="0.9" />
<circle cx="155" cy="45" r="1" fill="white" opacity="0.9" />
<!-- Sparkles around disco ball -->
<path d="M130,50 L134,54 M130,54 L134,50" stroke="white" stroke-width="1" filter="url(#neonGlow)" />
<path d="M165,50 L169,54 M165,54 L169,50" stroke="white" stroke-width="1" filter="url(#neonGlow)" />
<path d="M150,30 L154,34 M150,34 L154,30" stroke="white" stroke-width="1" filter="url(#neonGlow)" />
<path d="M140,70 L144,74 M140,74 L144,70" stroke="white" stroke-width="1" filter="url(#neonGlow)" />
<path d="M160,70 L164,74 M160,74 L164,70" stroke="white" stroke-width="1" filter="url(#neonGlow)" />
<!-- Flying saucers spectators -->
<ellipse cx="200" cy="100" rx="15" ry="5" fill="#666666" opacity="0.8" />
<ellipse cx="200" cy="98" rx="8" ry="3" fill="#99ccff" opacity="0.7" />
<ellipse cx="100" cy="120" rx="10" ry="3" fill="#666666" opacity="0.8" />
<ellipse cx="100" cy="118" rx="5" ry="2" fill="#99ccff" opacity="0.7" />
<!-- Alien spectator 1 -->
<circle cx="40" cy="150" r="5" fill="#9966ff" />
<circle cx="40" cy="142" r="3" fill="#9966ff" />
<line x1="40" y1="155" x2="35" y2="165" stroke="#9966ff" stroke-width="2" />
<line x1="40" y1="155" x2="45" y2="165" stroke="#9966ff" stroke-width="2" />
<line x1="35" y1="150" x2="30" y2="155" stroke="#9966ff" stroke-width="2" />
<rect x="25" y="145" width="10" height="10" fill="white" />
<text x="30" y="153" font-family="Arial" font-size="8" fill="black" text-anchor="middle">GO!</text>
<!-- Alien spectator 2 -->
<circle cx="260" cy="150" r="5" fill="#ff6699" />
<circle cx="260" cy="142" r="3" fill="#ff6699" />
<line x1="260" y1="155" x2="255" y2="165" stroke="#ff6699" stroke-width="2" />
<line x1="260" y1="155" x2="265" y2="165" stroke="#ff6699" stroke-width="2" />
<line x1="265" y1="150" x2="270" y2="155" stroke="#ff6699" stroke-width="2" />
<rect x="265" y="145" width="10" height="10" fill="white" />
<text x="270" y="153" font-family="Arial" font-size="6" fill="black" text-anchor="middle">YAY!</text>
<!-- Rocket -->
<!-- Exhaust flames -->
<path d="M225,190 L230,210 L235,190" fill="#ff9933" />
<path d="M227,190 L230,205 L233,190" fill="#ffff00" />
<path d="M223,190 L227,215 L231,190" fill="#ff5500" opacity="0.8" />
<path d="M229,190 L233,215 L237,190" fill="#ff5500" opacity="0.8" />
<!-- Motion lines -->
<line x1="210" y1="180" x2="200" y2="180" stroke="#ffffff" stroke-width="1" stroke-dasharray="3,2" />
<line x1="210" y1="185" x2="195" y2="185" stroke="#ffffff" stroke-width="1" stroke-dasharray="3,2" />
<line x1="210" y1="175" x2="195" y2="175" stroke="#ffffff" stroke-width="1" stroke-dasharray="3,2" />
<!-- Rocket body -->
<path d="M220,190 L240,190 L240,170 L230,160 L220,170 Z" fill="url(#rocketGradient)" stroke="#444444" stroke-width="1" />
<path d="M225,160 L225,190" stroke="#ff3333" stroke-width="2" />
<path d="M235,170 L235,190" stroke="#ff3333" stroke-width="2" />
<path d="M220,170 L230,160 L240,170" fill="#ff3333" stroke="#cc0000" stroke-width="1" />
<circle cx="230" cy="175" r="5" fill="#66ccff" stroke="#3399cc" stroke-width="1" />
<path d="M220,190 L210,200 L215,190 L220,180" fill="#ff3333" stroke="#cc0000" stroke-width="1" />
<path d="M240,190 L250,200 L245,190 L240,180" fill="#ff3333" stroke="#cc0000" stroke-width="1" />
<!-- Racing number on rocket -->
<circle cx="230" cy="183" r="3" fill="white" />
<text x="230" y="185" font-family="Arial" font-size="4" font-weight="bold" fill="black" text-anchor="middle">1</text>
<!-- Alien in rocket -->
<circle cx="230" cy="175" r="3" fill="#33ff33" opacity="0.8" />
<ellipse cx="229" cy="174" rx="0.8" ry="1.2" fill="black" />
<ellipse cx="231" cy="174" rx="0.8" ry="1.2" fill="black" />
<path d="M228,177 C229,178 231,178 232,177" stroke="black" stroke-width="0.5" fill="none" />
<!-- Snail -->
<!-- Slime trail -->
<path d="M70,200 C60,200 50,200 45,201 C40,202 35,203 20,205" stroke="#adff2f" stroke-width="2" opacity="0.6" fill="none" />
<!-- Shell -->
<path d="M70,190 C70,180 75,175 80,175 S95,180 95,170 S90,160 85,160 S75,155 80,150 S90,145 85,140 S75,145 70,140" fill="url(#shellGradient)" />
<path d="M70,190 C70,180 75,175 80,175 S95,180 95,170 S90,160 85,160 S75,155 80,150 S90,145 85,140 S75,145 70,140" fill="none" stroke="#663300" stroke-width="1" />
<!-- Racing number on shell -->
<circle cx="80" cy="165" r="7" fill="white" />
<text x="80" y="168" font-family="Arial" font-size="10" font-weight="bold" fill="black" text-anchor="middle">2</text>
<!-- Snail body -->
<path d="M70,190 C60,190 50,185 45,180 C40,175 40,170 35,170 C30,170 25,175 20,175" fill="url(#slimeGradient)" />
<!-- Eyes & expression -->
<line x1="45" y1="180" x2="43" y2="170" stroke="#32cd32" stroke-width="2" />
<line x1="45" y1="180" x2="47" y2="170" stroke="#32cd32" stroke-width="2" />
<circle cx="43" cy="170" r="2" fill="black" />
<circle cx="47" cy="170" r="2" fill="black" />
<ellipse cx="43" cy="169" rx="1" ry="0.5" fill="white" />
<ellipse cx="47" cy="169" rx="1" ry="0.5" fill="white" />
<path d="M40,175 C42,177 48,177 50,175" stroke="#32cd32" stroke-width="1" fill="none" />
<!-- Racing helmet & sweat drop -->
<path d="M35,170 C35,167 40,167 40,170" fill="#ff3366" />
<path d="M35,170 C35,167 40,167 40,170" fill="none" stroke="#cc0033" stroke-width="0.5" />
<line x1="35" y1="170" x2="40" y2="170" stroke="#cc0033" stroke-width="1" />
<path d="M50,174 Q51,177 52,174" stroke="#a0ffff" stroke-width="1" fill="#a0ffff" opacity="0.7" />
<!-- Race position indicators -->
<circle cx="35" cy="230" r="8" fill="white" stroke="#000000" stroke-width="1" />
<text x="35" y="233" font-family="Arial" font-size="8" font-weight="bold" fill="black" text-anchor="middle">2nd</text>
<circle cx="235" cy="230" r="8" fill="white" stroke="#000000" stroke-width="1" />
<text x="235" y="233" font-family="Arial" font-size="8" font-weight="bold" fill="black" text-anchor="middle">1st</text>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with gradient sky -->
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffe57f"/>
<stop offset="100%" stop-color="#81d4fa"/>
</linearGradient>
<!-- Rainbow Gradient -->
<linearGradient id="rainbowGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff0000"/>
<stop offset="14.28%" stop-color="#ff7f00"/>
<stop offset="28.56%" stop-color="#ffff00"/>
<stop offset="42.84%" stop-color="#00ff00"/>
<stop offset="57.12%" stop-color="#0000ff"/>
<stop offset="71.4%" stop-color="#4b0082"/>
<stop offset="85.68%" stop-color="#8f00ff"/>
<stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<!-- Disco ball gradient -->
<radialGradient id="discoGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#cccccc" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGrad)" />
<!-- Disco ball at the top center -->
<circle cx="150" cy="50" r="30" fill="url(#discoGrad)" stroke="#ccc" stroke-width="2" />
<!-- Rainbow road - a winding path -->
<path d="M 30 250 Q 90 200 150 250 Q 210 300 270 250" fill="none" stroke="url(#rainbowGrad)" stroke-width="20" stroke-linecap="round" stroke-linejoin="round" />
<!-- Snail -->
<g id="snail" transform="translate(50, 220)">
<!-- Snail shell -->
<ellipse cx="0" cy="0" rx="20" ry="12" fill="#8b5e3c" stroke="#654321" stroke-width="2"/>
<!-- Snail body -->
<ellipse cx="0" cy="10" rx="8" ry="4" fill="#a0522d"/>
<!-- Snail tentacles -->
<line x1=" -4" y1=" -2" x2="-10" y2=" -10" stroke="#654321" stroke-width="2"/>
<line x1=" 4" y1=" -2" x2="10" y2=" -10" stroke="#654321" stroke-width="2"/>
</g>
<!-- Rocket -->
<g id="rocket" transform="translate(250, 100)">
<!-- Rocket body -->
<rect x="-10" y="0" width="20" height="60" fill="#ff4d4d" stroke="#cc0000" stroke-width="2" rx="3" />
<!-- Rocket nose cone -->
<polygon points="0,-20 10,0 -10,0" fill="#ffe135" stroke="#ccaa00" stroke-width="2"/>
<!-- Rocket fins -->
<polygon points=" -10,60 -20,50 -10,50" fill="#00ccff" stroke="#0099cc" stroke-width="1"/>
<polygon points=" 10,60 20,50 10,50" fill="#00ccff" stroke="#0099cc" stroke-width="1"/>
<!-- Flame at bottom -->
<polygon points="0,60 -6,70 6,70" fill="#ff6600"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's image is more detailed and adheres better to the prompt, incorporating elements like the disco ball, a clear rainbow road, and the snail racing the rocket in a dynamic setting.
The technical quality and creativity are higher, with additional features like lighting effects and space-themed details.
Player 2's image is simpler and lacks some key elements, such as the disco ball and a more engaging composition.
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
98
Player 2
12
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
12
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
27
Player 2
1
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
8
Player 2
2
Lines
The number of line elements (line) in the SVG.
Player 1
20
Player 2
2
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
4
Player 2
4
Paths
The number of path elements (path) in the SVG.
Player 1
27
Player 2
1
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
2
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
2
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
2
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
21
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
45
Player 2
9
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
40
Player 2
22
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
—
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
93
Player 2
3
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
10
Player 2
3
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
10
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.
Similar Challenges
Match #2726
May 10, 2025
"A tree shaped like a giant hand reaching for the sky."
P1
P2
Match #2638
May 09, 2025
"A cactus wearing a royal crown and sunglasses in the desert at sunset."
P1
P2
Match #2458
May 09, 2025
"Alien watering a carnivorous plant under two suns."
P1
P2
Match #2258
May 09, 2025
"A giraffe wearing a top hat balancing on a unicycle."
P1
P2
