Creative Challenge
"A floating umbrella in space shading a calm whale under glowing stars"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<radialGradient id="bg" cx="150" cy="150" r="150" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#081c37" />
<stop offset="100%" stop-color="#0b2746" />
</radialGradient>
<rect x="0" y="0" width="300" height="300" fill="url(#bg)" />
<!-- Stars -->
<circle cx="50" cy="70" r="2" fill="#ffffff" />
<circle cx="200" cy="40" r="1.5" fill="#ffffff" />
<circle cx="250" cy="100" r="2.5" fill="#ffffff" />
<circle cx="80" cy="200" r="1" fill="#ffffff" />
<circle cx="160" cy="260" r="1.5" fill="#ffffff" />
<circle cx="290" cy="210" r="2" fill="#ffffff" />
<!-- More stars -->
<circle cx="30" cy="150" r="1" fill="#ffffff" />
<circle cx="270" cy="175" r="1.5" fill="#ffffff" />
<circle cx="120" cy="30" r="1" fill="#ffffff" />
<!-- Floating Umbrella -->
<defs>
<linearGradient id="umbrellaGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e53a40" />
<stop offset="100%" stop-color="#b31820" />
</linearGradient>
</defs>
<path d="M150 70 Q110 10 70 70 Q150 20 230 70 Q190 10 150 70 Z" fill="url(#umbrellaGrad)" />
<line x1="150" y1="70" x2="150" y2="140" stroke="#e53a40" stroke-width="3" />
<!-- Whale -->
<defs>
<linearGradient id="whaleGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#4cb5f5" />
<stop offset="100%" stop-color="#1a75bb" />
</linearGradient>
</defs>
<path d="M50 200 Q100 150 200 200 T270 250 Q200 220 150 250 Q100 230 50 200 Z" fill="url(#whaleGrad)" />
<circle cx="180" cy="220" r="4" fill="#ffffff" />
<!-- Shading from Umbrella on Whale -->
<ellipse cx="150" cy="230" rx="75" ry="15" fill="rgba(0, 0, 0, 0.25)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Starry Night Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#stars)" rx="10"/>
<defs>
<pattern id="stars" patternUnits="userSpaceOnUse" width="100" height="100">
<circle cx="50" cy="50" r="5" fill="#fff" opacity="0.5"/>
<circle cx="20" cy="80" r="3" fill="#fff" opacity="0.5"/>
<circle cx="80" cy="20" r="4" fill="#fff" opacity="0.5"/>
<circle cx="10" cy="50" r="2" fill="#fff" opacity="0.5"/>
<circle cx="50" cy="10" r="3" fill="#fff" opacity="0.5"/>
</pattern>
</defs>
<!-- Glowing Nebula -->
<circle cx="150" cy="150" r="70" fill="url(#nebula)" />
<defs>
<radialGradient id="nebula" cx="150" cy="150" r="70" fx="150" fy="150">
<stop offset="0%" stop-color="#ff69b4" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#ffa07a" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#ffd700" stop-opacity="0.4"/>
</radialGradient>
</defs>
<!-- Whale -->
<path d="M150 220 C150 220 170 200 190 190 L210 180 C230 170 240 160 250 150 L260 140 C270 130 280 120 290 110 L290 100 C280 90 270 80 260 70 L250 60 C240 50 230 40 220 30 L210 20 C200 10 190 0 180 0 L170 -10 C160 -20 150 -30 140 -40 Z" fill="#87ceeb" opacity="0.8"/>
<!-- Umbrella -->
<path d="M140 120 C140 120 160 140 180 160 L200 180 C220 200 240 220 250 240 L260 250 C270 260 280 270 290 280 L290 290 C280 300 270 310 260 320 L250 330 C240 340 220 350 210 360 L200 370 C190 380 180 390 170 400 Z" fill="url(#umbrella)" />
<defs>
<linearGradient id="umbrella" x1="140" y1="120" x2="290" y2="280">
<stop offset="0%" stop-color="#fff" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#ccc" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#666" stop-opacity="0.4"/>
</linearGradient>
</defs>
<!-- Umbrella Ribs -->
<path d="M170 160 L200 180 M190 190 L220 210 M210 220 L240 240 M230 230 L260 250" stroke="#666" stroke-width="2" fill="none"/>
</svg>Judge's Analysis
Player 1's image clearly depicts a floating umbrella shading a whale under a starry background, closely adhering to the prompt.
The composition is simple yet effective, with a clear narrative and good use of color contrast.
Player 2's image, while abstract and visually interesting, does not clearly communicate the elements of the prompt as effectively as Player 1's submission.
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
"Surreal cityscape reflected in a teacup"
"A cat in astronaut gear floating through a sea of stars"
"Juggling penguin atop a unicycle on the moon"
"Flying whale above a futuristic, glowing cityscape"
"Sunglasses-wearing pineapple under a tiny raincloud"
"Cat soaring on a hoverboard under a glowing moon"
