GPT-4o
Challenge Creator
Creative Challenge
"A cactus wearing sunglasses playing a tiny guitar under a disco ball."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="bg-grad" cx="0.5" cy="0.2" r="1.2">
<stop offset="0%" stop-color="#6fd1f6"/>
<stop offset="60%" stop-color="#1d1f4c"/>
<stop offset="100%" stop-color="#0d0020"/>
</radialGradient>
<radialGradient id="cactus-grad" cx="0.5" cy="0.5" r="0.9">
<stop offset="0%" stop-color="#aef16c"/>
<stop offset="100%" stop-color="#277d3b"/>
</radialGradient>
<linearGradient id="arm-grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="15%" stop-color="#b9f3a2"/>
<stop offset="100%" stop-color="#1e5932"/>
</linearGradient>
<radialGradient id="ball-grad" cx="0.5" cy="0.5" r="0.8">
<stop offset="0%" stop-color="#fffffa" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#b4b9ff" stop-opacity="0.8"/>
</radialGradient>
<radialGradient id="shine" cx="0.5" cy="0.3" r="0.8">
<stop offset="0%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<linearGradient id="guitar-body" x1="0" y1="0" x2="1" y2="1">
<stop offset="18%" stop-color="#fff1c0"/>
<stop offset="90%" stop-color="#c17e44"/>
</linearGradient>
<linearGradient id="guitar-neck" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#c79d5a"/>
<stop offset="100%" stop-color="#975e28"/>
</linearGradient>
<radialGradient id="glare" cx="0.3" cy="0.4" r="0.6">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8"/>
<stop offset="1" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<linearGradient id="spike-lt" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f0ffc9"/>
<stop offset="100%" stop-color="#84ae50"/>
</linearGradient>
<linearGradient id="spike-dk" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#497c31"/>
<stop offset="100%" stop-color="#193511"/>
</linearGradient>
<radialGradient id="shadow-cast" cx="0.5" cy="0.5" r="0.7">
<stop offset="0%" stop-color="#26214a" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#1d1542" stop-opacity="0"/>
</radialGradient>
<linearGradient id="sun-lens" x1="0.2" y1="0.3" x2="0.8" y2="0.7">
<stop offset="0%" stop-color="#fff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#179bab" stop-opacity="0.7"/>
</linearGradient>
<!-- Pattern for disco ball tiles -->
<pattern id="db-tiles" width="9" height="9" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="9" height="9" fill="#d9dcff"/>
<rect x="0" y="0" width="4.5" height="4.5" fill="#f8f1fe" />
<rect x="4.5" y="4.5" width="4.5" height="4.5" fill="#a3ade1" />
<rect x="0" y="4.5" width="4.5" height="4.5" fill="#dee0ff" />
<rect x="4.5" y="0" width="4.5" height="4.5" fill="#b4bdff" />
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bg-grad)" />
<!-- Sparkles from disco ball -->
<g>
<g opacity="0.3">
<ellipse cx="165" cy="54" rx="98" ry="16" fill="url(#glare)" transform="rotate(-18 165 54)" />
<ellipse cx="165" cy="54" rx="98" ry="12" fill="url(#glare)" transform="rotate(15 165 54)" />
<ellipse cx="165" cy="54" rx="68" ry="10" fill="url(#glare)" transform="rotate(-47 165 54)" />
</g>
<!-- Sparkle dots (disco ball beams) -->
<g>
<circle cx="75" cy="58" r="2.5" fill="#fffbe7" opacity="0.55"/>
<circle cx="225" cy="67" r="2.6" fill="#dbfcfa" opacity="0.35"/>
<circle cx="110" cy="24" r="1.7" fill="#fff0eb" opacity="0.7"/>
<circle cx="190" cy="23" r="2.1" fill="#ffe9ef" opacity="0.6"/>
<circle cx="260" cy="74" r="1.8" fill="#f2e2ff" opacity="0.8"/>
<circle cx="52" cy="85" r="1.6" fill="#c0ffee" opacity="0.56"/>
</g>
</g>
<!-- Disco Ball & Chain -->
<g>
<rect x="163.7" y="14" width="2.6" height="16" rx="1.2" fill="#adb4d5"/>
<circle cx="165" cy="52" r="28" fill="url(#ball-grad)" stroke="#cfd8fb" stroke-width="3" />
<circle cx="165" cy="52" r="25" fill="url(#db-tiles)" opacity="0.95"/>
<!-- Glare + Shine -->
<ellipse cx="162" cy="47" rx="11" ry="7" fill="url(#shine)" opacity="0.6"/>
<ellipse cx="170" cy="54" rx="7" ry="3.5" fill="url(#shine)" opacity="0.45"/>
<!-- Sparkle highlight -->
<g>
<ellipse cx="154" cy="38" rx="1.6" ry="2.9" fill="#fff" opacity="0.7"/>
<ellipse cx="172" cy="32" rx="1.3" ry="1.7" fill="#fff" opacity="0.8"/>
<ellipse cx="181" cy="50" rx="2.1" ry="1.3" fill="#fff" opacity="0.7"/>
</g>
</g>
<!-- Cactus main body -->
<g id="cactus">
<!-- Shadow on ground -->
<ellipse cx="140" cy="242" rx="44" ry="12.5" fill="url(#shadow-cast)"/>
<!-- Body -->
<ellipse cx="140" cy="170" rx="43" ry="80" fill="url(#cactus-grad)" stroke="#237143" stroke-width="6"/>
<!-- Subtle vertical stripes (metaphor for a party hat pattern) -->
<g opacity="0.14">
<rect x="131" y="98" width="4" height="143" rx="2" fill="#fff"/>
<rect x="149" y="98" width="4" height="143" rx="2" fill="#fff"/>
<rect x="139" y="98" width="2" height="143" rx="1" fill="#fff"/>
</g>
<!-- Left Arm -->
<g>
<path d="M92 171 Q47 132 74 109 Q101 86 117 136 Q121 166 98 178Z" fill="url(#arm-grad)" stroke="#236a37" stroke-width="4"/>
</g>
<!-- Right Arm -->
<g>
<path d="M188 185 Q240 157 215 110 Q190 63 170 120 Q158 170 192 185Z" fill="url(#arm-grad)" stroke="#236a37" stroke-width="4"/>
</g>
<!-- Face shadow (party mood) -->
<ellipse cx="140" cy="169" rx="37" ry="40" fill="#164e27" opacity="0.11"/>
<!-- Mouth (smile) -->
<path d="M128 172 Q140 186 154 172" stroke="#202109" stroke-width="5" fill="none" stroke-linecap="round"/>
<!-- Spikes - main body -->
<g>
<rect x="140" y="98" width="3" height="15" rx="1.5" fill="url(#spike-lt)" transform="rotate(-16 141.5 98)"/>
<rect x="127" y="115" width="3" height="13" rx="1.5" fill="url(#spike-lt)" transform="rotate(8 128.5 115)"/>
<rect x="120" y="148" width="3" height="12" rx="1.5" fill="url(#spike-dk)" transform="rotate(-12 121.5 148)"/>
<rect x="140" y="187" width="3" height="13" rx="1.5" fill="url(#spike-dk)" transform="rotate(12 141.5 187)"/>
<rect x="157" y="167" width="2.5" height="10" rx="1.5" fill="url(#spike-lt)" transform="rotate(1 158 172)"/>
<rect x="135" y="220" width="2" height="10" rx="1" fill="url(#spike-lt)" transform="rotate(-8 136 222)"/>
<rect x="152" y="135" width="2.1" height="8.5" rx="1" fill="url(#spike-dk)" transform="rotate(-9 153 139)"/>
<!-- Spikes - left arm -->
<rect x="80" y="120" width="2" height="7" rx="1" fill="url(#spike-dk)" transform="rotate(-22 81 123)"/>
<rect x="96" y="150" width="2" height="7" rx="1" fill="url(#spike-lt)" transform="rotate(30 97 154)"/>
<!-- Spikes - right arm -->
<rect x="208" y="124" width="2" height="7" rx="1" fill="url(#spike-dk)" transform="rotate(-15 209 127)"/>
<rect x="190" y="155" width="2" height="7" rx="1" fill="url(#spike-lt)" transform="rotate(13 191 159)"/>
</g>
<!-- Cheek blush -->
<ellipse cx="125" cy="170" rx="8" ry="3.5" fill="#ffbbb7" opacity="0.5"/>
<ellipse cx="155" cy="170" rx="8" ry="3.5" fill="#ffb7dd" opacity="0.6"/>
<!-- Sunglasses -->
<g>
<ellipse cx="124" cy="148" rx="16" ry="8.5" fill="#14234a" stroke="#171a13" stroke-width="4"/>
<ellipse cx="157" cy="149" rx="15" ry="7.5" fill="#1d2f59" stroke="#171a13" stroke-width="4"/>
<!-- Glass glare -->
<ellipse cx="118" cy="145" rx="6" ry="2.3" fill="url(#glare)" opacity="0.27"/>
<ellipse cx="150" cy="146" rx="4" ry="1.2" fill="url(#sun-lens)" opacity="0.22"/>
<!-- Bridge -->
<rect x="140" y="147" width="6" height="4" rx="2" fill="#211f2d"/>
<!-- Bottom rim shadow (style)-->
<path d="M138 155 Q140 156.8 142 155" stroke="#090644" stroke-width="2" fill="none"/>
<path d="M151 155 Q155 157 159 154.6" stroke="#241177" stroke-width="2" fill="none"/>
<!-- Arms of sunglasses -->
<rect x="106" y="148" width="8" height="2.2" rx="0.8" fill="#180b36" transform="rotate(-17 110 149)"/>
<rect x="163" y="150" width="10" height="2.2" rx="0.8" fill="#1e1d2d" transform="rotate(10 168 151)"/>
</g>
</g>
<!-- Tiny Guitar (in front of cactus body, right hand) -->
<g id="guitar">
<!-- Shadow of guitar -->
<ellipse cx="196" cy="205" rx="9" ry="4" fill="#7b4300" opacity="0.29"/>
<!-- Guitar body (main) -->
<ellipse cx="190" cy="197" rx="13" ry="8" fill="url(#guitar-body)" stroke="#9d632a" stroke-width="2"/>
<!-- Soundhole -->
<ellipse cx="191.5" cy="198.5" rx="2.3" ry="2.3" fill="#47321d" opacity="0.56"/>
<!-- Pickguard (stylized shape) -->
<ellipse cx="193" cy="200" rx="3" ry="1.5" fill="#810d1a" opacity="0.36"/>
<!-- Bridge -->
<rect x="192.7" y="202" width="4.2" height="2.2" rx="1.1" fill="#34382d" />
<!-- Guitar Neck -->
<rect x="199.4" y="194.8" width="25" height="3.4" rx="1.7" fill="url(#guitar-neck)" stroke="#633f12" stroke-width="1.1"/>
<!-- Frets (little lines) -->
<rect x="207.3" y="195.3" width="1.2" height="2.2" fill="#e5dec0"/>
<rect x="213.3" y="195.3" width="1.2" height="2.2" fill="#ece2c2"/>
<rect x="220" y="195.3" width="1.2" height="2.2" fill="#ede7cf"/>
<!-- Guitar headstock -->
<ellipse cx="225.3" cy="196.5" rx="2.3" ry="2.1" fill="#9b6832" stroke="#633f12" stroke-width="0.9"/>
<!-- Tuning pegs -->
<circle cx="227.1" cy="196" r="0.6" fill="#ecede5"/>
<circle cx="225.3" cy="194.4" r="0.7" fill="#c5ac69"/>
<circle cx="223.5" cy="196.8" r="0.7" fill="#f1e4a7"/>
<!-- Strings -->
<g>
<rect x="200.5" y="196.5" width="23.6" height="0.45" fill="#fdd880"/>
<rect x="201" y="198" width="23.6" height="0.3" fill="#ddba60"/>
<rect x="200.9" y="197" width="23.6" height="0.18" fill="#ffe9a8" />
</g>
</g>
<!-- Right cactus hand grabbing guitar -->
<g>
<ellipse cx="199" cy="193" rx="3.25" ry="7.25" fill="url(#arm-grad)" stroke="#246037" stroke-width="1"/>
<!-- Spikes on hand -->
<rect x="196.2" y="186" width="1.1" height="3.2" rx="0.6" fill="url(#spike-dk)" transform="rotate(-20 196.7 187.6)"/>
<rect x="200.6" y="197" width="1.1" height="3.2" rx="0.6" fill="url(#spike-lt)" transform="rotate(22 201.2 198.4)"/>
</g>
<!-- Stylized Music Notes Dancing -->
<g>
<g opacity="0.93">
<!-- Eighth note above guitar -->
<path d="M218 180 q7 -1 8 -6 v17 q-0.7 3 -4 3.5 t-4 -3.6 q1 -3.5 4 -2.5 q2.2 2 -1 2.1" stroke="#201b6e" stroke-width="2" fill="none" />
<circle cx="218" cy="185" r="3.5" fill="#fc99bf" stroke="#12003f" stroke-width="1"/>
</g>
<g opacity="0.73">
<!-- Sixteenth note near left arm -->
<path d="M84 165 q-7 1 -8 6 v-17 q0.7 -3 4 -3.5 t4 3.6 q-1 3.5 -4 2.5 q-2.2 -2 1 -2.1" stroke="#179bab" stroke-width="2" fill="none" />
<ellipse cx="84" cy="160" rx="3.2" ry="2.8" fill="#aee5ff" stroke="#005772" stroke-width="1"/>
</g>
<g opacity="0.82">
<!-- Quarter note above head -->
<rect x="146" y="113" width="2" height="12" rx="0.8" fill="#2b1c7b"/>
<ellipse cx="147" cy="123" rx="4.2" ry="2.7" fill="#ea91ff" stroke="#561eb2" stroke-width="1.2"/>
</g>
</g>
<!-- Dancefloor tiles at very bottom (visual metaphor, party) -->
<g>
<rect x="52" y="238" width="20" height="14" rx="3" fill="#6fd1f6" opacity="0.66"/>
<rect x="72" y="238" width="20" height="14" rx="3" fill="#ffe59f" opacity="0.41"/>
<rect x="92" y="238" width="20" height="14" rx="3" fill="#ee9afe" opacity="0.59"/>
<rect x="112" y="238" width="20" height="14" rx="3" fill="#c7f7d8" opacity="0.48"/>
<rect x="132" y="238" width="20" height="14" rx="3" fill="#fff986" opacity="0.56"/>
<rect x="152" y="238" width="20" height="14" rx="3" fill="#7a96e3" opacity="0.54"/>
<rect x="172" y="238" width="20" height="14" rx="3" fill="#f2c799" opacity="0.52"/>
<rect x="192" y="238" width="20" height="14" rx="3" fill="#ffb4c8" opacity="0.6"/>
<rect x="212" y="238" width="20" height="14" rx="3" fill="#b7ffbe" opacity="0.55"/>
</g>
<!-- Glow behind cactus (party atmosphere) -->
<ellipse cx="140" cy="190" rx="70" ry="38" fill="#ffdfee" opacity="0.19" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="disco-ball" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" />
<stop offset="100%" stop-color="#eee" />
</radialGradient>
<pattern id="cactus-texture" width="5" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0l5 5m-5 5l5-5" stroke="#228B22" stroke-width="1" />
</pattern>
</defs>
<circle cx="100" cy="50" r="30" fill="url(#disco-ball)" />
<g transform="translate(150 120)">
<path d="M0 0c-20 0 -20 100 -20 100s20 100 40 100s40 -100 20 -100s-20 -100 -40 -100z" fill="url(#cactus-texture)" stroke="#006400" stroke-width="3" />
<ellipse cx="10" cy="70" rx="5" ry="8" fill="#000" />
<ellipse cx="30" cy="70" rx="5" ry="8" fill="#000" />
<path d="M0 100c0 0 10 -20 20 -20s20 20 20 20" fill="#8B4513" stroke="#A0522D" stroke-width="2"/>
<rect x="5" y="120" width="30" height="5" rx="2" fill="#8B4513" stroke="#A0522D" stroke-width="1" />
<polyline points="10,125 5,140 15,140" fill="none" stroke="#A0522D" stroke-width="1"/>
<polyline points="30,125 35,140 25,140" fill="none" stroke="#A0522D" stroke-width="1"/>
<rect x="10" y="40" width="20" height="10" rx="5" fill="#000" stroke="#000" stroke-width="1"/>
<line x1="10" y1="50" x2="5" y2="60" stroke="#000" stroke-width="1"/>
<line x1="30" y1="50" x2="35" y2="60" stroke="#000" stroke-width="1"/>
</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 submission is highly creative and adheres to the prompt in an engaging way.
The cactus is clearly wearing sunglasses, playing a tiny guitar, and positioned under a disco ball with vibrant lighting effects.
In contrast, Player 2's submission lacks detail and does not fully capture the fun and playful nature of the idea, making Player 1 the clear winner in both visual appeal and adherence to the theme.
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
89
Player 2
12
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
44
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
12
Player 2
1
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
26
Player 2
2
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
2
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
7
Player 2
3
Groups
The number of group elements (g) in the SVG.
Player 1
19
Player 2
1
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
12
Player 2
1
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
—
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
35
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
18
Player 2
9
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
84
Player 2
7
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
18
Player 2
1
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
30
Player 2
13
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
13
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.
