Creative Challenge
"A tree growing from an open book, its branches turning into words."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f8e9d2"/>
<stop offset="100%" stop-color="#a8dadc"/>
</linearGradient>
<linearGradient id="pageGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fffefc"/>
<stop offset="100%" stop-color="#f0e6d6"/>
</linearGradient>
<radialGradient id="leafGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#a8e6cf"/>
<stop offset="100%" stop-color="#379683"/>
</radialGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- open book -->
<g filter="url(#shadow)">
<path d="M50 240 L130 200 L220 240 L130 280 Z" fill="url(#pageGrad)" stroke="#c2b280" stroke-width="2"/>
<path d="M130 200 L130 280" stroke="#b2986a" stroke-width="4"/>
</g>
<!-- trunk and main branches -->
<path d="M132 200 C135 180 130 150 140 140 C145 130 150 145 155 140 C160 135 155 120 160 110" fill="none" stroke="#8b5a2b" stroke-width="8" stroke-linecap="round"/>
<path d="M160 110 C170 100 190 90 200 80" fill="none" stroke="#8b5a2b" stroke-width="6"/>
<path d="M155 140 C145 120 120 100 100 95" fill="none" stroke="#8b5a2b" stroke-width="6"/>
<path d="M160 110 C150 95 135 85 120 80" fill="none" stroke="#8b5a2b" stroke-width="4"/>
<path d="M160 110 C175 95 190 85 205 75" fill="none" stroke="#8b5a2b" stroke-width="4"/>
<!-- word-leaves -->
<text x="200" y="80" fill="#379683" font-size="12" font-family="serif" transform="rotate(10 200 80)">imagination</text>
<text x="190" y="70" fill="#379683" font-size="10" font-family="serif" transform="rotate(5 190 70)">growth</text>
<text x="100" y="95" fill="#379683" font-size="11" font-family="serif" transform="rotate(-15 100 95)">knowledge</text>
<text x="120" y="80" fill="#379683" font-size="9" font-family="serif" transform="rotate(-20 120 80)">story</text>
<text x="150" y="140" fill="#379683" font-size="10" font-family="serif" transform="rotate(0 150 140)">words</text>
<text x="180" y="60" fill="#379683" font-size="8" font-family="serif" transform="rotate(15 180 60)">dream</text>
<text x="90" y="110" fill="#379683" font-size="8" font-family="serif" transform="rotate(-25 90 110)">wisdom</text>
<text x="210" y="90" fill="#379683" font-size="9" font-family="serif" transform="rotate(30 210 90)">courage</text>
<!-- abstract leaf shapes -->
<ellipse cx="205" cy="78" rx="5" ry="8" fill="url(#leafGrad)"/>
<ellipse cx="95" cy="92" rx="4" ry="6" fill="url(#leafGrad)"/>
<ellipse cx="125" cy="75" rx="4" ry="6" fill="url(#leafGrad)"/>
<ellipse cx="150" cy="140" rx="6" ry="9" fill="url(#leafGrad)"/>
<!-- decorative swirls -->
<path d="M220 85 C225 75 235 75 240 85" fill="none" stroke="#379683" stroke-width="1.5"/>
<path d="M80 100 C75 90 65 90 60 100" fill="none" stroke="#379683" stroke-width="1.5"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="bookGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#5d4037;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#8d6e63;stop-opacity:1"/>
</linearGradient>
<linearGradient id="trunkGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#6d4c41;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#8d6e63;stop-opacity:1"/>
</linearGradient>
<path id="branch1" d="M150 150 Q140 50 130 30"/>
<path id="branch2" d="M150 150 Q160 40 180 20"/>
<path id="branch3" d="M150 150 Q130 100 110 80"/>
</defs>
<!-- Book Base -->
<rect x="90" y="220" width="120" height="60" fill="url(#bookGrad)" rx="5"/>
<path d="M90 220 L210 220 Q215 230 210 240 L90 240 Q85 230 90 220" fill="#efebe9"/>
<!-- Tree Trunk -->
<path d="M140 220 Q150 140 160 120 Q150 100 140 80 Q150 60 160 40 L150 30 Q140 50 130 30 L140 40 Q130 60 120 80 Q130 100 140 120 Q130 140 120 160" fill="url(#trunkGrad)"/>
<!-- Word Branches -->
<text font-family="Georgia" font-size="12" fill="#3e2723">
<textPath href="#branch1" startOffset="20%">
<tspan rotate="-30">Roots</tspan>
<tspan dx="10" rotate="-15">of</tspan>
<tspan dx="10">Knowledge</tspan>
</textPath>
<textPath href="#branch2" startOffset="30%">
<tspan rotate="15">Stories</tspan>
<tspan dx="10" rotate="25">Bloom</tspan>
</textPath>
<textPath href="#branch3" startOffset="10%">
<tspan rotate="-10">Wisdom</tspan>
<tspan dx="15" rotate="10">Grows</tspan>
</textPath>
</text>
<!-- Decorative Elements -->
<g fill="#689f38" opacity="0.8">
<path d="M160 80 Q165 70 170 75 Q175 80 180 70" stroke="#33691e" stroke-width="0.5"/>
<circle cx="135" cy="100" r="4"/>
<circle cx="165" cy="90" r="3"/>
</g>
<!-- Falling Letters -->
<g font-family="Courier" font-size="14" fill="#d32f2f" opacity="0.7">
<text x="180" y="50" transform="rotate(25)">A</text>
<text x="120" y="70" transform="rotate(-15)">B</text>
<text x="160" y="110" transform="rotate(10)">C</text>
</g>
</svg>Judge's Analysis
Player 1's submission is more visually appealing and adheres better to the prompt.
The tree branches seamlessly turn into words, and the overall composition effectively integrates the book and tree elements.
Player 2's submission is less refined and feels less cohesive in connecting the tree and text elements, reducing its visual impact and prompt alignment.
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 single tree growing on a tiny floating island in a starry galaxy."
"Rocketship-shaped hot air balloon floating above a city at sunrise."
"Two alien chefs in a cook-off, each presenting their most bizarre space dish."
"An ice cream cone melting under a tiny umbrella."
