Creative Challenge
"A bird wearing a tiny astronaut helmet, perched on the moon."
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#400080" /> <!-- Brighter Purple Core -->
<stop offset="30%" stop-color="#2A004F" /> <!-- Mid Purple -->
<stop offset="100%" stop-color="#0A001F" /> <!-- Deep Space Purple/Black -->
</radialGradient>
<linearGradient id="moonSurfaceGradient" x1="0.5" y1="0" x2="0.5" y2="1">
<stop offset="0%" stop-color="#CCCCCC" />
<stop offset="60%" stop-color="#A0A0A0" />
<stop offset="100%" stop-color="#707070" />
</linearGradient>
<radialGradient id="craterInterior" cx="50%" cy="50%" r="50%" fx="60%" fy="60%">
<stop offset="0%" stop-color="#606060" /> <!-- Darker center -->
<stop offset="100%" stop-color="#909090" /> <!-- Lighter rim -->
</radialGradient>
<radialGradient id="craterRimHighlight" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#E0E0E0" />
<stop offset="100%" stop-color="#B0B0B0" />
</radialGradient>
<radialGradient id="birdBodyGradient" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#00BFFF" /> <!-- DeepSkyBlue -->
<stop offset="100%" stop-color="#0077B6" /> <!-- Darker, slightly desaturated blue -->
</radialGradient>
<linearGradient id="birdWingGradient" x1="0%" y1="0%" x2="80%" y2="100%">
<stop offset="0%" stop-color="#00A0F0" />
<stop offset="100%" stop-color="#006090" />
</linearGradient>
<linearGradient id="birdTailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00AEEF"/> <!-- Slightly different blue for tail -->
<stop offset="100%" stop-color="#0077B6"/>
</linearGradient>
<radialGradient id="helmetShellGradient" cx="35%" cy="35%" r="65%">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#C0C0C0" /> <!-- Silver Grey -->
</radialGradient>
<radialGradient id="helmetVisorGradient" cx="30%" cy="30%" r="70%">
<stop offset="0%" stop-color="#7080B0" /> <!-- Softer blueish highlight -->
<stop offset="40%" stop-color="#202040" /> <!-- Dark main visor -->
<stop offset="100%" stop-color="#0A0A1A" /> <!-- Very dark for depth -->
</radialGradient>
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" result="blur"/>
<feFlood flood-color="#FFFFE0" flood-opacity="0.7" result="glowColor"/>
<feComposite in="glowColor" in2="blur" operator="in" result="softGlow_colored"/>
<feMerge>
<feMergeNode in="softGlow_colored"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#spaceGradient)" />
<!-- Stars -->
<circle cx="40" cy="50" r="1.2" fill="#FFFFFF" opacity="0.9"/>
<circle cx="80" cy="30" r="0.8" fill="#E0E8FF" opacity="0.8"/> <!-- Pale Blue -->
<circle cx="120" cy="80" r="1.5" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="200" cy="40" r="1" fill="#FFFFFF" opacity="0.9"/>
<circle cx="250" cy="70" r="1.8" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="280" cy="120" r="0.9" fill="#E0E8FF" opacity="0.8"/>
<circle cx="30" cy="150" r="1.3" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="70" cy="110" r="0.7" fill="#FFFFFF" opacity="0.9"/>
<circle cx="150" cy="20" r="1.6" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="220" cy="140" r="1.1" fill="#FFFFFF" opacity="0.9"/>
<circle cx="10" cy="90" r="0.8" fill="#E0E8FF" opacity="0.8"/>
<circle cx="180" cy="170" r="1.4" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="20" cy="10" r="1" fill="#FFFFFF" opacity="0.9"/>
<circle cx="280" cy="15" r="1.2" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="55" cy="190" r="0.9" fill="#E0E8FF" opacity="0.8"/>
<circle cx="260" cy="200" r="1.3" fill="#FFFFE0" filter="url(#starGlow)" />
<circle cx="125" cy="130" r="0.7" fill="#FFFFFF" opacity="0.9" />
<circle cx="190" cy="95" r="1.1" fill="#FFFFE0" filter="url(#starGlow)" />
<!-- Distant Earth -->
<g transform="translate(240, 45) scale(0.8)">
<circle r="8" fill="#3A7CA5" filter="url(#starGlow)"/> <!-- Added subtle glow to Earth for 'atmosphere' -->
<path d="M -4 -2 q 2 -3 4 0 q 2 3 -1 4 q -3 1 -3 -4 Z" fill="#6A8A28" /> <!-- Green continent 1 -->
<path d="M 1 2 q 2 1 1 3 q -2 1 -3 -1 q -1 -2 1 -3 Z" fill="#90A860" /> <!-- Lighter green/tan continent 2 -->
<path d="M 0 -7 A 7 7 0 0 0 0 7 A 3.5 3.5 0 0 1 0 -7" fill="rgba(255,255,255,0.25)" /> <!-- Atmosphere highlight -->
</g>
<!-- Moon Surface -->
<path d="M-10 300 Q150 170 310 300 L310 300 L-10 300 Z" fill="url(#moonSurfaceGradient)" stroke="#404040" stroke-width="0.5"/>
<!-- Craters -->
<g id="crater1" transform="translate(80, 235)">
<circle r="28" fill="url(#craterInterior)"/>
<circle r="28" stroke="#505050" stroke-width="1.5" fill="none"/>
<ellipse cx="2" cy="-3" rx="25" ry="20" fill="url(#craterRimHighlight)" opacity="0.25" transform="rotate(20)"/>
</g>
<g id="crater2" transform="translate(210, 255)">
<circle r="18" fill="url(#craterInterior)"/>
<circle r="18" stroke="#484848" stroke-width="1" fill="none"/>
<ellipse cx="-1" cy="1" rx="16" ry="12" fill="url(#craterRimHighlight)" opacity="0.20" transform="rotate(-30)"/>
</g>
<g id="crater3" transform="translate(150, 270)"> <!-- Smaller crater -->
<circle r="12" fill="url(#craterInterior)"/>
<circle r="12" stroke="#555555" stroke-width="0.8" fill="none"/>
<ellipse cx="1" cy="-1" rx="10" ry="8" fill="url(#craterRimHighlight)" opacity="0.15" transform="rotate(10)"/>
</g>
<g id="crater4" transform="translate(30,275) scale(0.8)"> <!-- Edge crater partially visible, scaled down -->
<path d="M0,0 A15,15 0 0,1 25,-10 A15,12 0 0,0 0,0 Z" fill="url(#craterInterior)" transform="rotate(10)"/>
<path d="M0,0 A15,15 0 0,1 25,-10" stroke="#505050" stroke-width="1.2" fill="none" transform="rotate(10)"/>
</g>
<!-- Bird -->
<g id="birdOnMoon" transform="translate(150, 170)"> <!-- Feet will be at (150,170) on moon's highest point -->
<!-- Legs and Feet -->
<g id="legs">
<line x1="-3" y1="0" x2="-4" y2="-12" stroke="#8B4513" stroke-width="2.5" stroke-linecap="round"/> <!-- SaddleBrown -->
<line x1="3" y1="0" x2="4" y2="-12" stroke="#8B4513" stroke-width="2.5" stroke-linecap="round"/>
<!-- Claws -->
<path d="M-4.5 0 L-7 -2 L-4.5 -2.5 Z M-3.5 0 L-1 -2 L-3.5 -2.5 Z" fill="#652A0D"/> <!-- Darker brown for claws -->
<path d="M4.5 0 L7 -2 L4.5 -2.5 Z M3.5 0 L1 -2 L3.5 -2.5 Z" fill="#652A0D"/>
</g>
<!-- Body, Wing, Tail Group (rotated together for a slight tilt) -->
<g transform="rotate(-5 0 -27)"> <!-- Rotate around body center: (0, -27) -->
<ellipse cx="0" cy="-27" rx="18" ry="15" fill="url(#birdBodyGradient)"/>
<!-- Tail: extends from back of body. Body rear is roughly (18, -27) in this local rotated space -->
<path d="M16 -27 q 8 0 10 8 q -2 6 -10 6 q -5 -3 -6 -10 Z" fill="url(#birdTailGradient)" stroke="#005080" stroke-width="0.5" />
<!-- Wing (folded) -->
<path d="M-10 -30 Q -28 -35 -22 -18 Q -12 -15 -10 -30 Z" fill="url(#birdWingGradient)" stroke="#004D80" stroke-width="0.5"/>
</g>
<!-- Beak (peeking out from under helmet) -->
<polygon points="0,0 -2.5,3.5 2.5,3.5" fill="#FFA500" stroke="#D48800" stroke-width="0.3" transform="translate(0, -39)" />
<!-- Helmet Group -->
<g id="helmet" transform="translate(0, -52)"> <!-- Position helmet above body -->
<!-- Main helmet shell -->
<circle cx="0" cy="0" r="13" fill="url(#helmetShellGradient)" stroke="#808080" stroke-width="0.8"/>
<!-- Visor -->
<ellipse cx="0" cy="0.5" rx="11.5" ry="8.5" fill="url(#helmetVisorGradient)" />
<!-- Visor Reflection Highlights -->
<ellipse cx="-4.5" cy="-2.5" rx="2.5" ry="1.2" fill="white" opacity="0.6" transform="rotate(-25)"/>
<circle cx="4" cy="1.5" r="0.9" fill="white" opacity="0.45"/>
<!-- Tiny Earth reflection on visor -->
<g transform="translate(3.8, 0.5) scale(0.12)"> <!-- Position and scale the Earth reflection -->
<circle r="8" fill="#5090C0"/> <!-- Slightly different blue for reflection -->
<path d="M -4 -2 q 2 -3 4 0 q 2 3 -1 4 q -3 1 -3 -4 Z" fill="#70A030" />
<path d="M 1 2 q 2 1 1 3 q -2 1 -3 -1 q -1 -2 1 -3 Z" fill="#B0A070" />
</g>
<!-- Helmet Rim / Neck Ring -->
<ellipse cx="0" cy="9.2" rx="13" ry="3.5" fill="#B8B8B8" stroke="#606060" stroke-width="0.6"/>
<!-- Antenna -->
<line x1="10.5" y1="-8.5" x2="16" y2="-16" stroke="#A0A0A0" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="16" y1="-16" r="1.5" fill="#FF4500"/> <!-- OrangeRed tip -->
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with gradient -->
<rect width="300" height="300" fill="url(#space-gradient)" />
<!-- Moon surface -->
<path d="M50,200 Q150,250 250,200 Q230,180 210,160 L210,130 Q220,120 230,110 Q250,130 270,160 Q260,170 250,180 Q240,170 230,160 L230,130 Q220,140 210,150 Q200,140 190,130 L190,160 Q180,170 170,180 Q160,190 150,200 Z" fill="#4a4a4a" />
<!-- Moon craters -->
<circle cx="180" cy="190" r="5" fill="#333" opacity="0.3" />
<circle cx="220" cy="200" r="3" fill="#333" opacity="0.3" />
<circle cx="200" cy="180" r="4" fill="#333" opacity="0.3" />
<!-- Bird body -->
<path d="M140,170 L160,160 Q170,155 180,150 Q190,140 200,130 L200,110 Q190,100 180,90 Q170,80 160,70 L140,80 Q130,85 120,95 Q110,100 100,110 L100,130 Q110,140 120,150 Q130,155 140,160 L140,170 Z" fill="url(#bird-gradient)" />
<!-- Bird head -->
<ellipse cx="160" cy="100" rx="20" ry="15" fill="url(#bird-gradient)" />
<!-- Bird beak -->
<path d="M180,100 Q185,95 190,100" fill="#ffa500" />
<!-- Helmet -->
<path d="M155,95 Q160,90 165,95 Q170,100 165,105 Q160,100 155,95 Z" fill="url(#helmet-gradient)" />
<path d="M157,92 Q160,89 163,90 Q160,91 157,92 Z" fill="white" />
<!-- Legs -->
<path d="M140,170 L140,180" stroke="#ffa500" stroke-width="2" />
<path d="M160,170 L160,180" stroke="#ffa500" stroke-width="2" />
<!-- Gradient definitions -->
<defs>
<linearGradient id="space-gradient" x1="0" y1="0" x2="0" y2="300">
<stop offset="0" stop-color="#1a1a4a" />
<stop offset="1" stop-color="#000" />
</linearGradient>
<radialGradient id="bird-gradient" cx="150" cy="150" r="50" fx="150" fy="150">
<stop offset="0" stop-color="#ffd700" />
<stop offset="1" stop-color="#ff8c00" />
</radialGradient>
<radialGradient id="helmet-gradient" cx="160" cy="100" r="10" fx="160" fy="100">
<stop offset="0" stop-color="#ffd700" />
<stop offset="1" stop-color="#c0c000" />
</radialGradient>
</defs>
</svg>Judge's Analysis
Player 1's submission more closely adheres to the prompt by clearly depicting a bird wearing an astronaut helmet and perched on the moon.
The background with stars and Earth adds to the space theme, enhancing the visual appeal.
Player 2's image, while abstract and creative, does not clearly convey the bird or the astronaut helmet, making it less adherent to the specified idea.
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
"A chicken wearing astronaut gear on the moon."
"A cat balancing on a tightrope under a moonlit sky."
"A cactus wearing sunglasses in a desert during a colorful sunset."
"An upside-down tree with its roots reaching for the stars."
