Creative Challenge
"A giraffe wearing a space helmet floating in zero gravity."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Space background gradient -->
<radialGradient id="spaceGrad" cx="0.3" cy="0.2">
<stop offset="0%" stop-color="#1a1a3e"/>
<stop offset="50%" stop-color="#2d1b69"/>
<stop offset="100%" stop-color="#0d0d1f"/>
</radialGradient>
<!-- Nebula gradient -->
<radialGradient id="nebula" cx="0.7" cy="0.8">
<stop offset="0%" stop-color="#ff6b9d" stop-opacity="0.3"/>
<stop offset="50%" stop-color="#a8e6cf" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#4ecdc4" stop-opacity="0.1"/>
</radialGradient>
<!-- Giraffe body gradient -->
<linearGradient id="giraffeBody" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffd54f"/>
<stop offset="100%" stop-color="#ffb74d"/>
</linearGradient>
<!-- Helmet gradient -->
<radialGradient id="helmet" cx="0.3" cy="0.3">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.1"/>
<stop offset="70%" stop-color="#b3e5fc" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0277bd" stop-opacity="0.5"/>
</radialGradient>
<!-- Giraffe spot pattern -->
<pattern id="spots" x="0" y="0" width="15" height="15" patternUnits="userSpaceOnUse">
<circle cx="7" cy="7" r="4" fill="#8d6e63"/>
<circle cx="2" cy="2" r="2" fill="#6d4c41"/>
</pattern>
<!-- Glow filter -->
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Space background -->
<rect width="300" height="300" fill="url(#spaceGrad)"/>
<!-- Nebula effect -->
<ellipse cx="210" cy="240" rx="80" ry="60" fill="url(#nebula)"/>
<!-- Stars -->
<circle cx="50" cy="30" r="1" fill="white" opacity="0.8"/>
<circle cx="120" cy="50" r="1.5" fill="white" opacity="0.9"/>
<circle cx="250" cy="40" r="1" fill="white" opacity="0.7"/>
<circle cx="280" cy="80" r="0.8" fill="white" opacity="0.6"/>
<circle cx="30" cy="100" r="1.2" fill="white" opacity="0.8"/>
<circle cx="200" cy="20" r="0.9" fill="white" opacity="0.7"/>
<circle cx="80" cy="280" r="1.1" fill="white" opacity="0.6"/>
<circle cx="270" cy="200" r="1.3" fill="white" opacity="0.9"/>
<!-- Distant planet -->
<circle cx="240" cy="60" r="18" fill="#4fc3f7" opacity="0.6"/>
<ellipse cx="235" cy="55" rx="8" ry="12" fill="#29b6f6" opacity="0.4"/>
<!-- Floating space debris -->
<rect x="80" y="120" width="8" height="3" rx="1" fill="#90a4ae" transform="rotate(45 84 122)"/>
<circle cx="220" cy="150" r="2" fill="#78909c"/>
<!-- Giraffe body (rotated to show floating) -->
<g transform="translate(150,180) rotate(-25)">
<!-- Hind legs -->
<ellipse cx="-20" cy="25" rx="6" ry="20" fill="url(#giraffeBody)"/>
<ellipse cx="-10" cy="25" rx="6" ry="20" fill="url(#giraffeBody)"/>
<!-- Body -->
<ellipse cx="0" cy="0" rx="25" ry="35" fill="url(#giraffeBody)"/>
<!-- Front legs -->
<ellipse cx="15" cy="15" rx="6" ry="25" fill="url(#giraffeBody)"/>
<ellipse cx="25" cy="15" rx="6" ry="25" fill="url(#giraffeBody)"/>
<!-- Neck -->
<ellipse cx="20" cy="-45" rx="8" ry="35" fill="url(#giraffeBody)"/>
<!-- Head -->
<ellipse cx="25" cy="-75" rx="12" ry="18" fill="url(#giraffeBody)"/>
<!-- Spots overlay -->
<ellipse cx="0" cy="0" rx="25" ry="35" fill="url(#spots)" opacity="0.6"/>
<ellipse cx="20" cy="-45" rx="8" ry="35" fill="url(#spots)" opacity="0.6"/>
<ellipse cx="25" cy="-75" rx="12" ry="18" fill="url(#spots)" opacity="0.6"/>
<!-- Eyes -->
<circle cx="20" cy="-80" r="2" fill="black"/>
<circle cx="30" cy="-80" r="2" fill="black"/>
<circle cx="20.5" cy="-80.5" r="0.8" fill="white"/>
<circle cx="30.5" cy="-80.5" r="0.8" fill="white"/>
<!-- Horns -->
<circle cx="18" cy="-88" r="2" fill="#8d6e63"/>
<circle cx="32" cy="-88" r="2" fill="#8d6e63"/>
</g>
<!-- Space helmet -->
<g transform="translate(150,180) rotate(-25)">
<!-- Helmet dome -->
<circle cx="25" cy="-75" r="28" fill="url(#helmet)" stroke="#0277bd" stroke-width="2"/>
<!-- Helmet base/collar -->
<ellipse cx="25" cy="-48" rx="32" ry="8" fill="#37474f"/>
<ellipse cx="25" cy="-52" rx="30" ry="6" fill="#546e7a"/>
<!-- Visor reflection -->
<ellipse cx="15" cy="-85" rx="8" ry="12" fill="white" opacity="0.3"/>
<!-- Control panel on helmet -->
<rect x="5" y="-50" width="12" height="6" rx="2" fill="#1565c0"/>
<circle cx="8" cy="-47" r="1" fill="#4fc3f7"/>
<circle cx="14" cy="-47" r="1" fill="#ff5722"/>
<!-- Antenna -->
<line x1="45" y1="-85" x2="55" y2="-95" stroke="#90a4ae" stroke-width="2"/>
<circle cx="55" cy="-95" r="2" fill="#f44336" filter="url(#glow)"/>
</g>
<!-- Floating bubbles/oxygen -->
<circle cx="100" cy="100" r="3" fill="#e3f2fd" opacity="0.6"/>
<circle cx="220" cy="120" r="2" fill="#e3f2fd" opacity="0.5"/>
<circle cx="110" cy="90" r="1.5" fill="#e3f2fd" opacity="0.7"/>
<!-- Earth in background -->
<circle cx="50" cy="200" r="25" fill="#42a5f5"/>
<path d="M 35 190 Q 45 195 50 200 Q 55 205 65 200 Q 60 195 55 190 Q 50 185 40 190 Z" fill="#4caf50"/>
<path d="M 25 210 Q 35 215 45 210 Q 40 205 30 210 Z" fill="#4caf50"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Space Background -->
<radialGradient id="bgGrad" cx="150" cy="150" r="150" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#120043"/>
<stop offset="40%" stop-color="#240066"/>
<stop offset="70%" stop-color="#000428"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<!-- Swirling Nebula -->
<linearGradient id="swirlGrad" x1="0" y1="0" x2="300" y2="300" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#7B2FF7"/>
<stop offset="50%" stop-color="#F107A3"/>
<stop offset="100%" stop-color="#00D4FF"/>
</linearGradient>
<!-- Giraffe Spots -->
<pattern id="spotPattern" patternUnits="userSpaceOnUse" width="30" height="30">
<rect width="30" height="30" fill="#F6E4B3"/>
<path d="M2 5h8v6H2zM15 0h11v8H15zM0 18h12v10H0zM18 18h10v12H18z" fill="#8E5A25"/>
</pattern>
<!-- Helmet Glass -->
<radialGradient id="helmetGrad" cx="0.3" cy="0.3" r="0.8">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8"/>
<stop offset="45%" stop-color="#9BE2FF" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#3ECBF4" stop-opacity="0.05"/>
</radialGradient>
<!-- Star Glow -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.3" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Cosmic Background -->
<rect width="300" height="300" fill="url(#bgGrad)"/>
<!-- Star Field -->
<g fill="#FFFFFF" filter="url(#starGlow)">
<circle cx="25" cy="40" r="1.2"/>
<circle cx="60" cy="90" r="0.9"/>
<circle cx="120" cy="20" r="1.4"/>
<circle cx="200" cy="30" r="1.0"/>
<circle cx="250" cy="75" r="1.3"/>
<circle cx="280" cy="50" r="0.8"/>
<circle cx="40" cy="200" r="1.0"/>
<circle cx="90" cy="250" r="1.4"/>
<circle cx="150" cy="270" r="1.1"/>
<circle cx="230" cy="240" r="1.6"/>
<circle cx="275" cy="180" r="1.0"/>
<circle cx="200" cy="150" r="0.7"/>
<circle cx="140" cy="110" r="1.2"/>
<circle cx="70" cy="140" r="1.0"/>
</g>
<!-- Nebula Swirls -->
<g opacity="0.45">
<path d="M30 200Q150 60 270 200" fill="none" stroke="url(#swirlGrad)" stroke-width="2" stroke-dasharray="5 6"/>
<path d="M30 220Q150 80 270 220" fill="none" stroke="url(#swirlGrad)" stroke-width="2" stroke-dasharray="5 6"/>
<path d="M30 240Q150 100 270 240" fill="none" stroke="url(#swirlGrad)" stroke-width="2" stroke-dasharray="5 6"/>
</g>
<!-- Floating Giraffe -->
<g>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="-6 150 150"
to="6 150 150"
dur="8s"
repeatCount="indefinite"/>
<!-- Neck & Body -->
<path d="M130 260C120 210 120 170 135 140C145 110 155 95 170 85L190 85C205 95 215 110 225 140C240 170 240 210 230 260Z"
fill="url(#spotPattern)" stroke="#8E5A25" stroke-width="1"/>
<!-- Head -->
<path d="M170 85C160 80 155 70 160 60L200 60C205 70 200 80 190 85Z"
fill="url(#spotPattern)" stroke="#8E5A25" stroke-width="1"/>
<!-- Ears -->
<path d="M155 68C148 72 146 80 150 88C158 86 162 76 155 68Z"
fill="#F6E4B3" stroke="#8E5A25" stroke-width="1"/>
<path d="M205 68C212 72 214 80 210 88C202 86 198 76 205 68Z"
fill="#F6E4B3" stroke="#8E5A25" stroke-width="1"/>
<!-- Ossicones -->
<rect x="170" y="50" width="5" height="12" rx="2" fill="#8E5A25"/>
<rect x="190" y="50" width="5" height="12" rx="2" fill="#8E5A25"/>
<circle cx="172.5" cy="50" r="3" fill="#8E5A25"/>
<circle cx="192.5" cy="50" r="3" fill="#8E5A25"/>
<!-- Space Helmet -->
<g>
<circle cx="180" cy="70" r="55" fill="url(#helmetGrad)" opacity="0.65"/>
<circle cx="180" cy="70" r="57" fill="none" stroke="#9BE2FF" stroke-width="3" stroke-opacity="0.95"/>
<path d="M140 60Q165 40 200 45" stroke="#FFFFFF" stroke-opacity="0.7"
stroke-width="2" stroke-linecap="round"/>
</g>
</g>
</svg>Judge's Analysis
Player 1's image demonstrates greater creativity and adherence to the prompt with a more recognizable giraffe form and its engaging depiction of floating in space.
The soft, colorful background and the inclusion of planets enhance the visual appeal and contextualize the scene.
Player 2's submission, while stylized, lacks the same clarity and dynamic composition, making Player 1's entry more effective overall.
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.