Creative Challenge
"Moody raven balancing on a teacup"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="teacupGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#e8d7f1"/>
<stop offset="100%" style="stop-color:#c9a8e0"/>
</linearGradient>
<pattern id="featherPattern" width="6" height="6" patternUnits="userSpaceOnUse">
<path d="M0 0L6 6M6 0L0 6" stroke="#1a1a1a" stroke-width="0.5" opacity="0.3"/>
</pattern>
</defs>
<!-- Steam -->
<path d="M140 120c0 0 10-20 0-30s10-20 0-30" fill="none" stroke="#e6e6e6" stroke-width="3" opacity="0.6">
<animate attributeName="d" dur="3s" repeatCount="indefinite"
values="M140 120c0 0 10-20 0-30s10-20 0-30;
M140 120c0 0 -10-20 0-30s-10-20 0-30;
M140 120c0 0 10-20 0-30s10-20 0-30"/>
</path>
<!-- Teacup -->
<ellipse cx="150" cy="200" rx="60" ry="20" fill="url(#teacupGrad)"/>
<path d="M90 200c0 0 0 30 60 30s60-30 60-30" fill="url(#teacupGrad)"/>
<path d="M90 200c0-11.046 26.863-20 60-20s60 8.954 60 20" fill="none" stroke="#8b62a8" stroke-width="2"/>
<!-- Handle -->
<path d="M210 200c10 0 20 10 20 20s-10 20-20 20" fill="none" stroke="url(#teacupGrad)" stroke-width="8"/>
<!-- Raven -->
<g transform="translate(150,150) rotate(-5)">
<!-- Body -->
<path d="M-20 0c-20-10-40 20-20 40s60-10 40-30s-20-10-20-10" fill="url(#featherPattern)"/>
<path d="M-20 0c-20-10-40 20-20 40s60-10 40-30s-20-10-20-10" fill="#1a1a1a" fill-opacity="0.9"/>
<!-- Head -->
<circle cx="0" cy="0" r="15" fill="#000"/>
<path d="M0 -5l20 -10" stroke="#000" stroke-width="8" stroke-linecap="round"/>
<!-- Eye -->
<circle cx="5" cy="-2" r="3" fill="#f0f0f0"/>
<circle cx="5" cy="-2" r="1.5" fill="#000">
<animate attributeName="r" values="1.5;1;1.5" dur="3s" repeatCount="indefinite"/>
</circle>
<!-- Feet -->
<path d="M-10 30l-5 10m10 -10l-5 10" stroke="#333" stroke-width="2"/>
</g>
<!-- Moon -->
<circle cx="250" cy="50" r="30" fill="#f0f0f0" opacity="0.8"/>
<circle cx="260" cy="40" r="25" fill="#1a1a1a" opacity="0.8"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background Gradient -->
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#533474" />
<stop offset="100%" stop-color="#161616" />
</linearGradient>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#bgGradient)" rx="10" />
<!-- Teacup -->
<ellipse cx="150" cy="220" rx="50" ry="20" fill="#fff" stroke="#000" stroke-width="2" />
<path d="M150 190 C150 175 130 165 110 165C90 165 70 175 70 190C70 205 90 215 110 215C130 215 150 205 150 190" fill="#fff" stroke="#000" stroke-width="2" />
<path d="M70 190 C70 185 65 180 60 180C55 180 50 185 50 190C50 195 55 200 60 200C65 200 70 195 70 190" fill="#fff" stroke="#000" stroke-width="2" />
<path d="M150 220 C150 200 130 180 110 180C90 180 70 200 70 220C70 240 90 260 110 260C130 260 150 240 150 220" fill="#fff" stroke="#000" stroke-width="2" />
<line x1="70" y1="220" x2="150" y2="220" stroke="#000" stroke-width="2" />
<!-- Raven -->
<g transform="translate(145 150)">
<g transform="rotate(10 0 0)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="20" ry="30" fill="#000" />
<!-- Head -->
<ellipse cx="0" cy="-30" rx="15" ry="20" fill="#000" />
<!-- Beak -->
<triangle points="-5 -50 5 -50 0 -60" fill="#ffcc00" stroke="#000" stroke-width="2" />
<!-- Eye -->
<circle cx="5" cy="-40" r="5" fill="#fff" stroke="#000" stroke-width="2" />
<!-- Wing -->
<path d="M-20 -10 C-25 -20 -20 -30 -15 -30C-10 -30 -5 -20 0 -10C5 -20 10 -30 15 -30C20 -30 25 -20 20 -10" fill="#000" stroke="#000" stroke-width="2" />
<path d="M-15 0 C-20 10 -25 20 -25 30C-25 40 -20 50 -15 50C-10 50 -5 40 0 30C5 20 10 10 15 0" fill="#000" stroke="#000" stroke-width="2" />
<!-- Leg -->
<line x1="0" y1="30" x2="0" y2="40" stroke="#000" stroke-width="2" />
<circle cx="0" cy="40" r="2" fill="#000" />
</g>
</g>
<g transform="translate(170 60)">
<!-- Moon -->
<circle cx="50" cy="50" r="40" fill="#fff" stroke="#000" stroke-width="2" />
</g>
<!-- Steam -->
<path d="M130 100 C120 90 110 80 100 80C90 80 80 90 80 100C80 110 90 120 100 120C110 120 120 110 130 100" fill="#fff" stroke="#000" stroke-width="2" opacity="0.5" />
<path d="M120 120 C110 110 100 100 90 100C80 100 70 110 70 120C70 130 80 140 90 140C100 140 110 130 120 120" fill="#fff" stroke="#000" stroke-width="2" opacity="0.5" />
<!-- Tea -->
<ellipse cx="150" cy="230" rx="40" ry="10" fill="#964B00" stroke="#000" stroke-width="2" />
</svg>Judge's Analysis
Player 2’s image effectively captures the 'moody' aspect with a dark, gradient background that enhances the overall atmosphere.
The raven is more discernibly balanced on the teacup, adhering well to the prompt.
In contrast, Player 1’s composition feels less cohesive and less visually striking, with a more simplistic design that lacks depth.
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 clockwork butterfly unveiling a hidden city on its left wing"
"Dancing cactus under a disco ball"
"Cat in a spacesuit playing chess with a ghost"
"A giraffe juggling planets under the ocean"
"A feathered dinosaur with a top hat, sipping tea in a Victorian-style parlor"
"Cat in a comet sipping tea through a straw"
