Creative Challenge
"A tree growing on a floating island, roots dangling into the clouds below."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="100%" stop-color="#E0F7FA"/>
</linearGradient>
<radialGradient id="leafGrad" cx="50%" cy="40%" r="50%">
<stop offset="0%" stop-color="#A8E063"/>
<stop offset="100%" stop-color="#56AB2F"/>
</radialGradient>
<linearGradient id="rockGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8B7765"/>
<stop offset="100%" stop-color="#5C4033"/>
</linearGradient>
<linearGradient id="rootGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#8B4513"/>
<stop offset="100%" stop-color="#D2691E"/>
</linearGradient>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Background sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Clouds below -->
<g fill="#FFF" opacity="0.8">
<ellipse cx="50" cy="240" rx="60" ry="20"/>
<ellipse cx="140" cy="260" rx="80" ry="25"/>
<ellipse cx="250" cy="230" rx="70" ry="22"/>
<ellipse cx="180" cy="210" rx="50" ry="18"/>
</g>
<!-- Floating island -->
<path d="
M70,180
C60,160 80,140 100,145
L200,145
C220,140 240,160 230,180
C260,190 260,220 200,230
L100,230
C40,220 40,190 70,180
Z"
fill="url(#rockGrad)" filter="url(#shadow)"/>
<path d="
M80,170
C90,150 110,140 150,145
L195,145
C225,150 235,170 225,180
L75,180
C65,170 70,170 80,170
Z"
fill="#6b8e23"/>
<!-- Tree trunk -->
<path d="M145,145 L150,100 C150,90 155,85 160,85 C165,85 170,90 170,100 L175,145 Z"
fill="#8B4513" stroke="#5C3317" stroke-width="2"/>
<!-- Roots dangling -->
<g stroke="url(#rootGrad)" stroke-width="3" fill="none">
<path d="M150,145 C145,160 140,180 145,200"/>
<path d="M155,145 C160,165 155,185 150,205"/>
<path d="M160,145 C165,160 170,175 165,195"/>
</g>
<!-- Leaves canopy -->
<g fill="url(#leafGrad)">
<circle cx="160" cy="80" r="25"/>
<circle cx="140" cy="90" r="20"/>
<circle cx="180" cy="95" r="22"/>
<circle cx="150" cy="70" r="18"/>
<circle cx="170" cy="70" r="15"/>
</g>
<!-- Small highlights on leaves -->
<g fill="#BFFFBF" opacity="0.5">
<circle cx="155" cy="85" r="5"/>
<circle cx="165" cy="75" r="4"/>
<circle cx="145" cy="90" r="4.5"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id="skyGradient" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#1e2a3a" /> <!-- Deep Indigo Night -->
<stop offset="30%" stop-color="#3b3251" /> <!-- Dark Purple -->
<stop offset="65%" stop-color="#7b4b6f" /> <!-- Muted Plum -->
<stop offset="100%" stop-color="#f77d5d" /> <!-- Soft Orange/Pink Horizon -->
</linearGradient>
<radialGradient id="islandSoilGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#5D4037" /> <!-- Dark Brown -->
<stop offset="50%" stop-color="#795548" /> <!-- Brown -->
<stop offset="100%" stop-color="#A1887F" /> <!-- Light Brown/Grey -->
</radialGradient>
<linearGradient id="islandRockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#607D8B" /> <!-- Blue Grey -->
<stop offset="40%" stop-color="#455A64" /> <!-- Darker Blue Grey -->
<stop offset="100%" stop-color="#37474F" /> <!-- Even Darker Blue Grey -->
</linearGradient>
<linearGradient id="trunkGradient" x1="30%" y1="0%" x2="70%" y2="0%">
<stop offset="0%" stop-color="#4A3B31" /> <!-- Dark bark shadow -->
<stop offset="50%" stop-color="#6F5E53" /> <!-- Mid bark tone -->
<stop offset="100%" stop-color="#5A4A40" /> <!-- Other side bark tone -->
</linearGradient>
<radialGradient id="leavesGradient" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#A6D785" /> <!-- Light vibrant green -->
<stop offset="40%" stop-color="#55A630" /> <!-- Rich green -->
<stop offset="100%" stop-color="#2B7300" /> <!-- Dark green shadow -->
</radialGradient>
<radialGradient id="cloudGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="rgba(255,255,255,0.9)" />
<stop offset="50%" stop-color="rgba(230,230,245,0.8)" />
<stop offset="100%" stop-color="rgba(200,200,230,0.65)" />
</radialGradient>
<filter id="speckGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="1.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="cloudSoftness">
<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" />
</filter>
<filter id="gentleLeafBlur">
<feGaussianBlur stdDeviation="0.6" />
</filter>
<pattern id="barkTexture" patternUnits="userSpaceOnUse" width="8" height="8">
<path d="M0,4 Q2,2 4,4 T8,4 M0,8 Q2,6 4,8 T8,8" stroke="#3E2723" stroke-width="0.4" fill="none" opacity="0.25"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars" opacity="0.8">
<circle cx="40" cy="35" r="1.1" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.9;0.5;0.9" dur="5s" repeatCount="indefinite"/></circle>
<circle cx="210" cy="55" r="0.7" fill="white" opacity="0.7"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="4s" repeatCount="indefinite" begin="1s"/></circle>
<circle cx="130" cy="25" r="0.9" fill="white" opacity="0.8"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="6s" repeatCount="indefinite" begin="0.5s"/></circle>
<circle cx="260" cy="90" r="1.0" fill="white" opacity="0.9"><animate attributeName="opacity" values="0.9;0.6;0.9" dur="5.5s" repeatCount="indefinite" begin="1.5s"/></circle>
<circle cx="70" cy="150" r="0.6" fill="white" opacity="0.5"/>
<circle cx="170" cy="220" r="0.8" fill="white" opacity="0.6"/>
</g>
<!-- Floating Island Group (shifted slightly for composition) -->
<g id="floating-island-group" transform="translate(0, 15)">
<!-- Rock Base of the Island -->
<path id="island-base"
d="M60,155
C45,165 40,180 65,195
S90,215 115,205
S150,220 185,205
S210,215 235,195
C260,180 255,165 240,155
Q200,145 150,150
Q100,145 60,155 Z"
fill="url(#islandRockGradient)" stroke="#222c30" stroke-width="1.5" />
<!-- Soil Top -->
<path id="island-soil"
d="M65,157
C80,147 110,145 150,152
C190,145 220,147 235,157
L234,160 C220,165 190,170 150,167 C110,170 80,165 66,160 Z"
fill="url(#islandSoilGradient)" stroke="#422f28" stroke-width="1" />
<!-- Small rock details on island bottom -->
<path d="M80,195 Q90,200 95,193" stroke="#37474F" stroke-width="1.5" fill="none" />
<path d="M170,205 Q160,213 155,203" stroke="#37474F" stroke-width="1.5" fill="none" />
</g>
<!-- Roots Group (emerging from island base) -->
<g id="roots-group" transform="translate(0, 15)"> <!-- Match island shift -->
<path d="M140,208 Q135,235 120,260 C115,275 118,285 110,290" stroke-width="5" stroke="#755c48" fill="none" stroke-linecap="round"/>
<path d="M160,210 Q165,240 180,265 C185,280 182,290 190,295" stroke-width="4.5" stroke="#826954" fill="none" stroke-linecap="round"/>
<path d="M110,200 Q100,225 90,250 C85,265 90,275 85,285 C80,290 90,295 83,300" stroke-width="2.5" stroke="#9a826f" fill="none" stroke-linecap="round" opacity="0.9"/>
<path d="M190,195 Q200,220 210,245 C215,260 210,270 215,280 C220,285 210,290 217,298" stroke-width="2" stroke="#ab9684" fill="none" stroke-linecap="round" opacity="0.8"/>
<path d="M125,215 Q120,245 128,270 C132,285 125,292 130,298" stroke-width="1.5" stroke="#bcaaa4" fill="none" stroke-linecap="round" opacity="0.9"/>
<path d="M175,218 Q180,250 170,275 C165,290 175,295 170,302" stroke-width="1.5" stroke="#c9bbb3" fill="none" stroke-linecap="round" opacity="0.9"/>
</g>
<!-- Clouds Group (below roots) -->
<g id="clouds-group" filter="url(#cloudSoftness)">
<ellipse cx="150" cy="290" rx="110" ry="50" fill="url(#cloudGradient)" opacity="0.9"/> <!-- Main large cloud base -->
<ellipse cx="70" cy="280" rx="80" ry="40" fill="url(#cloudGradient)" opacity="0.8"/>
<ellipse cx="230" cy="275" rx="85" ry="42" fill="url(#cloudGradient)" opacity="0.85"/>
<ellipse cx="120" cy="265" rx="60" ry="30" fill="url(#cloudGradient)" opacity="0.75"/>
<ellipse cx="180" cy="260" rx="65" ry="32" fill="url(#cloudGradient)" opacity="0.8"/>
<ellipse cx="90" cy="250" rx="50" ry="25" fill="url(#cloudGradient)" opacity="0.7"/>
<ellipse cx="210" cy="245" rx="55" ry="28" fill="url(#cloudGradient)" opacity="0.7"/>
</g>
<!-- Tree Group (on island soil) -->
<g id="tree-group" transform="translate(150, 167)"> <!-- Centered on island (150), on soil top (152+15 = 167 abs)-->
<!-- Trunk -->
<path d="M-8,0 C-10,-35 -4,-60 0,-80 C4,-60 10,-35 8,0 Z"
fill="url(#trunkGradient)" stroke="#332922" stroke-width="1.5" />
<path d="M-8,0 C-10,-35 -4,-60 0,-80 C4,-60 10,-35 8,0 Z"
fill="url(#barkTexture)" stroke="none" />
<!-- Branches -->
<g stroke="#4A3B31" stroke-width="6" stroke-linecap="round">
<path d="M0,-70 Q-18,-80 -35,-90" fill="none" />
<path d="M1,-72 Q20,-85 38,-95" fill="none" />
<path d="M-4,-50 Q-28,-55 -45,-60" fill="none" stroke-width="4.5"/>
<path d="M5,-55 Q30,-60 48,-65" fill="none" stroke-width="4.5"/>
</g>
<!-- Canopy -->
<g id="canopy" filter="url(#gentleLeafBlur)">
<ellipse cx="0" cy="-110" rx="50" ry="40" fill="url(#leavesGradient)" />
<ellipse cx="-30" cy="-100" rx="35" ry="30" fill="url(#leavesGradient)" opacity="0.92"/>
<ellipse cx="30" cy="-95" rx="40" ry="33" fill="url(#leavesGradient)" opacity="0.95"/>
<ellipse cx="0" cy="-85" rx="45" ry="35" fill="url(#leavesGradient)" opacity="0.88"/>
<ellipse cx="-15" cy="-130" rx="20" ry="15" fill="url(#leavesGradient)" />
<ellipse cx="20" cy="-128" rx="22" ry="18" fill="url(#leavesGradient)" />
</g>
</g>
<!-- Magic Specks -->
<g id="magic-specks" opacity="0.9">
<circle cx="90" cy="185" r="1.8" fill="#FFD700" filter="url(#speckGlow)">
<animate attributeName="cy" values="185;180;185" dur="3.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.5s" repeatCount="indefinite" />
</circle>
<circle cx="210" cy="195" r="2.2" fill="#FF69B4" filter="url(#speckGlow)">
<animate attributeName="cy" values="195;200;195" dur="4.2s" repeatCount="indefinite" begin="0.5s"/>
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="4.2s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<circle cx="150" cy="75" r="1.2" fill="#00FFFF" filter="url(#speckGlow)"> <!-- Near canopy top -->
<animate attributeName="cx" values="150;156;150" dur="3.8s" repeatCount="indefinite" begin="1s"/>
<animate attributeName="opacity" values="1;0.5;1" dur="3.8s" repeatCount="indefinite" begin="1s"/>
</circle>
<circle cx="50" cy="230" r="1.5" fill="#ADFF2F" filter="url(#speckGlow)"> <!-- near roots/island bottom -->
<animateTransform attributeName="transform" type="translate" values="0 0; 0 5; 0 0" dur="2.8s" repeatCount="indefinite" begin="0.2s"/>
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="2.8s" repeatCount="indefinite" begin="0.2s"/>
</circle>
<circle cx="250" cy="220" r="2" fill="#FF8C00" filter="url(#speckGlow)">
<animateTransform attributeName="transform" type="translate" values="0 0; -5 0; 0 0" dur="4.5s" repeatCount="indefinite" begin="0.8s"/>
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="4.5s" repeatCount="indefinite" begin="0.8s"/>
</circle>
</g>
</svg>Judge's Analysis
Player 2's submission demonstrates a stronger sense of creativity and technical quality.
The glowing particles, gradient background, and subtle details like the atmospheric clouds contribute to a more immersive and visually appealing depiction of the floating island.
While Player 1 adheres to the prompt, their design lacks the depth and creativity seen in Player 2's work.
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 sunflower wearing sunglasses in a desert under a smiling crescent moon."
"A giraffe painting a self-portrait on a tall canvas."
"An octopus holding a bouquet of balloons underwater."
