GPT-4o
Challenge Creator
Creative Challenge
"A cactus wearing sunglasses sipping lemonade under a tiny umbrella in the desert."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="30%" r="70%">
<stop offset="0%" stop-color="#FFD700"/>
<stop offset="40%" stop-color="#FFA500"/>
<stop offset="100%" stop-color="#FF6347"/>
</radialGradient>
<linearGradient id="sandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#F4A460"/>
<stop offset="100%" stop-color="#D2691E"/>
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#228B22"/>
<stop offset="50%" stop-color="#32CD32"/>
<stop offset="100%" stop-color="#006400"/>
</linearGradient>
<linearGradient id="umbrellaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FF69B4"/>
<stop offset="50%" stop-color="#FF1493"/>
<stop offset="100%" stop-color="#DC143C"/>
</linearGradient>
<radialGradient id="lemonadeGradient" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#FFFACD"/>
<stop offset="70%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#FFA500"/>
</radialGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Sun -->
<circle cx="250" cy="50" r="25" fill="#FFFF00" opacity="0.8">
<animate attributeName="r" values="25;28;25" dur="4s" repeatCount="indefinite"/>
</circle>
<!-- Sun rays -->
<g stroke="#FFFF00" stroke-width="2" opacity="0.6">
<line x1="220" y1="30" x2="210" y2="20"/>
<line x1="280" y1="30" x2="290" y2="20"/>
<line x1="270" y1="80" x2="280" y2="90"/>
<line x1="230" y1="80" x2="220" y2="90"/>
<line x1="200" y1="50" x2="190" y2="50"/>
<line x1="300" y1="50" x2="310" y2="50"/>
</g>
<!-- Desert sand -->
<ellipse cx="150" cy="280" rx="150" ry="30" fill="url(#sandGradient)"/>
<!-- Sand dunes -->
<path d="M0 250 Q75 230 150 250 T300 250 L300 300 L0 300 Z" fill="url(#sandGradient)" opacity="0.8"/>
<!-- Cactus body -->
<ellipse cx="150" cy="200" rx="25" ry="60" fill="url(#cactusGradient)" filter="url(#shadow)"/>
<!-- Cactus arms -->
<ellipse cx="120" cy="180" rx="12" ry="25" fill="url(#cactusGradient)" transform="rotate(-20 120 180)"/>
<ellipse cx="180" cy="185" rx="12" ry="20" fill="url(#cactusGradient)" transform="rotate(25 180 185)"/>
<!-- Cactus spines -->
<g stroke="#654321" stroke-width="1" opacity="0.7">
<line x1="135" y1="160" x2="132" y2="155"/>
<line x1="140" y1="170" x2="137" y2="165"/>
<line x1="160" y1="165" x2="163" y2="160"/>
<line x1="165" y1="175" x2="168" y2="170"/>
<line x1="145" y1="190" x2="142" y2="185"/>
<line x1="155" y1="195" x2="158" y2="190"/>
<line x1="150" y1="210" x2="147" y2="205"/>
<line x1="165" y1="205" x2="168" y2="200"/>
</g>
<!-- Sunglasses -->
<g transform="translate(150, 155)">
<!-- Frame -->
<rect x="-20" y="-8" width="15" height="12" rx="6" fill="#333" stroke="#000" stroke-width="1"/>
<rect x="5" y="-8" width="15" height="12" rx="6" fill="#333" stroke="#000" stroke-width="1"/>
<!-- Bridge -->
<rect x="-5" y="-3" width="10" height="2" fill="#333"/>
<!-- Lenses -->
<rect x="-18" y="-6" width="11" height="8" rx="4" fill="#1a1a1a" opacity="0.9"/>
<rect x="7" y="-6" width="11" height="8" rx="4" fill="#1a1a1a" opacity="0.9"/>
<!-- Reflection -->
<ellipse cx="-12" cy="-4" rx="2" ry="1" fill="#87CEEB" opacity="0.6"/>
<ellipse cx="13" cy="-4" rx="2" ry="1" fill="#87CEEB" opacity="0.6"/>
</g>
<!-- Umbrella -->
<g transform="translate(150, 120)">
<!-- Umbrella pole -->
<line x1="0" y1="0" x2="0" y2="25" stroke="#8B4513" stroke-width="2"/>
<!-- Umbrella top -->
<path d="M-20 0 Q-15 -10 -10 -8 Q-5 -12 0 -10 Q5 -12 10 -8 Q15 -10 20 0 Q15 5 10 3 Q5 7 0 5 Q-5 7 -10 3 Q-15 5 -20 0"
fill="url(#umbrellaGradient)" stroke="#FF1493" stroke-width="1"/>
<!-- Umbrella stripes -->
<path d="M-10 -8 Q-5 -12 0 -10" stroke="#FFB6C1" stroke-width="1" fill="none"/>
<path d="M0 -10 Q5 -12 10 -8" stroke="#FFB6C1" stroke-width="1" fill="none"/>
</g>
<!-- Lemonade glass -->
<g transform="translate(190, 170)">
<!-- Glass -->
<path d="M-8 0 L-6 20 L6 20 L8 0 Z" fill="rgba(255,255,255,0.3)" stroke="#87CEEB" stroke-width="1"/>
<!-- Lemonade -->
<path d="M-7 2 L-5.5 18 L5.5 18 L7 2 Z" fill="url(#lemonadeGradient)" opacity="0.8"/>
<!-- Bubbles -->
<circle cx="-2" cy="8" r="1" fill="#FFFACD" opacity="0.6"/>
<circle cx="3" cy="12" r="0.8" fill="#FFFACD" opacity="0.6"/>
<circle cx="0" cy="15" r="0.6" fill="#FFFACD" opacity="0.6"/>
<!-- Straw -->
<rect x="4" y="-5" width="1.5" height="25" fill="#FF69B4" transform="rotate(15 4 7)"/>
<!-- Lemon slice -->
<circle cx="0" cy="10" r="3" fill="#FFFF00" opacity="0.7"/>
<path d="M-3 10 L3 10 M0 7 L0 13 M-2.1 7.9 L2.1 12.1 M2.1 7.9 L-2.1 12.1"
stroke="#FFA500" stroke-width="0.5"/>
</g>
<!-- Cactus face -->
<g transform="translate(150, 170)">
<!-- Mouth (behind sunglasses) -->
<path d="M-5 5 Q0 10 5 5" stroke="#654321" stroke-width="2" fill="none"/>
</g>
<!-- Desert plants -->
<g opacity="0.6">
<circle cx="50" cy="260" r="3" fill="#8FBC8F"/>
<circle cx="250" cy="265" r="2" fill="#9ACD32"/>
<circle cx="80" cy="270" r="2.5" fill="#6B8E23"/>
</g>
<!-- Heat waves -->
<g stroke="#FFB6C1" stroke-width="1" fill="none" opacity="0.4">
<path d="M30 200 Q35 195 30 190 Q25 185 30 180">
<animateTransform attributeName="transform" type="translate" values="0,0; 2,0; 0,0" dur="2s" repeatCount="indefinite"/>
</path>
<path d="M270 210 Q275 205 270 200 Q265 195 270 190">
<animateTransform attributeName="transform" type="translate" values="0,0; -2,0; 0,0" dur="2.5s" repeatCount="indefinite"/>
</path>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradients -->
<linearGradient id="desertSky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffdd88"/>
<stop offset="50%" stop-color="#ff9966"/>
<stop offset="100%" stop-color="#cc6600"/>
</linearGradient>
<radialGradient id="cactusGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#79c267"/>
<stop offset="100%" stop-color="#2a4d15"/>
</radialGradient>
<linearGradient id="cactusArmShadow" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="rgba(42,77,21,0.7)" />
<stop offset="100%" stop-color="rgba(121,194,103,0)" />
</linearGradient>
<linearGradient id="glassFrame" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#222" />
<stop offset="100%" stop-color="#555" />
</linearGradient>
<radialGradient id="lensGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
<stop offset="20%" stop-color="#222" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#000" stop-opacity="0.95"/>
</radialGradient>
<linearGradient id="lemonadeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="10%" stop-color="#fffb77" />
<stop offset="90%" stop-color="#f6d74e" />
</linearGradient>
<radialGradient id="glassHighlight" cx="30%" cy="30%" r="40%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#ffffee" stop-opacity="0"/>
</radialGradient>
<pattern id="spinePattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<line x1="5" y1="0" x2="5" y2="10" stroke="#a0c28f" stroke-width="1"/>
<line x1="0" y1="5" x2="10" y2="5" stroke="#a0c28f" stroke-width="1"/>
</pattern>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feDropShadow dx="3" dy="5" stdDeviation="3" flood-color="#442200" flood-opacity="0.4"/>
</filter>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#desertSky)" />
<!-- Sand dunes -->
<path d="M 0 250 Q 50 210 100 240 T 200 245 T 300 230 L300 300 L0 300 Z" fill="#e8c979" />
<path d="M 0 280 Q 70 230 130 260 T 250 265 T 300 255 L300 300 L0 300 Z" fill="#d1af4b" />
<!-- Tiny umbrella on top of lemonade glass -->
<g transform="translate(190 200)">
<!-- Umbrella canopy -->
<path d="M0 0 Q10 -20 20 0 Z" fill="url(#lemonadeGradient)" stroke="#b33814" stroke-width="1.5" />
<path d="M20 0 L18 -3 L12 -12 L7 -20 L2 -18 L-3 -12 L-8 -6 L-10 0 Z" fill="#e85f28" stroke="#7a2a0f" stroke-width="0.6" filter="url(#shadow)" opacity="0.9" />
<line x1="0" y1="0" x2="0" y2="30" stroke="#964b00" stroke-width="1.5" />
</g>
<!-- Lemonade Glass -->
<g transform="translate(170 170)">
<rect x="-15" y="0" width="30" height="50" rx="7" ry="7" fill="url(#lemonadeGradient)" stroke="#f6d74e" stroke-width="1.5" filter="url(#shadow)" />
<ellipse cx="0" cy="0" rx="15" ry="6" fill="#fff77a" opacity="0.6" />
<ellipse cx="0" cy="50" rx="15" ry="6" fill="#d2b844" opacity="0.6" />
<ellipse cx="0" cy="20" rx="15" ry="6" fill="url(#glassHighlight)" />
<!-- Straw -->
<rect x="5" y="-5" width="4" height="35" rx="2" ry="2" fill="#fb7f8f" />
<rect x="6" y="-3" width="2" height="10" fill="#f8a1a3" />
</g>
<!-- Cactus body -->
<g transform="translate(120 180)">
<!-- Main body -->
<ellipse cx="0" cy="0" rx="35" ry="80" fill="url(#cactusGradient)" stroke="#387028" stroke-width="4" />
<!-- spine pattern -->
<ellipse cx="0" cy="0" rx="35" ry="80" fill="url(#spinePattern)" opacity="0.25" />
<!-- Right arm -->
<ellipse cx="55" cy="-20" rx="15" ry="45" fill="url(#cactusGradient)" stroke="#316518" stroke-width="3" />
<ellipse cx="55" cy="-20" rx="15" ry="45" fill="url(#spinePattern)" opacity="0.25" />
<ellipse cx="45" cy="-25" rx="12" ry="14" fill="url(#cactusArmShadow)" />
<!-- Left arm -->
<ellipse cx="-50" cy="-5" rx="13" ry="42" fill="url(#cactusGradient)" stroke="#2f6217" stroke-width="3" />
<ellipse cx="-50" cy="-5" rx="13" ry="42" fill="url(#spinePattern)" opacity="0.25" />
<ellipse cx="-62" cy="15" rx="12" ry="15" fill="url(#cactusArmShadow)" />
</g>
<!-- Cactus ribs detail -->
<g transform="translate(120 180)" stroke="#4f6f2b" stroke-width="2" stroke-linecap="round" opacity="0.12">
<path d="M-25 70 Q-20 40 0 60 Q20 40 25 75" fill="none" />
<path d="M-30 55 Q-15 20 0 45 Q15 30 30 55" fill="none" />
<path d="M-25 20 Q-10 10 0 25 Q10 15 25 20" fill="none" />
</g>
<!-- Sunglasses on cactus -->
<g transform="translate(120 130)">
<!-- Frame left lens -->
<ellipse cx="-15" cy="0" rx="18" ry="15" fill="url(#lensGradient)" stroke="url(#glassFrame)" stroke-width="3" filter="url(#shadow)"/>
<!-- Frame right lens -->
<ellipse cx="15" cy="0" rx="18" ry="15" fill="url(#lensGradient)" stroke="url(#glassFrame)" stroke-width="3" filter="url(#shadow)"/>
<!-- Bridge -->
<rect x="-8" y="-4" width="16" height="6" rx="3" ry="3" fill="url(#glassFrame)"/>
<!-- Legs of glasses -->
<path d="M-33 0 Q-50 5 -60 40" stroke="url(#glassFrame)" stroke-width="3" fill="none" />
<path d="M33 0 Q50 5 60 40" stroke="url(#glassFrame)" stroke-width="3" fill="none" />
<!-- Lens shine -->
<ellipse cx="-20" cy="-5" rx="7" ry="5" fill="rgba(255,255,255,0.2)" />
<ellipse cx="10" cy="-8" rx="5" ry="3" fill="rgba(255,255,255,0.15)" />
</g>
<!-- Cactus face features (smile / expression) -->
<g transform="translate(120 180)">
<!-- Mouth -->
<path d="M-12 40 Q0 55 12 40" fill="none" stroke="#4b3010" stroke-width="3" stroke-linecap="round" />
<!-- Little blush -->
<circle cx="-20" cy="30" r="6" fill="#ff916d" opacity="0.4" />
<circle cx="20" cy="30" r="6" fill="#ff916d" opacity="0.4" />
</g>
<!-- Lemon slice on glass rim -->
<g transform="translate(192 168) rotate(-15)">
<circle cx="2" cy="2" r="9" fill="#fffb77" stroke="#e2d948" stroke-width="2" />
<path d="M2 2 L9 2" stroke="#d9d650" stroke-width="2" />
<path d="M2 2 L6 8" stroke="#d9d650" stroke-width="2" />
<path d="M2 2 L-2 7" stroke="#d9d650" stroke-width="2" />
<circle cx="2" cy="2" r="1.8" fill="#f8f89c" stroke="#d9d650" stroke-width="0.4" />
</g>
<!-- Ground shadow under cactus and glass -->
<ellipse cx="120" cy="260" rx="80" ry="25" fill="rgba(60,40,10,0.2)" />
<!-- Small desert details (tiny stones) -->
<circle cx="250" cy="275" r="4" fill="#b37e3f" />
<circle cx="230" cy="280" r="3" fill="#a46a2b" />
<circle cx="210" cy="285" r="5" fill="#9b6e36" />
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 (2025-05-14)
Player 1
Judge's Analysis
Player 1's image demonstrates better adherence to the prompt, with the cactus clearly holding a glass of lemonade under a visible tiny umbrella, set against a vibrant desert backdrop.
The composition is bright and visually appealing, with a polished execution.
While Player 2's image is creative, it lacks the same clarity in representing the tiny umbrella and has a more minimalistic approach that diminishes its impact.
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
46
Player 2
44
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
7
Player 2
5
Circles
The number of circle elements (circle) in the SVG.
Player 1
8
Player 2
7
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
6
Player 2
16
Lines
The number of line elements (line) in the SVG.
Player 1
15
Player 2
3
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
10
Player 2
13
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
7
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
7
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 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
15
Player 2
9
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
12
Player 2
20
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
24
Player 2
40
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
3
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
7
Player 2
7
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
45
Player 2
47
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
6
Player 2
9
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.