GPT-4o
Challenge Creator
Creative Challenge
"A snail with a rocket booster racing a cheetah on a rainbow track."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Rainbow gradient for the track -->
<linearGradient id="rainbow" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ff004d"/>
<stop offset="16%" stop-color="#ffb700"/>
<stop offset="33%" stop-color="#21e900"/>
<stop offset="50%" stop-color="#00dfff"/>
<stop offset="66%" stop-color="#2f47ff"/>
<stop offset="83%" stop-color="#bd00ff"/>
<stop offset="100%" stop-color="#ff0099"/>
</linearGradient>
<!-- Gradient for cheetah -->
<linearGradient id="cheetahMain" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fcb900"/>
<stop offset="100%" stop-color="#ffeb77"/>
</linearGradient>
<!-- Gradient for snail shell -->
<radialGradient id="shellGrad" cx="60%" cy="40%" r="70%">
<stop offset="0%" stop-color="#b37546"/>
<stop offset="60%" stop-color="#e8d3bb"/>
<stop offset="100%" stop-color="#7a4a26"/>
</radialGradient>
<!-- Shadow for racing dynamics -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="5" stdDeviation="4" flood-color="#333" flood-opacity="0.3"/>
</filter>
<!-- Jet flame gradient -->
<linearGradient id="jetFlame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff9a5"/>
<stop offset="30%" stop-color="#ffe457"/>
<stop offset="80%" stop-color="#ff6c00"/>
<stop offset="100%" stop-color="#ed0c16"/>
</linearGradient>
<!-- Cheetah spots pattern -->
<pattern id="cheetahSpots" patternUnits="userSpaceOnUse" width="16" height="16">
<circle cx="5" cy="5" r="2.2" fill="#35270c"/>
<ellipse cx="12" cy="8" rx="1.2" ry="2" fill="#35270c"/>
<circle cx="8" cy="11" r="1.4" fill="#35270c"/>
</pattern>
<!-- Motion lines for speed -->
<linearGradient id="motionLine" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Rainbow Track (curved) -->
<g>
<path
d="M25,240 Q90,140 275,90"
stroke="url(#rainbow)"
stroke-width="26"
fill="none"
filter="url(#shadow)"
/>
<!-- Track edge lines for depth -->
<path
d="M20,248 Q87,148 282,98"
stroke="#222"
stroke-opacity="0.4"
stroke-width="3"
fill="none"
/>
<path
d="M30,232 Q93,132 268,82"
stroke="#fff"
stroke-opacity="0.2"
stroke-width="3"
fill="none"
/>
</g>
<!-- Cheetah facing right, slightly ahead on track -->
<g filter="url(#shadow)">
<g transform="translate(170,103)">
<!-- Legs - foreleg raised for action -->
<ellipse cx="-17" cy="28" rx="7" ry="3" fill="url(#cheetahMain)" opacity="0.8" />
<ellipse cx="13" cy="32" rx="9" ry="3.5" fill="url(#cheetahMain)" opacity="0.75" />
<ellipse cx="-10" cy="35" rx="8" ry="3" fill="url(#cheetahMain)" opacity="0.7" />
<ellipse cx="24" cy="21" rx="8" ry="3" fill="url(#cheetahMain)" opacity="0.75" />
<!-- Body -->
<ellipse cx="12" cy="7" rx="38" ry="16"
fill="url(#cheetahMain)" stroke="#d6970e" stroke-width="2"
/>
<ellipse cx="12" cy="7" rx="37" ry="13"
fill="url(#cheetahSpots)" opacity="0.45"/>
<!-- Head -->
<ellipse cx="48" cy="2" rx="11" ry="10"
fill="url(#cheetahMain)" stroke="#d6970e" stroke-width="1.5"
/>
<!-- Face -->
<ellipse cx="51" cy="2.5" rx="2.1" ry="2.9" fill="#fffbe9"/>
<ellipse cx="53" cy="2" rx="0.8" ry="1.2" fill="#1f1813"/>
<ellipse cx="46.3" cy="-0.5" rx="2" ry="1" fill="#e19b08" opacity="0.7"/>
<ellipse cx="51" cy="7.2" rx="3.5" ry="1.2" fill="#c96c18"/>
<!-- Ear -->
<ellipse cx="54" cy="-10" rx="2" ry="3.2" fill="#ffdc53" stroke="#795407" stroke-width="0.8"/>
<!-- Nose -->
<ellipse cx="59.5" cy="2.2" rx="1.2" ry="0.8" fill="#49310c"/>
<!-- Cheetah tail waving -->
<path d="M-27,10 Q-40,16 -38,30 Q-36,44 -19,38"
stroke="#ffe995" stroke-width="4" fill="none" />
<path d="M-18,38 Q-38,44 -34,30 Q-31,18 -15,18"
stroke="#372c10" stroke-width="3" fill="none" opacity="0.7"/>
<ellipse cx="-26" cy="38" rx="3.7" ry="1.3" fill="#ffe995" />
<!-- Spots on head -->
<ellipse cx="54" cy="-2" rx="0.8" ry="1.2" fill="#442d04"/>
<ellipse cx="50" cy="-5" rx="1" ry="0.7" fill="#442d04"/>
</g>
<!-- Motion lines behind Cheetah -->
<rect x="111" y="117" width="30" height="4" rx="2" fill="url(#motionLine)" />
<rect x="120" y="122" width="20" height="3" rx="2" fill="url(#motionLine)" opacity="0.7"/>
<rect x="125" y="112" width="24" height="3" rx="2" fill="url(#motionLine)" opacity="0.45"/>
</g>
<!-- Snail with rocket booster racing -->
<g filter="url(#shadow)">
<!-- Snail position: slightly behind cheetah on track -->
<g transform="translate(80,170)">
<!-- Snail shell -->
<ellipse cx="0" cy="0" rx="24" ry="20" fill="url(#shellGrad)" stroke="#7a4a26" stroke-width="2.5"/>
<!-- Inner spiral -->
<path d="M4,-8 Q7,0 0,7 Q-5,12 -12,5 Q-17,0 -10,-6 Q-4,-10 4,-8"
fill="none" stroke="#855b38" stroke-width="2"/>
<!-- Snail body -->
<ellipse cx="24" cy="13" rx="27" ry="12" fill="#baffcf" stroke="#197457" stroke-width="2"/>
<ellipse cx="34" cy="0" rx="13" ry="5.4" fill="#eeeece" opacity="0.5"/>
<!-- Eye stalks -->
<rect x="22" y="-17" width="2.8" height="17" rx="1.1" fill="#7adcaf"/>
<rect x="35" y="-16" width="2.8" height="15" rx="1.2" fill="#7adcaf"/>
<circle cx="24" cy="-18" r="2.3" fill="#fff" stroke="#60bb6a" stroke-width="0.5"/>
<circle cx="36.6" cy="-17" r="2.1" fill="#fff" stroke="#60bb6a" stroke-width="0.5"/>
<circle cx="24" cy="-18" r="1.0" fill="#143e2a"/>
<circle cx="36.6" cy="-17" r="1.1" fill="#143e2a"/>
<!-- Cute Smile -->
<path d="M28,-6 Q30.5,-4 32.2,-7" stroke="#3c834d" stroke-width="1.3" fill="none"/>
<!-- Rocket booster (angled down behind shell) -->
<g transform="rotate(14 -33 27)">
<rect x="-27" y="12" width="12" height="11" rx="3" fill="#dae3e9" stroke="#677db2" stroke-width="1"/>
<rect x="-28.3" y="16" width="13.6" height="8" rx="4.2" fill="#bbb"/>
<ellipse cx="-16" cy="18" rx="6" ry="4.6" fill="#dddddf"/>
<!-- Booster Details -->
<rect x="-14.5" y="17.8" width="2.9" height="7.5" rx="1.2" fill="#9eaccc"/>
<!-- Jet flame -->
<polygon points="-11,22 -7,29 -13,28"
fill="url(#jetFlame)" />
<polygon points="-9.7,22.5 -4.5,27 -12,27"
fill="url(#jetFlame)" opacity="0.65"/>
</g>
<!-- Motion lines behind snail/booster -->
<rect x="-43" y="30" width="18" height="2.5" rx="1.2" fill="url(#motionLine)" />
<rect x="-50" y="26" width="10" height="2.2" rx="1.1" fill="url(#motionLine)" opacity="0.7"/>
<rect x="-38" y="36" width="13" height="1.9" rx="1.1" fill="url(#motionLine)" opacity="0.55"/>
</g>
</g>
<!-- Motion lines for dynamic effect (track movement) -->
<g>
<rect x="50" y="217" width="23" height="5" rx="2.5" fill="url(#motionLine)" />
<rect x="180" y="107" width="17" height="4" rx="2" fill="url(#motionLine)" />
<rect x="100" y="185" width="14" height="4" rx="2" fill="url(#motionLine)" opacity="0.5"/>
<rect x="210" y="89" width="12" height="3" rx="1.5" fill="url(#motionLine)" opacity="0.6"/>
</g>
<!-- Whimsical racing flags at the finish -->
<g>
<g transform="translate(276,82)">
<rect x="-2" y="-24" width="4.4" height="44" rx="1" fill="#434343"/>
<g>
<rect x="-8" y="-25" width="20" height="12" rx="3" fill="#fff" stroke="#222" stroke-width="1.1"/>
<!-- Check pattern -->
<rect x="-8" y="-25" width="5" height="6" fill="#222"/>
<rect x="2" y="-25" width="5" height="6" fill="#222"/>
<rect x="7" y="-19" width="5" height="6" fill="#222"/>
<rect x="-3" y="-19" width="5" height="6" fill="#222"/>
</g>
<ellipse cx="0" cy="20" rx="3" ry="3.6" fill="#8abeff" opacity="0.4"/>
</g>
<!-- Rainbow confetti at finish -->
<circle cx="260" cy="70" r="2" fill="#ff004d"/>
<circle cx="270" cy="90" r="1.6" fill="#ffb700"/>
<circle cx="266" cy="86" r="1.8" fill="#21e900"/>
<circle cx="275" cy="96" r="2.2" fill="#2f47ff"/>
<circle cx="277" cy="76" r="2.4" fill="#ff0099"/>
</g>
<!-- 3D Depth: Faint background clouds for whimsy -->
<g opacity="0.17">
<ellipse cx="210" cy="40" rx="36" ry="14" fill="#b7eeff"/>
<ellipse cx="65" cy="55" rx="28" ry="10" fill="#ddfff8"/>
<ellipse cx="155" cy="22" rx="18" ry="7" fill="#edf3ff"/>
</g>
<!-- Comic-style dynamics: "ZOOM!" effect for snail -->
<g>
<text x="30" y="148" font-size="27" font-family="Comic Sans MS, Arial, sans-serif"
fill="#fff" stroke="#f14c1c" stroke-width="2.4" font-weight="bold" transform="rotate(-10 30 148)" opacity="0.82"
>ZOOM!</text>
<text x="195" y="95" font-size="20" font-family="Comic Sans MS, Arial, sans-serif"
fill="#fff" stroke="#1c6bf1" stroke-width="1.5" font-weight="bold" transform="rotate(9 200 100)" opacity="0.8"
>SWISH</text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Rainbow gradient for track -->
<linearGradient id="rainbow" x1="0" y1="0" x2="300" y2="0" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ff004d"/>
<stop offset="14%" stop-color="#ff7b00"/>
<stop offset="28%" stop-color="#ffe600"/>
<stop offset="42%" stop-color="#00d100"/>
<stop offset="56%" stop-color="#00c1ff"/>
<stop offset="70%" stop-color="#0047ff"/>
<stop offset="84%" stop-color="#7300ff"/>
<stop offset="100%" stop-color="#ff00f7"/>
</linearGradient>
<!-- Snail shell gradient -->
<radialGradient id="shellGrad" cx="0.3" cy="0.3" r="0.8">
<stop offset="0%" stop-color="#fff8dc"/>
<stop offset="40%" stop-color="#f4b96e"/>
<stop offset="100%" stop-color="#8b4513"/>
</radialGradient>
<!-- Rocket body gradient -->
<linearGradient id="rocketBodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#c0c0c0"/>
<stop offset="100%" stop-color="#6e6e6e"/>
</linearGradient>
<!-- Rocket flame gradient -->
<linearGradient id="flameGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffff00"/>
<stop offset="30%" stop-color="#ffb300"/>
<stop offset="60%" stop-color="#ff4600"/>
<stop offset="100%" stop-color="#ff003c"/>
</linearGradient>
<!-- Slight blur for flame -->
<filter id="flameBlur"><feGaussianBlur stdDeviation="1.3"/></filter>
<!-- Cheetah spot pattern -->
<pattern id="spots" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="#f4c430"/>
<circle cx="5" cy="5" r="3" fill="#1b1b1b"/>
</pattern>
</defs>
<!-- Rainbow track -->
<path d="M10 220 Q150 140 290 220" stroke="url(#rainbow)" stroke-width="40" stroke-linecap="round" fill="none"/>
<!-- Snail with rocket booster -->
<g transform="translate(80 190)">
<!-- Body -->
<ellipse cx="0" cy="25" rx="40" ry="15" fill="#9acd32"/>
<ellipse cx="-35" cy="15" rx="12" ry="12" fill="#9acd32"/>
<!-- Eye stalks -->
<line x1="-42" y1="5" x2="-48" y2="-10" stroke="#6b8e23" stroke-width="2"/>
<line x1="-28" y1="5" x2="-22" y2="-10" stroke="#6b8e23" stroke-width="2"/>
<circle cx="-48" cy="-10" r="2.5" fill="#fff" stroke="#000" stroke-width="0.8"/>
<circle cx="-22" cy="-10" r="2.5" fill="#fff" stroke="#000" stroke-width="0.8"/>
<!-- Shell -->
<circle cx="0" cy="0" r="25" fill="url(#shellGrad)" stroke="#5d4037" stroke-width="2"/>
<path d="M-8 -4A12 12 0 1 1 8 8" fill="none" stroke="#5d4037" stroke-width="2"/>
<!-- Rocket -->
<g transform="translate(30 0) rotate(-8)">
<rect x="0" y="-8" width="25" height="16" rx="3" fill="url(#rocketBodyGrad)" stroke="#444" stroke-width="1"/>
<polygon points="25,-8 33,0 25,8" fill="#d32f2f" stroke="#444" stroke-width="1"/>
<!-- Flame -->
<path d="M-5,-5Q-15,0 -5,5Q-18,8 -2,12Q-15,17 0,20" fill="url(#flameGrad)" filter="url(#flameBlur)"/>
</g>
<!-- Speed lines -->
<g stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.6">
<line x1="-70" y1="5" x2="-40" y2="5"/>
<line x1="-75" y1="15" x2="-45" y2="15"/>
</g>
</g>
<!-- Cheetah -->
<g transform="translate(200 200)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="45" ry="18" fill="url(#spots)"/>
<!-- Legs -->
<g stroke="#f4c430" stroke-width="6" stroke-linecap="round">
<line x1="-20" y1="18" x2="-30" y2="33"/>
<line x1="-5" y1="18" x2="-12" y2="33"/>
<line x1="10" y1="18" x2="4" y2="33"/>
<line x1="25" y1="18" x2="18" y2="33"/>
</g>
<!-- Head -->
<circle cx="50" cy="-12" r="12" fill="url(#spots)"/>
<circle cx="46" cy="-15" r="2" fill="#000"/>
<circle cx="54" cy="-15" r="2" fill="#000"/>
<polygon points="54,-25 57,-20 51,-20" fill="#f4c430" stroke="#1b1b1b" stroke-width="0.5"/>
<polygon points="46,-25 49,-20 43,-20" fill="#f4c430" stroke="#1b1b1b" stroke-width="0.5"/>
<!-- Tail -->
<path d="M-45,-8Q-70,-20 -60,-40" stroke="#f4c430" stroke-width="6" stroke-linecap="round" fill="none"/>
<!-- Speed lines -->
<g stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.6">
<line x1="70" y1="-30" x2="40" y2="-15"/>
<line x1="70" y1="-10" x2="40" y2="0"/>
<line x1="70" y1="10" x2="40" y2="15"/>
</g>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 1
Judge's Analysis
Player 1's image demonstrates stronger compositional strength and creativity by including a visible finish line, speed effects, and onomatopoeic text like 'ZOOM!' and 'SWISH!' to enhance the narrative.
While Player 2's image adheres to the prompt, it is less dynamic and visually engaging, lacking the storytelling elements and polish found in Player 1's submission.
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
66
Player 2
30
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
21
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
11
Player 2
7
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
25
Player 2
3
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
11
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
2
Player 2
3
Paths
The number of path elements (path) in the SVG.
Player 1
7
Player 2
4
Groups
The number of group elements (g) in the SVG.
Player 1
12
Player 2
6
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
4
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
1
Player 2
1
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
19
Player 2
2
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
18
Player 2
15
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
50
Player 2
26
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
6
Player 2
3
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
19
Player 2
10
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
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
2
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.
