Creative Challenge
"A giraffe in space wearing an astronaut helmet, floating among stars and planets."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Giraffe in space wearing an astronaut helmet floating among stars and planets" >
<defs>
<!-- Gradients -->
<radialGradient id="spaceGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#000012"/>
<stop offset="100%" stop-color="#15002f"/>
</radialGradient>
<radialGradient id="planetPurple" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#a27dd0"/>
<stop offset="100%" stop-color="#4b2b66"/>
</radialGradient>
<radialGradient id="planetOrange" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffb347"/>
<stop offset="100%" stop-color="#ff652f"/>
</radialGradient>
<radialGradient id="planetBlue" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#75d4ff"/>
<stop offset="100%" stop-color="#00527a"/>
</radialGradient>
<linearGradient id="helmetGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#dce9ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#526b8f" stop-opacity="0.2"/>
</linearGradient>
<linearGradient id="giraffePattern" x1="0" y1="0" x2="1" y2="1">
<stop offset="10%" stop-color="#e4b169"/>
<stop offset="90%" stop-color="#b57e2a"/>
</linearGradient>
<pattern id="spotPattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(15)">
<circle cx="10" cy="10" r="5" fill="#7a4d03"/>
<circle cx="5" cy="15" r="3" fill="#6b4000"/>
<circle cx="15" cy="5" r="4" fill="#a37114"/>
</pattern>
<!-- Star glow -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Helmet reflection -->
<filter id="glassShine" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#e6f3ff" flood-opacity="0.8"/>
<feGaussianBlur stdDeviation="1.5"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#spaceGradient)"/>
<!-- Stars scattered -->
<g>
<!-- Big bright stars with glow -->
<circle cx="40" cy="50" r="2.5" fill="white"/>
<circle cx="40" cy="50" r="10" fill="url(#starGlow)" />
<circle cx="260" cy="230" r="2" fill="white"/>
<circle cx="260" cy="230" r="7" fill="url(#starGlow)" />
<circle cx="210" cy="110" r="1.7" fill="white"/>
<circle cx="210" cy="110" r="6" fill="url(#starGlow)"/>
<circle cx="120" cy="60" r="2.3" fill="white"/>
<circle cx="120" cy="60" r="8" fill="url(#starGlow)"/>
<!-- Smaller stars -->
<circle cx="100" cy="200" r="1" fill="#c7e7ff" opacity="0.8"/>
<circle cx="180" cy="180" r="0.9" fill="#e7fbff" opacity="0.7"/>
<circle cx="230" cy="60" r="1.4" fill="#dbefff" opacity="0.9"/>
<circle cx="60" cy="180" r="1.1" fill="#f0f7ff" opacity="0.7"/>
</g>
<!-- Planets -->
<g>
<!-- Purple planet top-right -->
<circle cx="240" cy="70" r="28" fill="url(#planetPurple)"/>
<!-- Rings around purple planet -->
<ellipse cx="240" cy="70" rx="38" ry="10" fill="none" stroke="#a689d6" stroke-width="3" opacity="0.7" transform="rotate(25 240 70)"/>
<ellipse cx="240" cy="70" rx="44" ry="11" fill="none" stroke="#7e5ca1" stroke-width="1.3" opacity="0.5" transform="rotate(25 240 70)"/>
<!-- Orange planet bottom-left -->
<circle cx="70" cy="220" r="30" fill="url(#planetOrange)"/>
<!-- Craters on orange planet -->
<circle cx="55" cy="215" r="6" fill="#ff944e" opacity="0.85"/>
<circle cx="85" cy="230" r="4" fill="#ffad6a" opacity="0.8"/>
<circle cx="60" cy="240" r="3.5" fill="#ff7a2a" opacity="0.7"/>
<!-- Blue planet middle-left -->
<circle cx="90" cy="140" r="20" fill="url(#planetBlue)"/>
<!-- Wavy stripes on blue planet -->
<path d="M75 135 Q80 130 85 135 T95 135" fill="none" stroke="#00b8ff" stroke-width="2" opacity="0.6"/>
<path d="M75 143 Q80 138 85 143 T95 143" fill="none" stroke="#007fbf" stroke-width="1.5" opacity="0.5"/>
</g>
<!-- Giraffe body floating positioned center-left -->
<g transform="translate(100,150) scale(0.9)">
<!-- Body -->
<ellipse cx="0" cy="40" rx="52" ry="65" fill="url(#giraffePattern)" />
<ellipse cx="0" cy="40" rx="52" ry="65" fill="url(#spotPattern)" opacity="0.85"/>
<!-- Legs -->
<rect x="-40" y="95" width="18" height="50" rx="9" ry="16" fill="#b2791a" />
<rect x="-10" y="95" width="18" height="50" rx="9" ry="16" fill="#b2791a" />
<rect x="20" y="95" width="18" height="50" rx="9" ry="16" fill="#b2791a" />
<rect x="50" y="95" width="18" height="50" rx="9" ry="16" fill="#b2791a" />
<!-- Tail -->
<path d="M52 90 Q65 145 80 135" stroke="#ceb95a" stroke-width="7" fill="none" stroke-linecap="round"/>
<circle cx="80" cy="135" r="7" fill="#704000"/>
<!-- Neck -->
<rect x="10" y="-35" width="22" height="90" rx="12" ry="12" fill="url(#giraffePattern)"/>
<rect x="10" y="-35" width="22" height="90" rx="12" ry="12" fill="url(#spotPattern)" opacity="0.85"/>
<!-- Head -->
<g transform="translate(17,-75)">
<ellipse cx="22" cy="28" rx="29" ry="30" fill="url(#giraffePattern)"/>
<ellipse cx="22" cy="28" rx="29" ry="30" fill="url(#spotPattern)" opacity="0.85"/>
<!-- Muzzle -->
<ellipse cx="22" cy="48" rx="24" ry="18" fill="#f9e2a1" />
<ellipse cx="22" cy="48" rx="24" ry="18" fill="url(#spotPattern)" opacity="0.35"/>
<!-- Eyes -->
<ellipse cx="12" cy="20" rx="7" ry="10" fill="white" />
<ellipse cx="12" cy="20" rx="4.5" ry="6" fill="#49321c" />
<ellipse cx="12" cy="20" rx="2.7" ry="3.6" fill="black" />
<ellipse cx="32" cy="20" rx="7" ry="10" fill="white" />
<ellipse cx="32" cy="20" rx="4.5" ry="6" fill="#49321c" />
<ellipse cx="32" cy="20" rx="2.7" ry="3.6" fill="black" />
<!-- Nostrils -->
<ellipse cx="14" cy="56" rx="5" ry="3" fill="#543d22"/>
<ellipse cx="30" cy="56" rx="5" ry="3" fill="#543d22"/>
<!-- Mouth -->
<path d="M5 59 Q22 75 40 59" fill="none" stroke="#6a4b2d" stroke-width="2" stroke-linecap="round"/>
<!-- Ossicones -->
<ellipse cx="10" cy="2" rx="6" ry="13" fill="#b37e29" stroke="#6b4504" stroke-width="1.2"/>
<ellipse cx="33" cy="2" rx="6" ry="13" fill="#b37e29" stroke="#6b4504" stroke-width="1.2"/>
<circle cx="10" cy="0" r="4" fill="#704900"/>
<circle cx="33" cy="0" r="4" fill="#704900"/>
<!-- Astronaut Helmet Circle Glass -->
<circle cx="22" cy="28" r="37" fill="url(#helmetGrad)" />
<circle cx="22" cy="28" r="37" fill="none" stroke="#c3dbf8" stroke-width="4"/>
<!-- Helmet highlights -->
<path filter="url(#glassShine)" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" d="M7 8 Q15 5 30 15"/>
<path fill="none" stroke="#e6f2ff" stroke-width="2" stroke-linecap="round" d="M37 12 Q40 25 36 42" opacity="0.7"/>
<path fill="none" stroke="#b4d2ff" stroke-width="1.3" d="M12 38 Q22 48 37 38" opacity="0.5"/>
<!-- Helmet frame bottom -->
<ellipse cx="22" cy="62" rx="40" ry="8" fill="#4e6e97" />
<ellipse cx="22" cy="62" rx="37" ry="6" fill="#52709c" />
<ellipse cx="22" cy="62" rx="35" ry="5" fill="#6a8bbd" />
</g>
</g>
<!-- Floating subtle bubbles around -->
<g opacity="0.15" stroke="#a0c7ff" stroke-width="1.3">
<circle cx="120" cy="95" r="12" fill="none"/>
<circle cx="180" cy="170" r="8" fill="none"/>
<circle cx="150" cy="70" r="15" fill="none"/>
<circle cx="220" cy="200" r="9" fill="none"/>
</g>
<!-- subtle comet streak -->
<path d="M280 20 L265 25 L240 22" stroke="#cbf0ff" stroke-width="2" stroke-linecap="round" opacity="0.7" />
<circle cx="280" cy="20" r="3" fill="#cbf0ff" opacity="0.9" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#161d3d; stop-opacity:1" />
<stop offset="100%" style="stop-color:#7a9bc2; stop-opacity:1" />
</linearGradient>
<radialGradient id="giraffeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700; stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFBF00; stop-opacity:1" />
</radialGradient>
<radialGradient id="helmetGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#ffffff; stop-opacity:0.6" />
<stop offset="100%" style="stop-color:#B0C4DE; stop-opacity:1" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="url(#spaceGradient)" />
<g transform="translate(150, 150)">
<ellipse cx="0" cy="0" rx="30" ry="50" fill="url(#giraffeGradient)" />
<path d="M-10,-60 Q-20,-70 -30,-50 Q-30,-30 -10,-30 Q10,-30 10,-50 Q20,-70 10,-60" fill="url(#giraffeGradient)" />
<path d="M-5,-10 Q-10,0 -5,10 Q0,0 5,10 Q10,0 5,-10 Z" fill="#000" />
<circle cx="0" cy="-60" r="40" fill="url(#helmetGradient)" />
<circle cx="0" cy="-60" r="38" fill="none" stroke="#000" stroke-width="2"/>
<path d="M-10,-90 L10,-90 Q0,-100 -10,-90 Z" fill="#000" />
</g>
<g fill="#FFD700">
<circle cx="50" cy="40" r="4" />
<circle cx="100" cy="-80" r="7" />
<circle cx="-70" cy="-40" r="5" />
<circle cx="-90" cy="80" r="3" />
</g>
<g fill="#FF6347">
<circle cx="-150" cy="-120" r="10" />
<circle cx="180" cy="150" r="8" />
<circle cx="100" cy="-160" r="6" />
</g>
</svg>Judge's Analysis
Player 1's submission is more detailed and aligns better with the prompt.
The giraffe's pattern and astronaut helmet are clearly depicted, and the inclusion of planets and stars enhances the space theme.
Player 2's submission is minimalistic and lacks defining features that clearly represent a giraffe or the space setting, making it less visually appealing and less effective in fulfilling 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.
