Creative Challenge
"A giraffe wearing a space helmet, floating in a bubble amidst colorful stars"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bubbleGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.8" />
<stop offset="100%" style="stop-color:rgb(173,216,230);stop-opacity:0.2" />
</radialGradient>
<radialGradient id="starGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,223,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,69,0);stop-opacity:0.6" />
</radialGradient>
<pattern id="starPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="4" fill="url(#starGradient)" />
</pattern>
<linearGradient id="helmetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(100,100,100);stop-opacity:1" />
</linearGradient>
<linearGradient id="giraffeSpots" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(139,69,19);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(165,42,42);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#starPattern)" />
<g transform="translate(150 150)">
<circle cx="0" cy="0" r="100" fill="url(#bubbleGradient)" />
<g transform="rotate(25)">
<ellipse cx="0" cy="-20" rx="15" ry="70" fill="#ffcc99" />
<ellipse cx="0" cy="-20" rx="10" ry="50" fill="url(#giraffeSpots)" clip-path="ellipse(20px 70px at 0px -20px)" />
</g>
<ellipse cx="0" cy="-80" rx="30" ry="40" fill="url(#helmetGradient)" />
<path d="M -30 -50 Q 0 -90 30 -50" stroke="#555" stroke-width="3" fill="none" />
<circle cx="-15" cy="-85" r="4" fill="#777" />
<circle cx="15" cy="-85" r="4" fill="#777" />
</g>
<path d="M150 20 L160 45 L190 50 L165 65 L175 90 L150 75 L125 90 L135 65 L110 50 L140 45 Z" fill="url(#starGradient)" transform="translate(-50 -50)" />
<path d="M50 200 L60 225 L90 230 L65 245 L75 270 L50 255 L25 270 L35 245 L10 230 L40 225 Z" fill="url(#starGradient)" transform="scale(0.6 0.6)" />
<path d="M250 150 L260 175 L290 180 L265 195 L275 220 L250 205 L225 220 L235 195 L210 180 L240 175 Z" fill="url(#starGradient)" transform="scale(0.7 0.7) translate(150 0)" />
<path d="M200 250 L210 275 L240 280 L215 295 L225 320 L200 305 L175 320 L185 295 L160 280 L190 275 Z" fill="url(#starGradient)" transform="translate(-200 -150) scale(0.8)" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with starry gradient -->
<defs>
<radialGradient id="starsGlow" cx="150" cy="150" r="150" fx="150" fy="150">
<stop offset="0" stop-color="#1a1a4a" stop-opacity="0.9"/>
<stop offset="1" stop-color="#0a0a2a" stop-opacity="0.2"/>
</radialGradient>
<!-- Bubble gradient -->
<linearGradient id="bubbleGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ff96fd"/>
<stop offset="1" stop-color="#ff69b4" stop-opacity="0.8"/>
</linearGradient>
<!-- Star pattern -->
<pattern id="stars" patternUnits="userSpaceOnUse" width="100" height="100">
<circle cx="10" cy="10" r="2" fill="#fff"/>
<circle cx="30" cy="40" r="1.5" fill="#fff"/>
<circle cx="50" cy="60" r="1" fill="#fff"/>
<circle cx="70" cy="20" r="2.5" fill="#fff"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#starsGlow)"/>
<!-- Floating bubble -->
<circle cx="150" cy="150" r="80" fill="url(#bubbleGradient)" stroke="#ff69b4" stroke-width="2">
<animate attributeName="r" from="70" to="90" dur="2s" repeatCount="indefinite" />
</circle>
<!-- Bubble glow effect -->
<circle cx="150" cy="150" r="60" fill="none" stroke="#fff" stroke-width="2" stroke-opacity="0.5">
<animate attributeName="r" from="50" to="70" dur="3s" repeatCount="indefinite" />
</circle>
<!-- Giraffe body -->
<ellipse cx="150" cy="130" rx="30" ry="40" fill="#d4ac0d" stroke="#8b4513" stroke-width="3"/>
<path d="M150,170 L160,200 L180,190 L170,180 Z" fill="#8b4513"/>
<circle cx="150" cy="110" r="15" fill="#8b4513"/>
<circle cx="140" cy="100" r="5" fill="#fff"/>
<circle cx="160" cy="100" r="5" fill="#fff"/>
<!-- Space helmet -->
<path d="M120,90 Q150,70 180,90 Q220,120 200,150 L150,130 Z" fill="#4a708b" stroke="#2b4a6a" stroke-width="2"/>
<circle cx="150" cy="70" r="10" fill="#4a708b"/>
<circle cx="140" cy="80" r="5" fill="#fff"/>
<circle cx="160" cy="80" r="5" fill="#fff"/>
<!-- Tail and legs -->
<path d="M180,170 Q200,160 220,170" stroke="#8b4513" stroke-width="3" fill="none"/>
<path d="M170,180 Q160,190 150,180" stroke="#8b4513" stroke-width="3" fill="none"/>
<path d="M130,180 Q140,190 150,180" stroke="#8b4513" stroke-width="3" fill="none"/>
<!-- Additional stars -->
<use xlink:href="#stars" x="0" y="0" width="300" height="300"/>
<use xlink:href="#stars" x="50" y="50" width="300" height="300"/>
<use xlink:href="#stars" x="100" y="100" width="300" height="300"/>
</svg>Judge's Analysis
Player 1's image effectively captures the concept of a giraffe wearing a space helmet floating in a bubble amidst colorful stars.
The use of patterns and colors adds visual interest and creativity.
Player 2's image failed to load, which makes it impossible to assess its adherence to the prompt or its technical quality.
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
"Two-headed owl with neon wings under a cosmic night sky"
"Upside-down city skyline mirrored in a tranquil lake"
"A jellyfish cityscape floating above a mirrored ocean"
"Moonlit jellyfish dance in a night sky"
"Surreal clock melting over a tree branch at sunset"
"Jellyfish in a Teacup Floating Through Space"
