Creative Challenge
"A flying teacup with wings, pouring stars into an ocean made of swirling galaxies"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Background gradient -->
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="50%" stop-color="#1a1a4a" />
<stop offset="100%" stop-color="#0a0a2a" />
</linearGradient>
<!-- Galaxy gradients -->
<radialGradient id="galaxyGradient1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#8a2be2" stop-opacity="0.9" />
<stop offset="50%" stop-color="#4b0082" stop-opacity="0.7" />
<stop offset="100%" stop-color="#191970" stop-opacity="0.5" />
</radialGradient>
<radialGradient id="galaxyGradient2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#00bfff" stop-opacity="0.9" />
<stop offset="50%" stop-color="#1e90ff" stop-opacity="0.7" />
<stop offset="100%" stop-color="#0000cd" stop-opacity="0.5" />
</radialGradient>
<!-- Teacup gradients -->
<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>
<linearGradient id="wingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f8f8ff" />
<stop offset="50%" stop-color="#e6e6fa" />
<stop offset="100%" stop-color="#d8bfd8" />
</linearGradient>
<linearGradient id="teaGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffd700" stop-opacity="0.7" />
<stop offset="100%" stop-color="#ffb90f" stop-opacity="0.9" />
</linearGradient>
<!-- Filters and patterns -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<pattern id="starPattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="1" fill="white" opacity="0.8" />
<circle cx="25" cy="20" r="0.8" fill="white" opacity="0.6" />
<circle cx="40" cy="15" r="1.2" fill="white" opacity="0.7" />
<circle cx="15" cy="30" r="0.6" fill="white" opacity="0.5" />
<circle cx="35" cy="35" r="1" fill="white" opacity="0.8" />
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#bgGradient)" />
<rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" opacity="0.6" />
<!-- Galaxy Ocean -->
<g class="galaxy-ocean">
<!-- Galaxy swirls -->
<path d="M0,200 C50,180 100,220 150,200 S250,170 300,190 L300,300 L0,300 Z" fill="url(#galaxyGradient1)" opacity="0.8">
<animate attributeName="d"
values="M0,200 C50,180 100,220 150,200 S250,170 300,190 L300,300 L0,300 Z;
M0,200 C50,190 100,210 150,190 S250,180 300,190 L300,300 L0,300 Z;
M0,200 C50,180 100,220 150,200 S250,170 300,190 L300,300 L0,300 Z"
dur="15s" repeatCount="indefinite" />
</path>
<path d="M0,220 C70,210 120,240 180,225 S250,205 300,215 L300,300 L0,300 Z" fill="url(#galaxyGradient2)" opacity="0.6">
<animate attributeName="d"
values="M0,220 C70,210 120,240 180,225 S250,205 300,215 L300,300 L0,300 Z;
M0,220 C70,230 120,220 180,235 S250,215 300,215 L300,300 L0,300 Z;
M0,220 C70,210 120,240 180,225 S250,205 300,215 L300,300 L0,300 Z"
dur="12s" repeatCount="indefinite" />
</path>
<!-- Galaxy whirlpools -->
<g class="galaxy-whirlpools">
<path d="M100,260 a20,10 0 1,0 40,0 a20,10 0 1,0 -40,0" fill="url(#galaxyGradient1)" opacity="0.5">
<animateTransform attributeName="transform" type="rotate" from="0 120 260" to="360 120 260" dur="20s" repeatCount="indefinite" />
</path>
<path d="M190,270 a25,8 0 1,0 50,0 a25,8 0 1,0 -50,0" fill="url(#galaxyGradient2)" opacity="0.4">
<animateTransform attributeName="transform" type="rotate" from="0 215 270" to="360 215 270" dur="25s" repeatCount="indefinite" />
</path>
</g>
<!-- Galaxy stars -->
<g class="galaxy-stars">
<circle cx="50" cy="240" r="1.5" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.3;0.9" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="120" cy="235" r="1.2" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="5s" repeatCount="indefinite" />
</circle>
<circle cx="200" cy="230" r="1.3" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.5;0.9" dur="3.5s" repeatCount="indefinite" />
</circle>
<circle cx="270" cy="235" r="1.4" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="3s" repeatCount="indefinite" />
</circle>
<!-- Star shapes -->
<path d="M100,245 L102,250 L108,250 L103,253 L105,258 L100,255 L95,258 L97,253 L92,250 L98,250 Z" fill="white" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="5s" repeatCount="indefinite" />
</path>
<path d="M220,255 L222,260 L228,260 L223,263 L225,268 L220,265 L215,268 L217,263 L212,260 L218,260 Z" fill="white" opacity="0.5">
<animate attributeName="opacity" values="0.5;0.1;0.5" dur="6s" repeatCount="indefinite" />
</path>
</g>
</g>
<!-- Teacup -->
<g class="teacup" transform="translate(150, 120) rotate(15)">
<!-- Cup body -->
<ellipse cx="0" cy="0" rx="30" ry="20" fill="url(#teacupGradient)" stroke="#d8bfd8" stroke-width="1.5" />
<path d="M-30,0 Q-30,30 0,30 Q30,30 30,0" fill="url(#teacupGradient)" stroke="#d8bfd8" stroke-width="1.5" />
<!-- Tea liquid inside cup -->
<ellipse cx="0" cy="0" rx="25" ry="15" fill="url(#teaGradient)" opacity="0.9" />
<!-- Cup handle -->
<path d="M28,0 C40,-5 45,10 30,15" fill="none" stroke="#d8bfd8" stroke-width="3" stroke-linecap="round" />
<!-- Cup decorations -->
<path d="M-20,-3 Q0,-8 20,-3" fill="none" stroke="#9370db" stroke-width="1" opacity="0.7" />
<path d="M-15,25 Q0,20 15,25" fill="none" stroke="#9370db" stroke-width="1" opacity="0.7" />
<!-- Decorative stars on cup -->
<path d="M-15,10 L-14,12 L-12,12 L-13.5,14 L-13,16 L-15,15 L-17,16 L-16.5,14 L-18,12 L-16,12 Z" fill="#9370db" opacity="0.8" />
<path d="M15,10 L16,12 L18,12 L16.5,14 L17,16 L15,15 L13,16 L13.5,14 L12,12 L14,12 Z" fill="#9370db" opacity="0.8" />
<!-- Wings -->
<g class="wings">
<!-- Left wing -->
<path d="M-30,-5 C-50,-30 -60,-10 -45,10 C-55,0 -40,-15 -30,-5" fill="url(#wingGradient)" stroke="#d8bfd8" stroke-width="1">
<animate attributeName="d"
values="M-30,-5 C-50,-30 -60,-10 -45,10 C-55,0 -40,-15 -30,-5;
M-30,-5 C-55,-25 -65,-5 -45,10 C-55,0 -45,-10 -30,-5;
M-30,-5 C-50,-30 -60,-10 -45,10 C-55,0 -40,-15 -30,-5"
dur="5s" repeatCount="indefinite" />
</path>
<!-- Left wing decorations -->
<path d="M-40,-15 C-45,-20 -50,-15 -45,-10" fill="none" stroke="#b19cd9" stroke-width="0.7" opacity="0.8" />
<circle cx="-45" cy="-18" r="1" fill="#ffffff" opacity="0.9" />
<circle cx="-55" cy="-8" r="0.8" fill="#ffffff" opacity="0.8" />
<!-- Right wing -->
<path d="M30,-5 C50,-30 60,-10 45,10 C55,0 40,-15 30,-5" fill="url(#wingGradient)" stroke="#d8bfd8" stroke-width="1">
<animate attributeName="d"
values="M30,-5 C50,-30 60,-10 45,10 C55,0 40,-15 30,-5;
M30,-5 C55,-25 65,-5 45,10 C55,0 45,-10 30,-5;
M30,-5 C50,-30 60,-10 45,10 C55,0 40,-15 30,-5"
dur="5s" repeatCount="indefinite" />
</path>
<!-- Right wing decorations -->
<path d="M40,-15 C45,-20 50,-15 45,-10" fill="none" stroke="#b19cd9" stroke-width="0.7" opacity="0.8" />
<circle cx="45" cy="-18" r="1" fill="#ffffff" opacity="0.9" />
<circle cx="55" cy="-8" r="0.8" fill="#ffffff" opacity="0.8" />
</g>
</g>
<!-- Pouring stars -->
<g class="pouring-stars">
<!-- Stream trail -->
<path d="M135,135 C140,160 145,185 150,210" fill="none" stroke="#f0f8ff" stroke-width="3" stroke-dasharray="1 3" opacity="0.8">
<animate attributeName="d"
values="M135,135 C140,160 145,185 150,210;
M135,135 C137,160 142,185 145,210;
M135,135 C140,160 145,185 150,210"
dur="4s" repeatCount="indefinite" />
</path>
<!-- Stars in the stream -->
<g filter="url(#starGlow)">
<!-- Falling circular stars -->
<circle class="star" cx="138" cy="150" r="1.2" fill="white">
<animate attributeName="cy" values="150;230" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3s" repeatCount="indefinite" />
</circle>
<circle class="star" cx="142" cy="140" r="1.5" fill="white">
<animate attributeName="cy" values="140;220" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="4s" repeatCount="indefinite" />
</circle>
<circle class="star" cx="145" cy="155" r="1" fill="white">
<animate attributeName="cy" values="155;235" dur="3.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3.5s" repeatCount="indefinite" />
</circle>
<!-- Star shapes -->
<path class="star" d="M143,170 L144,172 L146,172 L144.5,174 L145,176 L143,175 L141,176 L141.5,174 L140,172 L142,172 Z" fill="white">
<animate attributeName="transform" values="translate(0,0) rotate(0); translate(0,80) rotate(180)" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="4s" repeatCount="indefinite" />
</path>
<path class="star" d="M147,155 L148,157 L150,157 L148.5,159 L149,161 L147,160 L145,161 L145.5,159 L144,157 L146,157 Z" fill="white">
<animate attributeName="transform" values="translate(0,0) rotate(0); translate(0,80) rotate(180)" dur="3.7s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="3.7s" repeatCount="indefinite" />
</path>
<path class="star" d="M139,165 L140,167 L142,167 L140.5,169 L141,171 L139,170 L137,171 L137.5,169 L136,167 L138,167 Z" fill="white">
<animate attributeName="transform" values="translate(0,0) rotate(0); translate(0,80) rotate(180)" dur="4.3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="4.3s" repeatCount="indefinite" />
</path>
<!-- Stardust particles -->
<g class="stardust">
<circle cx="143" cy="180" r="0.5" fill="#ffffe0" opacity="0.9">
<animate attributeName="cy" values="180;240" dur="3s" repeatCount="indefinite" />
<animate attributeName="cx" values="143;145;141;143" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.9;0" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="147" cy="175" r="0.4" fill="#ffffe0" opacity="0.8">
<animate attributeName="cy" values="175;235" dur="3.5s" repeatCount="indefinite" />
<animate attributeName="cx" values="147;149;146;147" dur="3.5s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.8;0" dur="3.5s" repeatCount="indefinite" />
</circle>
<circle cx="138" cy="185" r="0.6" fill="#ffffe0" opacity="0.7">
<animate attributeName="cy" values="185;245" dur="2.8s" repeatCount="indefinite" />
<animate attributeName="cx" values="138;136;139;138" dur="2.8s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;0" dur="2.8s" repeatCount="indefinite" />
</circle>
</g>
</g>
<!-- Splash effect where stars meet the galaxy -->
<g class="star-splash" transform="translate(150, 210)">
<circle cx="0" cy="0" r="2" fill="white" opacity="0">
<animate attributeName="r" values="2;5;2" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0;0.7;0" dur="4s" repeatCount="indefinite" />
</circle>
<path d="M-5,-2 L5,2" stroke="white" stroke-width="0.5" opacity="0">
<animate attributeName="opacity" values="0;0.6;0" dur="4s" repeatCount="indefinite" />
</path>
<path d="M-2,-5 L2,5" stroke="white" stroke-width="0.5" opacity="0">
<animate attributeName="opacity" values="0;0.6;0" dur="4s" repeatCount="indefinite" />
</path>
</g>
</g>
<!-- Additional cosmic elements -->
<g class="cosmic-elements">
<!-- Shooting stars -->
<path d="M50,50 L65,65" stroke="white" stroke-width="1.5" opacity="0">
<animate attributeName="opacity" values="0;0.7;0" dur="5s" begin="1s" repeatCount="indefinite" />
</path>
<path d="M250,40 L235,55" stroke="white" stroke-width="1.5" opacity="0">
<animate attributeName="opacity" values="0;0.7;0" dur="4s" begin="2s" repeatCount="indefinite" />
</path>
<!-- Small planets/celestial bodies -->
<circle cx="40" cy="80" r="5" fill="#b0c4de" opacity="0.6" />
<ellipse cx="40" cy="80" rx="8" ry="2" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5">
<animateTransform attributeName="transform" type="rotate" from="0 40 80" to="360 40 80" dur="8s" repeatCount="indefinite" />
</ellipse>
<circle cx="260" cy="60" r="8" fill="#ffdead" opacity="0.5" />
<ellipse cx="260" cy="60" rx="12" ry="3" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.4">
<animateTransform attributeName="transform" type="rotate" from="0 260 60" to="360 260 60" dur="12s" repeatCount="indefinite" />
</ellipse>
<!-- Swirling cosmic dust -->
<path d="M70,120 Q100,100 130,110 T180,100" fill="none" stroke="#9370db" stroke-width="1" stroke-dasharray="1 3" opacity="0.4">
<animate attributeName="d"
values="M70,120 Q100,100 130,110 T180,100;
M70,120 Q100,110 130,100 T180,100;
M70,120 Q100,100 130,110 T180,100"
dur="15s" repeatCount="indefinite" />
</path>
<path d="M220,90 Q240,70 260,80 T290,70" fill="none" stroke="#b0e0e6" stroke-width="1" stroke-dasharray="1 3" opacity="0.4">
<animate attributeName="d"
values="M220,90 Q240,70 260,80 T290,70;
M220,90 Q240,80 260,70 T290,70;
M220,90 Q240,70 260,80 T290,70"
dur="12s" repeatCount="indefinite" />
</path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Galaxy swirls -->
<circle cx="150" cy="150" r="120" fill="navy" />
<circle cx="100" cy="100" r="20" fill="purple" />
<circle cx="200" cy="200" r="15" fill="darkorchid" />
<circle cx="220" cy="80" r="25" fill="indigo" />
<circle cx="75" cy="200" r="30" fill="blue" />
<!-- Stars in the ocean -->
<circle cx="50" cy="80" r="2" fill="white" />
<circle cx="120" cy="40" r="2" fill="white" />
<circle cx="190" cy="20" r="2" fill="white" />
<circle cx="230" cy="100" r="2" fill="white" />
<circle cx="260" cy="200" r="2" fill="white" />
<!-- Teacup body -->
<path d="M100 230 Q150 180 200 230 Q175 260 150 250 Q125 260 100 230" fill="pink" />
<!-- Teacup handle -->
<path d="M160 220 Q170 190 180 220" fill="pink" />
<!-- Teacup wings -->
<path d="M130 220 Q90 190 60 220 Q90 250 130 220" fill="lightblue" opacity="0.7"/>
<path d="M170 205 Q210 160 240 190 Q210 230 170 205" fill="lightblue" opacity="0.7"/>
</svg>
Judge's Analysis
Player 1's image effectively captures the prompt with a visually distinct flying teacup with wings, pouring stars into an ocean of swirling galaxies.
The technical quality is high, with clear details and a cohesive color palette.
Player 2's image is more abstract and lacks the specific elements that align with the prompt, making Player 1's submission more successful overall.
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
"Skyscraper made of giant seashells under aurora borealis"
"A moonlit violin serenades a dancing galaxy, in impressionism"
"A giraffe wearing a top hat, juggling planets in a starry sky"
"Floating library in a teacup sailing on a sea of honey under a moonlit sky"
"A giraffe wearing a suit, reading a newspaper, on a tiny unicycle"
"Melting clock dripping over a cactus in the desert"