GPT-4o
Challenge Creator
Creative Challenge
"A treehouse shaped like a giant teacup nestled in a twisting tree."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a0e9ff"/>
<stop offset="100%" stop-color="#d0f0ff"/>
</linearGradient>
<linearGradient id="trunkGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8b5a2b"/>
<stop offset="100%" stop-color="#a0522d"/>
</linearGradient>
<radialGradient id="leafGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7ec850"/>
<stop offset="100%" stop-color="#4b8b3b"/>
</radialGradient>
<linearGradient id="cupGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff5f0"/>
<stop offset="100%" stop-color="#ffd1c1"/>
</linearGradient>
<pattern id="cupStripes" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0,10 l10,-10 M-2,2 l4,-4 M8,12 l4,-4" stroke="#ffd1c1" stroke-width="2"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Tree trunk -->
<path d="M150,300 C140,240 160,200 140,150 C130,120 110,100 140,60 C170,20 180,80 200,110 C220,140 210,180 230,220 C250,260 160,280 150,300"
fill="none" stroke="url(#trunkGrad)" stroke-width="30" stroke-linecap="round"/>
<!-- Leaves -->
<g fill="url(#leafGrad)" opacity="0.8">
<circle cx="140" cy="60" r="30"/>
<circle cx="180" cy="110" r="25"/>
<circle cx="100" cy="120" r="20"/>
<circle cx="160" cy="150" r="22"/>
<circle cx="200" cy="180" r="18"/>
</g>
<!-- Branch supporting cup -->
<path d="M140,150 C180,160 160,220 200,220" stroke="url(#trunkGrad)" stroke-width="15" fill="none" stroke-linecap="round"/>
<!-- Teacup house -->
<g>
<!-- cup bowl -->
<ellipse cx="200" cy="220" rx="80" ry="40" fill="url(#cupGrad)"/>
<ellipse cx="200" cy="220" rx="80" ry="40" fill="url(#cupStripes)" fill-opacity="0.6"/>
<!-- cup rim -->
<ellipse cx="200" cy="180" rx="80" ry="20" fill="#ffffff" stroke="#e0c1b2" stroke-width="3"/>
<!-- inside shading -->
<ellipse cx="200" cy="190" rx="70" ry="15" fill="rgba(0,0,0,0.1)"/>
<!-- handle -->
<path d="M280,200 C300,200 300,240 280,240" stroke="url(#cupGrad)" stroke-width="12" fill="none" stroke-linecap="round"/>
<!-- door -->
<rect x="180" y="200" width="20" height="30" rx="5" ry="5" fill="#8b4513"/>
<circle cx="195" cy="215" r="2" fill="#000"/>
<!-- windows -->
<circle cx="160" cy="205" r="8" fill="#a0e9ff" stroke="#fff" stroke-width="2"/>
<line x1="160" y1="197" x2="160" y2="213" stroke="#fff" stroke-width="1"/>
<line x1="152" y1="205" x2="168" y2="205" stroke="#fff" stroke-width="1"/>
<circle cx="240" cy="205" r="8" fill="#a0e9ff" stroke="#fff" stroke-width="2"/>
<line x1="240" y1="197" x2="240" y2="213" stroke="#fff" stroke-width="1"/>
<line x1="232" y1="205" x2="248" y2="205" stroke="#fff" stroke-width="1"/>
</g>
<!-- Ladder -->
<g stroke="#8b4513" stroke-width="4">
<line x1="200" y1="260" x2="200" y2="300"/>
<line x1="190" y1="270" x2="210" y2="270"/>
<line x1="190" y1="280" x2="210" y2="280"/>
<line x1="190" y1="290" x2="210" y2="290"/>
</g>
<!-- Decorative swirls -->
<path d="M50,50 c10,-10 20,10 30,0" stroke="#fff" stroke-width="2" fill="none"/>
<path d="M60,60 c8,-8 16,8 24,0" stroke="#fff" stroke-width="1.5" fill="none"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradients -->
<radialGradient id="teacupBodyGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#ffe1cc"/>
<stop offset="100%" stop-color="#d9733f"/>
</radialGradient>
<linearGradient id="teacupShadowGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a45a26" stop-opacity="0.7" />
<stop offset="100%" stop-color="#5c2d0a" stop-opacity="0" />
</linearGradient>
<linearGradient id="handleShade" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#d9733f" />
<stop offset="100%" stop-color="#774314" />
</linearGradient>
<linearGradient id="treeBark" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#533b1f"/>
<stop offset="100%" stop-color="#37280e"/>
</linearGradient>
<pattern id="barkPattern" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(15)">
<rect width="2" height="10" fill="#4b2f0a"/>
<rect x="5" width="1" height="10" fill="#6a4a18"/>
<circle cx="3" cy="7" r="1" fill="#3e2607"/>
</pattern>
<radialGradient id="leavesLight" cx="50%" cy="40%" r="50%">
<stop offset="0%" stop-color="#8ee07c"/>
<stop offset="100%" stop-color="#27651d"/>
</radialGradient>
<radialGradient id="windowGlow" cx="50%" cy="50%" r="40%">
<stop offset="0%" stop-color="#fef2ba" stop-opacity="0.9" />
<stop offset="100%" stop-color="#d4b84e" stop-opacity="0" />
</radialGradient>
<filter id="shadowBlur" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.4"/>
</filter>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#ffde73" flood-opacity="0.8" />
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#ffc849" flood-opacity="0.5" />
</filter>
<filter id="glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="#fff" flood-opacity="0.3" />
<feGaussianBlur stdDeviation="0.2" result="blur"/>
<feComposite operator="in" in="blur" in2="SourceAlpha" />
</filter>
<!-- Leaf shape to reuse -->
<g id="leafShape">
<path d="M0 0 C5 -8 10 -2 0 12 C-10 -2 -5 -8 0 0z" fill="url(#leavesLight)" stroke="#1a440b" stroke-width="0.6"/>
</g>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a0d8f7"/>
<stop offset="100%" stop-color="#5ca4f1" />
</linearGradient>
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Twisting tree trunk -->
<g filter="url(#shadowBlur)" >
<path id="treeTrunk"
fill="url(#barkPattern)" stroke="#2e1e0b" stroke-width="2"
d="
M150 290
C145 260 140 220 142 190
C140 160 150 130 155 110
C160 90 150 70 135 55
C130 50 135 45 138 50
C140 58 160 70 160 65
C162 55 148 50 130 45
C120 60 115 90 110 130
C105 170 100 190 110 220
C120 250 135 270 150 290
Z
" />
<!-- Twisting bark spiral lines -->
<path stroke="#7b5b24" stroke-width="1" fill="none"
d="M140 280 C138 255 137 230 140 200 C143 170 147 140 150 115" opacity="0.65"/>
<path stroke="#7b5b24" stroke-width="1" fill="none"
d="M155 282 C161 260 165 235 160 210 C155 180 148 150 143 120" opacity="0.5"/>
<path stroke="#7b5b24" stroke-width="1" fill="none"
d="M138 265 C140 245 142 220 147 195 C152 165 157 135 160 110" opacity="0.5"/>
</g>
<!-- Branches curling and twisting -->
<g stroke="#4b3719" stroke-width="4" fill="url(#barkPattern)" >
<path d="M155 110 C160 90 190 85 200 100 C210 115 210 130 195 135" />
<path d="M135 55 Q130 45 140 40 Q150 35 160 40 Q170 45 175 55" />
<path d="M140 40 C145 60 170 70 180 90" />
<path d="M195 135 Q200 140 210 140 Q220 140 220 130" />
</g>
<!-- Leaves clusters -->
<g transform="translate(180,90) rotate(10)" >
<use href="#leafShape" transform="scale(1.2) translate(-7,-3)" />
<use href="#leafShape" transform="scale(1) translate(10,2) rotate(15)" />
<use href="#leafShape" transform="scale(1.3) translate(5,4) rotate(-10)" />
<use href="#leafShape" transform="scale(1.1) translate(-3,10) rotate(20)" />
</g>
<g transform="translate(125,45) rotate(-20)" >
<use href="#leafShape" transform="scale(1) translate(-4,-5)" />
<use href="#leafShape" transform="scale(0.9) translate(8,0) rotate(25)" />
<use href="#leafShape" transform="scale(1.15) translate(4,10) rotate(10)" />
<use href="#leafShape" transform="scale(1) translate(1,-3) rotate(-10)" />
</g>
<!-- Treehouse teacup base -->
<g filter="url(#shadowBlur)">
<ellipse cx="150" cy="155" rx="70" ry="45" fill="url(#teacupBodyGrad)" stroke="#b05921" stroke-width="2" />
<ellipse cx="150" cy="155" rx="68" ry="42" fill="url(#teacupShadowGrad)" />
</g>
<!-- Teacup rim detail with glow -->
<ellipse cx="150" cy="120" rx="70" ry="20" fill="url(#teacupBodyGrad)" stroke="#c27742" stroke-width="3" filter="url(#glow)" />
<ellipse cx="150" cy="125" rx="60" ry="12" fill="#ffe5bc" stroke="#b06418" stroke-width="1" />
<!-- Cup handle forming a spiral twig -->
<g filter="url(#shadowBlur)">
<path fill="url(#handleShade)" stroke="#7a4610" stroke-width="2"
d="M215 155
C230 150 245 130 230 115
C220 105 210 120 215 135
C220 145 240 140 238 125
C237 110 225 112 220 118
" />
</g>
<!-- Teacup window (round) -->
<circle cx="130" cy="160" r="14" fill="#2a2e31" />
<circle cx="130" cy="160" r="13" fill="url(#windowGlow)" />
<circle cx="130" cy="160" r="9" fill="#e6d7a4" filter="url(#glass)" />
<line x1="122" y1="152" x2="138" y2="168" stroke="#a58c5e" stroke-width="1.5" />
<line x1="138" y1="152" x2="122" y2="168" stroke="#a58c5e" stroke-width="1.5" />
<!-- Wooden support boards across cup body -->
<g fill="#cca56b" stroke="#996e37" stroke-width="1.2">
<rect x="115" y="145" width="70" height="12" rx="4" ry="4" />
<rect x="110" y="170" width="80" height="8" rx="3" ry="3" />
</g>
<!-- Door on teacup with small knob -->
<g filter="url(#shadowBlur)">
<ellipse cx="170" cy="180" rx="16" ry="24" fill="#c56e2d" stroke="#844802" stroke-width="2" />
<rect x="165" y="156" width="10" height="4" rx="2" ry="1.5" fill="#ffda9c" />
<circle cx="182" cy="180" r="2.5" fill="#6b3e04" />
</g>
<!-- Roof/teacup lid atop the house -->
<ellipse cx="150" cy="105" rx="80" ry="15" fill="url(#teacupBodyGrad)" stroke="#b96722" stroke-width="3" />
<ellipse cx="150" cy="100" rx="70" ry="10" fill="#ffd6a2" stroke="#a7651b" stroke-width="2" />
<!-- Lid knob -->
<ellipse cx="150" cy="93" rx="7" ry="3" fill="#d98735" stroke="#823e00" stroke-width="1" />
<circle cx="150" cy="91" r="3" fill="#ffd980" filter="url(#glow)" />
<!-- Smoke curling out - whimsical wisps -->
<g stroke="#fff6dd" stroke-width="1.2" fill="none" opacity="0.8">
<path d="M152 85 C150 70 155 60 148 55" />
<path d="M146 80 C144 65 150 55 143 50" />
<path d="M158 78 C160 65 164 58 161 52" />
</g>
<!-- Twisting small vines around handle -->
<path stroke="#3b5818" stroke-width="1.3" fill="none"
d="M213 155 C218 150 220 145 215 140
C210 135 205 140 210 145
C215 150 220 148 217 143" />
<path stroke="#4d6e23" stroke-width="0.8" fill="none"
d="M220 135 C223 130 225 132 223 136" />
<!-- Additional leaves on trunk branches -->
<g transform="translate(135,110) rotate(-15)">
<use href="#leafShape" transform="scale(1) translate(-4,-5)" />
<use href="#leafShape" transform="scale(0.7) translate(10,2) rotate(10)" />
</g>
<g transform="translate(160,120) rotate(10)">
<use href="#leafShape" transform="scale(0.9) translate(3,-4)" />
</g>
<!-- Ground grass beneath tree -->
<ellipse cx="150" cy="295" rx="90" ry="18" fill="url(#grassGrad)" />
<linearGradient id="grassGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3a6d17" />
<stop offset="100%" stop-color="#1e3d06" />
</linearGradient>
<!-- Grass blades layering -->
<g fill="#2b540d" stroke="#163302" stroke-width="0.3">
<path d="M95 295 Q100 270 105 295 Z" />
<path d="M105 295 Q110 265 115 295 Z" />
<path d="M115 295 Q120 275 125 295 Z" />
<path d="M135 295 Q140 270 145 295 Z" />
<path d="M145 295 Q150 265 155 295 Z" />
<path d="M165 295 Q170 270 175 295 Z" />
<path d="M175 295 Q180 275 185 295 Z" />
<path d="M185 295 Q190 265 195 295 Z" />
</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 design is more detailed and visually appealing, with a greater emphasis on creativity and technical quality.
The teacup treehouse features decorative elements like vines, a ladder, and a cozy window that enhance its charm.
While Player 1's submission is clean and adheres to the prompt, it lacks the intricate details and dynamic composition of Player 2's work.
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
28
Player 2
47
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
7
Circles
The number of circle elements (circle) in the SVG.
Player 1
8
Player 2
6
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
4
Player 2
9
Lines
The number of line elements (line) in the SVG.
Player 1
8
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
6
Player 2
23
Groups
The number of group elements (g) in the SVG.
Player 1
3
Player 2
13
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
8
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
3
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
4
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
14
Player 2
21
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
14
Player 2
47
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
15
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
20
Player 2
77
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
5
Player 2
11
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
11
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.
