GPT-4o
Challenge Creator
Creative Challenge
"A cactus wearing sunglasses under a disco ball."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="cactusBody" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#d9ffbd"/>
<stop offset="60%" stop-color="#56c47a"/>
<stop offset="100%" stop-color="#288e4c"/>
</radialGradient>
<radialGradient id="leftArm" cx="30%" cy="20%" r="90%">
<stop offset="0%" stop-color="#bdf2aa"/>
<stop offset="100%" stop-color="#3d9650"/>
</radialGradient>
<radialGradient id="rightArm" cx="70%" cy="20%" r="90%">
<stop offset="0%" stop-color="#c4ffdf"/>
<stop offset="100%" stop-color="#22ad61"/>
</radialGradient>
<linearGradient id="potBase" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f47743"/>
<stop offset="100%" stop-color="#bb3c14"/>
</linearGradient>
<radialGradient id="potHighlight" cx="35%" cy="40%" r="60%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.13"/>
<stop offset="100%" stop-color="#f47743" stop-opacity="0"/>
</radialGradient>
<radialGradient id="discoBall" cx="50%" cy="55%" r="65%">
<stop offset="0%" stop-color="#fffde4"/>
<stop offset="50%" stop-color="#d4edfa"/>
<stop offset="100%" stop-color="#a0a9b3"/>
</radialGradient>
<radialGradient id="shineSpot" cx="20%" cy="15%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.43"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<linearGradient id="sunglassFrame" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#20232a"/>
<stop offset="100%" stop-color="#3a3f4f"/>
</linearGradient>
<radialGradient id="sunglassLensL" cx="50%" cy="55%" r="80%">
<stop offset="0%" stop-color="#9ae6fc"/>
<stop offset="60%" stop-color="#187d98"/>
<stop offset="100%" stop-color="#053047"/>
</radialGradient>
<radialGradient id="sunglassLensR" cx="55%" cy="60%" r="80%">
<stop offset="0%" stop-color="#c2f6f8"/>
<stop offset="60%" stop-color="#1a8da9"/>
<stop offset="100%" stop-color="#235478"/>
</radialGradient>
<!-- Patterns for disco ball -->
<pattern id="discoPattern" patternUnits="userSpaceOnUse" width="16" height="16">
<rect x="0" y="0" width="8" height="8" fill="#eff8ff" opacity="0.88"/>
<rect x="8" y="0" width="8" height="8" fill="#b7e0fb" opacity="0.86"/>
<rect x="0" y="8" width="8" height="8" fill="#cedbfa" opacity="0.94"/>
<rect x="8" y="8" width="8" height="8" fill="#bbbacf" opacity="0.94"/>
<rect x="3" y="3" width="3" height="3" fill="#fff" opacity="0.7"/>
</pattern>
<!-- Spike gradient -->
<linearGradient id="spikeGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fcebcb"/>
<stop offset="100%" stop-color="#e6af25"/>
</linearGradient>
<radialGradient id="shadow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#000" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background Glow for Disco Dance Mood -->
<ellipse cx="150" cy="190" rx="120" ry="80" fill="url(#shadow)" />
<!-- Disco Ball Chain -->
<rect x="143" y="20" width="3.5" height="35" fill="#dfe8f8" opacity="0.8"/>
<rect x="143" y="25" width="3.5" height="4" fill="#dfe8f8" opacity="0.4"/>
<circle cx="145.75" cy="20" r="4" fill="#c8d3df" stroke="#fff" stroke-width="1.1"/>
<!-- Disco Ball -->
<g>
<circle cx="145.75" cy="52" r="34" fill="url(#discoBall)" stroke="#dbeafe" stroke-width="3"/>
<circle cx="145.75" cy="52" r="33" fill="url(#discoPattern)" />
<ellipse cx="140" cy="41" rx="8" ry="3.6" fill="url(#shineSpot)" />
<!-- Mirror tile highlights -->
<rect x="133" y="56" width="7" height="3" fill="#fff" opacity="0.29"/>
<rect x="159" y="40" width="4" height="3" fill="#fff" opacity="0.19"/>
<rect x="165" y="60" width="5" height="4.2" fill="#fff" opacity="0.17"/>
<rect x="142" y="31" width="3.5" height="6" fill="#f7f8f3" opacity="0.20"/>
<!-- Disco light rays -->
<g>
<g>
<polygon points="145.75,52 156,13 137,13" fill="#fff" opacity="0.13"/>
<polygon points="145.75,52 178,25 174,18" fill="#fff" opacity="0.07"/>
<polygon points="145.75,52 202,60 208,53" fill="#fff" opacity="0.07"/>
<polygon points="145.75,52 160,88 168,86" fill="#fff" opacity="0.13"/>
<polygon points="145.75,52 130,88 123,86" fill="#fff" opacity="0.13"/>
<polygon points="145.75,52 105,65 97,70" fill="#fff" opacity="0.08"/>
<polygon points="145.75,52 120,21 116,16" fill="#fff" opacity="0.08"/>
</g>
</g>
</g>
<!-- Cactus Pot -->
<g>
<ellipse cx="150" cy="238" rx="41" ry="10" fill="#b34c21" opacity="0.43"/>
<ellipse cx="150" cy="230.5" rx="36" ry="8.8" fill="#c47a3a"/>
<rect x="116" y="180" width="68" height="50" rx="20" fill="url(#potBase)" />
<ellipse cx="150" cy="180" rx="34" ry="12" fill="#dfe0db" opacity="0.19"/>
<ellipse cx="150" cy="181.5" rx="33" ry="9.8" fill="url(#potBase)" stroke="#b37346" stroke-width="2.2"/>
<ellipse cx="142" cy="192" rx="19" ry="6.5" fill="url(#potHighlight)" opacity="0.45"/>
</g>
<!-- Cactus Body (main trunk) -->
<g>
<ellipse cx="150" cy="120" rx="41" ry="70" fill="url(#cactusBody)" stroke="#519467" stroke-width="2.2"/>
<!-- Left Arm -->
<ellipse cx="90" cy="115" rx="20" ry="45" fill="url(#leftArm)" stroke="#519467" stroke-width="2"/>
<!-- Right Arm -->
<ellipse cx="210" cy="112" rx="18" ry="43" fill="url(#rightArm)" stroke="#519467" stroke-width="2"/>
<!-- Overlay to join arms naturally -->
<ellipse cx="150" cy="120" rx="41" ry="53" fill="url(#cactusBody)" opacity="0.54"/>
</g>
<!-- Spikes -->
<g>
<!-- main body spikes -->
<g>
<rect x="150" y="67" width="2" height="9" rx="1" fill="url(#spikeGrad)" transform="rotate(-6 151 71)"/>
<rect x="170" y="84" width="2" height="8" rx="1" fill="url(#spikeGrad)" transform="rotate(12 171 88)"/>
<rect x="147" y="134" width="2" height="9" rx="1" fill="url(#spikeGrad)" transform="rotate(1 148 138)"/>
<rect x="134" y="81" width="2" height="9" rx="1" fill="url(#spikeGrad)" transform="rotate(-19 135 85)"/>
<rect x="128" y="120" width="2" height="9" rx="1" fill="url(#spikeGrad)" transform="rotate(-10 129 124)"/>
<rect x="168" y="103" width="2" height="12" rx="1" fill="url(#spikeGrad)" transform="rotate(8 169 109)"/>
<rect x="136" y="180" width="2" height="9" rx="1" fill="url(#spikeGrad)" transform="rotate(-6 137 185)"/>
<rect x="160" y="171" width="2" height="7" rx="1" fill="url(#spikeGrad)" transform="rotate(6 161 174)"/>
<rect x="154" y="109" width="2" height="8.5" rx="1" fill="url(#spikeGrad)" transform="rotate(4 155 113)"/>
</g>
<!-- left arm spikes -->
<g>
<rect x="103" y="100" width="2" height="8" rx="1" fill="url(#spikeGrad)" transform="rotate(-20 104 104)"/>
<rect x="93" y="138" width="2" height="8" rx="1" fill="url(#spikeGrad)" transform="rotate(-8 94 142)"/>
<rect x="84" y="117" width="2" height="7" rx="1" fill="url(#spikeGrad)" transform="rotate(-35 85 120)"/>
<rect x="110" y="78" width="2" height="7" rx="1" fill="url(#spikeGrad)" transform="rotate(-15 111 81)"/>
</g>
<!-- right arm spikes -->
<g>
<rect x="202" y="102" width="2" height="8" rx="1" fill="url(#spikeGrad)" transform="rotate(14 203 104)"/>
<rect x="214" y="130" width="2" height="7" rx="1" fill="url(#spikeGrad)" transform="rotate(9 215 133)"/>
<rect x="199" y="80" width="2" height="7" rx="1" fill="url(#spikeGrad)" transform="rotate(12 200 83)"/>
<rect x="186" y="120" width="2" height="7.5" rx="1" fill="url(#spikeGrad)" transform="rotate(5 187 124)"/>
</g>
</g>
<!-- Stylish Sunglasses -->
<g>
<!-- Frame bridge -->
<rect x="144" y="104" width="12.6" height="8" rx="4" fill="url(#sunglassFrame)" stroke="#171a21" stroke-width="1.8" transform="skewY(-6)"/>
<!-- Left Glass -->
<ellipse cx="140" cy="108" rx="19" ry="13" fill="url(#sunglassLensL)" stroke="url(#sunglassFrame)" stroke-width="4"/>
<!-- Right Glass -->
<ellipse cx="170.5" cy="108" rx="19" ry="13" fill="url(#sunglassLensR)" stroke="url(#sunglassFrame)" stroke-width="4"/>
<!-- Sparkle on Left Lens-->
<ellipse cx="133" cy="103" rx="5.2" ry="2.1" fill="#fff" opacity="0.3"/>
<rect x="136" y="114" width="5" height="1.6" rx="3" fill="#fff" opacity="0.18" transform="rotate(-9 138.5 114.8)"/>
<!-- Sparkle on Right Lens-->
<ellipse cx="176" cy="104" rx="4.4" ry="2.0" fill="#fff" opacity="0.24"/>
<rect x="172" y="111" width="6" height="1.4" rx="2.2" fill="#fff" opacity="0.13" transform="rotate(11 176 112)"/>
<!-- Funky frame lines -->
<path d="M120,106 Q116,96 130,102" stroke="#2a283c" stroke-width="3" fill="none" />
<path d="M190,106 Q193,97 179,102" stroke="#2a283c" stroke-width="3" fill="none" />
<!-- Reflection in the bridge -->
<rect x="150.8" y="108.5" width="4.5" height="2.2" rx="1.2" fill="#dffafd" opacity="0.2" transform="rotate(-3 153 109.6)"/>
</g>
<!-- Funky Smile for Coolness -->
<path d="M135,145 Q150,163 165,145" stroke="#2e492d" stroke-width="3.2" fill="none" stroke-linecap="round"/>
<!-- Dance Floor Reflection Ellipse -->
<ellipse cx="152" cy="242" rx="26" ry="7" fill="#52877a" opacity="0.17"/>
<!-- Sparkles in the air for disco effect -->
<g>
<circle cx="65" cy="48" r="2.5" fill="#fff6cf" opacity="0.66"/>
<circle cx="76" cy="112" r="1.6" fill="#ffd1fa" opacity="0.59"/>
<circle cx="245" cy="36" r="1.9" fill="#e8fffe" opacity="0.75"/>
<circle cx="258" cy="65" r="2.6" fill="#fff" opacity="0.54"/>
<circle cx="198" cy="24" r="1.6" fill="#fffbbd" opacity="0.7"/>
<circle cx="222" cy="99" r="2.1" fill="#f7e1ff" opacity="0.7"/>
<circle cx="200" cy="70" r="1.3" fill="#fffdf6" opacity="0.7"/>
</g>
<!-- Star-shaped sparkles -->
<g>
<polygon points="96,72 97.7,75.7 101.7,76.3 98.6,78.8 99.6,82.7 96,80.5 92.4,82.7 93.4,78.8 90.3,76.3 94.3,75.7"
fill="#fff" opacity="0.67" />
<polygon points="216,38 217.1,40.2 219.5,40.5 217.9,42.1 218.3,44.5 216,43.3 213.7,44.5
214.1,42.1 212.5,40.5 214.9,40.2" fill="#f7deff" opacity="0.7"/>
<polygon points="115,44 115.8,46 117.9,46.2 116.4,47.5 116.8,49.5 115,48.7 113.2,49.5
113.6,47.5 112.1,46.2 114.2,46" fill="#fff" opacity="0.44"/>
</g>
</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="#eee" />
<stop offset="100%" stop-color="#777" />
</radialGradient>
<pattern id="cactus-texture" width="5" height="10" patternUnits="userSpaceOnUse">
<path d="M0 0l5 10M2.5 0l2.5 10" stroke="#273F19" stroke-width="1" />
</pattern>
</defs>
<circle cx="150" cy="70" r="40" fill="url(#disco-ball)" />
<g transform="translate(110 120)">
<path d="M20 0Q40 -20 60 0L60 130Q50 150 40 130L40 80Q30 60 20 80L20 130Q10 150 0 130L0 0Z" fill="url(#cactus-texture)" stroke="#3F6729" stroke-width="3" />
<ellipse cx="30" cy="40" rx="15" ry="8" fill="#000" />
<ellipse cx="50" cy="40" rx="15" ry="8" fill="#000" />
<path d="M15 50C15 60 55 60 55 50" stroke="#000" stroke-width="3" fill="none" />
<path d="M20 85a5 5 0 0 0 -10 0" fill="pink" stroke="darkred" stroke-width="1" />
<path d="M50 85a5 5 0 0 1 -10 0" fill="pink" stroke="darkred" stroke-width="1" />
<path d="M30 100a5 5 0 0 0 -10 0" fill="pink" stroke="darkred" stroke-width="1" />
</g>
<g transform="translate(150 60)">
<rect x="-5" y="-5" width="10" height="10" fill="white" />
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" repeatCount="indefinite"/>
</g>
<g transform="translate(130 60)">
<rect x="-3" y="-3" width="6" height="6" fill="white" />
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="-360 0 0" dur="7s" repeatCount="indefinite"/>
</g>
<g transform="translate(170 60)">
<rect x="-3" y="-3" width="6" height="6" fill="white" />
<animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="5s" repeatCount="indefinite"/>
</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 adheres more closely to the prompt with a clear representation of a cactus wearing sunglasses under a disco ball.
The design showcases creativity with its cheerful expression, vibrant colors, and added sparkle effects that enhance visual appeal.
Player 2's submission is abstract and less recognizable as a cactus or the given theme, making Player 1's submission stronger in technical quality and adherence to the prompt.
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
72
Player 2
12
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
33
Player 2
3
Circles
The number of circle elements (circle) in the SVG.
Player 1
10
Player 2
1
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
16
Player 2
2
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
10
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
3
Player 2
6
Groups
The number of group elements (g) in the SVG.
Player 1
12
Player 2
4
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
38
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
12
Player 2
6
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
49
Player 2
8
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
3
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
21
Player 2
4
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
6
Player 2
22
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
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.
