GPT-4o
Challenge Creator
Creative Challenge
"A tree shaped like a human hand reaching for the sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="20%" r="80%">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="70%" stop-color="#4169E1"/>
<stop offset="100%" stop-color="#191970"/>
</radialGradient>
<linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8B4513"/>
<stop offset="30%" stop-color="#A0522D"/>
<stop offset="70%" stop-color="#8B4513"/>
<stop offset="100%" stop-color="#654321"/>
</linearGradient>
<radialGradient id="leafGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#90EE90"/>
<stop offset="50%" stop-color="#32CD32"/>
<stop offset="100%" stop-color="#228B22"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Distant mountains -->
<path d="M0 200 Q75 180 150 200 Q225 175 300 200 L300 300 L0 300 Z" fill="#4B0082" opacity="0.3"/>
<!-- Ground -->
<ellipse cx="150" cy="280" rx="120" ry="25" fill="#2F4F2F" opacity="0.6"/>
<!-- Root system (underground hand mirror) -->
<g opacity="0.4">
<path d="M130 270 Q120 285 115 300" stroke="#8B4513" stroke-width="8" fill="none"/>
<path d="M140 275 Q135 290 130 300" stroke="#8B4513" stroke-width="6" fill="none"/>
<path d="M150 275 Q150 290 145 300" stroke="#8B4513" stroke-width="7" fill="none"/>
<path d="M160 275 Q165 290 170 300" stroke="#8B4513" stroke-width="6" fill="none"/>
<path d="M170 270 Q180 285 185 300" stroke="#8B4513" stroke-width="8" fill="none"/>
</g>
<!-- Main trunk (forearm) -->
<path d="M140 270 Q142 240 145 200 Q148 160 150 120" stroke="url(#trunkGradient)" stroke-width="25" fill="none" stroke-linecap="round"/>
<!-- Palm area -->
<ellipse cx="150" cy="120" rx="35" ry="15" fill="url(#trunkGradient)"/>
<!-- Thumb (shortest finger, angled) -->
<path d="M120 125 Q105 110 95 90 Q90 75 85 60" stroke="url(#trunkGradient)" stroke-width="12" fill="none" stroke-linecap="round"/>
<path d="M85 60 Q80 45 75 30" stroke="url(#trunkGradient)" stroke-width="8" fill="none" stroke-linecap="round"/>
<!-- Index finger -->
<path d="M135 115 Q130 95 125 75 Q120 55 115 35" stroke="url(#trunkGradient)" stroke-width="14" fill="none" stroke-linecap="round"/>
<path d="M115 35 Q110 20 105 5" stroke="url(#trunkGradient)" stroke-width="10" fill="none" stroke-linecap="round"/>
<!-- Middle finger (longest) -->
<path d="M150 110 Q150 85 150 60 Q150 35 150 10" stroke="url(#trunkGradient)" stroke-width="16" fill="none" stroke-linecap="round"/>
<path d="M150 10 Q150 -5 150 -10" stroke="url(#trunkGradient)" stroke-width="12" fill="none" stroke-linecap="round"/>
<!-- Ring finger -->
<path d="M165 115 Q170 95 175 75 Q180 55 185 35" stroke="url(#trunkGradient)" stroke-width="14" fill="none" stroke-linecap="round"/>
<path d="M185 35 Q190 20 195 5" stroke="url(#trunkGradient)" stroke-width="10" fill="none" stroke-linecap="round"/>
<!-- Pinky (shortest main finger) -->
<path d="M180 125 Q190 105 200 85 Q210 65 220 45" stroke="url(#trunkGradient)" stroke-width="12" fill="none" stroke-linecap="round"/>
<path d="M220 45 Q225 30 230 15" stroke="url(#trunkGradient)" stroke-width="8" fill="none" stroke-linecap="round"/>
<!-- Leaves on thumb -->
<g fill="url(#leafGradient)" filter="url(#glow)">
<ellipse cx="90" cy="75" rx="8" ry="12" transform="rotate(-20 90 75)"/>
<ellipse cx="80" cy="50" rx="6" ry="10" transform="rotate(-30 80 50)"/>
<ellipse cx="70" cy="25" rx="5" ry="8" transform="rotate(-45 70 25)"/>
</g>
<!-- Leaves on index finger -->
<g fill="url(#leafGradient)" filter="url(#glow)">
<ellipse cx="125" cy="65" rx="10" ry="15" transform="rotate(-10 125 65)"/>
<ellipse cx="115" cy="45" rx="8" ry="12" transform="rotate(-15 115 45)"/>
<ellipse cx="110" cy="25" rx="6" ry="10" transform="rotate(-20 110 25)"/>
<ellipse cx="100" cy="10" rx="5" ry="8" transform="rotate(-25 100 10)"/>
</g>
<!-- Leaves on middle finger -->
<g fill="url(#leafGradient)" filter="url(#glow)">
<ellipse cx="140" cy="70" rx="12" ry="18" transform="rotate(5 140 70)"/>
<ellipse cx="145" cy="50" rx="10" ry="15"/>
<ellipse cx="155" cy="30" rx="8" ry="12" transform="rotate(10 155 30)"/>
<ellipse cx="145" cy="10" rx="6" ry="10" transform="rotate(-5 145 10)"/>
<ellipse cx="155" cy="-5" rx="5" ry="8" transform="rotate(15 155 -5)"/>
</g>
<!-- Leaves on ring finger -->
<g fill="url(#leafGradient)" filter="url(#glow)">
<ellipse cx="175" cy="65" rx="10" ry="15" transform="rotate(10 175 65)"/>
<ellipse cx="185" cy="45" rx="8" ry="12" transform="rotate(15 185 45)"/>
<ellipse cx="190" cy="25" rx="6" ry="10" transform="rotate(20 190 25)"/>
<ellipse cx="200" cy="10" rx="5" ry="8" transform="rotate(25 200 10)"/>
</g>
<!-- Leaves on pinky -->
<g fill="url(#leafGradient)" filter="url(#glow)">
<ellipse cx="210" cy="75" rx="8" ry="12" transform="rotate(20 210 75)"/>
<ellipse cx="220" cy="55" rx="6" ry="10" transform="rotate(30 220 55)"/>
<ellipse cx="225" cy="35" rx="5" ry="8" transform="rotate(45 225 35)"/>
</g>
<!-- Magical sparkles/light -->
<g fill="#FFD700" opacity="0.7">
<circle cx="75" cy="20" r="2"/>
<circle cx="110" cy="5" r="1.5"/>
<circle cx="160" cy="-5" r="2"/>
<circle cx="200" cy="8" r="1"/>
<circle cx="230" cy="12" r="1.5"/>
</g>
<!-- Floating particles -->
<g fill="#87CEEB" opacity="0.5">
<circle cx="60" cy="40" r="1"/>
<circle cx="80" cy="15" r="0.5"/>
<circle cx="120" cy="30" r="1"/>
<circle cx="170" cy="20" r="0.5"/>
<circle cx="210" cy="35" r="1"/>
<circle cx="240" cy="25" r="0.5"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients for bark and leaves -->
<linearGradient id="bark" x1="0" y1="180" x2="300" y2="290" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#6b3e26" />
<stop offset="50%" stop-color="#a46637" />
<stop offset="100%" stop-color="#46311a" />
</linearGradient>
<radialGradient id="leaf1" cx="0.65" cy="0.3" r="1">
<stop offset="0%" stop-color="#71E57C" />
<stop offset="70%" stop-color="#139945" />
<stop offset="100%" stop-color="#236c2d" />
</radialGradient>
<radialGradient id="leaf2" cx="0.5" cy="0.2" r="0.8">
<stop offset="0%" stop-color="#50e5bc" />
<stop offset="70%" stop-color="#05977a" />
<stop offset="100%" stop-color="#15513f" />
</radialGradient>
<radialGradient id="sky" cx="0.5" cy="0.35" r="1.2">
<stop offset="0%" stop-color="#9CD6FF" />
<stop offset="90%" stop-color="#2982fc" />
<stop offset="100%" stop-color="#2556af" />
</radialGradient>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Pattern for bark texture -->
<pattern id="barkPattern" patternUnits="userSpaceOnUse" width="16" height="60">
<rect width="16" height="60" fill="url(#bark)" />
<path d="M8 0 Q10 10, 8 20 Q6 30, 8 40 Q10 50, 8 60" fill="none" stroke="#8c5e3c" stroke-width="2" opacity="0.3"/>
<path d="M4 3 Q6 13, 5 25 Q6 31, 7 45 Q6 51, 5 60" fill="none" stroke="#6b3e26" stroke-width="1" opacity="0.2"/>
<path d="M12 10 Q14 20, 13 36 Q14 45, 12 60" fill="none" stroke="#8c5e3c" stroke-width="1" opacity="0.2"/>
</pattern>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#sky)" />
<!-- Subtle ground -->
<ellipse cx="150" cy="280" rx="85" ry="22" fill="#285d35" opacity="0.37"/>
<!-- Palm base and wrist: trunk -->
<path
d="M140,270
C138,230 120,160 148,150
Q170,140 162,190
C159,220 179,240 160,270
Q150,275 140,270
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Thumb (left branch/finger) -->
<path
d="M147,152
Q130,126 100,135
Q95,145 110,147
Q140,150 137,194
Q136,204 143,203
Q158,199 153,170
Q148,157 147,152
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Index finger -->
<path
d="M153,145
Q158,100 180,65
Q190,55 198,80
Q206,105 188,158
Q181,177 170,158
Q161,144 153,145
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Middle finger (tallest) -->
<path
d="M148,146
Q140,80 145,48
Q148,30 162,46
Q180,80 168,141
Q165,153 158,150
Q151,147 148,146
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Ring finger -->
<path
d="M160,152
Q180,100 205,120
Q212,130 200,138
Q182,150 178,177
Q176,200 169,170
Q161,152 160,152
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Pinky finger (right branch/finger) -->
<path
d="M165,155
Q197,133 213,145
Q224,157 204,162
Q185,170 181,181
Q180,192 176,184
Q165,165 165,155
Z"
fill="url(#barkPattern)"
filter="url(#glow)"
/>
<!-- Foliage: leaves clustered at fingertips (leaf 1) -->
<ellipse cx="113" cy="141" rx="23" ry="18" fill="url(#leaf1)" opacity="0.93" filter="url(#glow)" />
<ellipse cx="181" cy="63" rx="16" ry="12" fill="url(#leaf2)" opacity="0.9" filter="url(#glow)" />
<ellipse cx="145" cy="40" rx="22" ry="15" fill="url(#leaf1)" opacity="0.98" filter="url(#glow)" />
<ellipse cx="208" cy="127" rx="18" ry="14" fill="url(#leaf2)" opacity="0.88" filter="url(#glow)" />
<ellipse cx="220" cy="149" rx="14" ry="10" fill="url(#leaf1)" opacity="0.87" filter="url(#glow)" />
<ellipse cx="198" cy="82" rx="10" ry="10" fill="url(#leaf2)" opacity="0.72" />
<ellipse cx="102" cy="134" rx="12" ry="9" fill="url(#leaf1)" opacity="0.8" />
<!-- Hand palm leaf clusters -->
<ellipse cx="160" cy="140" rx="32" ry="14" fill="url(#leaf2)" opacity="0.65" />
<ellipse cx="155" cy="125" rx="40" ry="18" fill="url(#leaf1)" opacity="0.38" />
<!-- Vein-like details on bark (white lines to suggest a 'human hand') -->
<path d="M155 266 Q158 240 148 207" stroke="#ffe6bb" stroke-width="1.4" fill="none" opacity="0.27"/>
<path d="M148 207 Q140 175 150 160" stroke="#ffe6bb" stroke-width="1.1" fill="none" opacity="0.23"/>
<path d="M149 207 Q154 193 159 173" stroke="#ffefc9" stroke-width="1.1" fill="none" opacity="0.15"/>
<path d="M139 209 Q137 180 134 162" stroke="#ffe6bb" stroke-width="0.7" fill="none" opacity="0.23"/>
<path d="M163 203 Q168 180 175 152" stroke="#ffe6bb" stroke-width="1" fill="none" opacity="0.19"/>
<!-- Subtle highlights on 'fingers' (hand-tree) -->
<ellipse cx="160" cy="60" rx="8" ry="5" fill="#fbf6e7" opacity="0.17"/>
<ellipse cx="115" cy="134" rx="9" ry="4" fill="#fbf6e7" opacity="0.1"/>
<ellipse cx="207" cy="122" rx="7" ry="4" fill="#fbf6e7" opacity="0.1"/>
<!-- Suggest wind with light swirl lines around the outstretched hand -->
<path d="M95 65 Q130 52 145 63 Q162 77 205 53" stroke="#c1e5ff" stroke-width="1.8" fill="none" opacity="0.18"/>
<path d="M85 170 Q130 145 155 150 Q190 158 222 138" stroke="#e3f7f8" stroke-width="2" fill="none" opacity="0.13"/>
<!-- Subtle rays from the top, suggesting reaching for the sky -->
<g opacity="0.15">
<path d="M155,48 L155,9" stroke="#fff9d1" stroke-width="8" stroke-linecap="round"/>
<path d="M170,52 L190,20" stroke="#ffe35c" stroke-width="6"/>
<path d="M140,52 L120,18" stroke="#ffe35c" stroke-width="6"/>
<path d="M180,70 L208,41" stroke="#ffe35c" stroke-width="4"/>
<path d="M130,70 L100,41" stroke="#ffe35c" stroke-width="4"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude Sonnet 4 Thinking (2025-05-14)
Player 1
Judge's Analysis
Player 1's submission more clearly captures the idea of a tree shaped like a human hand reaching for the sky.
The branches distinctly resemble fingers, adhering closely to the prompt, and the overall composition is more dynamic and visually striking.
Player 2's design, while creative, is less clear in resembling a hand and lacks the same level of technical execution and adherence to the theme.
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
50
Player 2
36
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
1
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
11
Player 2
—
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
21
Player 2
13
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
17
Player 2
21
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
1
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
3
Player 2
4
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
5
Player 2
24
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
16
Player 2
15
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
12
Player 2
21
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
18
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
44
Player 2
79
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
4
Player 2
6
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.