Creative Challenge
"A lonely robot watering a single flower on a floating island in the sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky gradient -->
<radialGradient id="skyGrad" cx="50%" cy="40%" r="80%">
<stop offset="0%" stop-color="#a0ddff"/>
<stop offset="70%" stop-color="#5ebfff"/>
<stop offset="100%" stop-color="#328dd5"/>
</radialGradient>
<!-- Island grass gradient -->
<linearGradient id="grassGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6cf176"/>
<stop offset="100%" stop-color="#247943"/>
</linearGradient>
<!-- Island rock gradient -->
<linearGradient id="rockGrad" x1="0" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#c7a980"/>
<stop offset="100%" stop-color="#7f6339"/>
</linearGradient>
<!-- Robot body metallic gradient -->
<linearGradient id="metalGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#d2e3ea"/>
<stop offset="60%" stop-color="#7f8fa5"/>
<stop offset="100%" stop-color="#343d48"/>
</linearGradient>
<!-- Water gradient -->
<linearGradient id="waterGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#85e3fa"/>
<stop offset="100%" stop-color="#2db7e8"/>
</linearGradient>
<!-- Flower petal gradient -->
<radialGradient id="petalGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#fffcdc"/>
<stop offset="60%" stop-color="#fa8ad8"/>
<stop offset="100%" stop-color="#b81670"/>
</radialGradient>
<!-- Flower center -->
<radialGradient id="centerGrad" cx="50%" cy="50%" r="90%">
<stop offset="0%" stop-color="#fff596"/>
<stop offset="100%" stop-color="#edb600"/>
</radialGradient>
<!-- Cloud gradient -->
<radialGradient id="cloudGrad" cx="50%" cy="50%" r="45%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.93"/>
<stop offset="100%" stop-color="#e0f2fc" stop-opacity="0.7"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)" />
<!-- Floating clouds -->
<g>
<ellipse cx="70" cy="45" rx="32" ry="13" fill="url(#cloudGrad)" opacity="0.7"/>
<ellipse cx="105" cy="55" rx="15" ry="8" fill="url(#cloudGrad)" opacity="0.5"/>
<ellipse cx="230" cy="40" rx="24" ry="11" fill="url(#cloudGrad)" opacity="0.65"/>
<ellipse cx="195" cy="70" rx="17" ry="7" fill="url(#cloudGrad)" opacity="0.7"/>
<ellipse cx="240" cy="105" rx="28" ry="11" fill="url(#cloudGrad)" opacity="0.43"/>
<ellipse cx="50" cy="90" rx="20" ry="8" fill="url(#cloudGrad)" opacity="0.5"/>
</g>
<!-- Floating island shadow -->
<ellipse cx="150" cy="235" rx="50" ry="11" fill="#265b8f" opacity="0.25"/>
<!-- Floating Island: Grass and rock -->
<g>
<ellipse cx="150" cy="200" rx="80" ry="33" fill="url(#grassGrad)"/>
<path d="
M70,200
Q55,255 150,280
Q245,255 230,200
Q150,233 70,200
Z" fill="url(#rockGrad)" opacity="0.95"/>
<!-- Little island details/roots -->
<path d="M85 223 Q90 240 105 230" stroke="#795945" stroke-width="2" fill="none" opacity="0.45"/>
<path d="M215 220 Q220 240 200 233" stroke="#795945" stroke-width="2" fill="none" opacity="0.45"/>
<ellipse cx="120" cy="220" rx="7" ry="2" fill="#4bb048" opacity="0.40"/>
<ellipse cx="180" cy="225" rx="6" ry="2" fill="#59ba4f" opacity="0.37"/>
</g>
<!-- Flower: Lonely on top of the island -->
<g>
<!-- Stem -->
<rect x="148.5" y="186" width="3" height="23" rx="1.5" fill="#399f2d"/>
<!-- Leaves -->
<ellipse cx="150" cy="195" rx="4" ry="1" fill="#54b946" opacity="0.7" transform="rotate(-15 150 195)"/>
<ellipse cx="152" cy="202" rx="2.2" ry="0.7" fill="#4c9642" opacity="0.7" transform="rotate(10 152 202)"/>
<!-- Petals -->
<g>
<ellipse cx="150" cy="184" rx="7" ry="3.5" fill="url(#petalGrad)" transform="rotate(0 150 184)"/>
<ellipse cx="150" cy="184" rx="7" ry="3.5" fill="url(#petalGrad)" transform="rotate(70 150 184)"/>
<ellipse cx="150" cy="184" rx="7" ry="3.5" fill="url(#petalGrad)" transform="rotate(140 150 184)"/>
<ellipse cx="150" cy="184" rx="7" ry="3.5" fill="url(#petalGrad)" transform="rotate(210 150 184)"/>
<ellipse cx="150" cy="184" rx="7" ry="3.5" fill="url(#petalGrad)" transform="rotate(280 150 184)"/>
</g>
<!-- Flower center -->
<circle cx="150" cy="184" r="3.3" fill="url(#centerGrad)" stroke="#ddb000" stroke-width="0.6"/>
</g>
<!-- Lonely Robot: to the right of the flower -->
<g>
<!-- Robot Shadow -->
<ellipse cx="168" cy="222" rx="13" ry="3" fill="#325263" opacity="0.21"/>
<!-- Body -->
<rect x="157" y="200" width="23" height="18" rx="6" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="1.4"/>
<!-- Head -->
<rect x="160" y="187" width="17" height="15" rx="5" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="1"/>
<!-- Headlight (Halo) -->
<ellipse cx="168.5" cy="187" rx="7" ry="2.7" fill="#f7feff" opacity="0.56"/>
<!-- Eyes -->
<circle cx="165" cy="194" r="1.2" fill="#374459"/>
<circle cx="172" cy="194" r="1.2" fill="#374459"/>
<!-- Sad mouth -->
<path d="M165.7 198 Q168.5 201 171.3 198" stroke="#2d3342" stroke-width="1" fill="none" opacity="0.85"/>
<!-- Antenna -->
<rect x="167.7" y="183" width="1.6" height="5" rx="0.7" fill="#9dc9f0"/>
<circle cx="168.5" cy="183" r="1.4" fill="#51a8f2"/>
<!-- Left Arm (watering can hand) -->
<rect x="154" y="206" width="10" height="2.2" rx="1" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.7" transform="rotate(-25 154 207)" />
<!-- Hand -->
<ellipse cx="151" cy="206" rx="2" ry="2.3" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.5"/>
<!-- Right Arm -->
<rect x="180" y="206" width="8.5" height="2" rx="1" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.7" transform="rotate(14 180 207)" />
<ellipse cx="189.4" cy="208.1" rx="2.1" ry="1.6" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.5"/>
<!-- Left Leg -->
<rect x="161.5" y="218" width="3.1" height="10.5" rx="1.2" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.7"/>
<ellipse cx="163" cy="229" rx="2.5" ry="1.6" fill="#4b6470" />
<!-- Right Leg -->
<rect x="172.2" y="218" width="3.1" height="10.5" rx="1.2" fill="url(#metalGrad)" stroke="#6e7a98" stroke-width="0.7"/>
<ellipse cx="173.7" cy="229" rx="2.5" ry="1.6" fill="#4b6470" />
<!-- Watering Can -->
<g>
<!-- Can body -->
<rect x="145" y="199" width="9" height="7" rx="2.2" fill="#7ae0ff" stroke="#45b1cf" stroke-width="1.1"/>
<!-- Handle -->
<path d="M145.8 202 Q143.7 203.5 146 205.2" stroke="#45b1cf" stroke-width="1.2" fill="none"/>
<!-- Spout -->
<rect x="142" y="201.5" width="4" height="1.3" rx="0.6" fill="#52aad2" stroke="#45b1cf" stroke-width="0.5" transform="rotate(-20 144 202)" />
<!-- Water drops -->
<circle cx="141.8" cy="204.3" r="1.1" fill="url(#waterGrad)" opacity="0.87"/>
<ellipse cx="142.6" cy="206.5" rx="0.65" ry="1.3" fill="url(#waterGrad)" opacity="0.67"/>
<ellipse cx="143.2" cy="209" rx="0.48" ry="1.1" fill="url(#waterGrad)" opacity="0.43"/>
<!-- Water falling to flower -->
<path d="M143.2 210 Q143 215 149.5 195" stroke="url(#waterGrad)" stroke-width="1.2" fill="none" opacity="0.62"/>
</g>
</g>
<!-- Additional clouds for depth below island -->
<g>
<ellipse cx="94" cy="245" rx="20" ry="7" fill="url(#cloudGrad)" opacity="0.42"/>
<ellipse cx="210" cy="250" rx="30" ry="9" fill="url(#cloudGrad)" opacity="0.26"/>
</g>
<!-- Artistic sunbeam for hope -->
<g>
<polygon points="140,110 152,182 160,110" fill="url(#centerGrad)" opacity="0.15"/>
</g>
<!-- Faint blue rim for floating "island" -->
<ellipse cx="150" cy="200" rx="84" ry="38" fill="none" stroke="#b0e2ff" stroke-width="2.8" opacity="0.19"/>
</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="#6CACE4"/>
<stop offset="100%" stop-color="#E0F7FA"/>
</linearGradient>
<radialGradient id="rockGrad" cx="50%" cy="30%" r="60%">
<stop offset="0%" stop-color="#7A6351"/>
<stop offset="100%" stop-color="#4F372A"/>
</radialGradient>
<linearGradient id="grassGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#60A030"/>
<stop offset="100%" stop-color="#3B6020"/>
</linearGradient>
<linearGradient id="metalGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ECEFF1"/>
<stop offset="100%" stop-color="#B0BEC5"/>
</linearGradient>
<radialGradient id="waterGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#81D4FA" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#0288D1" stop-opacity="0.6"/>
</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>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<g fill="#FFF" opacity="0.7">
<ellipse cx="60" cy="50" rx="30" ry="15"/>
<ellipse cx="90" cy="60" rx="40" ry="20"/>
<ellipse cx="240" cy="40" rx="35" ry="18"/>
<ellipse cx="210" cy="80" rx="50" ry="25"/>
</g>
<g filter="url(#shadow)">
<path d="M110,230 C90,215 70,185 80,155 C90,125 130,120 160,145 C190,120 230,125 240,155 C250,185 230,215 210,230 Z" fill="url(#rockGrad)"/>
<path d="M115,210 C120,200 130,195 145,200 C155,180 200,180 205,200 C220,195 230,200 235,210 Z" fill="url(#grassGrad)"/>
</g>
<circle cx="160" cy="165" r="15" fill="#FFFF8D" opacity="0.2"/>
<g>
<line x1="160" y1="200" x2="160" y2="170" stroke="#2E7D32" stroke-width="2"/>
<circle cx="160" cy="165" r="5" fill="#FFEB3B"/>
<g fill="#E91E63">
<ellipse cx="160" cy="155" rx="8" ry="4"/>
<ellipse cx="152" cy="165" rx="4" ry="8" transform="rotate(-45 152 165)"/>
<ellipse cx="168" cy="165" rx="4" ry="8" transform="rotate(45 168 165)"/>
</g>
</g>
<g id="robot" filter="url(#shadow)">
<rect x="175" y="150" width="30" height="40" rx="5" fill="url(#metalGrad)" stroke="#78909C" stroke-width="1"/>
<rect x="178" y="130" width="24" height="20" rx="4" fill="url(#metalGrad)" stroke="#78909C" stroke-width="1"/>
<circle cx="188" cy="140" r="2.5" fill="#263238"/>
<circle cx="202" cy="140" r="2.5" fill="#263238"/>
<line x1="190" y1="130" x2="190" y2="120" stroke="#78909C" stroke-width="2"/>
<circle cx="190" cy="120" r="2" fill="#FFEB3B"/>
<path d="M176,160 L160,170 L158,167" stroke="url(#metalGrad)" stroke-width="4" stroke-linecap="round"/>
<path d="M205,160 L215,170 L220,175" stroke="url(#metalGrad)" stroke-width="4" stroke-linecap="round"/>
<line x1="185" y1="190" x2="180" y2="205" stroke="url(#metalGrad)" stroke-width="4" stroke-linecap="round"/>
<line x1="200" y1="190" x2="205" y2="205" stroke="url(#metalGrad)" stroke-width="4" stroke-linecap="round"/>
<g transform="translate(150,165) rotate(-20 5 2)">
<rect x="0" y="0" width="18" height="10" rx="2" fill="#78909C" stroke="#546E7A" stroke-width="1"/>
<rect x="15" y="3" width="8" height="3" fill="#78909C" stroke="#546E7A" stroke-width="1"/>
</g>
<circle cx="150" cy="175" r="2" fill="url(#waterGrad)"/>
<circle cx="153" cy="180" r="2" fill="url(#waterGrad)"/>
<circle cx="147" cy="183" r="2" fill="url(#waterGrad)"/>
</g>
</svg>Judge's Analysis
Player 1's image better adheres to the prompt with a more detailed depiction of a floating island in the sky, including a visible grassy surface and clouds for atmospheric effect.
The composition is visually balanced, and the robot's interaction with the flower is clear.
Player 2's design is simpler and lacks the same level of detail and creativity in portraying the floating island and the sky setting.
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 clock melting over a cloud under a starry night sky."
"A flying whale with rainbow wings gliding over a futuristic cityscape."
