Creative Challenge
"Two trees shaking hands under a glowing, smiling moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="moonGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#fff7d6;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#ffeb7a;stop-opacity:0"/>
</radialGradient>
<linearGradient id="trunk" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#8B4513"/>
<stop offset="100%" style="stop-color:#654321"/>
</linearGradient>
<linearGradient id="leaves1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#2d5a27"/>
<stop offset="100%" style="stop-color:#1a4314"/>
</linearGradient>
<linearGradient id="leaves2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a4314"/>
<stop offset="100%" style="stop-color:#2d5a27"/>
</linearGradient>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#1a1a2e"/>
<!-- Moon glow -->
<circle cx="150" cy="60" r="80" fill="url(#moonGlow)" opacity="0.6"/>
<!-- Moon -->
<circle cx="150" cy="60" r="40" fill="#fff7d6"/>
<!-- Moon face -->
<path d="M130 50 Q150 70 170 50" stroke="#1a1a2e" stroke-width="3" fill="none"/>
<circle cx="135" cy="45" r="5" fill="#1a1a2e"/>
<circle cx="165" cy="45" r="5" fill="#1a1a2e"/>
<!-- Left tree -->
<path d="M100 250 C80 200 60 180 100 150 C140 120 160 160 140 200 Z" fill="url(#leaves1)"/>
<rect x="90" y="200" width="20" height="100" fill="url(#trunk)"/>
<!-- Right tree -->
<path d="M200 250 C220 200 240 180 200 150 C160 120 140 160 160 200 Z" fill="url(#leaves2)"/>
<rect x="190" y="200" width="20" height="100" fill="url(#trunk)"/>
<!-- Shaking hands (branches) -->
<path d="M120 180 C130 170 170 170 180 180"
stroke="#654321"
stroke-width="8"
fill="none"
stroke-linecap="round"/>
<!-- Stars -->
<g fill="#ffffff">
<circle cx="50" cy="30" r="2"/>
<circle cx="250" cy="40" r="2"/>
<circle cx="80" cy="70" r="2"/>
<circle cx="220" cy="80" r="2"/>
<circle cx="40" cy="100" r="2"/>
<circle cx="260" cy="110" r="2"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="moonGlow" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#fffdea" />
<stop offset="50%" stop-color="#ffe066" />
<stop offset="100%" stop-color="#ffd700" stop-opacity="0.4"/>
</radialGradient>
<radialGradient id="moonBody" cx="60%" cy="40%" r="68%">
<stop offset="0%" stop-color="#fffdf1"/>
<stop offset="85%" stop-color="#ffe591"/>
<stop offset="100%" stop-color="#fadc6b"/>
</radialGradient>
<linearGradient id="skyNight" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1a237e" />
<stop offset="100%" stop-color="#0d1330" />
</linearGradient>
<linearGradient id="leaf1" x1="0" y1="0" x2="0.7" y2="0.7">
<stop offset="0%" stop-color="#34d97b"/>
<stop offset="100%" stop-color="#169974"/>
</linearGradient>
<linearGradient id="leaf2" x1="1" y1="0" x2="0.2" y2="1">
<stop offset="0%" stop-color="#baffc9"/>
<stop offset="90%" stop-color="#13b66e"/>
</linearGradient>
<linearGradient id="trunkBark1" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#794b19"/>
<stop offset="100%" stop-color="#ca8839"/>
</linearGradient>
<linearGradient id="trunkBark2" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#995c39"/>
<stop offset="100%" stop-color="#db9e68"/>
</linearGradient>
<radialGradient id="groundShade" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#38c999" />
<stop offset="90%" stop-color="#0e6848" />
</radialGradient>
<radialGradient id="handGlow" cx="70%" cy="45%" r="60%">
<stop offset="0%" stop-color="#ffe17b" stop-opacity="0.7"/>
<stop offset="70%" stop-color="#f8db88" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#fffde0" stop-opacity="0"/>
</radialGradient>
<!-- Patterns for bark detail -->
<pattern id="barkLines1" width="8" height="12" patternUnits="userSpaceOnUse">
<path d="M2 0 Q4 4 2 8 Q4 12 6 12" stroke="#ad6b32" stroke-width="1" fill="none"/>
</pattern>
<pattern id="barkLines2" width="10" height="16" patternUnits="userSpaceOnUse">
<path d="M5 0 Q7 7 5 14" stroke="#e7ab6a" stroke-width="1" fill="none"/>
</pattern>
</defs>
<!-- Night Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyNight)"/>
<!-- Moon glow halo -->
<circle cx="220" cy="65" r="60" fill="url(#moonGlow)" opacity="0.8"/>
<!-- Moon Body -->
<ellipse cx="220" cy="65" rx="41" ry="40" fill="url(#moonBody)" />
<!-- Moon expression -->
<!-- Smile -->
<path d="M206 75 Q220 90 234 75" fill="none" stroke="#eeb545" stroke-width="3" stroke-linecap="round"/>
<!-- Cheeks -->
<ellipse cx="210" cy="66" rx="4" ry="2" fill="#fff0b8" opacity="0.7"/>
<ellipse cx="230" cy="66" rx="4" ry="2" fill="#fff0b8" opacity="0.7"/>
<!-- Eyes -->
<ellipse cx="212" cy="60" rx="2.4" ry="3.2" fill="#493423" />
<ellipse cx="228" cy="60" rx="2.4" ry="3.2" fill="#493423" />
<ellipse cx="213" cy="59" rx="0.7" ry="1.1" fill="#fff" opacity="0.7"/>
<ellipse cx="229" cy="59" rx="0.7" ry="1.1" fill="#fff" opacity="0.7"/>
<!-- Crescent highlight -->
<path d="M235 47 Q248 60 230 70" fill="none" stroke="#fffbe7" stroke-width="6" opacity="0.13"/>
<!-- Stars -->
<g opacity="0.6">
<circle cx="60" cy="40" r="1.3" fill="#fffbe5"/>
<circle cx="95" cy="55" r="1.1" fill="#ffe"/>
<circle cx="151" cy="41" r="0.7" fill="#e5fffc"/>
<circle cx="28" cy="110" r="1" fill="#fffbe5"/>
<circle cx="269" cy="35" r="0.97" fill="#fffbe5"/>
<circle cx="250" cy="22" r="1.5" fill="#fffbe5"/>
<circle cx="188" cy="28" r="0.95" fill="#fffbe5"/>
<circle cx="138" cy="70" r="1.2" fill="#ffe"/>
<circle cx="85" cy="22" r="1.1" fill="#fffbe5"/>
<polygon points="144,25 145,30 150,30 146,33 147,38 144,35 141,38 142,33 138,30 143,30"
fill="#fff8c7" opacity="0.7"/>
</g>
<!-- Ground -->
<ellipse cx="150" cy="280" rx="120" ry="38" fill="url(#groundShade)" opacity="1" />
<!-- Hand glow between trees -->
<ellipse cx="150" cy="166" rx="38" ry="14" fill="url(#handGlow)" opacity="0.6"/>
<!-- Left Tree Trunk -->
<g>
<path d="M85 260 Q88 195 110 150 Q121 130 113 106 Q105 82 98 62 Q90 45 86 86 Q83 120 91 138 Q99 156 92 168 Q80 195 85 260 Z"
fill="url(#trunkBark1)"/>
<path d="M110 150 Q105 170 92 168 Q87 200 100 247 Q102 255 109 247 Q121 233 120 210 Q119 204 120 200 Q121 197 115 178 Q110 167 110 150 Z"
fill="url(#trunkBark2)" opacity="0.6"/>
<!-- Bark detail with pattern -->
<rect x="85" y="120" width="22" height="130" fill="url(#barkLines1)" opacity="0.2"/>
</g>
<!-- Left Tree Leaves -->
<g>
<ellipse cx="90" cy="105" rx="30" ry="24" fill="url(#leaf1)" />
<ellipse cx="70" cy="135" rx="16" ry="16" fill="url(#leaf1)" />
<ellipse cx="115" cy="123" rx="12" ry="23" fill="url(#leaf2)" />
<ellipse cx="103" cy="82" rx="15" ry="15" fill="url(#leaf2)" />
<ellipse cx="128" cy="104" rx="8" ry="17" fill="url(#leaf2)" />
<!-- Leaf details -->
<path d="M90 105 Q100 105 108 92" stroke="#52b878" stroke-width="1.8" fill="none" opacity="0.47"/>
<path d="M70 135 Q83 140 90 125" stroke="#52b878" stroke-width="1.2" fill="none" opacity="0.3"/>
</g>
<!-- Right Tree Trunk -->
<g>
<path d="M215 260 Q212 195 190 150 Q179 130 187 108 Q195 86 202 62 Q210 40 214 80 Q217 110 209 133 Q201 156 208 168 Q220 195 215 260 Z"
fill="url(#trunkBark2)"/>
<path d="M190 150 Q195 170 208 168 Q213 200 201 247 Q198 255 191 247 Q179 233 180 210 Q181 204 180 200 Q179 197 185 178 Q190 167 190 150 Z"
fill="url(#trunkBark1)" opacity="0.62"/>
<!-- Bark detail with pattern -->
<rect x="190" y="120" width="22" height="130" fill="url(#barkLines2)" opacity="0.18"/>
</g>
<!-- Right Tree Leaves -->
<g>
<ellipse cx="212" cy="108" rx="30" ry="23" fill="url(#leaf2)" />
<ellipse cx="237" cy="133" rx="16" ry="16" fill="url(#leaf2)" />
<ellipse cx="187" cy="117" rx="12" ry="23" fill="url(#leaf1)" />
<ellipse cx="199" cy="82" rx="17" ry="14" fill="url(#leaf1)" />
<ellipse cx="172" cy="110" rx="8" ry="16" fill="url(#leaf2)" />
<!-- Leaf details -->
<path d="M212 108 Q201 118 220 98" stroke="#40d58f" stroke-width="1.6" fill="none" opacity="0.38"/>
<path d="M237 133 Q226 130 220 120" stroke="#40d58f" stroke-width="1.1" fill="none" opacity="0.33"/>
</g>
<!-- Intertwined Branches: The 'Handshake' -->
<g>
<!-- Left branch reaching right -->
<path d="M116 120 Q135 145 145 166 Q147 170 150 169 Q153 170 155 166 Q165 148 184 120" fill="none" stroke="#be7c44" stroke-width="7" stroke-linecap="round"/>
<!-- Hand shapes (layered highlights and outlines) -->
<!-- Left Tree Hand -->
<g>
<!-- Palm -->
<ellipse cx="147.5" cy="173" rx="11" ry="6.4" fill="#f2be6b" stroke="#9e6a35" stroke-width="2"/>
<!-- Fingers -->
<ellipse cx="139.5" cy="172" rx="4" ry="1.3" fill="#f8e5bf"/>
<ellipse cx="143" cy="177" rx="4.3" ry="1.1" fill="#e7c075" />
<ellipse cx="152" cy="177" rx="5" ry="1.1" fill="#feedbe" />
<ellipse cx="156" cy="172" rx="4" ry="1.3" fill="#eed398"/>
<!-- Knuckles -->
<ellipse cx="148" cy="172" rx="1.7" ry="0.6" fill="#ffe7b0" opacity="0.5"/>
<ellipse cx="146" cy="171" rx="0.7" ry="0.3" fill="#fffce3" opacity="0.4"/>
<!-- Thumb highlight -->
<ellipse cx="140.5" cy="174" rx="1.3" ry="0.55" fill="#fff4c1" opacity="0.6"/>
</g>
<!-- Right Tree Hand -->
<g>
<!-- Palm -->
<ellipse cx="152.5" cy="173" rx="11" ry="6.4" fill="#fedc9f" stroke="#c09742" stroke-width="2"/>
<!-- Fingers -->
<ellipse cx="160.5" cy="172" rx="4" ry="1.3" fill="#f3e2b1"/>
<ellipse cx="157" cy="177" rx="4.6" ry="1.2" fill="#f7c450" />
<ellipse cx="148" cy="177" rx="5" ry="1.1" fill="#f9e6a4" />
<ellipse cx="144" cy="172" rx="3.4" ry="1.1" fill="#fbe8ae"/>
<!-- Knuckles -->
<ellipse cx="152" cy="172" rx="1.7" ry="0.6" fill="#fff7ca" opacity="0.5"/>
<ellipse cx="154" cy="171" rx="0.7" ry="0.3" fill="#fffce3" opacity="0.45"/>
<ellipse cx="160" cy="174" rx="1.3" ry="0.55" fill="#fff5be" opacity="0.4"/>
</g>
<!-- Outlined joined hands -->
<ellipse cx="150" cy="173" rx="15" ry="8.8" fill="none" stroke="#cd993c" stroke-width="2" opacity="0.52"/>
<!-- Touch sparkle -->
<ellipse cx="150" cy="174" rx="1.7" ry="0.7" fill="#fffbee" opacity="0.7"/>
<ellipse cx="149" cy="171.5" rx="0.8" ry="0.24" fill="#fffac8" opacity="0.7"/>
</g>
<!-- Added stylistic grass base -->
<g>
<path d="M59 276 Q75 270 82 276 Q89 282 100 270 Q107 264 115 276 Q122 283 130 269 Q136 259 144 272 Q149 278 158 268 Q165 259 173 273 Q181 284 189 268 Q196 256 199 272 Q202 284 216 270 Q226 261 234 280"
fill="none" stroke="#34f190" stroke-width="3" opacity="0.27"/>
<path d="M72 288 Q90 264 101 285 Q115 292 127 275 Q140 260 143 287 Q154 290 169 277 Q181 267 189 286 Q202 292 213 278 Q224 267 234 291" fill="none" stroke="#19ce61" stroke-width="2" opacity="0.23"/>
</g>
<!-- Narration: Smiling moon watches over trees exchanging a glowing handshake -->
</svg>Judge's Analysis
Player 2's submission is more visually dynamic and creative, showing intricate tree designs, glowing elements, and a more sophisticated depiction of the trees shaking hands.
The composition is balanced, with the moon and its expression integrated smoothly.
While Player 1's submission is simpler and adheres to the prompt, it lacks the same level of detail and visual impact as Player 2's submission.
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
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
The number of rectangle elements (rect) in the SVG.
The number of circle elements (circle) in the SVG.
The number of ellipse elements (ellipse) in the SVG.
The number of line elements (line) in the SVG.
The number of polygon elements (polygon) in the SVG.
The number of path elements (path) in the SVG.
The number of group elements (g) in the SVG.
Visual Effects Metrics
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
The number of pattern definitions (pattern) in the SVG.
The number of filter definitions (filter) in the SVG.
The number of mask definitions (mask) in the SVG.
The number of clipping path definitions (clipPath) in the SVG.
The number of elements with opacity attributes in the SVG.
The number of elements with stroke attributes in the SVG.
Colors Metrics
The number of unique colors used in the SVG.
Interactivity Metrics
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
The number of elements with transform attributes in the SVG.
Complexity Metrics
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
The maximum nesting level of group elements (g) in the SVG.
The number of elements defined within the defs element in the SVG.
The number of use elements (use) in the SVG.
Text Metrics
The number of text elements (text) in the SVG.
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.
Similar Challenges
"A snail racing a rocket on a winding rainbow road under a starry sky."
"Cat balancing on a unicycle while juggling fish under a starlit sky."
"A snail racing against a rocket on a rainbow track."
