Creative Challenge
"A floating teacup pouring stars into a crescent moon-shaped saucer"
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bgGradient" cx="150" cy="150" r="150" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#1b2735"/>
<stop offset="100%" stop-color="#090a0f"/>
</radialGradient>
<linearGradient id="saucerGradient" x1="100" y1="200" x2="200" y2="200" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#b0c4de"/>
<stop offset="100%" stop-color="#4682b4"/>
</linearGradient>
<linearGradient id="cupGradient" x1="150" y1="80" x2="150" y2="130" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#f5f7fa"/>
<stop offset="100%" stop-color="#c3cfe2"/>
</linearGradient>
<linearGradient id="starGradient" x1="0" y1="0" x2="0" y2="10" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#fffacd"/>
<stop offset="100%" stop-color="#ffd700"/>
</linearGradient>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#bgGradient)" />
<!-- Crescent Moon Saucer -->
<path d="M150,220
C100,220 100,200 150,180
C200,200 200,220 150,220
Z
M150,185
C120,185 120,205 150,215
C180,205 180,185 150,185
Z"
fill="url(#saucerGradient)" filter="url(#glow)" />
<!-- Teacup -->
<g transform="translate(150, 100) scale(1.2) rotate(-15)">
<path d="M-30,0
C-30,-20 30,-20 30,0
C30,20 10,40 -10,40
C-10,40 -30,20 -30,0
Z"
fill="url(#cupGradient)" stroke="#708090" stroke-width="2" />
<path d="M30,0
C40,5 40,15 30,20"
stroke="#708090" stroke-width="3" fill="none"/>
</g>
<!-- Stars -->
<g fill="url(#starGradient)" filter="url(#glow)">
<polygon points="150,120 152,126 158,126 154,130 156,136 150,132 144,136 146,130 142,126 148,126" />
<polygon points="130,110 132,116 138,116 134,120 136,126 130,122 124,126 126,120 122,116 128,116" />
<polygon points="170,110 172,116 178,116 174,120 176,126 170,122 164,126 166,120 162,116 168,116" />
<polygon points="140,90 142,96 148,96 144,100 146,106 140,102 134,106 136,100 132,96 138,96" />
<polygon points="160,90 162,96 168,96 164,100 166,106 160,102 154,106 156,100 152,96 158,96" />
<polygon points="150,60 152,66 158,66 154,70 156,76 150,72 144,76 146,70 142,66 148,66" />
</g>
<!-- Stars Flowing -->
<g fill="url(#starGradient)" filter="url(#glow)">
<polygon points="130,130 131,135 135,135 132,138 133,142 130,140 127,142 128,138 125,135 129,135" />
<polygon points="170,130 171,135 175,135 172,138 173,142 170,140 167,142 168,138 165,135 169,135" />
<polygon points="140,150 141,155 145,155 142,158 143,162 140,160 137,162 138,158 135,155 139,155" />
<polygon points="160,150 161,155 165,155 162,158 163,162 160,160 157,162 158,158 155,155 159,155" />
<polygon points="150,170 151,175 155,175 152,178 153,182 150,180 147,182 148,178 145,175 149,175" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0e1c26"/>
<stop offset="100%" stop-color="#2a3f5f"/>
</linearGradient>
<radialGradient id="starGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#e6e6e6"/>
</radialGradient>
<pattern id="starPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="2" fill="url(#starGradient)"/>
</pattern>
<radialGradient id="teacupGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#d4af37"/>
<stop offset="100%" stop-color="#b8860b"/>
</radialGradient>
<linearGradient id="moonGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f0e68c"/>
<stop offset="100%" stop-color="#d2b48c"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<rect width="300" height="300" fill="url(#starPattern)" opacity="0.6"/>
<ellipse cx="150" cy="250" rx="40" ry="20" fill="url(#moonGradient)"/>
<path d="M150,100 C180,120 180,160 150,180 C120,160 120,120 150,100 Z" fill="url(#teacupGradient)"/>
<path d="M150,180 C180,200 180,240 150,260 C120,240 120,200 150,180 Z" fill="url(#moonGradient)"/>
<circle cx="150" cy="60" r="10" fill="url(#starGradient)"/>
<circle cx="120" cy="80" r="8" fill="url(#starGradient)"/>
<circle cx="180" cy="80" r="8" fill="url(#starGradient)"/>
<circle cx="150" cy="120" r="6" fill="url(#starGradient)"/>
<circle cx="130" cy="110" r="5" fill="url(#starGradient)"/>
<circle cx="170" cy="110" r="5" fill="url(#starGradient)"/>
<path d="M150,180 C150,200 140,220 120,230" fill="none" stroke="url(#starGradient)" stroke-width="2" stroke-dasharray="5,5"/>
<path d="M150,180 C150,200 160,220 180,230" fill="none" stroke="url(#starGradient)" stroke-width="2" stroke-dasharray="5,5"/>
</svg>Judge's Analysis
Player 1's submission better adheres to the prompt by clearly depicting a teacup pouring stars into a crescent moon-shaped saucer.
The glowing stars and the clarity of the crescent shape enhance the visual appeal and creativity.
Player 2's design, while interesting, lacks a clear representation of the teacup and crescent moon, making it less effective in conveying the theme.
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
"Snail race on a candy rainbow road"
"Octopus juggling flaming swords in a shallow-water lagoon"
"Floating islands with waterfalls in space"
"A cactus wearing a top hat and monocle juggling three clocks"
"Melting clock draped over a neon pink cactus"
"Lemon astronaut exploring a citrus planet"
