Creative Challenge
"A robotic owl with gears for eyes perched on a crescent moon"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with starry night effect -->
<rect width="300" height="300" fill="rgb(12,12,48)" />
<filter id="stars">
<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" />
</filter>
<rect width="300" height="300" filter="url(#stars)" opacity="0.6" fill="white" />
<!-- Crescent Moon -->
<path d="M100,150 Q200,100 300,150 Q220,170 160,220 L140,180 Q80,220 0,150 L40,130 Q20,170 100,150"
fill="none" stroke="white" stroke-width="2" opacity="0.8">
<animate attributeName="opacity" from="0.8" to="1" dur="2s" repeatCount="indefinite" />
</path>
<path d="M100,150 Q200,100 300,150 Q220,170 160,220 L140,180 Q80,220 0,150 L40,130 Q20,170 100,150"
fill="none" stroke="rgb(240,220,200)" stroke-width="1" opacity="0.5" />
<linearGradient id="moonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.8" />
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
</linearGradient>
<circle cx="200" cy="150" r="50" fill="url(#moonGlow)" opacity="0.3" />
<!-- Robotic Owl Body -->
<circle cx="150" cy="180" r="60" fill="rgb(80,80,120)" stroke="rgb(200,200,240)" stroke-width="4">
<radialGradient id="metal" gradientUnits="userSpaceOnUse" cx="150" cy="180" r="60">
<stop offset="0%" style="stop-color:rgb(200,200,240);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(80,80,120);stop-opacity:1" />
</radialGradient>
<animate attributeName="fill" from="rgb(80,80,120)" to="rgb(100,100,140)" dur="3s" repeatCount="indefinite" />
</circle>
<!-- Gears for Eyes -->
<g transform="translate(120,170)">
<!-- Left Eye Gear -->
<circle cx="0" cy="0" r="20" fill="none" stroke="rgb(200,200,240)" stroke-width="2" />
<path d="M0,0 -10,-5 -5,0 -10,5 0,10 5,5 10,5 5,0 10,-5 0,-10 -5,-5 -10,-5"
transform="rotate(45)" fill="rgb(80,80,120)" />
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite" />
</g>
<g transform="translate(180,170)">
<!-- Right Eye Gear -->
<circle cx="0" cy="0" r="20" fill="none" stroke="rgb(200,200,240)" stroke-width="2" />
<path d="M0,0 -10,-5 -5,0 -10,5 0,10 5,5 10,5 5,0 10,-5 0,-10 -5,-5 -10,-5"
transform="rotate(45)" fill="rgb(80,80,120)" />
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite" />
</g>
<!-- Owl Head Details -->
<path d="M150,180 L160,160 Q170,150 170,140 L170,130 Q170,120 160,110 L140,110 Q130,120 130,130 L130,140 Q130,150 140,150 L150,150 L160,150"
fill="rgb(80,80,120)" stroke="rgb(200,200,240)" stroke-width="2" />
<rect x="130" y="160" width="40" height="10" fill="rgb(200,200,240)" transform="rotate(45)" />
<rect x="130" y="160" width="40" height="10" fill="rgb(200,200,240)" transform="rotate(-45)" />
<!-- Wings -->
<path d="M100,180 Q120,190 140,180 160,170 140,160 120,150"
fill="rgb(80,80,120)" stroke="rgb(200,200,240)" stroke-width="2" opacity="0.8" />
<path d="M200,180 Q220,190 240,180 260,170 240,160 220,150"
fill="rgb(80,80,120)" stroke="rgb(200,200,240)" stroke-width="2" opacity="0.8" />
<filter id="bevel">
<feConvolveMatrix kernelX="1 1 1 1 1 1 1 1 1" kernelY="1 1 1 1 1 1 1 1 1"
kernelType="gaussian" stdDeviation="1" bias="0.5" />
</filter>
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-opacity="0.2" />
<!-- Talons -->
<path d="M140,250 C130,240 120,230 110,220 C100,210 100,200 120,190 C140,180 150,180 160,190 C170,200 180,210 190,220 C200,230 210,240 220,250"
fill="none" stroke="rgb(200,200,240)" stroke-width="2" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="wingGradient">
<stop offset="0%" stop-color="#1a1a33"/>
<stop offset="100%" stop-color="#2d2d55"/>
</radialGradient>
<pattern id="gearPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="3" fill="#ffd700"/>
<circle cx="5" cy="5" r="1" fill="#fff"/>
</pattern>
<linearGradient id="moonGradient">
<stop offset="0%" stop-color="#87ceeb"/>
<stop offset="100%" stop-color="#4682b4"/>
</linearGradient>
</defs>
<path d="M150 220 Q130 200 150 180 Q170 200 150 220" fill="#4a4a70"/>
<circle cx="150" cy="120" r="30" fill="#4a4a70">
<animate attributeName="r" from="30" to="32" dur="2s" repeatCount="indefinite" />
</circle>
<rect x="140" y="150" width="20" height="30" rx="5" fill="#666"/>
<rect x="140" y="150" width="20" height="30" rx="5" fill="#666"/>
<circle cx="135" cy="110" r="8" fill="url(#gearPattern)">
<circle cx="135" cy="110" r="4" fill="#fff"/>
</circle>
<circle cx="165" cy="110" r="8" fill="url(#gearPattern)">
<circle cx="165" cy="110" r="4" fill="#fff"/>
</circle>
<path d="M150 100 L130 120 L170 120" fill="#666"/>
<path d="M150 100 L130 120 L170 120" fill="#666"/>
<path d="M100 160 Q120 140 140 160" fill="url(#wingGradient)"/>
<path d="M200 160 Q180 140 160 160" fill="url(#wingGradient)"/>
<rect x="145" y="170" width="10" height="20" rx="3" fill="#666"/>
<rect x="145" y="170" width="10" height="20" rx="3" fill="#666"/>
<path d="M120 200 Q150 220 180 200" fill="#666"/>
<path d="M120 200 Q150 220 180 200" fill="#666"/>
<path d="M150 250 Q160 240 150 230 Q140 240 150 250" fill="#666"/>
<path d="M150 250 Q160 240 150 230 Q140 240 150 250" fill="#666"/>
<path d="M30 100 L270 100 Q280 100 270 110 L30 110" fill="url(#moonGradient)"/>
<circle cx="150" cy="100" r="5" fill="#fff"/>
<circle cx="150" cy="100" r="4" fill="#87ceeb"/>
<circle cx="150" cy="100" r="3" fill="#fff"/>
<circle cx="150" cy="100" r="2" fill="#87ceeb"/>
</svg>Judge's Analysis
Player 2's submission creatively combines the robotic and owl elements, with clear gear-like eyes and a stylized design that fits the prompt.
The technical execution is clean, and the composition effectively balances the robotic owl with the crescent moon concept.
Player 1's image is more abstract and less distinguishable as a robotic owl, lacking the clear depiction of gears and a crescent moon.
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
"Floating cat juggling stars in neon space"
"A city skyline made of fruit"
"Purple giraffe on roller skates juggling flaming torches"
"Rainbow umbrella floating above a sunflower field"
"Dancing cactus wearing sunglasses under a disco ball"
"Flying toaster-shaped clouds over a neon cityscape"
