Creative Challenge
"A sun setting behind a skyline of teacups"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Sky Gradient Background -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a2980" />
<stop offset="40%" stop-color="#26d0ce" />
<stop offset="60%" stop-color="#ff9966" />
<stop offset="85%" stop-color="#ff5e62" />
</linearGradient>
<!-- Sun Gradient -->
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#fff176" />
<stop offset="70%" stop-color="#ff9800" />
<stop offset="100%" stop-color="#ff5722" />
</radialGradient>
<!-- Cup Pattern -->
<pattern id="cupPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="2" fill="#f8e8d8" opacity="0.3" />
</pattern>
<!-- Tea Wave -->
<linearGradient id="teaGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#6d4c41" />
<stop offset="50%" stop-color="#8d6e63" />
<stop offset="100%" stop-color="#6d4c41" />
</linearGradient>
<!-- Steam Pattern -->
<filter id="steamBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
</defs>
<!-- Sky Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Sun -->
<circle cx="150" cy="175" r="40" fill="url(#sunGradient)">
<animate attributeName="cy" from="175" to="190" dur="8s" repeatCount="indefinite" />
</circle>
<!-- Sun Rays -->
<g opacity="0.8">
<path d="M150,120 L150,100" stroke="#fff176" stroke-width="3" stroke-linecap="round">
<animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite" />
</path>
<path d="M180,130 L195,115" stroke="#fff176" stroke-width="3" stroke-linecap="round">
<animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite" />
</path>
<path d="M120,130 L105,115" stroke="#fff176" stroke-width="3" stroke-linecap="round">
<animate attributeName="opacity" values="0.5;1;0.5" dur="3.5s" repeatCount="indefinite" />
</path>
<path d="M190,160 L210,160" stroke="#fff176" stroke-width="3" stroke-linecap="round">
<animate attributeName="opacity" values="0.6;1;0.6" dur="4.5s" repeatCount="indefinite" />
</path>
<path d="M110,160 L90,160" stroke="#fff176" stroke-width="3" stroke-linecap="round">
<animate attributeName="opacity" values="0.7;1;0.7" dur="5s" repeatCount="indefinite" />
</path>
</g>
<!-- Skyline of Teacups -->
<!-- Cup 1 -->
<g transform="translate(20, 180)">
<path d="M0,0 C5,-15 45,-15 50,0 L55,40 C55,45 -5,45 -5,40 Z" fill="#e0c6b0" stroke="#6d4c41" stroke-width="1" />
<path d="M5,5 L45,5 L42,33 C42,37 8,37 8,33 Z" fill="url(#teaGradient)" />
<path d="M50,10 C70,10 70,20 50,20" fill="none" stroke="#6d4c41" stroke-width="2" />
<!-- Steam -->
<path d="M25,-5 C30,-10 35,-15 30,-20" fill="none" stroke="white" stroke-width="1" opacity="0.6" filter="url(#steamBlur)">
<animate attributeName="d" values="M25,-5 C30,-10 35,-15 30,-20;M25,-5 C20,-10 25,-15 30,-20;M25,-5 C30,-10 35,-15 30,-20" dur="3s" repeatCount="indefinite" />
</path>
</g>
<!-- Cup 2 (taller) -->
<g transform="translate(60, 160)">
<path d="M0,0 C5,-20 55,-20 60,0 L65,60 C65,65 -5,65 -5,60 Z" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
<path d="M5,10 L55,10 L52,53 C52,57 8,57 8,53 Z" fill="url(#teaGradient)" />
<path d="M60,15 C85,15 85,30 60,30" fill="none" stroke="#6d4c41" stroke-width="2" />
<!-- Steam -->
<path d="M30,-5 C35,-10 40,-20 35,-25" fill="none" stroke="white" stroke-width="1" opacity="0.7" filter="url(#steamBlur)">
<animate attributeName="d" values="M30,-5 C35,-10 40,-20 35,-25;M30,-5 C25,-15 35,-20 40,-25;M30,-5 C35,-10 40,-20 35,-25" dur="4s" repeatCount="indefinite" />
</path>
</g>
<!-- Cup 3 (small fancy cup) -->
<g transform="translate(135, 190)">
<path d="M0,0 C3,-10 27,-10 30,0 L33,30 C33,33 -3,33 -3,30 Z" fill="#f5e1c9" stroke="#6d4c41" stroke-width="1" />
<ellipse cx="15" cy="5" rx="12" ry="3" fill="#8d6e63" />
<path d="M30,8 C45,0 45,15 30,15" fill="none" stroke="#6d4c41" stroke-width="1.5" />
<!-- Saucer -->
<ellipse cx="15" cy="32" rx="20" ry="5" fill="#e0c6b0" stroke="#6d4c41" stroke-width="1" />
<!-- Steam -->
<path d="M15,-3 C18,-8 20,-12 18,-15" fill="none" stroke="white" stroke-width="0.8" opacity="0.5" filter="url(#steamBlur)">
<animate attributeName="d" values="M15,-3 C18,-8 20,-12 18,-15;M15,-3 C12,-8 14,-12 18,-15;M15,-3 C18,-8 20,-12 18,-15" dur="2.5s" repeatCount="indefinite" />
</path>
</g>
<!-- Cup 4 (teapot) -->
<g transform="translate(180, 175)">
<ellipse cx="15" cy="30" rx="15" ry="10" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
<path d="M5,30 C5,20 25,20 25,30 L23,10 C23,5 7,5 7,10 Z" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
<path d="M7,15 C0,15 0,25 7,25" fill="none" stroke="#6d4c41" stroke-width="1.5" />
<path d="M23,15 C35,10 40,20 35,25 L25,25" fill="none" stroke="#6d4c41" stroke-width="1.5" />
<ellipse cx="15" cy="10" rx="8" ry="3" fill="#6d4c41" stroke="#5d4037" stroke-width="0.5" />
<!-- Steam -->
<path d="M15,2 C18,-3 20,-7 18,-10" fill="none" stroke="white" stroke-width="0.8" opacity="0.6" filter="url(#steamBlur)">
<animate attributeName="d" values="M15,2 C18,-3 20,-7 18,-10;M15,2 C12,-3 14,-7 18,-10;M15,2 C18,-3 20,-7 18,-10" dur="3s" repeatCount="indefinite" />
</path>
</g>
<!-- Cup 5 (mug) -->
<g transform="translate(230, 170)">
<path d="M0,0 C3,-15 37,-15 40,0 L43,40 C43,45 -3,45 -3,40 Z" fill="#e6d2bc" stroke="#6d4c41" stroke-width="1" />
<path d="M3,5 L37,5 L35,35 C35,39 5,39 5,35 Z" fill="url(#teaGradient)" />
<path d="M40,10 C55,10 55,25 40,25" fill="none" stroke="#6d4c41" stroke-width="2.5" />
<!-- Steam -->
<path d="M20,-5 C23,-10 25,-15 23,-18" fill="none" stroke="white" stroke-width="1" opacity="0.6" filter="url(#steamBlur)">
<animate attributeName="d" values="M20,-5 C23,-10 25,-15 23,-18;M20,-5 C17,-10 19,-15 23,-18;M20,-5 C23,-10 25,-15 23,-18" dur="3.5s" repeatCount="indefinite" />
</path>
</g>
<!-- Cup 6 (small cup) -->
<g transform="translate(275, 185)">
<path d="M0,0 C2,-10 18,-10 20,0 L22,25 C22,28 -2,28 -2,25 Z" fill="#f5e1c9" stroke="#6d4c41" stroke-width="1" />
<ellipse cx="10" cy="5" rx="8" ry="2" fill="#8d6e63" />
<path d="M20,5 C30,5 30,12 20,12" fill="none" stroke="#6d4c41" stroke-width="1.5" />
<!-- Steam -->
<path d="M10,-3 C12,-7 14,-10 12,-12" fill="none" stroke="white" stroke-width="0.8" opacity="0.5" filter="url(#steamBlur)">
<animate attributeName="d" values="M10,-3 C12,-7 14,-10 12,-12;M10,-3 C8,-7 10,-10 12,-12;M10,-3 C12,-7 14,-10 12,-12" dur="2s" repeatCount="indefinite" />
</path>
</g>
<!-- Reflection in water -->
<rect x="0" y="220" width="300" height="80" fill="#26d0ce" opacity="0.6" />
<g opacity="0.4">
<!-- Cup reflections -->
<g transform="translate(20, 260) scale(1,-0.5)">
<path d="M0,0 C5,-15 45,-15 50,0 L55,40 C55,45 -5,45 -5,40 Z" fill="#e0c6b0" stroke="#6d4c41" stroke-width="1" />
</g>
<g transform="translate(60, 260) scale(1,-0.5)">
<path d="M0,0 C5,-20 55,-20 60,0 L65,60 C65,65 -5,65 -5,60 Z" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
</g>
<g transform="translate(135, 260) scale(1,-0.5)">
<path d="M0,0 C3,-10 27,-10 30,0 L33,30 C33,33 -3,33 -3,30 Z" fill="#f5e1c9" stroke="#6d4c41" stroke-width="1" />
<ellipse cx="15" cy="32" rx="20" ry="5" fill="#e0c6b0" stroke="#6d4c41" stroke-width="1" />
</g>
<g transform="translate(180, 260) scale(1,-0.5)">
<ellipse cx="15" cy="30" rx="15" ry="10" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
<path d="M5,30 C5,20 25,20 25,30 L23,10 C23,5 7,5 7,10 Z" fill="#d7b29d" stroke="#6d4c41" stroke-width="1" />
</g>
<g transform="translate(230, 260) scale(1,-0.5)">
<path d="M0,0 C3,-15 37,-15 40,0 L43,40 C43,45 -3,45 -3,40 Z" fill="#e6d2bc" stroke="#6d4c41" stroke-width="1" />
</g>
<g transform="translate(275, 260) scale(1,-0.5)">
<path d="M0,0 C2,-10 18,-10 20,0 L22,25 C22,28 -2,28 -2,25 Z" fill="#f5e1c9" stroke="#6d4c41" stroke-width="1" />
</g>
<!-- Sun reflection -->
<ellipse cx="150" cy="260" rx="30" ry="15" fill="#ff9800" opacity="0.6">
<animate attributeName="ry" values="15;12;15" dur="5s" repeatCount="indefinite" />
</ellipse>
</g>
<!-- Ripples in water -->
<path d="M10,230 Q20,232 30,230 Q40,228 50,230 Q60,232 70,230" fill="none" stroke="white" stroke-width="0.5" opacity="0.3">
<animate attributeName="d" values="M10,230 Q20,232 30,230 Q40,228 50,230 Q60,232 70,230;M10,228 Q20,230 30,228 Q40,226 50,228 Q60,230 70,228;M10,230 Q20,232 30,230 Q40,228 50,230 Q60,232 70,230" dur="4s" repeatCount="indefinite" />
</path>
<path d="M100,235 Q110,237 120,235 Q130,233 140,235 Q150,237 160,235" fill="none" stroke="white" stroke-width="0.5" opacity="0.3">
<animate attributeName="d" values="M100,235 Q110,237 120,235 Q130,233 140,235 Q150,237 160,235;M100,233 Q110,235 120,233 Q130,231 140,233 Q150,235 160,233;M100,235 Q110,237 120,235 Q130,233 140,235 Q150,237 160,235" dur="5s" repeatCount="indefinite" />
</path>
<path d="M180,232 Q190,234 200,232 Q210,230 220,232 Q230,234 240,232" fill="none" stroke="white" stroke-width="0.5" opacity="0.3">
<animate attributeName="d" values="M180,232 Q190,234 200,232 Q210,230 220,232 Q230,234 240,232;M180,230 Q190,232 200,230 Q210,228 220,230 Q230,232 240,230;M180,232 Q190,234 200,232 Q210,230 220,232 Q230,234 240,232" dur="4.5s" repeatCount="indefinite" />
</path>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sunGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ffcc00;stop-opacity:1" />
<stop offset="100%" style="stop-color:#ff9900;stop-opacity:1" />
</linearGradient>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF7F50;stop-opacity:1" />
</linearGradient>
<pattern id="cupPattern" patternUnits="userSpaceOnUse" width="20" height="10">
<circle cx="5" cy="5" r="3" fill="#ffffff" />
<circle cx="15" cy="5" r="3" fill="#ffffff" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<circle cx="150" cy="120" r="40" fill="url(#sunGradient)" />
<g fill="url(#cupPattern)" stroke="#8B4513" stroke-width="2">
<path d="M80 210 Q70 190 60 210 Q70 230 80 210 Z" />
<path d="M100 215 Q90 195 80 215 Q90 235 100 215 Z" />
<path d="M120 220 Q110 200 100 220 Q110 240 120 220 Z" />
<path d="M160 210 Q150 190 140 210 Q150 230 160 210 Z" />
<path d="M180 215 Q170 195 160 215 Q170 235 180 215 Z" />
<path d="M200 220 Q190 200 180 220 Q190 240 200 220 Z" />
<path d="M240 210 Q230 190 220 210 Q230 230 240 210 Z" />
<path d="M260 215 Q250 195 240 215 Q250 235 260 215 Z" />
<path d="M280 220 Q270 200 260 220 Q270 240 280 220 Z" />
</g>
<ellipse cx="150" cy="130" rx="90" ry="50" fill="rgba(0, 0, 0, 0.1)" />
</svg>Judge's Analysis
Player 1's image creatively depicts a skyline of teacups with a sun setting behind them, using a variety of cup shapes and sizes that enhance the visual interest.
The color gradient in the sky adds depth and captures the essence of a sunset effectively.
In contrast, Player 2's submission lacks clarity in adhering to the prompt as the teacups are not easily distinguishable, and the composition is less visually engaging.
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
"Flamingo in a tuxedo, tap-dancing on a lilypad"
"Flying cat playing a trumpet in a starry skyline"
"Cloud with one quirky face winking"
"Dancing Cactus in a Tuxedo"
"A giraffe wearing a top hat, juggling planets in space"
"A cat piloting a spaceship shaped like a giant fish"
