Creative Challenge
"A floating island with a single tree and roots dangling into the clouds."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients -->
<defs>
<radialGradient id="islandGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8B4513"/>
<stop offset="100%" stop-color="#4D2600"/>
</radialGradient>
<linearGradient id="treeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#228B22"/>
<stop offset="100%" stop-color="#006400"/>
</linearGradient>
<linearGradient id="cloudGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#E0E0E0" stop-opacity="0.5"/>
</linearGradient>
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#cloudGradient)"/>
<!-- Floating clouds -->
<g fill="#FFFFFF" opacity="0.7">
<ellipse cx="100" cy="50" rx="40" ry="20"/>
<ellipse cx="140" cy="45" rx="30" ry="15"/>
<ellipse cx="80" cy="65" rx="25" ry="12"/>
</g>
<g fill="#FFFFFF" opacity="0.6">
<ellipse cx="200" cy="80" rx="35" ry="18"/>
<ellipse cx="230" cy="75" rx="25" ry="13"/>
<ellipse cx="195" cy="95" rx="20" ry="10"/>
</g>
<g fill="#FFFFFF" opacity="0.6">
<ellipse cx="160" cy="30" rx="30" ry="15"/>
<ellipse cx="190" cy="25" rx="20" ry="10"/>
<ellipse cx="150" cy="45" rx="15" ry="8"/>
</g>
<!-- Floating island platform -->
<g filter="url(#dropShadow)">
<path d="M50,200 Q150,170 250,200 Q240,250 200,260 L100,260 Q60,250 50,200" fill="url(#islandGradient)" stroke="#2E2E2E" stroke-width="2"/>
<!-- Island texture pattern (optional) -->
<path d="M70,210 Q150,190 230,210" stroke="#3E1F0B" stroke-dasharray="4,2" stroke-width="1" fill="none"/>
<path d="M80,220 Q150,200 220,220" stroke="#3E1F0B" stroke-dasharray="4,2" stroke-width="1" fill="none"/>
</g>
<!-- Tree trunk and branches -->
<g filter="url(#dropShadow)">
<path d="M150,200 C145,150 140,120 150,100" fill="none" stroke="#8B4513" stroke-width="8" stroke-linecap="round"/>
<path d="M150,140 C130,130 120,110 130,90" fill="none" stroke="#8B4513" stroke-width="6" stroke-linecap="round"/>
<path d="M150,130 C160,120 170,100 165,80" fill="none" stroke="#8B4513" stroke-width="6" stroke-linecap="round"/>
</g>
<!-- Tree foliage -->
<g filter="url(#dropShadow)">
<circle cx="150" cy="90" r="25" fill="url(#treeGradient)" stroke="#0B6623" stroke-width="2"/>
<circle cx="135" cy="75" r="20" fill="url(#treeGradient)" stroke="#0B6623" stroke-width="2"/>
<circle cx="165" cy="75" r="20" fill="url(#treeGradient)" stroke="#0B6623" stroke-width="2"/>
</g>
<!-- Dangling roots into the clouds -->
<g filter="url(#dropShadow)" stroke="#8B4513" stroke-width="3" fill="none" stroke-linecap="round">
<path d="M148,100 C140,60 130,40 110,30" />
<path d="M152,100 C160,60 170,40 190,30" />
<path d="M150,100 C150,70 150,50 150,20" />
</g>
<!-- Additional artistic cloud details around roots -->
<g fill="#FFFFFF" opacity="0.8">
<ellipse cx="110" cy="30" rx="15" ry="7"/>
<ellipse cx="190" cy="30" rx="15" ry="7"/>
<ellipse cx="150" cy="20" rx="12" ry="6"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2A004F;" />
<stop offset="60%" style="stop-color:#6B2E6F;" />
<stop offset="100%" style="stop-color:#A7599A;" />
</linearGradient>
<!-- Cloud Gradient -->
<radialGradient id="cloudGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" style="stop-color:white;stop-opacity:0.85" />
<stop offset="70%" style="stop-color:#F0E8FF;stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#E0D8F5;stop-opacity:0.55" />
</radialGradient>
<!-- Island Gradients -->
<linearGradient id="islandGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#6D4C41;" />
<stop offset="15%" style="stop-color:#795548;" />
<stop offset="70%" style="stop-color:#5D4037;" />
<stop offset="90%" style="stop-color:#4E342E;" />
<stop offset="100%" style="stop-color:#3E2723;" />
</linearGradient>
<linearGradient id="grassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#38761D;" />
<stop offset="100%" style="stop-color:#6AA84F;" />
</linearGradient>
<!-- Tree Gradients -->
<linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="10%" style="stop-color:#4E342E;" />
<stop offset="50%" style="stop-color:#6D4C41;" />
<stop offset="90%" style="stop-color:#4A3B31;" />
</linearGradient>
<radialGradient id="leavesGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" style="stop-color:#6A1B9A;" />
<stop offset="40%" style="stop-color:#8E24AA;" />
<stop offset="70%" style="stop-color:#AB47BC;" />
<stop offset="100%" style="stop-color:#CE93D8;" />
</radialGradient>
<!-- Root Gradient -->
<linearGradient id="rootGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4A3B31"/>
<stop offset="100%" stop-color="#6A554A"/>
</linearGradient>
<!-- Filters -->
<filter id="softCloudBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3.5" />
</filter>
<filter id="leafClusterBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
</filter>
</defs>
<!-- Background Sky -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Distant Stars -->
<circle cx="60" cy="50" r="0.8" fill="white" opacity="0.6"/>
<circle cx="240" cy="70" r="1" fill="white" opacity="0.8"/>
<circle cx="150" cy="30" r="1.2" fill="white" opacity="0.9"/>
<circle cx="30" cy="150" r="0.7" fill="white" opacity="0.5"/>
<circle cx="270" cy="180" r="0.9" fill="white" opacity="0.7"/>
<circle cx="180" cy="250" r="0.6" fill="white" opacity="0.4"/>
<circle cx="100" cy="270" r="0.5" fill="white" opacity="0.3"/>
<!-- Clouds (Background Layer) -->
<g id="backgroundClouds" filter="url(#softCloudBlur)" opacity="0.85">
<ellipse cx="80" cy="280" rx="90" ry="40" fill="url(#cloudGradient)" />
<ellipse cx="220" cy="290" rx="100" ry="45" fill="url(#cloudGradient)" />
<ellipse cx="150" cy="295" rx="120" ry="50" fill="url(#cloudGradient)" transform="rotate(-5 150 295)" />
</g>
<!-- Floating Island Group -->
<g id="floatingIsland">
<!-- Roots -->
<g id="roots">
<path d="M 130 195 Q 125 215 130 235 T 128 265" stroke="url(#rootGradient)" stroke-width="4.5" fill="none" stroke-linecap="round"/>
<path d="M 150 198 Q 145 225 155 245 Q 150 265 160 285" stroke="url(#rootGradient)" stroke-width="6" fill="none" stroke-linecap="round"/>
<path d="M 170 195 Q 175 220 165 240 T 175 275" stroke="url(#rootGradient)" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<path d="M 115 190 Q 110 210 120 230 T 115 250" stroke="url(#rootGradient)" stroke-width="3" fill="none" stroke-linecap="round"/>
<path d="M 185 190 Q 190 215 180 235 T 190 260" stroke="url(#rootGradient)" stroke-width="4" fill="none" stroke-linecap="round"/>
<path d="M 140 196 Q 138 205 142 220 T 135 245" stroke="url(#rootGradient)" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<path d="M 160 197 Q 162 210 158 230 T 165 255" stroke="url(#rootGradient)" stroke-width="3.5" fill="none" stroke-linecap="round"/>
</g>
<!-- Island Base -->
<path id="islandBase" d="M 90 150
C 70 160, 60 185, 90 195
C 120 205, 180 205, 210 195
C 240 185, 230 160, 210 150
C 190 135, 110 135, 90 150 Z"
fill="url(#islandGradient)" stroke="#3E2723" stroke-width="1"/>
<!-- Grass/Top Surface -->
<ellipse id="islandTop" cx="150" cy="150" rx="65" ry="25" fill="url(#grassGradient)" />
<!-- Tree -->
<g id="tree">
<!-- Trunk -->
<path id="treeTrunk" d="M 145 110
C 142 125, 142 135, 145 150
L 155 150
C 158 135, 158 125, 155 110 Z"
fill="url(#trunkGradient)" stroke="#3E2723" stroke-width="0.5"/>
<!-- Leaves/Canopy -->
<g id="canopy" filter="url(#leafClusterBlur)">
<circle cx="150" cy="95" r="30" fill="url(#leavesGradient)"/>
<circle cx="135" cy="100" r="25" fill="url(#leavesGradient)" opacity="0.9"/>
<circle cx="165" cy="100" r="25" fill="url(#leavesGradient)" opacity="0.9"/>
<circle cx="150" cy="80" r="22" fill="url(#leavesGradient)" opacity="0.95"/>
<circle cx="160" cy="88" r="20" fill="url(#leavesGradient)" opacity="0.85"/>
<circle cx="140" cy="88" r="20" fill="url(#leavesGradient)" opacity="0.85"/>
</g>
</g>
</g>
<!-- Clouds (Foreground Layer) -->
<g id="foregroundClouds" filter="url(#softCloudBlur)" >
<ellipse cx="70" cy="240" rx="80" ry="35" fill="url(#cloudGradient)" opacity="0.75" />
<ellipse cx="230" cy="250" rx="90" ry="40" fill="url(#cloudGradient)" opacity="0.8" />
<ellipse cx="150" cy="230" rx="100" ry="45" fill="url(#cloudGradient)" opacity="0.65" transform="rotate(3 150 230)"/>
</g>
</svg>Judge's Analysis
Player 2's submission demonstrates better creativity and visual appeal with a vibrant purple tree, a glowing atmospheric background, and detailed dangling roots.
The composition is more dynamic and aligns strongly with the prompt of a floating island in the clouds.
Player 1's image, while adhering to the prompt, lacks depth and polish in comparison to Player 2's submission.
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
"“Two fish playing chess underwater.”"
"A jellyfish-shaped hot air balloon floating above a glowing underwater city."
"An ice cream cone melting into the shape of a famous landmark."
