Creative Challenge
"A single tree growing on a floating island with roots looping in the air."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
<!-- Background Gradient -->
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87ceeb"/>
<stop offset="100%" stop-color="#f0f8ff"/>
</linearGradient>
<!-- Island Gradient -->
<radialGradient id="islandGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#a0522d"/>
<stop offset="100%" stop-color="#654321"/>
</radialGradient>
<!-- Leaf Gradient -->
<linearGradient id="leafGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#228b22"/>
<stop offset="100%" stop-color="#006400"/>
</linearGradient>
<!-- Roots Path Pattern -->
<pattern id="rootsPattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(20)">
<path d="M10,0 C8,4 12,8 10,12" stroke="#654321" stroke-width="2" fill="none"/>
</pattern>
</defs>
<!-- Sky Background -->
<rect width="100%" height="100%" fill="url(#skyGradient)" />
<!-- Floating Island -->
<ellipse cx="150" cy="220" rx="80" ry="30" fill="url(#islandGradient)" stroke="#4d2c1a" stroke-width="3"/>
<!-- Roots Looping in the Air -->
<path d="M 150 220
C 180 210, 200 200, 170 150
C 200 150, 220 130, 180 120
C 220 130, 240 110, 210 100
C 240 120, 150 90, 150 150
C 150 90, 120 110, 150 120
C 110 130, 130 150, 100 150
C 70 200, 90 210, 120 220
Z" fill="url(#rootsPattern)" opacity="0.7"/>
<!-- Tree Trunk -->
<rect x="135" y="140" width="30" height="80" fill="#8b4513" stroke="#5c3314" stroke-width="2" rx="5" ry="5"/>
<!-- Tree Canopy -->
<circle cx="150" cy="120" r="40" fill="url(#leafGradient)" stroke="#006400" stroke-width="2"/>
<!-- Additional Leaves -->
<circle cx="130" cy="100" r="15" fill="url(#leafGradient)" opacity="0.8"/>
<circle cx="170" cy="100" r="15" fill="url(#leafGradient)" opacity="0.8"/>
<circle cx="150" cy="80" r="12" fill="url(#leafGradient)" opacity="0.7"/>
<circle cx="120" cy="108" r="8" fill="url(#leafGradient)" opacity="0.6"/>
<circle cx="180" cy="108" r="8" fill="url(#leafGradient)" opacity="0.6"/>
<!-- Artistic Ground beneath the island -->
<path d="M 70 260 Q 60 250, 80 245 Q 100 240, 120 245 Q 140 250, 160 245
Q 180 240, 200 245 Q 220 250, 230 260 Q 240 270, 70 270 Z" fill="#228b22" opacity="0.8"/>
<!-- Optional Shine Highlights on Canopy -->
<circle cx="135" cy="110" r="5" fill="white" opacity="0.3"/>
<circle cx="165" cy="115" r="4" fill="white" opacity="0.2"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="islandGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8C5E3C"/>
<stop offset="100%" stop-color="#52332D"/>
</radialGradient>
<linearGradient id="treeTrunkGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7B3F00"/>
<stop offset="100%" stop-color="#4D2600"/>
</linearGradient>
<linearGradient id="leavesGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3FAF3F"/>
<stop offset="100%" stop-color="#1E7A1E"/>
</linearGradient>
<path id="leafShape" d="M0,0 C10,-15 30,-15 40,0 C30,15 10,15 0,0 Z" />
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#A7D3F5" />
<!-- Floating Island -->
<ellipse cx="150" cy="220" rx="55" ry="20" fill="url(#islandGradient)" stroke="#42281E" stroke-width="1.5"/>
<path d="M95,220 Q150,200 205,220 Q150,240 95,220 Z" fill="url(#islandGradient)" stroke="#42281E" stroke-width="1.5"/>
<!-- Tree trunk -->
<path d="M150,220 C144,180 140,140 145,100 Q150,80 155,100 C160,140 156,180 150,220 Z" fill="url(#treeTrunkGradient)" stroke="#3E1F00" stroke-width="2"/>
<!-- Tree Roots looping in the air -->
<path d="M148,215
C135,210 120,205 110,195
C100,185 100,170 110,160
C120,150 135,145 148,140"
fill="none" stroke="#3E1F00" stroke-width="2" stroke-linecap="round"/>
<path d="M152,215
C165,210 180,205 190,195
C200,185 200,170 190,160
C180,150 165,145 152,140"
fill="none" stroke="#3E1F00" stroke-width="2" stroke-linecap="round"/>
<!-- Tree foliage grouped with creative rotation and layering -->
<g transform="translate(150,90)">
<!-- Large leafy crown -->
<circle cx="0" cy="0" r="35" fill="url(#leavesGradient)" stroke="#1B6A1B" stroke-width="1.5"/>
<!-- Additional creative leaves using the leafShape from defs -->
<use href="#leafShape" transform="translate(-40,-10) scale(0.7)" fill="#36B336" stroke="#1B6A1B" stroke-width="0.8"/>
<use href="#leafShape" transform="translate(5,-50) scale(0.8) rotate(15)" fill="#36B336" stroke="#1B6A1B" stroke-width="0.8"/>
<use href="#leafShape" transform="translate(40,-5) scale(0.65) rotate(-20)" fill="#36B336" stroke="#1B6A1B" stroke-width="0.8"/>
<use href="#leafShape" transform="translate(0,35) scale(0.75) rotate(30)" fill="#36B336" stroke="#1B6A1B" stroke-width="0.8"/>
</g>
<!-- Ethereal mist surrounding the island -->
<g opacity="0.4">
<ellipse cx="150" cy="230" rx="80" ry="25" fill="#FFFFFF"/>
<ellipse cx="150" cy="235" rx="70" ry="20" fill="#FFFFFF"/>
</g>
</svg>Judge's Analysis
Player 2's submission is more creative and adheres better to the prompt.
The roots are visually distinct and loop in the air as specified, adding an element of dynamic motion.
Additionally, the technical quality and composition are stronger, with a clean, minimalist design and effective use of space.
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 owl wearing a wizard hat holding a glowing crystal orb under a crescent moon."
"Alien playing chess with a robot on a floating asteroid."
"A cactus wearing a wizard hat casting a glowing spell in the desert at sunset."
