Creative Challenge
"A giraffe wearing a tuxedo, sipping tea under a chandelier"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="gold"/>
<stop offset="100%" stop-color="silver"/>
</linearGradient>
<linearGradient id="g2" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="purple"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<radialGradient id="g3" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#g1)"/>
<g transform="translate(100, 100)">
<!-- Giraffe -->
<circle cx="0" cy="-70" r="20" fill="yellow"/>
<ellipse cx="0" cy="0" rx="30" ry="50" fill="yellow"/>
<ellipse cx="0" cy="100" rx="10" ry="20" fill="brown"/>
<path d="M-15,10 Q-5,20 5,20 Q15,10 15,0 Q10,-10 0,-10 Q-10,-10 -15,0 Z" fill="black"/>
<ellipse cx="0" cy="30" rx="15" ry="10" fill="black"/>
<path d="M-20,50 Q-10,60 0,60 Q10,60 20,50" stroke="black" stroke-width="2" fill="none"/>
<path d="M-20,80 Q-10,90 0,90 Q10,90 20,80" stroke="black" stroke-width="2" fill="none"/>
<path d="M-25,120 Q-15,130 -5,130 Q5,130 15,120" stroke="black" stroke-width="2" fill="none"/>
<path d="M-15,150 Q-5,160 5,160 Q15,150 15,140 Q10,130 0,130 Q-10,130 -15,140 Z" fill="black"/>
<path d="M-10,180 Q0,190 10,190 Q20,180 20,170 Q15,160 10,160 Q5,160 0,170 Z" fill="black"/>
<path d="M-10,220 Q0,230 10,230 Q20,220 20,210 Q15,200 10,200 Q5,200 0,210 Z" fill="black"/>
<rect x="-25" y="250" width="50" height="50" fill="black"/>
<rect x="-10" y="270" width="20" height="30" fill="white"/>
<rect x="-25" y="280" width="50" height="20" fill="black"/>
<path d="M-20,300 Q-10,310 0,310 Q10,310 20,300" stroke="black" stroke-width="2" fill="none"/>
<path d="M-20,330 Q-10,340 0,340 Q10,340 20,330" stroke="black" stroke-width="2" fill="none"/>
<path d="M-20,360 Q-10,370 0,370 Q10,370 20,360" stroke="black" stroke-width="2" fill="none"/>
<path d="M-10,390 Q0,400 10,400 Q20,390 20,380 Q15,370 10,370 Q5,370 0,380 Z" fill="black"/>
<path d="M-20,420 Q-10,430 0,430 Q10,430 20,420" stroke="black" stroke-width="2" fill="none"/>
<path d="M-10,450 Q0,460 10,460 Q20,450 20,440 Q15,430 10,430 Q5,430 0,440 Z" fill="black"/>
<circle cx="-20" cy="480" r="10" fill="black"/>
<circle cx="20" cy="480" r="10" fill="black"/>
<path d="M-20,500 Q-10,510 0,510 Q10,510 20,500" stroke="black" stroke-width="2" fill="none"/>
<path d="M-10,530 Q0,540 10,540 Q20,530 20,520 Q15,510 10,510 Q5,510 0,520 Z" fill="black"/>
<path d="M-20,560 Q-10,570 0,570 Q10,570 20,560" stroke="black" stroke-width="2" fill="none"/>
<path d="M-10,590 Q0,600 10,600 Q20,590 20,580 Q15,570 10,570 Q5,570 0,580 Z" fill="black"/>
</g>
<g transform="translate(150, 150)">
<!-- Tuxedo -->
<rect x="-30" y="0" width="60" height="80" fill="black"/>
<rect x="-20" y="80" width="40" height="80" fill="black"/>
<rect x="-30" y="160" width="60" height="40" fill="black"/>
<rect x="-30" y="200" width="60" height="20" fill="black"/>
</g>
<g transform="translate(150, 150)">
<!-- Tea cup -->
<circle cx="0" cy="0" r="20" fill="white"/>
<circle cx="0" cy="20" r="15" fill="white"/>
<circle cx="0" cy="35" r="10" fill="white"/>
<circle cx="0" cy="50" r="5" fill="white"/>
<path d="M-15,40 Q0,50 15,40" stroke="black" stroke-width="2" fill="none"/>
</g>
<g transform="translate(150, 150)">
<!-- Chandelier -->
<circle cx="0" cy="-100" r="15" fill="gold"/>
<path d="M-100,-100 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M-75,-125 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M-50,-150 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M-25,-175 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M0,-200 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M25,-175 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M50,-150 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M75,-125 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
<path d="M100,-100 L0,-100" stroke="gold" stroke-width="2" fill="none"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Gradient for giraffe -->
<defs>
<radialGradient id="giraffeGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(250,224,183);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(218,165,32);stop-opacity:1" />
</radialGradient>
<!-- Gradient for chandelier -->
<linearGradient id="chandelierGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,215,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,223,186);stop-opacity:1" />
</linearGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="lavender"/>
<!-- Giraffe's head -->
<ellipse cx="150" cy="100" rx="40" ry="60" fill="url(#giraffeGradient)" stroke="darkgoldenrod" stroke-width="2"/>
<!-- Giraffe's ears -->
<ellipse cx="120" cy="60" rx="10" ry="20" fill="url(#giraffeGradient)" stroke="darkgoldenrod" stroke-width="2"/>
<ellipse cx="180" cy="60" rx="10" ry="20" fill="url(#giraffeGradient)" stroke="darkgoldenrod" stroke-width="2"/>
<!-- Eyes -->
<circle cx="140" cy="95" r="5" fill="black"/>
<circle cx="160" cy="95" r="5" fill="black"/>
<!-- Nostrils -->
<circle cx="140" cy="120" r="3" fill="black"/>
<circle cx="160" cy="120" r="3" fill="black"/>
<!-- Giraffe's neck -->
<rect x="130" y="130" width="40" height="100" fill="url(#giraffeGradient)" stroke="darkgoldenrod" stroke-width="2"/>
<!-- Tuxedo -->
<polygon points="120,230 180,230 200,300 100,300" fill="black"/>
<rect x="140" y="230" width="20" height="70" fill="white"/>
<!-- Bow Tie -->
<polygon points="140,220 160,220 155,230 145,230" fill="red"/>
<!-- Tea cup -->
<ellipse cx="240" cy="220" rx="15" ry="5" fill="white" stroke="gray" stroke-width="1"/>
<ellipse cx="240" cy="228" rx="15" ry="5" fill="lightgray"/>
<line x1="240" y1="220" x2="240" y2="228" stroke="gray" stroke-width="1"/>
<!-- Tea cup handle -->
<path d="M250,220 Q255,225 250,230" fill="none" stroke="gray" stroke-width="1"/>
<!-- Chandelier -->
<line x1="150" y1="0" x2="150" y2="30" stroke="silver" stroke-width="2"/>
<ellipse cx="150" cy="40" rx="50" ry="20" fill="url(#chandelierGradient)" stroke="goldenrod" stroke-width="2"/>
<ellipse cx="130" cy="50" rx="8" ry="4" fill="gold" stroke="goldenrod" stroke-width="1"/>
<ellipse cx="170" cy="50" rx="8" ry="4" fill="gold" stroke="goldenrod" stroke-width="1"/>
</svg>Judge's Analysis
Player 2's image more clearly represents a giraffe wearing a tuxedo and sipping tea under a chandelier.
The composition is clearer, with distinct elements that adhere closely to the prompt.
Player 1's image is more abstract and less recognizable, making it harder to interpret the intended scene.
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 moose riding a unicycle on a rainbow bridge"
"A unicorn balancing on a tightrope above a neon cityscape"
"Neon-jellyfish orbiting a crescent moon"
"A cyberpunk octopus playing a violin"
"Floating clock balloons above a surreal desert landscape"
"A penguin juggling snowballs under a disco ball"
