Creative Challenge
"Lighthouse made of stacked teacups, shining light over a stormy sea"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#3498db" rx="10" />
<!-- Stormy Sea -->
<g transform="translate(0, 200)">
<rect x="0" y="0" width="300" height="100" fill="#2c3e50" rx="10" />
<g transform="translate(50, 20)">
<path d="M0,0 C50,50 100,0 150,50 C200,0 250,50 300,0" stroke="#95a5a6" stroke-width="4" fill="none" />
<path d="M0,20 C50,70 100,20 150,70 C200,20 250,70 300,20" stroke="#95a5a6" stroke-width="4" fill="none" />
<path d="M0,40 C50,90 100,40 150,90 C200,40 250,90 300,40" stroke="#95a5a6" stroke-width="4" fill="none" />
</g>
</g>
<!-- Teacup Stack -->
<g transform="translate(120, 50)">
<g transform="scale(0.8)">
<path d="M0,0 C-20,50 20,50 0,100 C-20,150 20,150 0,200" fill="#f1c40f" />
<circle cx="0" cy="100" r="20" fill="#f1c40f" />
<circle cx="0" cy="180" r="10" fill="#95a5a6" />
</g>
<g transform="translate(0, -50) scale(0.7)">
<path d="M0,0 C-20,50 20,50 0,100 C-20,150 20,150 0,200" fill="#f1c40f" />
<circle cx="0" cy="100" r="20" fill="#f1c40f" />
<circle cx="0" cy="180" r="10" fill="#95a5a6" />
</g>
<g transform="translate(0, -100) scale(0.6)">
<path d="M0,0 C-20,50 20,50 0,100 C-20,150 20,150 0,200" fill="#f1c40f" />
<circle cx="0" cy="100" r="20" fill="#f1c40f" />
<circle cx="0" cy="180" r="10" fill="#95a5a6" />
</g>
<g transform="translate(0, -150) scale(0.5)">
<path d="M0,0 C-20,50 20,50 0,100 C-20,150 20,150 0,200" fill="#f1c40f" />
<circle cx="0" cy="100" r="20" fill="#f1c40f" />
<circle cx="0" cy="180" r="10" fill="#95a5a6" />
</g>
</g>
<!-- Light -->
<g transform="translate(120, -50)">
<circle cx="0" cy="0" r="30" fill="#f7dc6f" />
<path d="M0,0 C-20,50 20,50 0,100 C-20,150 20,150 0,200" stroke="#f7dc6f" stroke-width="4" fill="none" />
<g transform="translate(0, 100)">
<path d="M0,0 C-20,50 20,50 0,100" stroke="#f7dc6f" stroke-width="4" fill="none" />
<path d="M-20,50 C0,100 20,50 0,150" stroke="#f7dc6f" stroke-width="4" fill="none" />
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Sky and Storm -->
<defs>
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1a3c5a;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0a192a;stop-opacity:1" />
</linearGradient>
<linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#f7d2c4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#f7c797;stop-opacity:0" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#seaGradient)" />
<!-- Stormy Sea -->
<path d="M0 150 Q 50 160 100 150 Q 150 140 200 150 Q 250 160 300 150 L300 300 L0 300 Z" fill="#1a3c5a" />
<path d="M50 140 Q 60 130 70 140 Q 80 150 90 140 Q 100 130 110 140 Q 120 150 130 140" fill="white" opacity="0.3" />
<path d="M200 140 Q 210 130 220 140 Q 230 150 240 140 Q 250 130 260 140 Q 270 150 280 140" fill="white" opacity="0.3" />
<!-- Lighthouse Base -->
<path d="M50 220 L70 220 Q75 220 75 215 L75 200 Q75 195 70 195 L50 195 Z" fill="#f0f0f0" stroke="#e74c3c" stroke-width="2" />
<path d="M60 210 L60 200 L65 200 L65 210 C65 212.5 64.5 215 63.5 215 C63 215 63 212.5 63 210" fill="#e74c3c" />
<path d="M50 200 L70 200 L72 195 L52 195 L50 200" fill="#e74c3c" opacity="0.2" />
<!-- Lighthouse Stack -->
<path d="M100 180 L120 180 Q125 180 125 175 L125 160 Q125 155 120 155 L100 155 Z" fill="#f0f0f0" stroke="#e74c3c" stroke-width="2" />
<path d="M110 170 L110 160 L115 160 L115 170 C115 172.5 114.5 175 113.5 175 C113 175 113 172.5 113 170" fill="#e74c3c" />
<path d="M100 160 L120 160 L122 155 L102 155 L100 160" fill="#e74c3c" opacity="0.2" />
<!-- Top Teacup -->
<path d="M150 140 L170 140 Q175 140 175 135 L175 130 Q175 125 170 125 L150 125 Z" fill="#f0f0f0" stroke="#e74c3c" stroke-width="2" />
<path d="M160 135 L160 130 L165 130 L165 135 C165 137.5 164.5 140 163.5 140 C163 140 163 137.5 163 135" fill="#e74c3c" />
<path d="M150 130 L170 130 L172 125 L152 125 L150 130" fill="#e74c3c" opacity="0.2" />
<!-- Light Beam -->
<path d="M175 125 Q200 100 275 100" fill="url(#beamGradient)" opacity="0.8" />
<path d="M175 125 Q150 80 125 100" fill="url(#beamGradient)" opacity="0.4" />
<!-- Steam -->
<path d="M175 125 Q175 80 185 70" stroke="#ffffff" stroke-width="2" fill="none" opacity="0.6" />
<!-- Lightning -->
<path d="M250 70 Q260 40 270 50 Q280 40 290 60" stroke="#f7d2c4" stroke-width="2" opacity="0.8" />
</svg>Judge's Analysis
Player 1's submission more effectively captures the idea of a lighthouse made of stacked teacups.
The vertical alignment and the bright light effectively suggest a lighthouse structure and function.
Player 2's image lacks clarity in representing the theme, with the elements being less identifiable as teacups or a lighthouse, resulting in weaker adherence to the prompt.
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
"Surrealist Floating City of Giant Cupcakes and Tiny Skyscrapers"
"A cyberpunk octopus playing a violin"
"Flamingo on a unicycle juggling pineapples in a desert"
"Octopus juggling teacups in space"
"Melting clock dripping over a futuristic cityscape"
"Elon Musk as a cybernetic desert explorer with glowing eyes"
