GPT-4o
Challenge Creator
Creative Challenge
"A giant snail wearing a tiny crown racing a skateboard."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Shell Gradient -->
<radialGradient id="shellGrad" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#ffe1a8"/>
<stop offset="55%" stop-color="#f74b73"/>
<stop offset="90%" stop-color="#aa4499"/>
<stop offset="100%" stop-color="#661f4d"/>
</radialGradient>
<!-- Body Gradient -->
<linearGradient id="bodyGrad" x1="0" x2="1" y1="0.2" y2="1">
<stop offset="0%" stop-color="#7ed957"/>
<stop offset="70%" stop-color="#4e944f"/>
<stop offset="100%" stop-color="#24541e"/>
</linearGradient>
<!-- Shadow for shell -->
<radialGradient id="shadowGrad" cx="50%" cy="80%" r="65%">
<stop offset="0%" stop-color="#332f2b" stop-opacity="0.22"/>
<stop offset="100%" stop-color="#22201e" stop-opacity="0"/>
</radialGradient>
<!-- Skateboard Gradient -->
<linearGradient id="skateGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#324fbb"/>
<stop offset="100%" stop-color="#0dd4fa"/>
</linearGradient>
<!-- Sparkle Gradient for crown -->
<radialGradient id="crownGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#fffde6"/>
<stop offset="50%" stop-color="#ffe34d"/>
<stop offset="100%" stop-color="#ffb700"/>
</radialGradient>
<filter id="shadowF" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="7" stdDeviation="5" flood-color="#000" flood-opacity="0.32"/>
</filter>
<pattern id="shellSpots" patternUnits="userSpaceOnUse" width="12" height="12">
<circle cx="6" cy="6" r="3" fill="#fff7e0" fill-opacity="0.18"/>
</pattern>
<!-- Glow for the skateboard wheels -->
<radialGradient id="wheelGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffbf8" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#ffc800" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Ground shadow -->
<ellipse cx="150" cy="235" rx="76" ry="16" fill="url(#shadowGrad)" filter="url(#shadowF)"/>
<!-- Skateboard -->
<g id="skateboard">
<rect x="95" y="217" rx="13" ry="14" width="110" height="16" fill="url(#skateGrad)" stroke="#223278" stroke-width="3"/>
<rect x="104" y="225.5" rx="3" ry="4" width="94" height="4.5" fill="#14526c" fill-opacity="0.58"/>
<!-- Wheels -->
<g>
<g>
<circle cx="115" cy="236" r="10" fill="url(#wheelGlow)"/>
<circle cx="115" cy="236" r="8" fill="#ffe057" stroke="#eab308" stroke-width="2"/>
<circle cx="115" cy="236" r="3.5" fill="#e4e4e4" stroke="#c78e23" stroke-width="1"/>
</g>
<g>
<circle cx="185" cy="236" r="10" fill="url(#wheelGlow)"/>
<circle cx="185" cy="236" r="8" fill="#6fe0db" stroke="#33bdd8" stroke-width="2"/>
<circle cx="185" cy="236" r="3.5" fill="#e4e4e4" stroke="#197586" stroke-width="1"/>
</g>
</g>
</g>
<!-- Snail Shell with gradients and pattern -->
<g id="shell">
<!-- Shell base -->
<ellipse cx="155" cy="120" rx="61" ry="70" fill="url(#shellGrad)" stroke="#42283b" stroke-width="4" />
<!-- Spots -->
<ellipse cx="155" cy="123" rx="57" ry="67" fill="url(#shellSpots)" />
<!-- Spiral -->
<path d="M150,103
Q135,123 155,145
Q175,167 185,130
Q194,95 155,120
Q125,143 150,160"
fill="none"
stroke="#541924"
stroke-width="6"
stroke-linecap="round"
stroke-dasharray="7 8"
/>
<path d="M160 115 Q180 102 178 134 Q167 181 120 140 Q112 120 149 110" fill="none" stroke="#85387a" stroke-width="3" stroke-dasharray="9 7"/>
</g>
<!-- Snail Body -->
<g id="body">
<!-- Main body shape -->
<ellipse cx="125" cy="183" rx="65" ry="30" fill="url(#bodyGrad)" filter="url(#shadowF)" />
<!-- Lower body arc (under edge, darker) -->
<ellipse cx="125" cy="195" rx="63" ry="17" fill="#19441f" fill-opacity="0.3"/>
<!-- Neck segment (leaning forward) -->
<path d="M90,160
Q70,132 98,117
Q120,100 150,130
Q117,132 118,160
Q109,176 90,160"
fill="url(#bodyGrad)" stroke="#327d32" stroke-width="1.2"/>
<!-- Neck highlight -->
<path d="M108,124 Q125,110 146,132 Q128,150 115,132" fill="none" stroke="#d2f6a2" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 8"/>
</g>
<!-- Snail Face and features -->
<g id="face">
<!-- Head base -->
<ellipse cx="100" cy="108" rx="20" ry="18" fill="url(#bodyGrad)" stroke="#22511a" stroke-width="2"/>
<!-- Cheek blush -->
<ellipse cx="90" cy="117" rx="3.5" ry="2" fill="#fa98bd" fill-opacity="0.5"/>
<!-- Smile -->
<path d="M87,122 Q98,130 107,119" stroke="#442519" stroke-width="2.3" fill="none" stroke-linecap="round"/>
<!-- Eyes stalks -->
<g>
<rect x="91" y="83" width="4" height="22" rx="2" fill="#b4ffb1" stroke="#19740c" stroke-width="1.1" transform="rotate(-13 93 94)"/>
<rect x="106" y="81" width="4" height="21" rx="2" fill="#b4ffb1" stroke="#19740c" stroke-width="1" transform="rotate(7 108 92)"/>
<!-- Eyes -->
<ellipse cx="93" cy="83" rx="4" ry="5.3" fill="#e0ffe1" stroke="#244d2d" stroke-width="1"/>
<ellipse cx="108" cy="81" rx="4" ry="5.3" fill="#e0ffe1" stroke="#244d2d" stroke-width="1"/>
<!-- Pupils -->
<circle cx="93" cy="85" r="1.6" fill="#2b2333"/>
<circle cx="108" cy="83.5" r="1.6" fill="#2b2333"/>
<!-- Eye sparkles -->
<circle cx="92.2" cy="84" r="0.5" fill="#fff"/>
<circle cx="107.3" cy="82.5" r="0.5" fill="#fff"/>
<!-- Raised eyebrows -->
<path d="M90 78 Q93 75 97 78" stroke="#906993" stroke-width="1" fill="none"/>
<path d="M105 75 Q109 71 112 76" stroke="#906993" stroke-width="1" fill="none"/>
</g>
</g>
<!-- Miniature Crown (whimsical, askew) -->
<g id="tinyCrown" transform="translate(105 70) rotate(-10)">
<!-- Base -->
<ellipse cx="0" cy="7" rx="6.8" ry="3.2" fill="url(#crownGrad)" stroke="#e39e2c" stroke-width="1.2"/>
<path d="M-7,6.5 L-4,0 L0,7.5 L4,0 L7,6.5" fill="url(#crownGrad)" stroke="#f6d563" stroke-width="1"/>
<!-- Jewels -->
<circle cx="-4" cy="2.5" r="1.05" fill="#4ddbff" stroke="#4ad6ce" stroke-width="0.5"/>
<circle cx="0" cy="2" r="1.15" fill="#fd5360" stroke="#fdbe66" stroke-width="0.5"/>
<circle cx="4" cy="2.5" r="1.05" fill="#7cfb42" stroke="#35c04d" stroke-width="0.5"/>
<!-- Crown sparkles -->
<g>
<polygon points="0,-8 1,-5 3,-7 1,-5.5 2,-3 0,-5 -2,-3 -1,-5.5 -3,-7 -1,-5" fill="#fff4cc" opacity="0.7"/>
<circle cx="7.5" cy="7" r="1.2" fill="#fffbcd" opacity="0.7"/>
<circle cx="-7.8" cy="8" r="0.84" fill="#fffbcd" opacity="0.7"/>
</g>
</g>
<!-- Speed lines behind snail (showing motion) -->
<g id="speedlines">
<path d="M50,190 Q33,200 42,217" stroke="#78f7e2" stroke-width="3.5" stroke-linecap="round" fill="none" opacity="0.34"/>
<path d="M45,160 L20,150" stroke="#f74b73" stroke-width="2.7" stroke-linecap="round" opacity="0.35"/>
<path d="M60,115 Q40,123 43,160" stroke="#ccccff" stroke-width="3" stroke-linecap="round" opacity="0.23"/>
<path d="M68,165 Q48,175 78,175" stroke="#ffe77a" stroke-width="3.2" stroke-linecap="round" opacity="0.17"/>
<path d="M45,145 Q26,138 42,124" stroke="#ee4597" stroke-width="2" stroke-linecap="round" opacity="0.25"/>
</g>
<!-- Whimsical track indicator (racing!) -->
<g id="raceTrack">
<rect x="30" y="250" width="240" height="8" rx="3.9" fill="#ffb700" fill-opacity="0.28"/>
<rect x="38" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="66" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="94" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="122" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="150" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="178" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="206" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
<rect x="234" y="253" width="18" height="3" rx="1.3" fill="#fff"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Snail Body Gradient -->
<linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#9370DB; stop-opacity:1" /> <!-- MediumPurple -->
<stop offset="60%" style="stop-color:#8A2BE2; stop-opacity:1" /> <!-- BlueViolet -->
<stop offset="100%" style="stop-color:#4B0082; stop-opacity:1" /> <!-- Indigo -->
</linearGradient>
<!-- Snail Shell Gradient (Swirling Rainbow) -->
<radialGradient id="snailShellGradient" cx="60%" cy="40%" r="70%" fx="75%" fy="35%">
<stop offset="0%" style="stop-color:#FFD700; stop-opacity:1" /> <!-- Gold -->
<stop offset="15%" style="stop-color:#FFA500; stop-opacity:1" /> <!-- Orange -->
<stop offset="30%" style="stop-color:#FF6347; stop-opacity:1" /> <!-- Tomato -->
<stop offset="50%" style="stop-color:#FF0000; stop-opacity:1" /> <!-- Red -->
<stop offset="70%" style="stop-color:#DA70D6; stop-opacity:1" /> <!-- Orchid -->
<stop offset="85%" style="stop-color:#9400D3; stop-opacity:1" /> <!-- DarkViolet -->
<stop offset="100%" style="stop-color:#4B0082; stop-opacity:1" /> <!-- Indigo -->
</radialGradient>
<!-- Crown Gold Gradient -->
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFDF00;" /> <!-- Gold (brighter) -->
<stop offset="50%" style="stop-color:#FFEE75;" /> <!-- Light Gold -->
<stop offset="100%" style="stop-color:#B8860B;" /> <!-- DarkGoldenrod -->
</linearGradient>
<!-- Skateboard Deck Gradient -->
<linearGradient id="deckGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#00FFFF; stop-opacity:1" /> <!-- Cyan -->
<stop offset="100%" style="stop-color:#20B2AA; stop-opacity:1" /> <!-- LightSeaGreen -->
</linearGradient>
<!-- Speed Line Gradient (White fading to transparent) -->
<linearGradient id="speedLineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgba(255,255,255,0.7); stop-opacity:1" />
<stop offset="30%" style="stop-color:rgba(255,255,255,0.7); stop-opacity:1" />
<stop offset="100%" style="stop-color:rgba(255,255,255,0); stop-opacity:1" />
</linearGradient>
<!-- Background Gradient -->
<radialGradient id="backgroundGradient" cx="50%" cy="40%" r="75%" fx="50%" fy="40%">
<stop offset="0%" style="stop-color:#87CEEB; stop-opacity:1" /> <!-- SkyBlue -->
<stop offset="100%" style="stop-color:#4682B4; stop-opacity:1" /> <!-- SteelBlue -->
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#backgroundGradient)"/>
<!-- Speed Lines -->
<g id="speed-lines-effect" stroke-linecap="round">
<path d="M 0 160 C 50 158, 100 162, 150 155" stroke="url(#speedLineGrad)" stroke-width="8" />
<path d="M 0 190 C 60 188, 120 192, 180 185" stroke="url(#speedLineGrad)" stroke-width="12" />
<path d="M 0 220 C 70 218, 140 222, 210 215" stroke="url(#speedLineGrad)" stroke-width="10" />
<path d="M 0 250 C 50 248, 100 252, 150 245" stroke="url(#speedLineGrad)" stroke-width="14" />
</g>
<!-- Wheel action puffs (subtle, behind skateboard) -->
<g id="wheel-puffs" transform="translate(0, 5) rotate(-3 150 230)">
<path d="M 80 250 C 70 245, 60 255, 50 250" stroke="rgba(220,220,240,0.5)" stroke-width="3" fill="none" stroke-dasharray="3 3"/>
<path d="M 75 255 C 65 250, 55 260, 45 255" stroke="rgba(220,220,240,0.3)" stroke-width="2" fill="none" stroke-dasharray="2 2"/>
</g>
<!-- Ground Shadow for skateboard -->
<ellipse cx="150" cy="268" rx="75" ry="9" fill="rgba(0,0,0,0.15)" transform="translate(2,5) rotate(-1 150 268)" />
<!-- Skateboard -->
<g id="skateboard" transform="translate(0, 5) rotate(-3 150 230)">
<!-- Wheels (back pair, further away) -->
<circle cx="95" cy="248" r="11" fill="#282828" stroke="#111" stroke-width="1"/>
<circle cx="97" cy="249" r="4" fill="#484848"/>
<circle cx="205" cy="245" r="11" fill="#282828" stroke="#111" stroke-width="1"/>
<circle cx="207" cy="246" r="4" fill="#484848"/>
<!-- Deck -->
<path d="M 70 220 Q 65 230, 70 240 L 230 235 Q 235 225, 230 215 L 70 220 Z"
fill="url(#deckGradient)" stroke="#006060" stroke-width="1.5"/>
<!-- Grip tape dots -->
<g fill="rgba(0,0,0,0.25)">
<circle cx="100" cy="226" r="1.2"/> <circle cx="120" cy="225" r="1.2"/>
<circle cx="140" cy="224" r="1.5"/> <circle cx="160" cy="224" r="1.5"/>
<circle cx="180" cy="225" r="1.2"/> <circle cx="200" cy="226" r="1.2"/>
<circle cx="110" cy="232" r="1"/> <circle cx="130" cy="230" r="1"/>
<circle cx="150" cy="229" r="1.3"/> <circle cx="170" cy="230" r="1"/> <circle cx="190" cy="232" r="1"/>
</g>
<!-- Trucks (simplified) -->
<rect x="100" y="228" width="8" height="18" fill="#777" stroke="#555" stroke-width="0.5" rx="1" ry="1" transform="rotate(5 104 237)"/>
<rect x="190" y="226" width="8" height="18" fill="#777" stroke="#555" stroke-width="0.5" rx="1" ry="1" transform="rotate(5 194 235)"/>
<!-- Wheels (front pair, closer) -->
<circle cx="110" cy="250" r="12" fill="#333" stroke="#111" stroke-width="1"/>
<circle cx="112" cy="251" r="5" fill="#555"/>
<circle cx="220" cy="247" r="12" fill="#333" stroke="#111" stroke-width="1"/>
<circle cx="222" cy="248" r="5" fill="#555"/>
</g>
<!-- Snail -->
<g id="snail-group">
<!-- Snail Shell -->
<g id="shell" transform="translate(135, 135) rotate(-10)"> <!-- Adjusted position for longer body -->
<path d="M 0,50
C -50,50 -80,10 -70,-30
S -30,-90 20,-80
S 80,-50 80,0
S 50,60 0,50 Z"
fill="url(#snailShellGradient)" stroke="#4A0082" stroke-width="2.5"/>
<!-- Spiral lines on shell -->
<path d="M 5,5
C -20,5 -40,-15 -35,-35
S -10,-65 20,-60
S 50,-35 50,-5
S 30,20 5,5"
stroke="rgba(255,255,255,0.3)" stroke-width="4" fill="none" stroke-linecap="round"/>
<path d="M 2,2
C -8,2 -15,-5 -13,-15
S -3,-28 8,-25
S 20,-15 20,-3
S 12,3 2,2"
stroke="rgba(0,0,0,0.15)" stroke-width="2.5" fill="none" stroke-linecap="round" transform="scale(0.8) translate(5,5)"/>
</g>
<!-- Snail Body -->
<path id="snailBody"
d="M 70 220
C 40 220, 40 160, 80 130
S 150 50, 200 90
C 250 130, 260 180, 240 215
L 230 220
C 200 235, 100 235, 70 220 Z"
fill="url(#snailBodyGradient)" stroke="#301934" stroke-width="2"/>
<!-- Eyestalks -->
<!-- Left eyestalk (further back) -->
<g id="left-eyestalk" transform="translate(170 100) rotate(-30)"> <!-- Adjusted for new body shape -->
<path d="M 0 0 C 5 -25, 13 -30, 17 -25 C 21 -20, 12 -5, 0 0 Z"
fill="url(#snailBodyGradient)" stroke="#301934" stroke-width="1.5"/>
<circle cx="15" cy="-27" r="7" fill="white" stroke="black" stroke-width="1"/>
<circle cx="16.5" cy="-27" r="3" fill="black"/> <!-- Pupil -->
</g>
<!-- Right eyestalk (front, with crown) -->
<g id="right-eyestalk" transform="translate(200 90) rotate(-20)"> <!-- Adjusted for new body shape -->
<path d="M 0 0 C 5 -30, 15 -35, 20 -30 C 25 -25, 15 -5, 0 0 Z"
fill="url(#snailBodyGradient)" stroke="#301934" stroke-width="1.5"/>
<circle cx="18" cy="-30" r="8" fill="white" stroke="black" stroke-width="1"/>
<circle cx="19.5" cy="-30" r="3.5" fill="black"/> <!-- Pupil -->
<!-- Tiny Crown -->
<g id="tinyCrown" transform="translate(18, -42) rotate(5)">
<polygon points="-7,0 7,0 7,5 3.5,2 0,5 -3.5,2 -7,5"
fill="url(#goldGradient)" stroke="#A07000" stroke-width="0.7"/>
<circle cx="0" cy="-2.5" r="1.5" fill="#FF0000" stroke="#800000" stroke-width="0.3"/> <!-- Gem -->
</g>
</g>
<!-- Smile -->
<path d="M 215 135 Q 230 150 245 140" stroke="#200A24" stroke-width="2" fill="none" stroke-linecap="round" transform="translate(5, 5)"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 2
Judge's Analysis
Player 2's submission is more visually appealing due to its clean composition and vibrant colors.
The snail's expression and dynamic motion lines effectively convey the sense of racing.
While Player 1's entry is creative and colorful, its composition is cluttered and less polished in execution compared to Player 2's refined design.
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
53
Player 2
43
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
13
Player 2
3
Circles
The number of circle elements (circle) in the SVG.
Player 1
16
Player 2
24
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
10
Player 2
1
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
1
Player 2
1
Paths
The number of path elements (path) in the SVG.
Player 1
13
Player 2
14
Groups
The number of group elements (g) in the SVG.
Player 1
12
Player 2
9
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
6
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
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
8
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
28
Player 2
24
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
56
Player 2
20
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
11
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
38
Player 2
51
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
2
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
8
Player 2
6
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.
