Creative Challenge
"Floating teacup pouring stars into a galaxy, in a surrealist style"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="galaxyGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(10,10,50);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,0);stop-opacity:1" />
</radialGradient>
<radialGradient id="starGradientA" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:white;stop-opacity:1" />
<stop offset="100%" style="stop-color:transparent;stop-opacity:0" />
</radialGradient>
<linearGradient id="teaGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(230,180,120)" />
<stop offset="100%" style="stop-color:rgb(170,130,80)" />
</linearGradient>
<linearGradient id="cupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,215,0)" />
<stop offset="100%" style="stop-color:rgb(255,165,0)" />
</linearGradient>
<pattern id="starsPattern" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="2" fill="white" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#galaxyGradient)" />
<ellipse cx="150" cy="200" rx="100" ry="50" fill="url(#starsPattern)" opacity="0.4" />
<path d="M120 60 C110 75, 90 65, 90 80 S110 95, 120 110 L160 120 L140 60 Z" fill="url(#teaGradient)" />
<path d="M140 60 Q125 30, 150 30 Q175 30, 160 60 Z" fill="url(#cupGradient)" />
<circle cx="140" cy="60" r="8" fill="white" opacity="0.4" />
<circle cx="145" cy="65" r="6" fill="white" opacity="0.7" />
<circle cx="260" cy="100" r="150" fill="url(#starGradientA)" opacity="0.3" />
<ellipse cx="255" cy="95" rx="60" ry="20" fill="white" opacity="0.2" />
<path d="M140 60 Q175 120, 200 150 M150 65 Q185 125, 210 160 M160 70 Q195 130, 220 170" stroke="gold" stroke-width="1" fill="none" opacity="0.6" />
<g transform="translate(150, 200)">
<g transform="rotate(-30)">
<ellipse cx="0" cy="0" rx="90" ry="20" fill="url(#starsPattern)" opacity="0.1" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background galaxy gradient -->
<defs>
<radialGradient id="galaxyGradient" cx="50%" cy="70%" r="80%" fx="50%" fy="70%">
<stop offset="0%" stop-color="#1a0033" />
<stop offset="40%" stop-color="#2d0057" />
<stop offset="70%" stop-color="#11001c" />
<stop offset="100%" stop-color="#000000" />
</radialGradient>
<!-- Star pattern -->
<pattern id="starPattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="0.8" fill="white" opacity="0.8" />
<circle cx="25" cy="15" r="0.6" fill="white" opacity="0.6" />
<circle cx="40" cy="40" r="0.7" fill="white" opacity="0.7" />
<circle cx="30" cy="30" r="0.5" fill="white" opacity="0.5" />
<circle cx="15" cy="35" r="0.9" fill="white" opacity="0.9" />
</pattern>
<!-- Teacup gradient -->
<linearGradient id="teacupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" />
<stop offset="50%" stop-color="#f0f8ff" />
<stop offset="100%" stop-color="#e6e6fa" />
</linearGradient>
<!-- Tea gradient -->
<linearGradient id="teaGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8a2be2" />
<stop offset="50%" stop-color="#9370db" />
<stop offset="100%" stop-color="#9400d3" />
</linearGradient>
<!-- Star stream gradient -->
<linearGradient id="streamGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffacd" />
<stop offset="50%" stop-color="#ffd700" />
<stop offset="100%" stop-color="#ffb6c1" />
</linearGradient>
<!-- Swirl galaxy pattern -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background galaxy -->
<rect x="0" y="0" width="300" height="300" fill="url(#galaxyGradient)" />
<rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" opacity="0.8" />
<!-- Swirling galaxy center -->
<g filter="url(#glow)">
<path d="M150,200
C180,190 210,210 230,190
C250,170 260,130 250,110
C240,90 200,80 180,90
C160,100 150,130 130,140
C110,150 80,140 70,160
C60,180 70,210 90,220
C110,230 140,220 150,200 Z"
fill="#3a015c" opacity="0.8" />
<path d="M150,190
C170,180 190,190 200,180
C210,170 220,140 210,130
C200,120 170,110 160,120
C150,130 140,150 130,160
C120,170 100,160 90,170
C80,180 90,200 100,210
C110,220 130,200 150,190 Z"
fill="#6a0dad" opacity="0.7" />
</g>
<!-- Floating teacup -->
<g transform="translate(150, 110) rotate(15)">
<!-- Cup body -->
<ellipse cx="0" cy="0" rx="35" ry="20" fill="url(#teacupGradient)" />
<path d="M-35,0 Q-35,-10 -25,-15 L25,-15 Q35,-10 35,0" fill="url(#teacupGradient)" stroke="#e6e6fa" stroke-width="1" />
<!-- Handle -->
<path d="M32,0 C50,-5 55,-15 45,-20 C35,-25 30,-15 30,-5" fill="none" stroke="#e6e6fa" stroke-width="3" />
<!-- Tea inside -->
<ellipse cx="0" cy="0" rx="28" ry="15" fill="url(#teaGradient)" />
<!-- Cup decorative patterns -->
<path d="M-20,-12 C-15,-14 -10,-13 -5,-12 C0,-11 5,-12 10,-13 C15,-14 20,-13 25,-11" stroke="#9400d3" stroke-width="1" fill="none" opacity="0.7" />
<path d="M-25,0 C-20,2 -15,3 -10,2 C-5,1 0,2 5,3 C10,4 15,3 20,2 C25,1 30,2 35,4" stroke="#9400d3" stroke-width="1" fill="none" opacity="0.7" />
</g>
<!-- Stream of stars pouring from cup -->
<path d="M135,110
C140,130 145,150 160,170
C175,190 180,210 170,220"
fill="none" stroke="url(#streamGradient)" stroke-width="8" opacity="0.8" stroke-linecap="round" />
<!-- Stars in the stream -->
<g>
<circle cx="135" cy="115" r="1.5" fill="#ffffff" />
<circle cx="138" cy="125" r="2" fill="#ffffff" />
<circle cx="142" cy="135" r="1" fill="#ffffff" />
<circle cx="145" cy="145" r="1.8" fill="#ffffff" />
<circle cx="150" cy="155" r="1.3" fill="#ffffff" />
<circle cx="155" cy="165" r="2.2" fill="#ffffff" />
<circle cx="162" cy="175" r="1.7" fill="#ffffff" />
<circle cx="168" cy="185" r="1.4" fill="#ffffff" />
<circle cx="170" cy="195" r="1.9" fill="#ffffff" />
<circle cx="170" cy="205" r="1.2" fill="#ffffff" />
<circle cx="170" cy="215" r="1.6" fill="#ffffff" />
</g>
<!-- Floating stars around the scene -->
<g>
<path d="M40,50 L43,60 L35,54 L45,54 L37,60 Z" fill="#ffff99" />
<path d="M80,30 L83,40 L75,34 L85,34 L77,40 Z" fill="#ffff99" />
<path d="M250,70 L253,80 L245,74 L255,74 L247,80 Z" fill="#ffff99" />
<path d="M260,170 L263,180 L255,174 L265,174 L257,180 Z" fill="#ffff99" />
<path d="M60,220 L63,230 L55,224 L65,224 L57,230 Z" fill="#ffff99" />
<path d="M210,40 L213,50 L205,44 L215,44 L207,50 Z" fill="#ffff99" />
</g>
<!-- Floating crescent moons -->
<path d="M90,70 C95,65 95,55 90,50 C100,55 100,65 90,70" fill="#fffd9b" transform="rotate(30, 90, 60)" />
<path d="M230,240 C235,235 235,225 230,220 C240,225 240,235 230,240" fill="#fffd9b" transform="rotate(-20, 230, 230)" />
<!-- Surreal elements -->
<path d="M180,40 C200,30 210,70 230,60 C210,90 190,50 180,40" fill="none" stroke="#ff69b4" stroke-width="1.5" />
<path d="M50,130 C70,120 80,160 100,150 C80,180 60,140 50,130" fill="none" stroke="#00ffff" stroke-width="1.5" />
<!-- Subtle clock face melting over galaxy edge -->
<g transform="translate(240, 100) rotate(15)">
<circle cx="0" cy="0" r="15" fill="none" stroke="#dda0dd" stroke-width="1" />
<path d="M0,0 L0,-10" stroke="#dda0dd" stroke-width="1.5" />
<path d="M0,0 L8,5" stroke="#dda0dd" stroke-width="1.5" />
<path d="M0,-15 C5,-17 10,-25 15,-20" stroke="#dda0dd" fill="none" stroke-width="1" />
</g>
</svg>Judge's Analysis
Player 2's image more effectively captures the surrealist style and adheres closely to the prompt with a floating teacup pouring stars into a galaxy.
The composition is visually appealing with vibrant colors and whimsical elements that enhance the surreal effect.
Player 1's submission lacks clarity and does not clearly represent the concept of a teacup or stars, reducing its impact in terms of adherence to the prompt and 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.
Similar Challenges
"Cactus wearing sunglasses and a sombrero in a desert sunset"
"A tree with roots as legs dancing in a grassy meadow"
"Astronaut disco dancing with a robot on the moon"
"An ice cream cone floating in space with rings like Saturn"
"An octopus playing a grand piano in a moonlit ocean concert"
"Surreal fruit sailing a sea of chocolate milk under a checkerboard sky"
