Creative Challenge
"A giraffe wearing a monocle, holding a tea cup with its tail"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="giraffeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF8C00;stop-opacity:1" />
</linearGradient>
<linearGradient id="teaCupGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#8B4513;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A0522D;stop-opacity:1" />
</linearGradient>
<pattern id="teaPattern" x="0" y="0" width="0.1" height="0.1" patternUnits="objectBoundingBox">
<circle cx="0.05" cy="0.05" r="0.03" fill="#FFFFFF"/>
<circle cx="0.1" cy="0.1" r="0.03" fill="#FFFFFF"/>
</pattern>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2"/>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#giraffeGradient)"/>
<g transform="translate(100,50)">
<ellipse cx="50" cy="50" rx="40" ry="60" fill="#FFD700" filter="url(#shadow)"/>
<ellipse cx="50" cy="110" rx="30" ry="50" fill="#FFD700" filter="url(#shadow)"/>
<ellipse cx="50" cy="170" rx="20" ry="40" fill="#FFD700" filter="url(#shadow)"/>
<circle cx="70" cy="30" r="15" fill="#FFFFFF" filter="url(#shadow)"/>
<circle cx="71" cy="29" r="5" fill="#000000"/>
<circle cx="75" cy="25" r="2" fill="#FFFFFF"/>
<path d="M30,100 Q60,80 90,100" stroke="#8B4513" stroke-width="5" fill="none" filter="url(#shadow)"/>
<ellipse cx="90" cy="100" rx="10" ry="15" fill="url(#teaCupGradient)" filter="url(#shadow)"/>
<rect x="80" y="90" width="10" height="20" fill="url(#teaCupGradient)" filter="url(#shadow)"/>
<rect x="85" y="95" width="10" height="10" fill="url(#teaPattern)" filter="url(#shadow)"/>
</g>
<text x="150" y="250" font-family="Arial" font-size="24" fill="#000000" text-anchor="middle">Aristocratic Giraffe</text>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="100%" height="100%" fill="lightyellow" />
<!-- Giraffe Body -->
<path d="M120 250 Q140 200 130 150 Q120 100 130 50 Q135 25 150 50 Q160 70 155 100 Q150 150 160 200 Q180 250 120 250" fill="orange" stroke="#964B00" stroke-width="2"/>
<!-- Giraffe Spots -->
<circle cx="135" cy="140" r="6" fill="#964B00"/>
<circle cx="150" cy="100" r="6" fill="#964B00"/>
<circle cx="130" cy="180" r="6" fill="#964B00"/>
<circle cx="140" cy="220" r="6" fill="#964B00"/>
<!-- Giraffe Head -->
<path d="M130 50 L132 40 Q135 30 140 40 L142 50 L130 50" fill="orange" stroke="#964B00" stroke-width="2"/>
<!-- Giraffe Ears -->
<path d="M128 35 Q130 25 132 35" fill="orange" stroke="#964B00" stroke-width="1"/>
<path d="M142 35 Q144 25 146 35" fill="orange" stroke="#964B00" stroke-width="1"/>
<!-- Giraffe Monocle -->
<circle cx="135" cy="60" r="10" fill="none" stroke="black" stroke-width="3"/>
<line x1="135" y1="70" x2="135" y2="90" stroke="black" stroke-width="1"/>
<!-- Giraffe Tail Holding Tea Cup -->
<path d="M160 250 Q165 230 200 210" stroke="orange" stroke-width="3" fill="none"/>
<path d="M195 210 Q200 215 205 210 L205 225 Q195 225 195 210" fill="white" stroke="black" stroke-width="2"/>
<!-- Tea in Cup -->
<path d="M197 210 A10 5 0 0 1 203 210" fill="lightblue"/>
<!-- Tea Steam -->
<path d="M200 210 Q198 205 195 200" stroke="lightgrey" stroke-width="1" fill="none"/>
<path d="M203 210 Q201 205 198 200" stroke="lightgrey" stroke-width="1" fill="none"/>
</svg>Judge's Analysis
Player 2's image better adheres to the prompt by clearly depicting a giraffe with a monocle and a tea cup held with its tail.
The design is simple yet effectively communicates the whimsical idea.
In contrast, Player 1's image lacks clear representation and detail, making it less recognizable and appealing.
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
"Squirrel DJ spinning acorn records"
"A floating island with clockwork trees under a starry night sky"
"An umbrella tree growing under a waterfall"
"A glowing owl in a neon cityscape at night"
"Skeletal octopus plays a luminous xylophone under a bioluminescent sea"
"A giant cat knitting with skyscraper-sized yarn in a cityscape"
