Creative Challenge
"An upside-down tree with its roots reaching for the stars."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="40%" r="70%" fx="50%" fy="40%">
<stop offset="0%" style="stop-color:#302050;" />
<stop offset="30%" style="stop-color:#1A0A30;" />
<stop offset="100%" style="stop-color:#000010;" />
</radialGradient>
<linearGradient id="trunkGradient" x1="40%" y1="0%" x2="60%" y2="0%">
<stop offset="0%" style="stop-color:#4A3B31;" />
<stop offset="50%" style="stop-color:#795548;" />
<stop offset="100%" style="stop-color:#4A3B31;" />
</linearGradient>
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="10%" style="stop-color:rgba(255,255,255,0.8);" />
<stop offset="30%" style="stop-color:rgba(255,255,240,0.5);" />
<stop offset="70%" style="stop-color:rgba(230,230,255,0.2);" />
<stop offset="100%" style="stop-color:rgba(200,200,255,0);" />
</radialGradient>
<radialGradient id="rootTipGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgba(230,230,255,0.9);" />
<stop offset="50%" style="stop-color:rgba(200,200,255,0.5);" />
<stop offset="100%" style="stop-color:rgba(180,180,255,0);" />
</radialGradient>
<filter id="galaxyBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<!-- 1. Background Sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- 2. Nebula -->
<ellipse cx="150" cy="120" rx="180" ry="100" fill="rgba(80, 60, 130, 0.12)" filter="url(#galaxyBlur)"/>
<ellipse cx="150" cy="100" rx="150" ry="70" fill="rgba(100, 80, 150, 0.08)" filter="url(#galaxyBlur)" transform="rotate(30 150 100)"/>
<!-- 3. Stars -->
<g id="stars">
<circle cx="50" cy="30" r="0.7" fill="#FFF" opacity="0.6"/> <circle cx="180" cy="50" r="0.9" fill="#FFF" opacity="0.7"/>
<circle cx="250" cy="80" r="0.6" fill="#FFF" opacity="0.5"/> <circle cx="100" cy="100" r="1" fill="#FFF" opacity="0.8"/>
<circle cx="30" cy="120" r="0.8" fill="#FFF" opacity="0.6"/> <circle cx="200" cy="20" r="0.9" fill="#FFF" opacity="0.9"/>
<circle cx="270" cy="40" r="0.7" fill="#FFF" opacity="0.7"/> <circle cx="80" cy="70" r="0.8" fill="#FFF"/>
<circle cx="120" cy="20" r="0.5" fill="#FFF" opacity="0.4"/> <circle cx="220" cy="110" r="0.7" fill="#FFF" opacity="0.6"/>
<circle cx="60" cy="130" r="0.9" fill="#FFF" opacity="0.8"/> <circle cx="280" cy="140" r="0.6" fill="#FFF" opacity="0.5"/>
<circle cx="15" cy="15" r="0.6" fill="#FFF" opacity="0.5"/> <circle cx="285" cy="15" r="0.6" fill="#FFF" opacity="0.5"/>
<circle cx="15" cy="200" r="0.5" fill="#FFF" opacity="0.3"/> <circle cx="285" cy="200" r="0.5" fill="#FFF" opacity="0.3"/>
<circle cx="40" cy="250" r="0.4" fill="#FFF" opacity="0.2"/> <circle cx="260" cy="250" r="0.4" fill="#FFF" opacity="0.2"/>
<circle cx="150" cy="270" r="0.4" fill="#FFF" opacity="0.2"/>
<circle cx="150" cy="60" r="8" fill="url(#starGlow)"/> <circle cx="150" cy="60" r="1.8" fill="#FFFFFF"/>
<circle cx="200" cy="70" r="10" fill="url(#starGlow)"/> <circle cx="200" cy="70" r="2.2" fill="#FFFFF0"/>
<circle cx="70" cy="40" r="7" fill="url(#starGlow)"/> <circle cx="70" cy="40" r="1.6" fill="#FFFFF0"/>
<circle cx="240" cy="30" r="6" fill="url(#starGlow)"/> <circle cx="240" cy="30" r="1.3" fill="#FFFFF0"/>
<circle cx="110" cy="85" r="5" fill="url(#starGlow)"/> <circle cx="110" cy="85" r="1" fill="#FFFFF0"/>
<circle cx="35" cy="55" r="4" fill="url(#starGlow)"/> <circle cx="35" cy="55" r="0.8" fill="#FFFFF0"/>
<circle cx="265" cy="125" r="5" fill="url(#starGlow)"/> <circle cx="265" cy="125" r="1" fill="#FFFFF0"/>
</g>
<!-- 4. Foliage (downwards) -->
<g id="foliage_downwards">
<path d="M 70 288 C 90 340, 130 300, 150 320 C 170 300, 210 340, 230 288 C 210 305, 180 280, 150 298 C 120 280, 90 305, 70 288 Z" fill="#182214" />
<path d="M 80 290 C 100 335, 130 300, 150 315 C 170 300, 200 335, 220 290 C 200 303, 175 283, 150 298 C 125 283, 100 303, 80 290 Z" fill="#202D1A" />
<path d="M 90 292 C 105 330, 130 298, 150 310 C 170 298, 195 330, 210 292 C 195 301, 170 286, 150 299 C 130 286, 105 301, 90 292 Z" fill="#283820" />
</g>
<!-- 5. Trunk -->
<path id="trunk"
d="M120 295 C130 230, 135 190, 142 140 L158 140 C165 190, 170 230, 180 295 Z"
fill="url(#trunkGradient)" stroke="#3B2E25" stroke-width="1.5"/>
<!-- 6. Trunk Texture -->
<g id="trunkTexture" opacity="0.15" fill="none" stroke="#30241C" stroke-width="1">
<path d="M145 142 Q140 180, 142 220 Q145 260, 135 293" />
<path d="M155 142 Q160 180, 158 220 Q155 260, 165 293" />
<path d="M150 142 Q142 200, 148 250 Q150 270, 150 294" />
<path d="M148 142 Q155 190, 152 240 Q148 270, 158 293" />
</g>
<!-- 7. Roots -->
<g id="roots" fill="#7A6050" stroke="#4A3B31" stroke-width="0.5">
<path d="M150 142 C145 100, 130 70, 115 40 L118 38 C133 68, 148 98, 151 142 Z"/>
<circle cx="116.5" cy="39" r="5" fill="url(#rootTipGlow)" stroke="none"/> <circle cx="116.5" cy="39" r="1.5" fill="rgba(255,255,255,0.9)" stroke="none"/>
<path d="M150 142 C155 100, 170 70, 185 40 L182 38 C167 68, 152 98, 149 142 Z"/>
<circle cx="183.5" cy="39" r="5" fill="url(#rootTipGlow)" stroke="none"/> <circle cx="183.5" cy="39" r="1.5" fill="rgba(255,255,255,0.9)" stroke="none"/>
<path d="M148 141 C148 100, 145 60, 150 25 L153 25 C150 60, 152 100, 152 141 Z"/>
<circle cx="151.5" cy="25" r="6" fill="url(#rootTipGlow)" stroke="none"/> <circle cx="151.5" cy="25" r="2" fill="rgba(255,255,255,0.9)" stroke="none"/>
<path d="M147 141 Q148 105, 150 70 L152 70 Q152 105, 153 141 Z" />
<circle cx="151" cy="70" r="4" fill="url(#rootTipGlow)" stroke="none"/><circle cx="151" cy="70" r="1.2" fill="rgba(255,255,255,0.9)" stroke="none"/>
<g stroke-linecap="round">
<path d="M145 140 Q130 100, 120 60 Q110 20, 100 10" fill="none" stroke="#886E5E" stroke-width="2.5"/>
<circle cx="100" cy="10" r="4" fill="url(#rootTipGlow)" stroke="none"/><circle cx="100" cy="10" r="1" fill="white" stroke="none"/>
<path d="M155 140 Q170 100, 180 60 Q190 20, 200 10" fill="none" stroke="#886E5E" stroke-width="2.5"/>
<circle cx="200" cy="10" r="4" fill="url(#rootTipGlow)" stroke="none"/><circle cx="200" cy="10" r="1" fill="white" stroke="none"/>
<path d="M140 140 Q120 80, 130 50 Q140 20, 142 5" fill="none" stroke="#917866" stroke-width="2"/>
<circle cx="142" cy="5" r="3.5" fill="url(#rootTipGlow)" stroke="none"/><circle cx="142" cy="5" r="0.8" fill="white" stroke="none"/>
<path d="M160 140 Q180 80, 170 50 Q160 20, 158 5" fill="none" stroke="#917866" stroke-width="2"/>
<circle cx="158" cy="5" r="3.5" fill="url(#rootTipGlow)" stroke="none"/><circle cx="158" cy="5" r="0.8" fill="white" stroke="none"/>
<path d="M142 138 Q100 100, 80 50 Q70 25, 65 15" fill="none" stroke="#A48A78" stroke-width="1.5" opacity="0.9"/>
<circle cx="65" cy="15" r="3" fill="url(#rootTipGlow)" stroke="none" opacity="0.9"/><circle cx="65" cy="15" r="0.6" fill="rgba(255,255,255,0.9)" stroke="none"/>
<path d="M158 138 Q200 100, 220 50 Q230 25, 235 15" fill="none" stroke="#A48A78" stroke-width="1.5" opacity="0.9"/>
<circle cx="235" cy="15" r="3" fill="url(#rootTipGlow)" stroke="none" opacity="0.9"/><circle cx="235" cy="15" r="0.6" fill="rgba(255,255,255,0.9)" stroke="none"/>
<path d="M135 140 Q105 90, 75 45 Q60 20, 50 22" fill="none" stroke="#B29A88" stroke-width="1" opacity="0.8"/>
<circle cx="50" cy="22" r="2.5" fill="url(#rootTipGlow)" stroke="none" opacity="0.8"/><circle cx="50" cy="22" r="0.5" fill="rgba(255,255,255,0.8)" stroke="none"/>
<path d="M165 140 Q195 90, 225 45 Q240 20, 250 22" fill="none" stroke="#B29A88" stroke-width="1" opacity="0.8"/>
<circle cx="250" cy="22" r="2.5" fill="url(#rootTipGlow)" stroke="none" opacity="0.8"/><circle cx="250" cy="22" r="0.5" fill="rgba(255,255,255,0.8)" stroke="none"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="nightSky" x1="0" y1="0" x2="0" y2="300">
<stop offset="0" stop-color="#1a0f3c" stop-opacity="1"/>
<stop offset="1" stop-color="#0a192a" stop-opacity="1"/>
</linearGradient>
<linearGradient id="trunk" x1="0" y1="0" x2="0" y2="100">
<stop offset="0" stop-color="#4a2b0f" stop-opacity="1"/>
<stop offset="1" stop-color="#6d3b1f" stop-opacity="1"/>
</linearGradient>
<linearGradient id="rootGlow" x1="0" y1="0" x2="0" y2="100">
<stop offset="0" stop-color="#fff300" stop-opacity="0.8"/>
<stop offset="1" stop-color="#fffaaa" stop-opacity="0"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#nightSky)"/>
<!-- Stars -->
<g id="stars">
<circle cx="45" cy="20" r="1" fill="white"/>
<circle cx="100" cy="15" r="1.5" fill="white"/>
<circle cx="200" cy="10" r="1" fill="white"/>
<circle cx="250" cy="25" r="1.2" fill="white"/>
<circle cx="150" cy="30" r="1" fill="white"/>
</g>
<!-- Tree Trunk -->
<rect x="130" y="20" width="40" height="60" fill="url(#trunk)"/>
<!-- Branches -->
<path d="M 160,80 Q 180,100 200,80" stroke="#6d3b1f" stroke-width="4" fill="none"/>
<path d="M 160,80 Q 140,100 120,80" stroke="#6d3b1f" stroke-width="4" fill="none"/>
<!-- Roots -->
<path d="M 160,80 Q 170,50 180,40" stroke="url(#rootGlow)" stroke-width="3" fill="none">
<animate attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite"/>
</path>
<path d="M 160,80 Q 150,45 140,35" stroke="url(#rootGlow)" stroke-width="3" fill="none">
<animate attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite"/>
</path>
<path d="M 160,80 Q 170,60 190,50" stroke="url(#rootGlow)" stroke-width="3" fill="none">
<animate attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite"/>
</path>
<!-- Leaves -->
<g id="leaves" transform="translate(160,80)">
<circle cx="0" cy="-20" r="5" fill="#8ac926"/>
<circle cx="15" cy="-15" r="4" fill="#8ac926"/>
<circle cx="-15" cy="-10" r="3" fill="#8ac926"/>
<circle cx="10" cy="-25" r="6" fill="#8ac926"/>
</g>
<!-- Moon -->
<path d="M 40,30 Q 50,25 60,30" fill="white"/>
<!-- Shooting Stars -->
<path d="M 10,150 L 30,140 L 50,130" stroke="white" stroke-width="1"/>
<path d="M 80,200 L 100,190 L 120,180" stroke="white" stroke-width="1"/>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt with a clear depiction of an upside-down tree, where the roots are reaching for the stars.
The composition is visually appealing with a strong focus on the roots and stars, and the technical quality is higher.
Player 2's submission is less detailed and does not effectively convey the concept of the tree or its roots reaching for the stars.
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 bird wearing a tiny astronaut helmet, perched on the moon."
"A chicken wearing astronaut gear on the moon."
"A cat balancing on a tightrope under a moonlit sky."
"A cactus wearing sunglasses in a desert during a colorful sunset."
