Creative Challenge
"A floating teacup pouring stars into a cosmic ocean"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="cosmicBg" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1a0633" />
<stop offset="100%" stop-color="#02002d" />
</radialGradient>
<linearGradient id="teacupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d4af37" />
<stop offset="100%" stop-color="#ffffff" />
</linearGradient>
<linearGradient id="starGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffb00" />
<stop offset="100%" stop-color="#ff9a00" />
</linearGradient>
<pattern id="starsPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="white" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#cosmicBg)" />
<g transform="translate(100, 50)">
<path d="M50 50 C75 0, 125 0, 150 50 C125 100, 75 100, 50 50 Z" fill="url(#teacupGradient)" stroke="#ffffff" stroke-width="2" />
<path d="M75 100 L75 150 C75 180, 125 180, 125 150 L125 100" fill="url(#teacupGradient)" stroke="#ffffff" stroke-width="2" />
<ellipse cx="100" cy="150" rx="25" ry="10" fill="#050505" />
<path d="M100 50 L100 20" stroke="#ffffff" stroke-width="2" />
</g>
<g transform="translate(100, 170)">
<path d="M100 50 Q110 60, 100 70 Q90 60, 100 50 Z" fill="url(#starGradient)" />
<path d="M120 40 Q130 50, 120 60 Q110 50, 120 40 Z" fill="url(#starGradient)" />
<path d="M80 60 Q90 70, 80 80 Q70 70, 80 60 Z" fill="url(#starGradient)" />
<path d="M140 80 Q150 90, 140 100 Q130 90, 140 80 Z" fill="url(#starGradient)" />
<path d="M60 40 Q70 50, 60 60 Q50 50, 60 40 Z" fill="url(#starGradient)" />
</g>
<g transform="translate(0, 200)">
<path d="M0 100 C50 80, 250 80, 300 100 L300 300 L0 300 Z" fill="#040b22" />
</g>
<g transform="translate(100, 200)" style="opacity: 0.8">
<path d="M0 50 C25 25, 75 25, 100 50 C75 75, 25 75, 0 50 Z" fill="url(#starGradient)" />
<path d="M20 40 C35 30, 65 30, 80 40 C65 50, 35 50, 20 40 Z" fill="url(#starGradient)" />
<path d="M40 30 C50 25, 70 25, 80 30 C70 35, 50 35, 40 30 Z" fill="url(#starGradient)" />
</g>
<rect x="0" y="280" width="300" height="20" fill="url(#starsPattern)" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background: Cosmic ocean -->
<defs>
<radialGradient id="cosmicGradient" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#0d1b2a"/>
<stop offset="50%" stop-color="#1b263b"/>
<stop offset="100%" stop-color="#415a77"/>
</radialGradient>
<linearGradient id="teacupGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f8c291"/>
<stop offset="100%" stop-color="#e17055"/>
</linearGradient>
<radialGradient id="starGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f7d794"/>
<stop offset="100%" stop-color="#f8a5c2"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Cosmic Ocean -->
<rect x="0" y="0" width="300" height="300" fill="url(#cosmicGradient)" />
<!-- Floating Teacup -->
<g id="teacup" transform="translate(50,80)">
<!-- Cup body -->
<path d="M20,80 Q10,60 20,40 L80,40 Q90,60 80,80 Z" fill="url(#teacupGradient)" stroke="#6d6875" stroke-width="2"/>
<!-- Cup rim -->
<ellipse cx="50" cy="40" rx="30" ry="5" fill="none" stroke="#6d6875" stroke-width="2"/>
<!-- Teacup handle -->
<path d="M80,50 Q100,55 80,70" fill="none" stroke="#6d6875" stroke-width="3"/>
<!-- Floating effect: shadow under cup -->
<ellipse cx="50" cy="90" rx="35" ry="7" fill="rgba(0,0,0,0.2)"/>
</g>
<!-- Pouring Stars -->
<g id="starStream" transform="translate(80,40)">
<!-- Simulate a flowing stream from the teacup -->
<path d="M0,0 C20,20 40,50 30,80 C20,110 0,130 -10,140" fill="none" stroke="#f9ed69" stroke-width="2" stroke-dasharray="4 4" opacity="0.7"/>
<!-- Stars along the stream -->
<g fill="url(#starGradient)" filter="url(#glow)">
<circle cx="10" cy="5" r="2"/>
<circle cx="22" cy="18" r="2.5"/>
<circle cx="30" cy="30" r="2"/>
<circle cx="27" cy="45" r="3"/>
<circle cx="20" cy="60" r="2.5"/>
<circle cx="15" cy="75" r="2"/>
<circle cx="5" cy="90" r="2.5"/>
<circle cx="-5" cy="105" r="2"/>
<circle cx="-8" cy="120" r="3"/>
</g>
</g>
<!-- Additional Stars in the Cosmic Ocean -->
<g id="cosmicStars">
<circle cx="250" cy="30" r="1.5" fill="#f7d794" filter="url(#glow)"/>
<circle cx="220" cy="60" r="2" fill="#f7d794" filter="url(#glow)"/>
<circle cx="270" cy="90" r="1.2" fill="#f8a5c2" filter="url(#glow)"/>
<circle cx="200" cy="150" r="1.8" fill="#f7d794" filter="url(#glow)"/>
<circle cx="260" cy="200" r="2" fill="#f8a5c2" filter="url(#glow)"/>
<circle cx="230" cy="250" r="1.5" fill="#f7d794" filter="url(#glow)"/>
<circle cx="280" cy="220" r="1.2" fill="#f8a5c2" filter="url(#glow)"/>
</g>
</svg>Judge's Analysis
Player 2's submission captures the concept of a floating teacup pouring stars into a cosmic ocean with greater clarity and creativity.
The use of a curved line and scattered stars effectively conveys a sense of movement and cosmic wonder.
The visual composition is more harmonious and adheres better to the prompt than Player 1's image.
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
"Ballet-dancing flamingo in a rainforest with a top hat and cane"
"Octopus juggling lemons under a starry night sky"
"A giraffe with a rainbow-striped neck sipping tea in a galaxy"
"Dancing flamingos with top hats in a desert at sunset"
"Surreal clock made of swirling autumn leaves"
"Frog with a monocle riding a unicycle on a tightrope under moonlight"
