GPT-4o
Challenge Creator
Creative Challenge
"A treehouse glowing with fairy lights during a starry night."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#001848"/>
<stop offset="100%" stop-color="#032B44"/>
</linearGradient>
<radialGradient id="moonGradient" cx="0.8" cy="0.2" r="0.5">
<stop offset="0%" stop-color="#FFF"/>
<stop offset="100%" stop-color="#EEE"/>
</radialGradient>
<linearGradient id="treeTrunkGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5A3E36"/>
<stop offset="100%" stop-color="#3B2E2A"/>
</linearGradient>
<linearGradient id="treeLeavesGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0B6623"/>
<stop offset="100%" stop-color="#084B1D"/>
</linearGradient>
<linearGradient id="houseGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8B4513"/>
<stop offset="100%" stop-color="#A0522D"/>
</linearGradient>
<radialGradient id="windowGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#FFFACD" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#FFFACD" stop-opacity="0"/>
</radialGradient>
<radialGradient id="fairyLightGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#FFD700" stop-opacity="1"/>
<stop offset="100%" stop-color="#FFD700" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g fill="#FFF" opacity="0.8">
<circle cx="50" cy="50" r="1.5"/>
<circle cx="120" cy="80" r="1"/>
<circle cx="200" cy="40" r="1.2"/>
<circle cx="270" cy="70" r="1"/>
<circle cx="30" cy="150" r="1"/>
<circle cx="190" cy="120" r="1.3"/>
<circle cx="250" cy="200" r="1"/>
<circle cx="80" cy="220" r="1.1"/>
<circle cx="160" cy="250" r="1"/>
<circle cx="220" cy="180" r="1.2"/>
<circle cx="100" cy="60" r="1"/>
<circle cx="140" cy="30" r="1"/>
<circle cx="260" cy="20" r="1.5"/>
<circle cx="180" cy="70" r="1"/>
<circle cx="210" cy="150" r="1.1"/>
</g>
<!-- Moon -->
<circle cx="240" cy="60" r="20" fill="url(#moonGradient)" />
<!-- Tree trunk -->
<path d="M150 300 L140 180 Q145 160 160 140 L170 180 Q165 200 150 220 Z" fill="url(#treeTrunkGradient)" />
<!-- Tree leaves -->
<path d="M150 140
C80 130, 80 60, 150 40
C220 60, 220 130, 150 140 Z"
fill="url(#treeLeavesGradient)" />
<!-- Tree branches -->
<path d="M150 220
Q130 190, 110 160
Q90 130, 120 110
Q140 100, 160 120
Q190 130, 170 160
Q150 190, 150 220 Z"
fill="none" stroke="#654321" stroke-width="2" />
<!-- Treehouse base -->
<rect x="120" y="100" width="60" height="40" fill="url(#houseGradient)" rx="5" ry="5" />
<!-- Treehouse roof -->
<polygon points="120,100 150,70 180,100" fill="#4B2E2E" />
<!-- Windows -->
<g fill="#FFD700">
<rect x="130" y="110" width="10" height="10" rx="1" ry="1"/>
<rect x="160" y="110" width="10" height="10" rx="1" ry="1"/>
</g>
<!-- Window glows -->
<g>
<circle cx="135" cy="115" r="15" fill="url(#windowGlow)" />
<circle cx="165" cy="115" r="15" fill="url(#windowGlow)" />
</g>
<!-- Fairy lights -->
<g>
<circle cx="125" cy="105" r="3" fill="#FF69B4" />
<circle cx="135" cy="95" r="2" fill="#FFA500" />
<circle cx="145" cy="105" r="3" fill="#BA55D3" />
<circle cx="155" cy="95" r="2" fill="#32CD32" />
<circle cx="165" cy="105" r="3" fill="#FF4500" />
<circle cx="175" cy="95" r="2" fill="#1E90FF" />
<circle cx="185" cy="105" r="3" fill="#FFD700" />
<circle cx="195" cy="95" r="2" fill="#FF6347" />
<circle cx="205" cy="105" r="3" fill="#ADFF2F" />
</g>
<!-- Fairy light glows -->
<g>
<circle cx="125" cy="105" r="10" fill="url(#fairyLightGlow)" />
<circle cx="135" cy="95" r="7" fill="url(#fairyLightGlow)" />
<circle cx="145" cy="105" r="10" fill="url(#fairyLightGlow)" />
<circle cx="155" cy="95" r="7" fill="url(#fairyLightGlow)" />
<circle cx="165" cy="105" r="10" fill="url(#fairyLightGlow)" />
<circle cx="175" cy="95" r="7" fill="url(#fairyLightGlow)" />
<circle cx="185" cy="105" r="10" fill="url(#fairyLightGlow)" />
<circle cx="195" cy="95" r="7" fill="url(#fairyLightGlow)" />
<circle cx="205" cy="105" r="10" fill="url(#fairyLightGlow)" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Night sky gradient -->
<radialGradient id="skyGradient" cx="60%" cy="20%" r="100%">
<stop offset="0%" stop-color="#33336d"/>
<stop offset="40%" stop-color="#191959"/>
<stop offset="100%" stop-color="#070721"/>
</radialGradient>
<!-- Glowy yellow for fairy lights -->
<radialGradient id="fairyGlow" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#ffe781" stop-opacity="1"/>
<stop offset="100%" stop-color="#ffeecc" stop-opacity="0"/>
</radialGradient>
<!-- Window glow -->
<radialGradient id="windowGlow" cx="50%" cy="50%" r="100%">
<stop offset="10%" stop-color="#ffe8a7"/>
<stop offset="80%" stop-color="#fff7e1" stop-opacity="0"/>
</radialGradient>
<!-- Tree trunk texture -->
<linearGradient id="barkGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#7e5c31"/>
<stop offset="100%" stop-color="#4d2c17"/>
</linearGradient>
<!-- Foliage gradient -->
<radialGradient id="foliageGradient" cx="50%" cy="35%" r="100%">
<stop offset="0%" stop-color="#1ec146"/>
<stop offset="70%" stop-color="#185f32"/>
</radialGradient>
<!-- Moon gradient -->
<radialGradient id="moonGradient" cx="50%" cy="55%" r="75%">
<stop offset="0%" stop-color="#fffef3"/>
<stop offset="80%" stop-color="#f9f7b2"/>
<stop offset="100%" stop-color="#f9f8e400" stop-opacity="0"/>
</radialGradient>
<!-- Star twinkle -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#fffde6"/>
<stop offset="100%" stop-color="#fffde600" stop-opacity="0"/>
</radialGradient>
<!-- Deck wood -->
<linearGradient id="deckGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#9c793a"/>
<stop offset="100%" stop-color="#634710"/>
</linearGradient>
<!-- Roof tiles -->
<linearGradient id="roofGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#e39253"/>
<stop offset="100%" stop-color="#82451b"/>
</linearGradient>
<!-- Rope -->
<linearGradient id="ropeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffd396"/>
<stop offset="100%" stop-color="#bb8435"/>
</linearGradient>
</defs>
<!-- Night sky background -->
<rect fill="url(#skyGradient)" x="0" y="0" width="300" height="300"/>
<!-- Crescent Moon -->
<g>
<circle cx="240" cy="60" r="25" fill="url(#moonGradient)" filter="url(#moonShadow)"/>
<ellipse cx="250" cy="64" rx="19" ry="22" fill="#070721"/>
</g>
<!-- Stars -->
<g>
<!-- Twinkling Stars with glows -->
<g>
<circle cx="50" cy="40" r="1.5" fill="url(#starGlow)" />
<circle cx="90" cy="60" r="1.2" fill="url(#starGlow)" />
<circle cx="140" cy="30" r="1.9" fill="url(#starGlow)" />
<circle cx="190" cy="78" r="1.4" fill="url(#starGlow)" />
<circle cx="112" cy="90" r="1" fill="url(#starGlow)" />
<circle cx="270" cy="44" r="1.8" fill="url(#starGlow)" />
<circle cx="70" cy="120" r="1" fill="url(#starGlow)" />
<circle cx="230" cy="105" r="1.4" fill="url(#starGlow)" />
</g>
<!-- Small dots -->
<g stroke="#fffbe6" stroke-width="0.2">
<circle cx="20" cy="68" r="0.6"/>
<circle cx="65" cy="47" r="0.4"/>
<circle cx="75" cy="100" r="0.6"/>
<circle cx="100" cy="54" r="0.3"/>
<circle cx="190" cy="37" r="0.5"/>
<circle cx="260" cy="95" r="0.7"/>
<circle cx="276" cy="30" r="0.5"/>
<circle cx="210" cy="66" r="0.4"/>
<circle cx="223" cy="33" r="0.6"/>
<circle cx="157" cy="79" r="0.35"/>
<circle cx="179" cy="47" r="0.45"/>
</g>
</g>
<!-- Foliage background for depth -->
<ellipse cx="135" cy="115" rx="90" ry="55" fill="url(#foliageGradient)" opacity="0.75"/>
<ellipse cx="185" cy="120" rx="65" ry="46" fill="url(#foliageGradient)" opacity="0.65"/>
<!-- Tree Trunk -->
<g>
<path d="M130,185 q-11,51 -22,90 l21,5 q5-37 23-95 q18,51 28,92 l22-5 q-17-60 -27-105 q11-8 15-16 -8.5,10 -22.5,11 -14-0.5 -23-13 3,10 18,18 z"
fill="url(#barkGradient)" stroke="#3e210d" stroke-width="2"/>
<!-- Bark lines -->
<path d="M145 223 q-3 23 2 40" stroke="#6e4922" stroke-width="1" fill="none" opacity="0.5"/>
<path d="M157 240 q6 25 2 37" stroke="#6e4922" stroke-width="1" fill="none" opacity="0.5"/>
<path d="M133 270 q12 6 30 0" stroke="#7e6834" stroke-width="1.5" fill="none" opacity="0.3"/>
<path d="M137 230 q5 14 6 23" stroke="#cf9f61" stroke-width="0.7" fill="none" opacity="0.25"/>
</g>
<!-- Tree Foliage - main canopy -->
<g>
<ellipse cx="145" cy="105" rx="64" ry="39" fill="url(#foliageGradient)" filter="url(#f1)"/>
<ellipse cx="182" cy="90" rx="40" ry="25" fill="url(#foliageGradient)" opacity="0.85"/>
<ellipse cx="112" cy="80" rx="39" ry="23" fill="url(#foliageGradient)" opacity="0.70"/>
<!-- Overlapping bushy top -->
<ellipse cx="130" cy="65" rx="20" ry="13" fill="url(#foliageGradient)" opacity="0.55"/>
<ellipse cx="180" cy="62" rx="18" ry="14" fill="url(#foliageGradient)" opacity="0.48"/>
</g>
<!-- Treehouse Deck -->
<g>
<ellipse cx="145" cy="145" rx="56" ry="18" fill="url(#deckGradient)" stroke="#624215" stroke-width="2"/>
<!-- Deck raillings -->
<g>
<rect x="90" y="130" width="5" height="16" fill="#6f542c" rx="2"/>
<rect x="200" y="130" width="5" height="16" fill="#6f542c" rx="2"/>
<rect x="115" y="134" width="3" height="10" fill="#7e660c" rx="1.5"/>
<rect x="135" y="136" width="3" height="8" fill="#7e660c" rx="1.5"/>
<rect x="155" y="134" width="3" height="11" fill="#7e660c" rx="1.5"/>
<rect x="176" y="132" width="3" height="10" fill="#7e660c" rx="1.5"/>
</g>
</g>
<!-- Treehouse Hut -->
<g>
<!-- Main hut body -->
<rect x="112" y="103" width="66" height="45" rx="7" fill="#f8d194" stroke="#be975c" stroke-width="2"/>
<!-- Window glow inside hut -->
<ellipse cx="126" cy="124" rx="14" ry="11" fill="url(#windowGlow)" opacity="0.35"/>
<ellipse cx="155" cy="121" rx="10" ry="7" fill="url(#windowGlow)" opacity="0.23"/>
<!-- Door -->
<rect x="155.5" y="127" width="14" height="22" rx="3" fill="#bb8f5c" stroke="#805e33" stroke-width="1"/>
<circle cx="158" cy="139" r="1.2" fill="#f7f5b8"/>
<!-- Windows -->
<rect x="120.5" y="115" width="13" height="10" rx="2.5" fill="#ffe8b3" stroke="#be975c" stroke-width="1"/>
<rect x="138.5" y="114" width="10" height="9" rx="2.5" fill="#ffe8b3" stroke="#be975c" stroke-width="1"/>
<!-- Window panes -->
<line x1="126.5" y1="115" x2="126.5" y2="125" stroke="#debb84" stroke-width="0.8"/>
<line x1="120.5" y1="120" x2="133.5" y2="120" stroke="#debb84" stroke-width="0.8"/>
<line x1="143.5" y1="114" x2="143.5" y2="123" stroke="#debb84" stroke-width="0.7"/>
<line x1="138.5" y1="119" x2="148.5" y2="119" stroke="#debb84" stroke-width="0.6"/>
<!-- Roof -->
<polygon points="108,104 145,78 190,106 112,104"
fill="url(#roofGradient)" stroke="#713e18" stroke-width="2"/>
<!-- Roof tiles curves -->
<path d="M119 96 Q132 86 157 91" stroke="#bd7433" stroke-width="1.5" fill="none" opacity="0.7"/>
<path d="M127 100 Q139 90 169 95" stroke="#a96226" stroke-width="1.2" fill="none" opacity="0.55"/>
<ellipse cx="153" cy="87.5" rx="6" ry="2" fill="#cb883f" opacity="0.3"/>
<!-- Attic window -->
<ellipse cx="159" cy="96" rx="5" ry="3" fill="#ffe8b3" stroke="#c49d5e" stroke-width="1"/>
<line x1="159" y1="93" x2="159" y2="99" stroke="#dab87d" stroke-width="0.8"/>
</g>
<!-- Ropes (suspending deck) -->
<g>
<path d="M116 153 Q95 170 70 265" stroke="url(#ropeGradient)" stroke-width="3" fill="none" />
<path d="M175 153 Q197 170 224 265" stroke="url(#ropeGradient)" stroke-width="3" fill="none" />
<!-- Hanging Rope Ladder -->
<path d="M125 172 Q110 205 107 260" stroke="url(#ropeGradient)" stroke-width="2" fill="none"/>
<path d="M133 171 Q120 205 115 260" stroke="url(#ropeGradient)" stroke-width="2" fill="none"/>
<!-- Ladder rungs -->
<rect x="117" y="190" width="12" height="2" rx="1" fill="#e0b659" />
<rect x="115" y="200" width="15" height="2" rx="1" fill="#d3a74e" />
<rect x="113" y="210" width="18" height="2" rx="1" fill="#c7963d" />
<rect x="112" y="220" width="20" height="2" rx="1" fill="#b18132" />
<rect x="111" y="230" width="21" height="2" rx="1" fill="#a87422" />
<rect x="110" y="240" width="22" height="2" rx="1" fill="#a87422" />
</g>
<!-- Fairy Lights -->
<g>
<!-- String -->
<path d="M112 100 Q130 125 178 110" stroke="#ebe8bf" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Bulbs -->
<g>
<!-- Each bulb with glow -->
<g>
<circle cx="115" cy="104" r="6" fill="url(#fairyGlow)" opacity="0.8"/>
<circle cx="115" cy="104" r="2" fill="#ffe159" stroke="#ffe8a3" stroke-width="0.6"/>
</g>
<g>
<circle cx="127" cy="112" r="5" fill="url(#fairyGlow)" opacity="0.7"/>
<circle cx="127" cy="112" r="1.7" fill="#eeffb1" stroke="#f9f7e1" stroke-width="0.6"/>
</g>
<g>
<circle cx="141" cy="122" r="6" fill="url(#fairyGlow)" opacity="0.89"/>
<circle cx="141" cy="122" r="2.3" fill="#f7c35b" stroke="#fff3b3" stroke-width="0.6"/>
</g>
<g>
<circle cx="156" cy="118" r="5" fill="url(#fairyGlow)" opacity="0.7"/>
<circle cx="156" cy="118" r="1.6" fill="#fffbc3" stroke="#ffe9aa" stroke-width="0.6"/>
</g>
<g>
<circle cx="167" cy="112" r="6" fill="url(#fairyGlow)" opacity="0.92"/>
<circle cx="167" cy="112" r="2" fill="#f7d83d" stroke="#ffeeb2" stroke-width="0.6"/>
</g>
<g>
<circle cx="176" cy="109" r="5" fill="url(#fairyGlow)" opacity="0.8"/>
<circle cx="176" cy="109" r="1.7" fill="#f7f59b" stroke="#fff7d3" stroke-width="0.6"/>
</g>
</g>
</g>
<!-- Extra Glow Under Deck -->
<ellipse cx="145" cy="160" rx="38" ry="8" fill="url(#fairyGlow)" opacity="0.25"/>
<!-- Fairy lights on ropes (sparkling dots) -->
<g>
<circle cx="82" cy="210" r="3.5" fill="url(#fairyGlow)" opacity="0.6"/>
<circle cx="100" cy="180" r="2.2" fill="url(#fairyGlow)" opacity="0.48"/>
<circle cx="210" cy="210" r="3.1" fill="url(#fairyGlow)" opacity="0.5"/>
<circle cx="190" cy="180" r="2.6" fill="url(#fairyGlow)" opacity="0.56"/>
<circle cx="119" cy="224" r="2.1" fill="url(#fairyGlow)" opacity="0.39"/>
<circle cx="153" cy="220" r="2.3" fill="url(#fairyGlow)" opacity="0.49"/>
</g>
<!-- Faint fairy wings (visual metaphor for magic) -->
<g>
<ellipse cx="183" cy="88" rx="13" ry="4.5" fill="#e2efd3" opacity="0.11"/>
<ellipse cx="106" cy="80" rx="12" ry="4" fill="#e2d3ef" opacity="0.10"/>
</g>
<!-- Ground Shadow and grass -->
<ellipse cx="145" cy="288" rx="60" ry="10" fill="#244b1c" opacity="0.55"/>
<ellipse cx="110" cy="292" rx="17" ry="3.5" fill="#356d2b" opacity="0.65"/>
<ellipse cx="178" cy="293" rx="19" ry="3.3" fill="#2a5320" opacity="0.38"/>
<!-- Fireflies floating around (magical effect) -->
<g>
<circle cx="95" cy="150" r="1.5" fill="url(#fairyGlow)" opacity="0.9"/>
<circle cx="120" cy="170" r="1.3" fill="url(#fairyGlow)" opacity="0.9"/>
<circle cx="180" cy="160" r="1.8" fill="url(#fairyGlow)" opacity="0.75"/>
<circle cx="170" cy="180" r="1.2" fill="url(#fairyGlow)" opacity="0.8"/>
<circle cx="140" cy="187" r="1.3" fill="url(#fairyGlow)" opacity="0.67"/>
<circle cx="165" cy="195" r="1.1" fill="url(#fairyGlow)" opacity="0.7"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 2
Judge's Analysis
Player 2's submission demonstrates superior creativity and technical execution.
The treehouse is more detailed, with a clearer structure, a ladder, and glowing lights that emphasize the magical atmosphere.
The background is richer with a starry night and moon, adhering more strongly to the prompt and offering better visual appeal.
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
44
Player 2
99
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
4
Player 2
17
Circles
The number of circle elements (circle) in the SVG.
Player 1
36
Player 2
45
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
—
Player 2
19
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
5
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
1
Player 2
1
Paths
The number of path elements (path) in the SVG.
Player 1
3
Player 2
12
Groups
The number of group elements (g) in the SVG.
Player 1
5
Player 2
21
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
7
Player 2
10
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
—
Player 2
—
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
1
Player 2
39
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
1
Player 2
31
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
22
Player 2
64
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
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
17
Player 2
31
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
10
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.
