Creative Challenge
"A floating island with a tiny house and a massive tree growing through its center."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="skyGrad" cx="50%" cy="30%" r="70%">
<stop offset="0%" stop-color="#cceeff"/>
<stop offset="50%" stop-color="#88ccee"/>
<stop offset="100%" stop-color="#5599dd"/>
</radialGradient>
<linearGradient id="grassGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5ee35e"/>
<stop offset="100%" stop-color="#2b8f2b"/>
</linearGradient>
<linearGradient id="rockGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#8c6239"/>
<stop offset="40%" stop-color="#5c4122"/>
<stop offset="100%" stop-color="#3b2a14"/>
</linearGradient>
<linearGradient id="trunkGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#5b3712"/>
<stop offset="100%" stop-color="#2d1d0a"/>
</linearGradient>
<radialGradient id="leafGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7af57a"/>
<stop offset="100%" stop-color="#137a13"/>
</radialGradient>
<filter id="shadow" x="-40%" y="-40%" width="200%" height="200%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Sky -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Sun -->
<circle cx="240" cy="60" r="25" fill="gold" filter="url(#shadow)"/>
<!-- Clouds -->
<g opacity="0.7">
<path d="M60 50a20 15 0 0 1 40 0a20 15 0 0 1 40 0a20 15 0 0 1-40 10a20 15 0 0 1-40-10" fill="#fff"/>
<path d="M180 80a15 12 0 0 1 30 0a15 12 0 0 1 30 0a15 12 0 0 1-30 8a15 12 0 0 1-30-8" fill="#fff"/>
</g>
<!-- Floating Island -->
<g transform="translate(150 180)" filter="url(#shadow)">
<!-- Grass top -->
<ellipse cx="0" cy="0" rx="90" ry="25" fill="url(#grassGrad)"/>
<!-- Rock underside -->
<path d="M-90 0C-60 40-50 70-20 90C0 100 20 90 40 80C70 60 80 30 90 0Z" fill="url(#rockGrad)"/>
<!-- Tiny House -->
<g transform="translate(-40 -25)">
<rect x="-10" y="0" width="20" height="15" fill="#ffe1ba" stroke="#d19a66" stroke-width="1"/>
<rect x="-3" y="4" width="6" height="8" fill="#8c6239"/>
<rect x="5" y="4" width="6" height="6" fill="#fff" stroke="#88ccee" stroke-width="0.5"/>
<polygon points="-13,0 0,-12 13,0" fill="#c1440e" stroke="#8e2e0a" stroke-width="1"/>
<rect x="7" y="-10" width="3" height="6" fill="#8c6239"/>
<circle cx="8.5" cy="-10" r="1.5" fill="#b2bec3" opacity="0.8">
<animate attributeName="cy" values="-10;-12;-10" dur="3s" repeatCount="indefinite"/>
</circle>
</g>
<!-- Tree Trunk -->
<path d="M0 0C-5 -20 -7 -50 -4 -90C4 -50 6 -20 0 0Z" fill="url(#trunkGrad)" stroke="#2d1d0a" stroke-width="0.5"/>
<!-- Branches -->
<path d="M-4 -60C-25 -70 -35 -90 -30 -110" fill="none" stroke="#4d3113" stroke-width="4" stroke-linecap="round"/>
<path d="M4 -70C25 -80 35 -100 30 -120" fill="none" stroke="#4d3113" stroke-width="4" stroke-linecap="round"/>
<!-- Tree Canopy -->
<g>
<circle cx="0" cy="-120" r="45" fill="url(#leafGrad)"/>
<circle cx="-35" cy="-110" r="35" fill="url(#leafGrad)"/>
<circle cx="35" cy="-110" r="35" fill="url(#leafGrad)"/>
<circle cx="0" cy="-150" r="30" fill="url(#leafGrad)"/>
<circle cx="-10" cy="-130" r="40" fill="#fff" opacity="0.05"/>
</g>
</g>
<!-- Smaller Floating Rocks -->
<g opacity="0.9">
<path d="M70 220C60 230 60 240 70 245C80 248 90 244 95 235C100 225 95 220 85 215Z" fill="url(#rockGrad)" filter="url(#shadow)"/>
<ellipse cx="260" cy="210" rx="18" ry="6" fill="url(#grassGrad)" filter="url(#shadow)"/>
<path d="M242 210C245 218 247 230 260 232C270 232 278 225 280 212Z" fill="url(#rockGrad)" filter="url(#shadow)"/>
</g>
<!-- Birds -->
<g stroke="#fff" stroke-width="2" stroke-linecap="round">
<path d="M110 60q5 -5 10 0"/>
<path d="M120 60q5 -5 10 0"/>
<path d="M125 75q4 -4 8 0"/>
<path d="M133 75q4 -4 8 0"/>
</g>
</svg>
<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="islandGrad" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#8B5A2B"/>
<stop offset="100%" stop-color="#4E2A0A"/>
</radialGradient>
<linearGradient id="grassGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7CFC00"/>
<stop offset="100%" stop-color="#228B22"/>
</linearGradient>
<linearGradient id="trunkGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#A0522D"/>
<stop offset="100%" stop-color="#5C3317"/>
</linearGradient>
<radialGradient id="leafGrad" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#ADFF2F"/>
<stop offset="100%" stop-color="#006400"/>
</radialGradient>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.4"/>
</filter>
<pattern id="roofPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<path d="M0,0 L10,10 M10,0 L0,10" stroke="#800000" stroke-width="1"/>
</pattern>
</defs>
<!-- Sky Background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Floating Island -->
<path d="M50,200 C30,180 30,140 60,130 C90,120 130,120 160,130 C190,140 190,180 170,200 Z"
fill="url(#grassGrad)" filter="url(#shadow)"/>
<path d="M60,130 C50,160 55,180 55,200 L165,200 C165,180 170,160 160,130 Z"
fill="url(#islandGrad)"/>
<!-- Waterfall -->
<path d="M80,200 C85,220 95,240 110,260 C125,280 140,280 155,260 C170,240 180,220 185,200"
stroke="#ADD8E6" stroke-width="4" fill="none" opacity="0.6"/>
<!-- Tree Trunk -->
<path d="M140,130 C138,100 140,50 145,30 C150,10 160,10 165,30 C170,50 172,100 170,130 Z"
fill="url(#trunkGrad)" stroke="#5C3317" stroke-width="2" filter="url(#shadow)"/>
<!-- Tree Branches -->
<g fill="url(#trunkGrad)" stroke="#5C3317" stroke-width="2">
<path d="M150,60 C130,40 100,30 80,60"/>
<path d="M160,70 C140,50 110,45 90,75"/>
<path d="M155,90 C135,80 120,95 100,120"/>
<path d="M165,85 C145,70 125,65 105,95"/>
</g>
<!-- Tree Leaves Clusters -->
<g fill="url(#leafGrad)" stroke="#228B22" stroke-width="1">
<circle cx="75" cy="60" r="20"/>
<circle cx="95" cy="45" r="18"/>
<circle cx="110" cy="75" r="22"/>
<circle cx="130" cy="55" r="24"/>
<circle cx="125" cy="90" r="26"/>
<circle cx="150" cy="85" r="20"/>
</g>
<!-- Tiny House -->
<g filter="url(#shadow)">
<rect x="100" y="155" width="50" height="30" fill="#FFF8DC" stroke="#8B4513" stroke-width="2"/>
<path d="M100,155 L125,135 L150,155 Z" fill="url(#roofPattern)" stroke="#8B0000" stroke-width="2"/>
<rect x="115" y="170" width="10" height="15" fill="#87CEEB" stroke="#4682B4" stroke-width="1"/>
<rect x="130" y="170" width="10" height="15" fill="#FFD700" stroke="#DAA520" stroke-width="1"/>
<circle cx="120" cy="165" r="2" fill="#000"/>
<circle cx="140" cy="165" r="2" fill="#000"/>
</g>
<!-- Accents: Birds -->
<g fill="none" stroke="#000" stroke-width="1">
<path d="M30,50 Q35,45 40,50"/>
<path d="M45,55 Q50,50 55,55"/>
<path d="M20,70 Q25,65 30,70"/>
</g>
</svg>Judge's Analysis
Player 1's submission better adheres to the prompt with a well-defined floating island, a tiny house, and a massive tree growing through its center.
The composition is clean and balanced, with a clear representation of the concept.
Player 2's image lacks compositional clarity and the tree does not appear central or massive, which diminishes adherence to the prompt and overall visual appeal.
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.
