Creative Challenge
"A giraffe on roller skates juggling flamingos"
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</radialGradient>
</defs>
<rect width="100%" height="100%" fill="#87CEEB"/>
<circle cx="150" cy="200" r="30" fill="url(#grad1)" />
<circle cx="100" cy="250" r="20" fill="url(#grad2)" />
<circle cx="200" cy="250" r="20" fill="url(#grad2)" />
<path d="M100 150 C100 150 150 100 150 100 S200 150 200 150" stroke="black" stroke-width="2" fill="none" />
<path d="M150 100 C150 100 120 120 120 120 S150 150 150 150" stroke="black" stroke-width="2" fill="none" />
<path d="M150 100 C150 100 180 120 180 120 S150 150 150 150" stroke="black" stroke-width="2" fill="none" />
<circle cx="120" cy="120" r="10" fill="red" />
<circle cx="180" cy="120" r="10" fill="red" />
<path d="M150 100 C150 100 170 170 170 170 S150 200 150 200" stroke="black" stroke-width="2" fill="none" />
<path d="M150 100 C150 100 130 170 130 170 S150 200 150 200" stroke="black" stroke-width="2" fill="none" />
<path d="M170 170 C170 170 200 180 200 180 S230 170 230 170" stroke="black" stroke-width="2" fill="none" />
<path d="M130 170 C130 170 100 180 100 180 S70 170 70 170" stroke="black" stroke-width="2" fill="none" />
<circle cx="100" cy="180" r="10" fill="orange" />
<circle cx="200" cy="180" r="10" fill="orange" />
<path d="M150 100 C150 100 170 120 170 120 S190 100 190 100" stroke="black" stroke-width="2" fill="none" />
<path d="M150 100 C150 100 130 120 130 120 S110 100 110 100" stroke="black" stroke-width="2" fill="none" />
<path d="M190 100 C190 100 200 120 200 120 S210 140 210 140" stroke="black" stroke-width="2" fill="none" />
<path d="M110 100 C110 100 100 120 100 120 S90 140 90 140" stroke="black" stroke-width="2" fill="none" />
<circle cx="150" cy="100" r="50" fill="url(#grad1)" />
<path d="M150 150 C150 150 170 180 170 180 S200 210 200 210" stroke="black" stroke-width="2" fill="none" />
<path d="M150 150 C150 150 130 180 130 180 S100 210 100 210" stroke="black" stroke-width="2" fill="none" />
<circle cx="170" cy="180" r="10" fill="blue" />
<circle cx="130" cy="180" r="10" fill="blue" />
<circle cx="150" cy="150" r="50" fill="yellow" />
<path d="M150 200 C150 200 170 220 170 220 S200 240 200 240" stroke="black" stroke-width="2" fill="none" />
<path d="M150 200 C150 200 130 220 130 220 S100 240 100 240" stroke="black" stroke-width="2" fill="none" />
<circle cx="170" cy="220" r="10" fill="red" />
<circle cx="130" cy="220" r="10" fill="red" />
<circle cx="150" cy="200" r="50" fill="green" />
<path d="M150 250 C150 250 170 270 170 270 S200 290 200 290" stroke="black" stroke-width="2" fill="none" />
<path d="M150 250 C150 250 130 270 130 270 S100 290 100 290" stroke="black" stroke-width="2" fill="none" />
<circle cx="170" cy="270" r="10" fill="purple" />
<circle cx="130" cy="270" r="10" fill="purple" />
<circle cx="150" cy="250" r="50" fill="pink" />
<path d="M150 300 C150 300 170 320 170 320 S200 340 200 340" stroke="black" stroke-width="2" fill="none" />
<path d="M150 300 C150 300 130 320 130 320 S100 340 100 340" stroke="black" stroke-width="2" fill="none" />
<circle cx="170" cy="320" r="10" fill="orange" />
<circle cx="130" cy="320" r="10" fill="orange" />
<circle cx="150" cy="300" r="50" fill="yellow" />
<circle cx="100" cy="150" r="20" fill="red" />
<circle cx="200" cy="150" r="20" fill="red" />
<circle cx="150" cy="150" r="20" fill="red" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#a8edea" />
<stop offset="100%" stop-color="#fed6e3" />
</linearGradient>
<linearGradient id="giraffeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FFD700" />
<stop offset="100%" stop-color="#FFA500" />
</linearGradient>
<radialGradient id="flamingoGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFB6C1" />
<stop offset="100%" stop-color="#FF69B4" />
</radialGradient>
<radialGradient id="rollerSkateGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#C0C0C0" />
<stop offset="100%" stop-color="#808080" />
</radialGradient>
<pattern id="giraffeSpots" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="2" fill="#8B4513" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#bgGradient)" />
<!-- Giraffe on Roller Skates -->
<g id="giraffe" transform="translate(150,220) scale(0.8)">
<!-- Long Neck -->
<rect x="-5" y="-150" width="10" height="150" rx="5" fill="url(#giraffeGradient)" />
<!-- Neck Spots -->
<circle cx="-2" cy="-130" r="1.5" fill="#8B4513"/>
<circle cx="3" cy="-110" r="1.5" fill="#8B4513"/>
<circle cx="-3" cy="-90" r="1.5" fill="#8B4513"/>
<circle cx="1" cy="-70" r="1.5" fill="#8B4513"/>
<circle cx="-1" cy="-50" r="1.5" fill="#8B4513"/>
<!-- Head -->
<ellipse cx="0" cy="-170" rx="15" ry="10" fill="url(#giraffeGradient)" />
<!-- Horns -->
<path d="M -5,-180 L -3,-190 L -1,-180 Z" fill="#8B4513"/>
<path d="M 5,-180 L 3,-190 L 1,-180 Z" fill="#8B4513"/>
<!-- Eyes -->
<circle cx="-4" cy="-170" r="1.5" fill="#000"/>
<circle cx="4" cy="-170" r="1.5" fill="#000"/>
<!-- Torso -->
<rect x="-10" y="0" width="20" height="20" rx="5" ry="5" fill="url(#giraffeGradient)" />
<!-- Torso Spots -->
<circle cx="-5" cy="5" r="1.5" fill="#8B4513"/>
<circle cx="0" cy="10" r="1.5" fill="#8B4513"/>
<circle cx="5" cy="5" r="1.5" fill="#8B4513"/>
<!-- Roller Skate Left -->
<g transform="translate(-7,20)">
<rect x="-4" y="0" width="8" height="4" rx="2" fill="#444"/>
<circle cx="-3" cy="8" r="3" fill="url(#rollerSkateGradient)"/>
<circle cx="3" cy="8" r="3" fill="url(#rollerSkateGradient)"/>
</g>
<!-- Roller Skate Right -->
<g transform="translate(7,20)">
<rect x="-4" y="0" width="8" height="4" rx="2" fill="#444"/>
<circle cx="-3" cy="8" r="3" fill="url(#rollerSkateGradient)"/>
<circle cx="3" cy="8" r="3" fill="url(#rollerSkateGradient)"/>
</g>
</g>
<!-- Juggled Flamingos -->
<g id="flamingo1" transform="translate(130,30) rotate(-10)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#flamingoGradient)" />
<path d="M 0 -4 Q 3 -8, 0 -12" stroke="url(#flamingoGradient)" fill="none" stroke-width="1.5" stroke-linecap="round" />
<circle cx="0" cy="-12" r="2" fill="url(#flamingoGradient)"/>
<line x1="6" y1="0" x2="6" y2="6" stroke="#FF69B4" stroke-width="1.5"/>
</g>
<g id="flamingo2" transform="translate(150,10) rotate(5)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#flamingoGradient)" />
<path d="M 0 -4 Q 3 -8, 0 -12" stroke="url(#flamingoGradient)" fill="none" stroke-width="1.5" stroke-linecap="round" />
<circle cx="0" cy="-12" r="2" fill="url(#flamingoGradient)"/>
<line x1="6" y1="0" x2="6" y2="6" stroke="#FF69B4" stroke-width="1.5"/>
</g>
<g id="flamingo3" transform="translate(170,30) rotate(-15)">
<ellipse cx="0" cy="0" rx="8" ry="4" fill="url(#flamingoGradient)" />
<path d="M 0 -4 Q 3 -8, 0 -12" stroke="url(#flamingoGradient)" fill="none" stroke-width="1.5" stroke-linecap="round" />
<circle cx="0" cy="-12" r="2" fill="url(#flamingoGradient)"/>
<line x1="6" y1="0" x2="6" y2="6" stroke="#FF69B4" stroke-width="1.5"/>
</g>
</svg>Judge's Analysis
Player 2's image clearly depicts the concept with a giraffe on roller skates juggling flamingos, adhering closely to the prompt.
The minimalistic design is both creative and visually appealing, with clear imagery.
Player 1's submission lacks clarity and does not effectively represent the prompt, resulting in a less coherent and engaging image.
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
"Frog rock band on lily pads, moonlit swamp stage"
"Surreal garden with floating paper cranes and glowing mushrooms"
"Giant snail gliding across a sprawling cityscape, carrying a glass terrarium on its shell"
"Mona Lisa with a VR headset, immersed in a digital landscape"
"Glowing jellyfish cityscape under a starlit ocean"
"A giraffe wearing galactic pajamas, stargazing through a telescope"
