Creative Challenge
"Two giraffes tangled in an elegant ballet under a crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="15%" r="85%">
<stop offset="0%" style="stop-color:#4E35A0;" />
<stop offset="35%" style="stop-color:#2A1A5C;" />
<stop offset="100%" style="stop-color:#0B021A;" />
</radialGradient>
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFFEE0;" />
<stop offset="100%" style="stop-color:#F0E0A0;" />
</linearGradient>
<linearGradient id="giraffeColor1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" style="stop-color:#FAD02E;" />
<stop offset="100%" style="stop-color:#F2994A;" />
</linearGradient>
<linearGradient id="giraffeColor2" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" style="stop-color:#FBC53E;" /> <!-- Slightly different shade for G2 -->
<stop offset="100%" style="stop-color:#EE893A;" />
</linearGradient>
<filter id="moonGlow">
<feGaussianBlur stdDeviation="2.5" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<pattern id="giraffeSpots" width="25" height="25" patternUnits="userSpaceOnUse">
<!-- Transparent background is implicit unless a rect is drawn -->
<path d="M5,5 Q8,2 12,5 T20,6 Q18,10 14,12 T6,11 Q8,8 5,5Z" fill="#8B5A2B" opacity="0.75"/>
<ellipse cx="18" cy="18" rx="4" ry="3" fill="#704214" opacity="0.7" transform="rotate(20 18 18)"/>
<path d="M2,15 Q5,13 8,16 T5,20 Q3,18 2,15Z" fill="#A0522D" opacity="0.65"/>
</pattern>
<symbol id="giraffeLegSymbol">
<path d="M0,0 C-2,25 -2,55 0,75 L2,75 C4,55 4,25 2,0 Z" />
</symbol>
<symbol id="giraffeHoofSymbol">
<path d="M-3.5,0 L3.5,0 L2.5,5 L-2.5,5 Z" fill="#4A3B31"/>
</symbol>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<circle cx="50" cy="60" r="1.5" fill="#FFFEE0" opacity="0.9"/><circle cx="20" cy="120" r="0.8" fill="#FFFEE0" opacity="0.6"/>
<circle cx="100" cy="30" r="1" fill="#FFFEE0" opacity="0.7"/><circle cx="80" cy="150" r="1.2" fill="#FFFEE0" opacity="0.8"/>
<circle cx="150" cy="50" r="0.7" fill="#FFFEE0" opacity="0.5"/><circle cx="130" cy="220" r="1.3" fill="#FFFEE0" opacity="0.9"/>
<circle cx="220" cy="20" r="1.2" fill="#FFFEE0" opacity="0.8"/><circle cx="250" cy="90" r="1.8" fill="#FFFEE0" opacity="1"/>
<circle cx="280" cy="140" r="0.9" fill="#FFFEE0" opacity="0.7"/><circle cx="200" cy="250" r="1.1" fill="#FFFEE0" opacity="0.75"/>
<path d="M170 20 L171.5 16 L173 20 L171.5 24Z" fill="#FFFEE0" opacity="0.8"/>
<path d="M40 180 L41.5 176 L43 180 L41.5 184Z" fill="#FFFEE0" opacity="0.7"/>
<!-- Moon -->
<g transform="translate(225 30) scale(1.1)">
<path d="M0,0 A30,30 0 0,1 0,60 A23,23 0 0,0 0,0 Z" fill="url(#moonGradient)" filter="url(#moonGlow)"/>
</g>
<!-- Giraffes Group -->
<g id="balletGiraffes" transform="translate(0 15)">
<!-- Giraffe 1 (Left/Background) -->
<g id="giraffe1" stroke="#603813" stroke-width="0.5">
<path id="g1BodyNeck" d="M70,255 C60,200 85,150 100,140 C120,110 150,70 170,90 C185,115 145,140 120,150 C110,190 90,235 70,255Z" fill="url(#giraffeColor1)"/>
<path d="M70,255 C60,200 85,150 100,140 C120,110 150,70 170,90 C185,115 145,140 120,150 C110,190 90,235 70,255Z" fill="url(#giraffeSpots)" stroke="none"/>
<g transform="translate(172,88) rotate(25)"> <!-- Head 1 -->
<ellipse cx="0" cy="0" rx="10" ry="14" fill="url(#giraffeColor1)"/>
<ellipse cx="0" cy="0" rx="10" ry="14" fill="url(#giraffeSpots)" stroke="none"/>
<path d="M-1.5,-11 L0,-16 L1.5,-11 Z" fill="#5C3317"/><path d="M2.5,-10 L4,-15 L5.5,-10 Z" fill="#5C3317"/>
<circle cx="-4.5" cy="0" r="1.8" fill="black"/><path d="M-9,2 Q-7,4 -9,6" stroke="#5C3317" stroke-width="0.7" fill="none"/>
</g>
<path d="M102,138 C122,100 150,65 168,85" stroke="#5C3317" stroke-width="4" fill="none" stroke-linecap="round"/> <!-- Mane 1 -->
<g transform="translate(75,185) rotate(5)"> <!-- Back Leg 1 -->
<use href="#giraffeLegSymbol" fill="url(#giraffeColor1)"/><use href="#giraffeLegSymbol" fill="url(#giraffeSpots)" stroke="none"/>
<use href="#giraffeHoofSymbol" transform="translate(1,75)"/>
</g>
<g transform="translate(110,170) rotate(-55)"> <!-- Front Leg 1 (arabesque) -->
<use href="#giraffeLegSymbol" fill="url(#giraffeColor1)"/><use href="#giraffeLegSymbol" fill="url(#giraffeSpots)" stroke="none"/>
<use href="#giraffeHoofSymbol" transform="translate(1,75)"/>
</g>
<path d="M68,250 Q55,240 60,220" stroke-width="2.5" stroke="url(#giraffeColor1)" fill="none"/> <!-- Tail 1 -->
<ellipse cx="60" cy="218" rx="4" ry="2.5" fill="#5C3317" transform="rotate(-40 60 218)"/>
</g>
<!-- Giraffe 2 (Right/Foreground) -->
<g id="giraffe2" stroke="#502A0F" stroke-width="0.5">
<path id="g2BodyNeck" d="M230,255 C240,200 215,150 200,140 C180,110 150,70 130,90 C115,115 155,140 180,150 C190,190 210,235 230,255Z" fill="url(#giraffeColor2)"/>
<path d="M230,255 C240,200 215,150 200,140 C180,110 150,70 130,90 C115,115 155,140 180,150 C190,190 210,235 230,255Z" fill="url(#giraffeSpots)" stroke="none"/>
<g transform="translate(128,88) rotate(-25)"> <!-- Head 2 -->
<ellipse cx="0" cy="0" rx="10" ry="14" fill="url(#giraffeColor2)"/>
<ellipse cx="0" cy="0" rx="10" ry="14" fill="url(#giraffeSpots)" stroke="none"/>
<path d="M-1.5,-11 L0,-16 L1.5,-11 Z" fill="#4A250A"/><path d="M2.5,-10 L4,-15 L5.5,-10 Z" fill="#4A250A"/>
<circle cx="4.5" cy="0" r="1.8" fill="black"/><path d="M9,2 Q7,4 9,6" stroke="#4A250A" stroke-width="0.7" fill="none"/>
</g>
<path d="M198,138 C178,100 150,65 132,85" stroke="#4A250A" stroke-width="4" fill="none" stroke-linecap="round"/> <!-- Mane 2 -->
<g transform="translate(225,185) rotate(-5)"> <!-- Back Leg 2 -->
<use href="#giraffeLegSymbol" fill="url(#giraffeColor2)"/><use href="#giraffeLegSymbol" fill="url(#giraffeSpots)" stroke="none"/>
<use href="#giraffeHoofSymbol" transform="translate(1,75)"/>
</g>
<g transform="translate(190,170) rotate(55)"> <!-- Front Leg 2 (arabesque) -->
<use href="#giraffeLegSymbol" fill="url(#giraffeColor2)"/><use href="#giraffeLegSymbol" fill="url(#giraffeSpots)" stroke="none"/>
<use href="#giraffeHoofSymbol" transform="translate(1,75)"/>
</g>
<path d="M232,250 Q245,240 240,220" stroke-width="2.5" stroke="url(#giraffeColor2)" fill="none"/> <!-- Tail 2 -->
<ellipse cx="240" cy="218" rx="4" ry="2.5" fill="#4A250A" transform="rotate(40 240 218)"/>
</g>
<!-- Decorative Swirls -->
<path d="M40,220 C80,170 150,160 150,110 S220,170 260,220" fill="none" stroke="rgba(255,255,224,0.18)" stroke-width="2.5" stroke-dasharray="6 6" stroke-linecap="round"/>
<path d="M20,160 C70,110 150,210 200,160 S290,70 280,40" fill="none" stroke="rgba(255,255,224,0.12)" stroke-width="2" stroke-dasharray="4 4" stroke-linecap="round"/>
</g>
<!-- Subtle Ground -->
<rect y="265" width="300" height="35" fill="#070110" opacity="0.75"/>
<path d="M0,270 C50,266 100,267 150,265 C200,263 250,266 300,270" fill="none" stroke="#301040" stroke-width="2.5" opacity="0.6"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Crescent Moon -->
<path d="M 150 50 C 130 70 100 100 100 150 C 100 200 130 230 150 250 C 170 230 200 200 200 150 C 200 100 170 70 150 50 Z"
fill="#FFD700" stroke="#FFC400" stroke-width="2" />
<!-- Night Sky -->
<rect x="0" y="0" width="300" height="300" fill="#2F4F7F" />
<!-- Giraffe 1 -->
<g transform="translate(100, 150)">
<path d="M 0 0 C 20 30 40 50 60 60 C 80 50 100 30 120 0"
fill="#F5DEB3" stroke="#964B00" stroke-width="2" />
<circle cx="60" cy="60" r="20" fill="#F5DEB3" stroke="#964B00" stroke-width="2" />
<path d="M 60 80 C 80 100 100 120 120 140"
fill="#F5DEB3" stroke="#964B00" stroke-width="2" />
</g>
<!-- Giraffe 2 -->
<g transform="translate(180, 150)">
<path d="M 0 0 C 20 30 40 50 60 60 C 80 50 100 30 120 0"
fill="#C9E4CA" stroke="#3E8E41" stroke-width="2" />
<circle cx="60" cy="60" r="20" fill="#C9E4CA" stroke="#3E8E41" stroke-width="2" />
<path d="M 60 80 C 80 100 100 120 120 140"
fill="#C9E4CA" stroke="#3E8E41" stroke-width="2" />
</g>
<!-- Tangled Legs -->
<g transform="translate(140, 180)">
<path d="M 0 0 C 20 30 40 50 60 60 C 80 50 100 30 120 0"
fill="#F5DEB3" stroke="#964B00" stroke-width="2" />
<path d="M 60 0 C 80 20 100 40 120 60 C 100 80 80 100 60 120"
fill="#C9E4CA" stroke="#3E8E41" stroke-width="2" />
</g>
<!-- Ballet Skirt -->
<g transform="translate(120, 200)">
<path d="M 0 0 C 20 30 40 50 60 60 C 80 50 100 30 120 0"
fill="#FFC0CB" stroke="#FF69B4" stroke-width="2" />
<path d="M 60 0 C 80 20 100 40 120 60 C 100 80 80 100 60 120"
fill="#FFC0CB" stroke="#FF69B4" stroke-width="2" />
</g>
<!-- Gradient Overlay -->
<rect x="0" y="0" width="300" height="300" fill="url(#grad)" />
<!-- Gradient Definition -->
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.5" />
<stop offset="100%" stop-color="#000000" stop-opacity="0" />
</linearGradient>
</defs>
</svg>Judge's Analysis
Player 1's submission is more cohesive and clearly represents the prompt with two giraffes intertwined in a ballet-like pose under a crescent moon.
The composition is elegant, with attention to detail and visual clarity.
While Player 2's abstract approach is creative, it lacks direct adherence to the prompt and is less visually engaging.
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 cat balancing on a unicycle while juggling fish."
"A teacup balancing on a sleeping cat's tail under a floating balloon."
"An octopus wearing a crown, juggling three lit candles underwater."
