Creative Challenge
"A teacup floating in space with a small galaxy swirling inside."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Space background gradient -->
<radialGradient id="spaceGrad" cx="50%" cy="30%">
<stop offset="0%" style="stop-color:#1a0b3d;stop-opacity:1" />
<stop offset="50%" style="stop-color:#0d051f;stop-opacity:1" />
<stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
</radialGradient>
<!-- Galaxy center gradient -->
<radialGradient id="galaxyCenter" cx="50%" cy="50%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
<stop offset="30%" style="stop-color:#ffeb99;stop-opacity:0.9" />
<stop offset="60%" style="stop-color:#ff6b9d;stop-opacity:0.7" />
<stop offset="100%" style="stop-color:#6b73ff;stop-opacity:0.3" />
</radialGradient>
<!-- Galaxy spiral arm gradient -->
<linearGradient id="spiralArm" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#9bb5ff;stop-opacity:0.8" />
<stop offset="50%" style="stop-color:#c9b5ff;stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#ff9bb5;stop-opacity:0.3" />
</linearGradient>
<!-- Teacup gradient -->
<linearGradient id="cupGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#f8f8ff;stop-opacity:1" />
<stop offset="50%" style="stop-color:#e6e6fa;stop-opacity:1" />
<stop offset="100%" style="stop-color:#d8bfd8;stop-opacity:1" />
</linearGradient>
<!-- Cup glow -->
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Galaxy blur -->
<filter id="galaxyBlur">
<feGaussianBlur stdDeviation="1"/>
</filter>
</defs>
<!-- Space background -->
<rect width="300" height="300" fill="url(#spaceGrad)"/>
<!-- Background stars -->
<circle cx="50" cy="40" r="1" fill="#ffffff" opacity="0.8"/>
<circle cx="280" cy="60" r="0.5" fill="#ffffff" opacity="0.6"/>
<circle cx="30" cy="120" r="1.5" fill="#ffeb99" opacity="0.7"/>
<circle cx="270" cy="150" r="1" fill="#ffffff" opacity="0.9"/>
<circle cx="80" cy="200" r="0.8" fill="#9bb5ff" opacity="0.6"/>
<circle cx="250" cy="220" r="1.2" fill="#ffffff" opacity="0.8"/>
<circle cx="20" cy="260" r="0.6" fill="#ff9bb5" opacity="0.7"/>
<circle cx="290" cy="280" r="1" fill="#ffffff" opacity="0.5"/>
<circle cx="120" cy="30" r="0.7" fill="#c9b5ff" opacity="0.8"/>
<circle cx="200" cy="290" r="1.1" fill="#ffffff" opacity="0.6"/>
<!-- Teacup shadow/glow base -->
<ellipse cx="150" cy="190" rx="45" ry="35" fill="#6b73ff" opacity="0.2" filter="url(#glow)"/>
<!-- Teacup body -->
<path d="M 105 160
Q 105 180 115 190
L 185 190
Q 195 180 195 160
Q 195 140 185 130
L 115 130
Q 105 140 105 160 Z"
fill="url(#cupGrad)"
stroke="#d8bfd8"
stroke-width="1"
filter="url(#glow)"/>
<!-- Teacup handle -->
<path d="M 195 150
Q 220 145 225 160
Q 230 175 220 180
Q 210 185 195 175"
fill="none"
stroke="url(#cupGrad)"
stroke-width="8"
stroke-linecap="round"/>
<!-- Inner cup rim -->
<ellipse cx="150" cy="130" rx="40" ry="8" fill="none" stroke="#c9b5ff" stroke-width="1"/>
<!-- Galaxy inside cup -->
<g clip-path="ellipse(38px 7px at 150px 130px)">
<!-- Galaxy center -->
<circle cx="150" cy="130" r="12" fill="url(#galaxyCenter)"/>
<!-- Spiral arms -->
<path d="M 150 130
Q 140 125 135 120
Q 130 115 125 118
Q 120 122 118 128
Q 116 135 120 142
Q 125 148 132 150
Q 140 152 148 148
Q 155 144 160 138
Q 165 132 168 125
Q 170 118 175 115
Q 180 112 185 118"
fill="none"
stroke="url(#spiralArm)"
stroke-width="2"
opacity="0.8"
filter="url(#galaxyBlur)"/>
<path d="M 150 130
Q 160 135 165 140
Q 170 145 175 142
Q 180 138 182 132
Q 184 125 180 118
Q 175 112 168 110
Q 160 108 152 112
Q 145 116 140 122
Q 135 128 132 135
Q 130 142 125 145
Q 120 148 115 142"
fill="none"
stroke="url(#spiralArm)"
stroke-width="1.5"
opacity="0.6"
filter="url(#galaxyBlur)"/>
<!-- Galaxy stars -->
<circle cx="145" cy="125" r="0.5" fill="#ffffff" opacity="0.9"/>
<circle cx="155" cy="135" r="0.3" fill="#ffeb99" opacity="0.8"/>
<circle cx="140" cy="138" r="0.4" fill="#9bb5ff" opacity="0.7"/>
<circle cx="162" cy="127" r="0.3" fill="#ff9bb5" opacity="0.8"/>
<circle cx="148" cy="140" r="0.6" fill="#ffffff" opacity="0.6"/>
<circle cx="135" cy="128" r="0.4" fill="#c9b5ff" opacity="0.7"/>
<circle cx="165" cy="135" r="0.3" fill="#ffffff" opacity="0.9"/>
<circle cx="142" cy="120" r="0.3" fill="#ffeb99" opacity="0.8"/>
</g>
<!-- Cosmic particles around cup -->
<circle cx="90" cy="150" r="1" fill="#9bb5ff" opacity="0.5"/>
<circle cx="210" cy="140" r="0.8" fill="#ff9bb5" opacity="0.6"/>
<circle cx="95" cy="180" r="1.2" fill="#c9b5ff" opacity="0.4"/>
<circle cx="205" cy="185" r="0.9" fill="#ffeb99" opacity="0.5"/>
<!-- Floating effect particles -->
<circle cx="130" cy="110" r="2" fill="#ffffff" opacity="0.3"/>
<circle cx="170" cy="108" r="1.5" fill="#9bb5ff" opacity="0.4"/>
<circle cx="145" cy="105" r="1" fill="#ff9bb5" opacity="0.3"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="bgGrad" cx="50%" cy="50%" r="80%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#001"/>
<stop offset="100%" stop-color="#000"/>
</radialGradient>
<radialGradient id="galGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffafa"/>
<stop offset="30%" stop-color="#a2dffc"/>
<stop offset="60%" stop-color="#00aaff"/>
<stop offset="100%" stop-color="#003366"/>
</radialGradient>
<linearGradient id="cupGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#fefefe"/>
<stop offset="100%" stop-color="#d1d1d1"/>
</linearGradient>
<radialGradient id="cupInt" cx="50%" cy="40%" r="50%">
<stop offset="0%" stop-color="#303030"/>
<stop offset="100%" stop-color="transparent"/>
</radialGradient>
<pattern id="stars" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
<circle cx="10" cy="20" r="1" fill="#fff"/>
<circle cx="40" cy="5" r="1.5" fill="#fff"/>
<circle cx="25" cy="45" r="0.8" fill="#fff"/>
</pattern>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<rect width="300" height="300" fill="url(#bgGrad)"/>
<rect width="300" height="300" fill="url(#stars)" opacity="0.3"/>
<g filter="url(#shadow)">
<ellipse cx="150" cy="180" rx="70" ry="22" fill="url(#cupGrad)" stroke="#ccc" stroke-width="2"/>
<path d="M80,180 Q70,260 220,260 Q230,180 80,180 Z" fill="url(#cupGrad)" stroke="#ccc" stroke-width="2"/>
<ellipse cx="150" cy="183" rx="60" ry="15" fill="url(#cupInt)"/>
</g>
<path d="M220,180 C255,180 255,230 220,230" fill="none" stroke="url(#cupGrad)" stroke-width="10"/>
<ellipse cx="150" cy="183" rx="60" ry="15" fill="none" stroke="#fff" stroke-opacity="0.3" stroke-width="1"/>
<g>
<path d="M150,185 C158,165 180,160 170,185 C178,175 200,180 190,205" fill="none" stroke="url(#galGrad)" stroke-width="6" stroke-linecap="round"/>
<path d="M150,185 C142,165 120,160 130,185 C122,175 100,180 110,205" fill="none" stroke="url(#galGrad)" stroke-width="4" stroke-linecap="round"/>
<circle cx="150" cy="185" r="3" fill="#fff"/>
<circle cx="170" cy="185" r="2" fill="#ffe"/>
<circle cx="130" cy="200" r="1.5" fill="#ffd"/>
<circle cx="160" cy="210" r="1.8" fill="#cff"/>
</g>
<g>
<circle cx="60" cy="50" r="1.2" fill="#fff" opacity="0.8"/>
<circle cx="250" cy="80" r="1.5" fill="#fff" opacity="0.6"/>
<circle cx="30" cy="200" r="1" fill="#fff" opacity="0.7"/>
<circle cx="270" cy="230" r="1.8" fill="#fff" opacity="0.5"/>
<circle cx="200" cy="40" r="1" fill="#fff" opacity="0.9"/>
</g>
</svg>Judge's Analysis
Player 1's submission adheres to the prompt more effectively, with a clear depiction of a galaxy swirling inside the teacup and a glowing celestial effect that enhances the visual appeal.
The technical execution and composition are stronger, using vibrant colors and a polished design.
Player 2's submission, while creative, lacks the same level of detail and clarity in representing the galaxy concept inside the teacup.
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.