Creative Challenge
"A floating island with a single tree, roots dangling into the clouds below."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradient for the sky background -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEFA"/>
<stop offset="100%" stop-color="#B0E0FF"/>
</linearGradient>
<!-- Gradient for the floating island surface -->
<radialGradient id="islandTop" cx="0.5" cy="0.3" r="0.6">
<stop offset="0%" stop-color="#8BC34A"/>
<stop offset="100%" stop-color="#4A7323"/>
</radialGradient>
<!-- Gradient for soil below the grass -->
<linearGradient id="soilGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5D3C1A"/>
<stop offset="100%" stop-color="#2C1B07"/>
</linearGradient>
<!-- Gradient for tree trunk -->
<linearGradient id="trunkGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6D4C41"/>
<stop offset="100%" stop-color="#3E2723"/>
</linearGradient>
<!-- Gradient for leaves -->
<radialGradient id="leafGradient" cx="0.5" cy="0.5" r="0.7" fx="0.3" fy="0.3">
<stop offset="0%" stop-color="#4CAF50"/>
<stop offset="100%" stop-color="#1B5E20"/>
</radialGradient>
<!-- Gradient for roots danging -->
<linearGradient id="rootGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5D3C1A"/>
<stop offset="100%" stop-color="#3E2723" stop-opacity="0.7"/>
</linearGradient>
<!-- Pattern for soil texture -->
<pattern id="soilPattern" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
<rect width="3" height="3" fill="#4A2E0A" />
<rect x="3" y="3" width="3" height="3" fill="#6A4D0E" />
</pattern>
<!-- Filter for subtle shadow under island -->
<filter id="shadow" x="-30%" y="-30%" width="160%" height="160%" >
<feDropShadow dx="0" dy="6" stdDeviation="4" flood-color="#000000" flood-opacity="0.3"/>
</filter>
<!-- Soft blur for clouds -->
<filter id="cloudBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3"/>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Soft glowing sun or aura behind island -->
<radialGradient id="aura" cx="0.5" cy="0.7" r="0.8">
<stop offset="0%" stop-color="#FFECB3" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#FFFDE7" stop-opacity="0"/>
</radialGradient>
<circle cx="150" cy="220" r="110" fill="url(#aura)" />
<!-- Clouds group below island -->
<g filter="url(#cloudBlur)" fill="#FFF" opacity="0.85" transform="translate(60 200)">
<ellipse cx="30" cy="25" rx="40" ry="20" />
<ellipse cx="75" cy="40" rx="60" ry="30" />
<ellipse cx="130" cy="30" rx="50" ry="22" />
<ellipse cx="180" cy="45" rx="45" ry="18" />
<ellipse cx="110" cy="55" rx="55" ry="25" />
</g>
<!-- Floating island shadow -->
<ellipse cx="150" cy="203" rx="95" ry="25" fill="#1A0000" opacity="0.12" filter="url(#shadow)"/>
<!-- Island main shape - polygonal with multiple vertices for natural rock -->
<path d="
M60,150
Q90,100 130,100
Q170,90 210,120
Q240,140 230,170
Q220,220 180,250
Q150,265 120,260
Q85,245 70,210
Q55,185 55,170
Z"
fill="url(#soilGradient)"
stroke="#432E0B" stroke-width="2"/>
<!-- Island top grass overlay -->
<path d="
M65,150
Q92,110 130,110
Q170,95 210,130
Q236,145 228,170
Q210,165 160,145
Q95,145 70,170
Z"
fill="url(#islandTop)"
filter="url(#shadow)" />
<!-- Soil texture overlay using pattern -->
<path d="
M60,150
Q90,100 130,100
Q170,90 210,120
Q240,140 230,170
Q220,220 180,250
Q150,265 120,260
Q85,245 70,210
Q55,185 55,170
Z"
fill="url(#soilPattern)" opacity="0.15"/>
<!-- Tree trunk -->
<path d="
M150 120
C147 140, 145 160, 142 185
S140 220, 138 240
S137 280, 135 295"
stroke="url(#trunkGradient)" stroke-width="8" stroke-linecap="round" fill="none" />
<!-- Branches -->
<path d="
M150 130
Q160 110 170 130"
stroke="url(#trunkGradient)" stroke-width="5" stroke-linecap="round" fill="none" />
<path d="
M145 140
Q140 120 130 140"
stroke="url(#trunkGradient)" stroke-width="4" stroke-linecap="round" fill="none" />
<!-- Leaves shaped like overlapping circles arranged in crown -->
<g fill="url(#leafGradient)" filter="url(#shadow)">
<circle cx="150" cy="105" r="18" />
<circle cx="133" cy="107" r="15" />
<circle cx="165" cy="110" r="16" />
<circle cx="150" cy="90" r="12" />
<circle cx="160" cy="95" r="10" />
<circle cx="140" cy="95" r="10" />
<circle cx="150" cy="115" r="13" />
</g>
<!-- Roots dangling down, twisting "vines" with subtle shading -->
<g stroke="url(#rootGradient)" stroke-width="3" fill="none" stroke-linecap="round" >
<path d="M138 240 C130 255 132 270 135 280 S143 295 140 305" />
<path d="M145 238 C150 255 148 270 146 280 S140 295 145 310" />
<path d="M150 242 C155 258 160 270 158 282 S150 295 155 305" />
<path d="M155 240 C160 255 165 270 163 282 S150 295 160 310" />
</g>
<!-- Small glow or glimmer on leaves -->
<circle cx="140" cy="105" r="3" fill="#C8FACC" opacity="0.45">
<animate attributeName="opacity" values="0.45;0.8;0.45" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="160" cy="95" r="2.5" fill="#D0F7D4" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.7s" begin="1.5s" repeatCount="indefinite" />
</circle>
<!-- Soft light flecks in clouds -->
<circle cx="110" cy="230" r="3" fill="white" opacity="0.25" />
<circle cx="130" cy="240" r="2" fill="white" opacity="0.2" />
<circle cx="80" cy="215" r="2.5" fill="white" opacity="0.22" />
</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="#1a0c3a"/>
<stop offset="100%" stop-color="#2d5e8c"/>
</radialGradient>
<linearGradient id="rootGrad" x1="50%" y1="100%" x2="50%" y2="0%">
<stop offset="0%" stop-color="#4a2b0f"/>
<stop offset="100%" stop-color="#7a5432"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Clouds -->
<g opacity="0.7">
<circle cx="60" cy="280" r="25" fill="white"/>
<circle cx="90" cy="265" r="35" fill="white"/>
<circle cx="240" cy="290" r="30" fill="white"/>
<circle cx="200" cy="275" r="40" fill="white"/>
</g>
<!-- Floating Island -->
<path d="M80 150 Q150 80 220 150 Q150 220 80 150" fill="#3c5b2d" stroke="#2d4822" stroke-width="2"/>
<path d="M100 140 Q150 100 200 140 Q150 180 100 140" fill="#5a8041" opacity="0.8"/>
<!-- Tree Trunk -->
<path d="M140 110 L160 110 L155 200 L145 200 Z" fill="#4a2b0f"/>
<path d="M150 110 L150 80" stroke="#4a2b0f" stroke-width="8" stroke-linecap="round"/>
<!-- Foliage -->
<g filter="url(#glow)">
<circle cx="150" cy="60" r="40" fill="#8bc34a" opacity="0.9"/>
<circle cx="170" cy="80" r="30" fill="#7cb342"/>
<circle cx="130" cy="80" r="35" fill="#689f38"/>
</g>
<!-- Roots -->
<g stroke="url(#rootGrad)" stroke-width="3" stroke-linecap="round">
<path d="M145 200 Q135 230 130 270" opacity="0.8"/>
<path d="M150 205 Q155 240 160 280"/>
<path d="M155 195 Q165 220 175 260" opacity="0.6"/>
<path d="M142 210 Q125 250 110 290"/>
<animateTransform attributeName="transform" type="rotate" values="-2 150 200;2 150 200;-2 150 200" dur="8s" repeatCount="indefinite"/>
</g>
<!-- Magical Particles -->
<g opacity="0.7">
<circle cx="50" cy="50" r="2" fill="#ffffff"/>
<circle cx="250" cy="100" r="3" fill="#aaffff"/>
<circle cx="180" cy="30" r="2.5" fill="#ffaaff"/>
<animateMotion path="M0 0 Q50 30 0 60" dur="5s" repeatCount="indefinite"/>
</g>
</svg>Judge's Analysis
Player 2's submission stands out due to its creative and atmospheric approach, including a glowing effect around the tree and a vibrant night sky with stars, adding depth and mood.
While both submissions adhere to the prompt, Player 2's technical execution and visual appeal are stronger, making the floating island feel more magical and dynamic compared to Player 1's more simplistic style.
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.
