GPT-4o
Challenge Creator
Creative Challenge
"An upside-down tree floating above a serene desert landscape."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Desert dunes gradient -->
<linearGradient id="desertGrad" x1="0" y1="170" x2="0" y2="300" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fdecba"/>
<stop offset="25%" stop-color="#fae4a0"/>
<stop offset="65%" stop-color="#edd09d"/>
<stop offset="100%" stop-color="#fcca65"/>
</linearGradient>
<!-- Sky gradient -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="170" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#61b5e9"/>
<stop offset="70%" stop-color="#a5dff6"/>
<stop offset="100%" stop-color="#fdecba"/>
</linearGradient>
<!-- Tree trunk gradient -->
<linearGradient id="trunkGrad" x1="0" y1="0" x2="20" y2="150" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#633c18"/>
<stop offset="100%" stop-color="#b08963"/>
</linearGradient>
<!-- Tree leaf gradient -->
<radialGradient id="foliageGrad" cx="0.52" cy="0.45" r="0.55">
<stop offset="0%" stop-color="#90e273"/>
<stop offset="55%" stop-color="#22aa54"/>
<stop offset="100%" stop-color="#14613a"/>
</radialGradient>
<!-- Mirage effect for tree drop shadow -->
<radialGradient id="mirageGrad" cx="0.5" cy="0.41" r="0.5">
<stop offset="0%" stop-color="#e4d1ad" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#fede8d" stop-opacity="0"/>
</radialGradient>
<!-- Cloud gradient -->
<radialGradient id="cloudGrad" cx="0.5" cy="0.5" r="0.7">
<stop offset="0%" stop-color="#fff" stop-opacity="0.95"/>
<stop offset="100%" stop-color="#cde6fa" stop-opacity="0.85"/>
</radialGradient>
<!-- Highlight pattern for the sand -->
<pattern id="sandHighlight" patternUnits="userSpaceOnUse" width="50" height="30">
<ellipse cx="20" cy="16" rx="8" ry="3" fill="#fff8c6" opacity="0.21"/>
<ellipse cx="38" cy="25" rx="6" ry="2" fill="#fffbe9" opacity="0.13"/>
</pattern>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="170" fill="url(#skyGrad)" />
<!-- Clouds -->
<ellipse cx="70" cy="33" rx="32" ry="11" fill="url(#cloudGrad)" opacity="0.95"/>
<ellipse cx="220" cy="47" rx="20" ry="7" fill="url(#cloudGrad)" opacity="0.88"/>
<ellipse cx="120" cy="65" rx="24" ry="8" fill="url(#cloudGrad)" opacity="0.82"/>
<ellipse cx="250" cy="25" rx="13" ry="5" fill="url(#cloudGrad)" opacity="0.73"/>
<ellipse cx="160" cy="42" rx="13" ry="5" fill="url(#cloudGrad)" opacity="0.56"/>
<!-- Floating tree shadow / mirage on desert (blurry, ethereal) -->
<ellipse cx="150" cy="185" rx="48" ry="13" fill="url(#mirageGrad)" opacity="0.7"/>
<ellipse cx="149" cy="189" rx="29" ry="5" fill="url(#mirageGrad)" opacity="0.26"/>
<!-- Desert Dunes (wavy layered paths) -->
<g>
<path d="M0 170 Q50 160 110 185 Q160 200 210 180 Q250 170 300 192 L300 300 H0 Z"
fill="url(#desertGrad)"/>
<path d="M0 205 Q39 195 100 230 Q152 260 220 218 Q252 205 300 220 L300 300 H0 Z"
fill="url(#desertGrad)" opacity="0.93"/>
<path d="M0 260 Q60 250 120 275 Q190 295 300 257 L300 300 H0 Z"
fill="url(#desertGrad)" opacity="0.9"/>
<rect x="0" y="170" width="300" height="130" fill="url(#sandHighlight)" opacity="0.33"/>
</g>
<!-- Small pebbles and desert details -->
<ellipse cx="40" cy="242" rx="3" ry="2" fill="#f3c170" opacity="0.40"/>
<ellipse cx="120" cy="224" rx="2.2" ry="1" fill="#f6d699" opacity="0.7"/>
<ellipse cx="260" cy="271" rx="1.5" ry="0.8" fill="#eedd93" opacity="0.8"/>
<ellipse cx="210" cy="256" rx="2.2" ry="0.9" fill="#f9eaca" opacity="0.55"/>
<circle cx="99" cy="277" r="1.7" fill="#ede37e" opacity="0.64"/>
<ellipse cx="76" cy="196" rx="1.1" ry="0.7" fill="#fff5c6" opacity="0.27"/>
<ellipse cx="185" cy="235" rx="3" ry="1.1" fill="#e7b96e" opacity="0.5"/>
<!-- Upside-down floating tree group -->
<g>
<!-- Tree trunk -->
<rect x="139" y="83" width="22" height="70" rx="8" fill="url(#trunkGrad)" />
<!-- Trunk's root detail: stylized, upside-down roots -->
<path d="M145,83 Q144,78 140,66 Q146,75 150,83 Q154,77 160,67 Q156,80 155,83"
fill="none" stroke="#7a4d26" stroke-width="2" stroke-linecap="round"/>
<path d="M146,88 Q139,84 135,77 Q141,82 148,88 Q147,88 154,82 Q160,77 164,86 Q158,87 152,88"
fill="none" stroke="#a77d54" stroke-width="1.7" stroke-linecap="round" opacity="0.55"/>
<!-- Foliage highlights (filtered for some light glow) -->
<ellipse cx="150" cy="143" rx="31" ry="32" fill="url(#foliageGrad)" filter="url(#treeglow)" />
<ellipse cx="176" cy="131" rx="13" ry="13" fill="url(#foliageGrad)" opacity="0.65"/>
<ellipse cx="125" cy="127" rx="14" ry="15" fill="url(#foliageGrad)" opacity="0.63"/>
<ellipse cx="155" cy="110" rx="17" ry="12.5" fill="url(#foliageGrad)" opacity="0.52"/>
<ellipse cx="138" cy="103" rx="13" ry="9" fill="url(#foliageGrad)" opacity="0.47"/>
<!-- Foliage shadow for volume -->
<ellipse cx="150" cy="158" rx="26" ry="12" fill="#1b8037" opacity="0.16"/>
<!-- Tiny abstract flowers/leaves to accent foliage -->
<ellipse cx="162" cy="118" rx="2.8" ry="1.7" fill="#d3f9be" opacity="0.9"/>
<ellipse cx="140" cy="131" rx="2.2" ry="1.3" fill="#fffbe8" opacity="0.7"/>
<ellipse cx="130" cy="146" rx="2" ry="1.2" fill="#ffe08c" opacity="0.55"/>
<ellipse cx="170" cy="141" rx="1.3" ry="2.1" fill="#ffd5c2" opacity="0.55"/>
<ellipse cx="158" cy="152" rx="1.2" ry="1.2" fill="#bbeb8a" />
</g>
<!-- Faint floating aura around tree to emphasize levitation -->
<ellipse cx="150" cy="125" rx="47" ry="25" fill="#b5f8fd" opacity="0.25"/>
<ellipse cx="150" cy="125" rx="36" ry="16" fill="#fff8e6" opacity="0.12"/>
<!-- Tree subtle glow filter (for foliage) -->
<filter id="treeglow" x="0" y="0" width="1.3" height="1.3">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
<defs>
<radialGradient id="skyGradient" cx="0.5" cy="0.3" r="0.8" fx="0.6" fy="0.1">
<stop offset="0%" stop-color="#FFAF7B"/>
<stop offset="60%" stop-color="#F2709C"/>
<stop offset="100%" stop-color="#4A148C"/>
</radialGradient>
<linearGradient id="desertGradient" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#F4D35E" />
<stop offset="100%" stop-color="#EE964B" />
</linearGradient>
<linearGradient id="duneShadow" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#D97E00" stop-opacity="0.7" />
<stop offset="100%" stop-color="#BA6100" stop-opacity="0" />
</linearGradient>
<linearGradient id="treeTrunkGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5D3A00" />
<stop offset="100%" stop-color="#A76F2A" />
</linearGradient>
<radialGradient id="leavesGradient" cx="0.5" cy="0.5" r="0.6">
<stop offset="10%" stop-color="#4DD06F" />
<stop offset="80%" stop-color="#214A21" />
</radialGradient>
<pattern id="sandPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="5" cy="15" r="1" fill="#D4B25D" opacity="0.3" />
<circle cx="15" cy="5" r="1.5" fill="#E8C868" opacity="0.2" />
<circle cx="12" cy="17" r="0.8" fill="#CBA741" opacity="0.25" />
<path d="M0 10 Q5 3 10 10 T20 10" stroke="#C4A62F" stroke-width="0.4" fill="none" opacity="0.15"/>
</pattern>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#A2FF99" flood-opacity="0.7" />
</filter>
<filter id="softShadow" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="3" stdDeviation="2.5" flood-color="#000000" flood-opacity="0.3" />
</filter>
</defs>
<!-- Sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Distant dunes - layered with subtle vertical movement to simulate atmospheric perspective -->
<g transform="translate(0,180)">
<path fill="url(#desertGradient)" d="
M0 60
Q40 20 80 60
T160 60
T240 60
T320 60
L320 100
L0 100
Z" />
<path fill="url(#duneShadow)" d="
M20 60
Q60 25 100 60
T180 60
T240 60
L240 80
L20 80
Z" />
</g>
<!-- Foreground dunes with textured pattern -->
<g transform="translate(0,190)">
<path fill="#F9C967" stroke="#E8B74F" stroke-width="1.5" filter="url(#softShadow)" d="
M0 80
Q30 30 70 80
T140 80
T210 80
L210 130
L0 130
Z" />
<rect width="210" height="50" fill="url(#sandPattern)" opacity="0.45" />
</g>
<!-- Reflected upside-down tree group -->
<g transform="translate(150 110)">
<!-- Tree trunk inverted -->
<g filter="url(#glow)" >
<path fill="url(#treeTrunkGradient)" stroke="#3B2600" stroke-width="1.2" d="
M0 0
C-8 20 -6 100 0 100
C6 100 8 20 0 0Z" />
<!-- Subtle bark texture -->
<path fill="none" stroke="#7E5E11" stroke-width="0.4" opacity="0.5"
d="M-4 15 C-3 30 -2 45 -3 60
M-2 40 C-1 50 0 60 1 70
M4 25 C3 40 2 55 3 70" />
</g>
<!-- Roots spreading upwards (since tree is upside-down) -->
<g filter="url(#glow)" stroke="#553A00" stroke-width="1.6" fill="none" opacity="0.85" >
<path d="M0 80 C-10 70 -20 50 -25 35" />
<path d="M0 75 C8 65 16 52 22 35" />
<path d="M0 85 C-5 60 5 50 0 40" />
</g>
<!-- Leaves canopy: clusters of circular shapes above roots (now below trunk base) -->
<g filter="url(#glow)">
<circle cx="0" cy="114" r="14" fill="url(#leavesGradient)" />
<circle cx="-12" cy="126" r="11" fill="url(#leavesGradient)" />
<circle cx="12" cy="128" r="10" fill="url(#leavesGradient)" />
<circle cx="5" cy="137" r="7" fill="url(#leavesGradient)" />
<circle cx="-7" cy="140" r="6" fill="url(#leavesGradient)" />
<!-- Leaf veins -->
<g stroke="#1b3a12" stroke-width="0.5" opacity="0.6">
<path d="M-12 126 L-15 120 M-12 126 L-9 119 M-7 140 L-10 134 M-7 140 L-4 135"/>
<path d="M0 114 L0 102 M0 114 L5 107 M0 114 L-5 108 M5 137 L8 130"/>
</g>
</g>
<!-- Stylized inverted glow halo crown -->
<circle cx="0" cy="5" r="12" fill="none" stroke="#AAFFBB" stroke-width="1.8" opacity="0.45" />
<circle cx="0" cy="5" r="18" fill="none" stroke="#53A653" stroke-width="1.2" opacity="0.12" />
</g>
<!-- Mirrored faint sand ripple reflection around tree base -->
<g transform="translate(150 210)" opacity="0.3" stroke="#E2C948" stroke-width="0.8" fill="none">
<path d="M-40 10 Q-30 0 -20 10 T0 10 T20 10 T40 10" />
<path d="M-35 15 Q-25 5 -15 15 T5 15 T25 15 T35 15" />
</g>
<!-- Small whispering desert plants below -->
<g transform="translate(220 230)">
<path d="M0 0 C2 -8 5 -12 8 -6 C7 -11 4 -15 1 -13" stroke="#36531F" stroke-width="1.2" fill="none" />
<circle cx="5" cy="-12" r="2.7" fill="#6CAA3C" opacity="0.9"/>
</g>
<g transform="translate(80 240)">
<path d="M0 0 C-2 -6 -4 -11 -6 -7 C-5 -11 -3 -13 -1 -11" stroke="#375220" stroke-width="1" fill="none" />
<circle cx="-4" cy="-11" r="2.1" fill="#67983A" opacity="0.85"/>
</g>
<!-- A crescent moon glowing faintly in upper left -->
<g transform="translate(40 50)">
<circle r="18" fill="#FFF3C4" opacity="0.6" />
<circle cx="7" r="15" fill="#4A148C" />
<circle cx="-4" cy="-4" r="2" fill="#FFF3C4" opacity="0.85" />
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 mini (2025-04-14)
Player 2
Judge's Analysis
Player 2's submission demonstrates a stronger adherence to the prompt with a clearer depiction of an upside-down tree floating above a stylized desert landscape.
The vibrant color palette and well-defined composition add to the visual appeal.
In contrast, Player 1's submission is less distinct in representing the upside-down tree concept and has a more simplistic execution.
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
37
Player 2
32
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
3
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
1
Player 2
15
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
28
Player 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
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
5
Player 2
15
Groups
The number of group elements (g) in the SVG.
Player 1
2
Player 2
11
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
5
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
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
31
Player 2
15
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
2
Player 2
11
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
34
Player 2
29
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
—
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
31
Player 2
73
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
2
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
Player 2
8
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.
