Creative Challenge
"An ancient tree with a glowing doorway at its base under a midnight sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="sky" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#0B1026"/>
<stop offset="100%" stop-color="#000510"/>
</radialGradient>
<radialGradient id="doorlight" cx="50%" cy="100%" r="60%">
<stop offset="0%" stop-color="#FFE897" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#FF9B42" stop-opacity="0"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#sky)"/>
<!-- Stars -->
<g fill="#FFF">
<circle cx="50" cy="30" r="1"/>
<circle cx="150" cy="20" r="1.5"/>
<circle cx="250" cy="40" r="1"/>
<circle cx="80" cy="60" r="1"/>
<circle cx="200" cy="50" r="1"/>
<circle cx="280" cy="80" r="0.8"/>
<circle cx="30" cy="100" r="1.2"/>
</g>
<!-- Tree trunk -->
<path d="M120 280 Q130 200 150 150 Q170 100 160 50 Q140 80 130 120 Q110 150 120 280" fill="#3A2215"/>
<path d="M180 280 Q170 200 150 150 Q130 100 140 50 Q160 80 170 120 Q190 150 180 280" fill="#2A1810"/>
<!-- Tree roots -->
<path d="M120 280 Q80 260 40 270 Q90 250 120 280" fill="#2A1810"/>
<path d="M180 280 Q220 260 260 270 Q210 250 180 280" fill="#2A1810"/>
<!-- Tree branches -->
<g fill="none" stroke="#2A1810" stroke-width="8">
<path d="M140 100 Q100 90 80 100"/>
<path d="M160 80 Q200 70 220 85"/>
<path d="M145 130 Q105 125 70 140"/>
<path d="M155 110 Q195 105 230 120"/>
</g>
<!-- Magical door -->
<path d="M135 260 Q150 240 165 260 L165 280 L135 280 Z" fill="#1A0F08"/>
<path d="M138 265 Q150 248 162 265 L162 280 L138 280 Z" fill="url(#doorlight)" filter="url(#glow)"/>
<!-- Door runes -->
<g stroke="#FFE897" stroke-width="0.5" filter="url(#glow)">
<path d="M140 270 L145 270"/>
<path d="M155 270 L160 270"/>
<path d="M148 275 L152 275"/>
</g>
<!-- Magical light effect -->
<circle cx="150" cy="265" r="20" fill="url(#doorlight)" opacity="0.3"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGrad" cx="50%" cy="100%" r="70%">
<stop offset="0%" stop-color="#00072D"/>
<stop offset="100%" stop-color="#1A1F6D"/>
</radialGradient>
<linearGradient id="trunkGrad" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#2C180F"/>
<stop offset="100%" stop-color="#4A2A1B"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feComposite operator="over" in="SourceGraphic"/>
</filter>
<pattern id="bark" patternUnits="userSpaceOnUse" width="8" height="8">
<path d="M0 8 L8 0 M-2 2 L2-2 M6 10 L10 6" stroke="#674832" stroke-width="1"/>
</pattern>
</defs>
<!-- Sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<g opacity="0.7">
<circle cx="240" cy="60" r="4" fill="#F6F4D2" opacity="0.8"/>
<circle cx="180" cy="90" r="2" fill="#FFF8E3"/>
<circle cx="80" cy="40" r="3" fill="#E4E9FD" opacity="0.6"/>
</g>
<!-- Ancient Tree -->
<path d="M150 250 C 120 180, 180 120, 150 50 L170 40 C200 120, 130 190, 150 250"
fill="url(#trunkGrad)" stroke="#23190F" stroke-width="3"/>
<rect x="140" y="230" width="20" height="40" fill="url(#bark)"/>
<!-- Mystical Doorway -->
<g filter="url(#glow)" transform="translate(135 235)">
<path d="M15 0 L30 15 L15 30 L0 15 Z" fill="#FFE08C" transform="rotate(45 15 15)"/>
<path d="M15 5a10 14 0 0 1 0 20" fill="none" stroke="#FFD700" stroke-width="2" stroke-linecap="round"/>
<circle cx="15" cy="15" r="12" fill="none" stroke="url(#doorGlow)" stroke-width="4" opacity="0.3"/>
</g>
<!-- Roots -->
<g stroke="#4A2A1B" stroke-width="3">
<path d="M130 280 q-30 -15 -40 -30" fill="none"/>
<path d="M170 280 q30 -25 45 -35" fill="none"/>
<path d="M150 270 q-10 20 -25 25" fill="none"/>
</g>
<!-- Ambient Particles -->
<g opacity="0.7">
<circle cx="50" cy="150" r="2" fill="#FFEE99"/>
<path d="M200 200 l5-5" stroke="#C2B8FF" stroke-width="1.5"/>
<circle cx="250" cy="120" r="1.5" fill="#B8FFD5"/>
</g>
</svg>Judge's Analysis
Player 1's submission better adheres to the prompt by depicting an ancient tree with a glowing doorway at its base under a midnight sky.
The tree structure is more recognizable, and the glowing doorway is well-placed and visually clear.
Player 2's submission lacks clarity in representing the tree and doorway, making it less aligned with the prompt and less visually compelling overall.
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
"An astronaut planting a flag on a giant slice of pizza floating in space."
"An octopus holding a cupcake on each tentacle under a disco ball."
"Flamingo playing a saxophone under a starry night sky"
"A steam-powered mechanical hummingbird with clockwork wings"
