Creative Challenge
"A single tree with branches forming a hidden face."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="trunkGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8B4513"/>
<stop offset="100%" stop-color="#A0522D"/>
</linearGradient>
<radialGradient id="leafGradient" cx="0.5" cy="0.5" r="0.8">
<stop offset="0%" stop-color="#76b947"/>
<stop offset="100%" stop-color="#4e7f28"/>
</radialGradient>
<linearGradient id="faceGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Trunk -->
<rect x="140" y="150" width="20" height="100" fill="url(#trunkGradient)" />
<!-- Branches forming face outline -->
<path d="M150,150
Q100,100 150,50
Q200,100 150,150"
fill="none" stroke="#8B4513" stroke-width="5"/>
<!-- Eyes -->
<circle cx="135" cy="90" r="5" fill="#000" />
<circle cx="165" cy="90" r="5" fill="#000" />
<!-- Mouth -->
<path d="M135,120 Q150,130 165,120" stroke="#000" stroke-width="3" fill="none"/>
<!-- Leaves -->
<g fill="url(#leafGradient)">
<ellipse cx="150" cy="50" rx="60" ry="30" />
<ellipse cx="100" cy="100" rx="40" ry="20" />
<ellipse cx="200" cy="100" rx="40" ry="20" />
<ellipse cx="80" cy="140" rx="30" ry="15" />
<ellipse cx="220" cy="140" rx="30" ry="15" />
</g>
<!-- Hidden Face Overlay -->
<path d="M150,50
C170,80 170,120 150,150
C130,120 130,80 150,50"
fill="url(#faceGradient)" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Tree trunk gradient -->
<linearGradient id="trunkGradient" x1="0" y1="180" x2="0" y2="290" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#7a4f1d"/>
<stop offset="80%" stop-color="#c79038"/>
</linearGradient>
<!-- Foliage gradient -->
<radialGradient id="foliageGradient" cx="150" cy="85" r="95" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#9ee673" />
<stop offset="50%" stop-color="#5bc775" />
<stop offset="100%" stop-color="#1e915c" />
</radialGradient>
<!-- Face shadow -->
<radialGradient id="faceShade" cx="150" cy="120" r="50" gradientUnits="userSpaceOnUse">
<stop offset="50%" stop-color="#fff" stop-opacity="0.35" />
<stop offset="100%" stop-color="#0a512a" stop-opacity="0.13" />
</radialGradient>
<!-- Branches highlight -->
<linearGradient id="branchHighlight" x1="0" y1="0" x2="150" y2="90" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#ebeed5" stop-opacity="0.9" />
<stop offset="35%" stop-color="#59e393" stop-opacity="0.17" />
<stop offset="100%" stop-color="#216a48" stop-opacity="0.07" />
</linearGradient>
<!-- Pattern for bark -->
<pattern id="barkPattern" patternUnits="userSpaceOnUse" width="10" height="20">
<rect x="0" y="0" width="10" height="20" fill="none"/>
<path d="M2 2 Q4 5 2 10 Q5 13 3 18" stroke="#a4723a" stroke-width="1" fill="none"/>
</pattern>
</defs>
<!-- Tree trunk -->
<path d="M145 290 Q140 220 150 170 Q160 220 155 290 Z"
fill="url(#trunkGradient)" stroke="#7a4f1d" stroke-width="2"/>
<path d="M150 170 Q142 135 130 120 Q140 135 142 170" fill="url(#barkPattern)" opacity="0.11"/>
<path d="M150 170 Q155 140 175 120 Q160 145 152 170" fill="url(#barkPattern)" opacity="0.09"/>
<!-- Foliage base shape -->
<ellipse cx="150" cy="100" rx="90" ry="72"
fill="url(#foliageGradient)" filter="url(#foliageBlur)" />
<filter id="foliageBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.4"/>
</filter>
<!-- Face shape: branches outline -->
<g>
<!-- Left profile (brow, forehead, nose, mouth, chin) -->
<path d="M85 95 Q105 80 120 90 Q110 100 106 110
Q112 118 112 128 Q112 135 108 138 Q106 144 116 148
Q112 156 104 158 Q105 170 121 174"
stroke="#44391a" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.75"/>
<!-- Right profile -->
<path d="M215 95 Q195 80 180 90 Q190 100 194 110
Q188 118 188 128 Q188 135 192 138 Q194 144 184 148
Q188 156 196 158 Q195 170 179 174"
stroke="#44391a" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.75"/>
<!-- Chin connect -->
<path d="M121 174 Q136 185 150 182 Q164 185 179 174"
stroke="#302918" stroke-width="7" fill="none" stroke-linecap="round" opacity="0.86"/>
<!-- Bridge (nose) -->
<path d="M142 130 Q150 125 158 130" stroke="#735126" stroke-width="5" fill="none" opacity="0.85"/>
</g>
<!-- Hidden face overlay shade -->
<ellipse cx="150" cy="120" rx="48" ry="44" fill="url(#faceShade)" opacity="0.2"/>
<!-- Eyes: branches split into almond shapes -->
<g>
<path d="M122 120 Q128 110 138 115 Q130 119 122 120 Z"
fill="#fff" stroke="#388055" stroke-width="2"/>
<ellipse cx="128" cy="118" rx="4" ry="3.2" fill="#274833"/>
<ellipse cx="128.7" cy="117.2" rx="1.6" ry="1.2" fill="#b8fee8" opacity="0.8"/>
<path d="M178 120 Q172 110 162 115 Q170 119 178 120 Z"
fill="#fff" stroke="#388055" stroke-width="2"/>
<ellipse cx="172" cy="118" rx="4" ry="3.2" fill="#274833"/>
<ellipse cx="172.7" cy="117.2" rx="1.6" ry="1.2" fill="#b8fee8" opacity="0.8"/>
</g>
<!-- Nose (subtle) -->
<path d="M148 120 Q151 128 146 132" stroke="#876a1f" stroke-width="3" fill="none" opacity="0.65"/>
<!-- Suggestions of lips (branch) -->
<ellipse cx="150" cy="144" rx="12" ry="4" fill="#e9c2a2" opacity="0.25"/>
<path d="M139 143 Q150 148 161 143" stroke="#7f613b" stroke-width="3" fill="none" opacity="0.65"/>
<!-- Main 'vessel' branches -->
<g stroke="url(#branchHighlight)" stroke-width="6" stroke-linecap="round" fill="none">
<path d="M150 170 Q152 132 99 102"/>
<path d="M150 170 Q148 127 201 102"/>
<path d="M150 170 Q143 120 70 125"/>
<path d="M150 170 Q158 115 230 124"/>
<path d="M150 170 Q147 156 145 90"/>
<path d="M150 170 Q153 156 155 90"/>
</g>
<!-- Sub-branches -->
<g stroke="#aecc77" stroke-width="2.8" stroke-linecap="round">
<path d="M129 98 Q115 82 95 92"/>
<path d="M171 96 Q185 79 205 88"/>
<path d="M90 131 Q78 118 62 128"/>
<path d="M210 131 Q222 117 238 127"/>
<path d="M147 76 Q146 63 161 63 Q163 80 155 92"/>
</g>
<!-- Foliage highlights, to give more painterly look -->
<ellipse cx="108" cy="73" rx="38" ry="16" fill="#cbffeb" opacity="0.07"/>
<ellipse cx="190" cy="67" rx="24" ry="10" fill="#f1fdd1" opacity="0.06"/>
<ellipse cx="160" cy="132" rx="42" ry="13" fill="#b5efc7" opacity="0.04"/>
<!-- Roots -->
<g stroke="#9c6c3b" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.64">
<path d="M148 292 Q142 300 135 290"/>
<path d="M154 292 Q160 300 170 290"/>
<path d="M147 287 Q130 293 120 280"/>
<path d="M153 287 Q170 293 180 280"/>
</g>
<!-- Ground grass -->
<ellipse cx="150" cy="293" rx="55" ry="10" fill="#2ead65" opacity="0.7"/>
<ellipse cx="150" cy="297" rx="35" ry="5" fill="#3ef384" opacity="0.5"/>
<!-- Subtle glow to suggest spiritual/metaphorical presence -->
<ellipse cx="150" cy="120" rx="55" ry="54" fill="#ebfff1" opacity="0.14"/>
<ellipse cx="150" cy="120" rx="80" ry="70" fill="#fff6d2" opacity="0.06"/>
</svg>Judge's Analysis
Player 2's submission exhibits greater creativity and technical execution by seamlessly integrating the hidden face into the tree's branches and foliage while maintaining a natural and artistic appearance.
In contrast, Player 1's design, while adhering to the prompt, feels more simplistic and lacks the same level of refinement and visual appeal as Player 2's composition.
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.
