Creative Challenge
"Two giraffes tangled in a giant ball of yarn under a crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Night Sky Background -->
<defs>
<linearGradient id="nightSky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1A1A4A;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0A0A2A;stop-opacity:1" />
</linearGradient>
<pattern id="stars" patternUnits="userSpaceOnUse" width="300" height="300">
<circle cx="50%" cy="50%" r="1" fill="white" opacity="0.3" />
<circle cx="25%" cy="75%" r="1" fill="white" opacity="0.3" />
<circle cx="75%" cy="25%" r="1" fill="white" opacity="0.3" />
</pattern>
<linearGradient id="moonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFF5CC;stop-opacity:1" />
</linearGradient>
<linearGradient id="yarn" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFF2CC;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FFD700;stop-opacity:1" />
</linearGradient>
<path id="yarnPath" d="M150 150 Q200 100 250 150 Q220 200 150 220 Q80 200 50 150 Q100 100 150 150" fill="none" stroke="#FFD700" stroke-width="4" opacity="0.8"/>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#nightSky)" />
<rect width="300" height="300" fill="url(#stars)" opacity="0.5" />
<!-- Crescent Moon -->
<path d="M200 50 L250 50 A50 50 0 0 1 200 100 L200 50" fill="url(#moonGlow)" />
<circle cx="250" cy="50" r="50" fill="none" stroke="white" stroke-width="2" opacity="0.8" />
<!-- Giant Ball of Yarn -->
<circle cx="150" cy="150" r="70" fill="url(#yarn)" opacity="0.9" />
<circle cx="150" cy="150" r="60" fill="none" stroke="url(#yarn)" stroke-width="8" opacity="0.7" />
<filter id="yarnShadow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<use href="#yarnPath" filter="url(#yarnShadow)" opacity="0.6" />
<!-- Giraffes -->
<g transform="translate(50 150)">
<!-- Left Giraffe -->
<path d="M0 0 Q20 -20 40 0 Q60 20 40 40 L40 80 Q20 60 0 80 L0 120 Q-20 140 -40 120 L-40 80 Q-60 60-40 40 L-40 0 Q-20 -20 0 0" fill="#8B4513" opacity="0.8" />
<path d="M-20 80 Q0 100 20 80" fill="#8B4513" opacity="0.8" />
<circle cx="10" cy="70" r="3" fill="white" />
<circle cx="-10" cy="70" r="3" fill="white" />
<!-- Spots -->
<circle cx="20" cy="20" r="2" fill="white" />
<circle cx="0" cy="40" r="2" fill="white" />
<circle cx="40" cy="60" r="2" fill="white" />
</g>
<g transform="translate(200 150)">
<!-- Right Giraffe -->
<path d="M0 0 Q20 -20 40 0 Q60 20 40 40 L40 80 Q20 60 0 80 L0 120 Q-20 140 -40 120 L-40 80 Q-60 60-40 40 L-40 0 Q-20 -20 0 0" fill="#8B4513" opacity="0.8" />
<path d="M-20 80 Q0 100 20 80" fill="#8B4513" opacity="0.8" />
<circle cx="10" cy="70" r="3" fill="white" />
<circle cx="-10" cy="70" r="3" fill="white" />
<!-- Spots -->
<circle cx="20" cy="20" r="2" fill="white" />
<circle cx="0" cy="40" r="2" fill="white" />
<circle cx="40" cy="60" r="2" fill="white" />
</g>
<!-- Yarn Strands -->
<path d="M150 100 Q170 80 200 70" stroke="#FFD700" stroke-width="4" opacity="0.8" />
<path d="M150 100 Q130 80 100 70" stroke="#FFD700" stroke-width="4" opacity="0.8" />
<path d="M150 200 Q170 220 200 210" stroke="#FFD700" stroke-width="4" opacity="0.8" />
<path d="M150 200 Q130 220 100 210" stroke="#FFD700" stroke-width="4" opacity="0.8" />
<!-- Ground -->
<rect x="0" y="220" width="300" height="80" fill="#2F4F4F" opacity="0.7" />
<rect x="50" y="240" width="50" height="60" fill="#3F7F4E" opacity="0.7" />
<rect x="200" y="240" width="50" height="60" fill="#3F7F4E" opacity="0.7" />
</svg>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#001f3f"/>
<stop offset="100%" stop-color="#000814"/>
</radialGradient>
<radialGradient id="moonGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffec4"/>
<stop offset="100%" stop-color="#f0e68c"/>
</radialGradient>
<radialGradient id="yarnGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffe6e6"/>
<stop offset="100%" stop-color="#ff9999"/>
</radialGradient>
<linearGradient id="yarnStrokeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff4d4d"/>
<stop offset="100%" stop-color="#990000"/>
</linearGradient>
<linearGradient id="giraffeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffe066"/>
<stop offset="100%" stop-color="#ffd700"/>
</linearGradient>
<pattern id="spotsPattern" patternUnits="userSpaceOnUse" width="40" height="40">
<rect width="40" height="40" fill="none"/>
<circle cx="10" cy="10" r="5" fill="#83642e"/>
<circle cx="30" cy="25" r="6" fill="#83642e"/>
<circle cx="15" cy="35" r="4" fill="#83642e"/>
<circle cx="35" cy="10" r="4" fill="#83642e"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<g fill="#ffffff" opacity="0.8">
<circle cx="50" cy="30" r="1.5"/>
<circle cx="80" cy="20" r="1.2"/>
<circle cx="200" cy="40" r="1.8"/>
<circle cx="180" cy="80" r="1.3"/>
<circle cx="120" cy="40" r="1.4"/>
<circle cx="60" cy="90" r="1.1"/>
</g>
<g>
<circle cx="240" cy="60" r="30" fill="url(#moonGrad)"/>
<circle cx="250" cy="55" r="30" fill="url(#skyGrad)"/>
</g>
<g>
<circle cx="150" cy="210" r="60" fill="url(#yarnGrad)" stroke="#c74122" stroke-width="2"/>
<path d="M150,150 C110,160 100,200 150,240 C180,260 220,260 230,220 C240,180 200,160 150,150" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="5"/>
<path d="M150,170 C120,180 140,220 180,215 C210,210 220,180 175,170" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="4"/>
<path d="M150,190 C130,195 160,240 200,220" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="3"/>
<path d="M140,230 C120,230 115,200 155,185 C185,175 215,195 210,225" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="4"/>
</g>
<g>
<path d="M150,210 C140,180 140,140 110,120" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="3"/>
<path d="M150,200 C160,180 160,140 190,120" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="3"/>
</g>
<g>
<g>
<path d="M110,160 C110,140 100,120 110,100 C120,80 130,90 130,100 C130,110 120,120 120,140 C120,145 110,150 110,160 Z" fill="url(#giraffeGrad)" stroke="#83642e" stroke-width="2"/>
<path d="M110,160 C110,140 100,120 110,100 C120,80 130,90 130,100 C130,110 120,120 120,140 C120,145 110,150 110,160 Z" fill="url(#spotsPattern)"/>
<circle cx="120" cy="95" r="4" fill="#83642e"/>
<circle cx="127" cy="92" r="1.5" fill="#000"/>
<path d="M115,90 L112,85 L118,88 Z" fill="#ffe066" stroke="#83642e" stroke-width="1"/>
<path d="M125,90 L128,85 L122,88 Z" fill="#ffe066" stroke="#83642e" stroke-width="1"/>
<rect x="118" y="80" width="2" height="8" fill="#83642e"/>
<rect x="123" y="80" width="2" height="8" fill="#83642e"/>
</g>
<g>
<path d="M190,160 C190,140 200,120 190,100 C180,80 170,90 170,100 C170,110 180,120 180,140 C180,145 190,150 190,160 Z" fill="url(#giraffeGrad)" stroke="#83642e" stroke-width="2"/>
<path d="M190,160 C190,140 200,120 190,100 C180,80 170,90 170,100 C170,110 180,120 180,140 C180,145 190,150 190,160 Z" fill="url(#spotsPattern)"/>
<circle cx="180" cy="95" r="4" fill="#83642e"/>
<circle cx="185" cy="92" r="1.5" fill="#000"/>
<path d="M175,90 L172,85 L178,88 Z" fill="#ffe066" stroke="#83642e" stroke-width="1"/>
<path d="M185,90 L188,85 L182,88 Z" fill="#ffe066" stroke="#83642e" stroke-width="1"/>
<rect x="178" y="80" width="2" height="8" fill="#83642e"/>
<rect x="183" y="80" width="2" height="8" fill="#83642e"/>
</g>
</g>
<g>
<path d="M160,220 C150,200 160,170 140,140" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="2"/>
<path d="M155,215 C170,200 180,170 185,140" fill="none" stroke="url(#yarnStrokeGrad)" stroke-width="2"/>
</g>
</svg>Judge's Analysis
Player 2's submission better adheres to the prompt by clearly depicting two giraffes tangled in a ball of yarn under a crescent moon.
The composition is visually appealing with detailed giraffe designs and dynamic use of color.
In contrast, Player 1's depiction is more abstract and less recognizable, making it harder to interpret the scene as described in the prompt.
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 snail racing a rocket on a rainbow track."
"A roller-skating octopus juggling flaming swords under a disco ball."
"A surreal tree with clocks as leaves growing in a desert."
"An octopus juggling planets in outer space."
