Creative Challenge
"Floating library in a teacup sailing on a sea of honey under a moonlit sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Moonlit sky background -->
<rect width="300" height="300" fill="#0A043C" />
<!-- Moon -->
<circle cx="250" cy="50" r="30" fill="#F4E04D" />
<!-- Stars -->
<circle cx="30" cy="30" r="2" fill="#FFFFFF" />
<circle cx="100" cy="20" r="2" fill="#FFFFFF" />
<circle cx="200" cy="70" r="2" fill="#FFFFFF" />
<circle cx="150" cy="120" r="2" fill="#FFFFFF" />
<circle cx="270" cy="100" r="2" fill="#FFFFFF" />
<circle cx="90" cy="150" r="2" fill="#FFFFFF" />
<!-- Sea of honey -->
<rect x="0" y="150" width="300" height="150" fill="#E6A533" />
<!-- Waves in honey sea -->
<path d="M0 200 q30 -30 60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t30 0 v100 h-300z" fill="#E8B323" />
<!-- Teacup -->
<path d="M100 200 h100 v30 q0 30 -50 30 q-50 0 -50 -30 z" fill="#D1A07A" />
<!-- Library in teacup -->
<rect x="120" y="210" width="60" height="20" fill="#E0E0E0" />
<rect x="130" y="210" width="10" height="20" fill="#A8A8A8" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reuse -->
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="70%" stop-color="#1a1a4a" />
<stop offset="100%" stop-color="#3a2a6a" />
</linearGradient>
<!-- Moon glow -->
<radialGradient id="moonGlow" cx="70%" cy="30%" r="20%" fx="70%" fy="30%">
<stop offset="0%" stop-color="#fffcea" stop-opacity="0.8" />
<stop offset="100%" stop-color="#fffcea" stop-opacity="0" />
</radialGradient>
<!-- Honey sea gradient -->
<linearGradient id="honeyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#d4a017" />
<stop offset="50%" stop-color="#ffcc33" />
<stop offset="100%" stop-color="#d4a017" />
</linearGradient>
<!-- Honey pattern -->
<pattern id="honeyPattern" width="20" height="20" patternUnits="userSpaceOnUse">
<path d="M0,10 Q5,8 10,10 T20,10" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
<path d="M0,15 Q5,13 10,15 T20,15" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
<path d="M0,5 Q5,3 10,5 T20,5" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
</pattern>
<!-- Cup pattern -->
<pattern id="cupPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="1" fill="#6b8e9f" opacity="0.2" />
</pattern>
<!-- Window glow -->
<filter id="windowGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Moon beam -->
<linearGradient id="moonBeam" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffcea" stop-opacity="0.3" />
<stop offset="100%" stop-color="#fffcea" stop-opacity="0" />
</linearGradient>
<!-- Hexagonal honey pattern -->
<pattern id="honeyHexPattern" width="30" height="30" patternUnits="userSpaceOnUse">
<polygon points="10,5 20,5 25,15 20,25 10,25 5,15" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.2" />
<polygon points="25,15 35,15 40,25 35,35 25,35 20,25" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.2" />
</pattern>
</defs>
<!-- Background - Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Moon glow -->
<circle cx="210" cy="60" r="70" fill="url(#moonGlow)" />
<!-- Moonbeam -->
<path d="M210,60 L150,150" stroke="url(#moonBeam)" stroke-width="50" opacity="0.3" />
<!-- Moon -->
<circle cx="210" cy="60" r="25" fill="#fffcea" />
<circle cx="200" cy="50" r="5" fill="#e8e5d5" opacity="0.7" />
<circle cx="220" cy="65" r="7" fill="#e8e5d5" opacity="0.7" />
<circle cx="205" cy="70" r="4" fill="#e8e5d5" opacity="0.7" />
<!-- Stars -->
<g id="stars">
<circle cx="20" cy="30" r="1" fill="white" />
<circle cx="40" cy="20" r="0.8" fill="white" />
<circle cx="60" cy="40" r="1.2" fill="white" />
<circle cx="80" cy="25" r="0.7" fill="white" />
<circle cx="100" cy="50" r="1" fill="white" />
<circle cx="120" cy="30" r="0.9" fill="white" />
<circle cx="140" cy="20" r="1.1" fill="white" />
<circle cx="160" cy="40" r="0.8" fill="white" />
<circle cx="180" cy="30" r="1" fill="white" />
<circle cx="240" cy="40" r="1.2" fill="white" />
<circle cx="260" cy="20" r="0.7" fill="white" />
<circle cx="280" cy="50" r="1" fill="white" />
<circle cx="30" cy="70" r="0.9" fill="white" />
<circle cx="50" cy="60" r="1.1" fill="white" />
<circle cx="70" cy="80" r="0.8" fill="white" />
<circle cx="270" cy="90" r="1" fill="white" />
<circle cx="290" cy="70" r="0.7" fill="white" />
<circle cx="250" cy="80" r="1" fill="white" />
<circle cx="110" cy="15" r="1.3" fill="white" />
<circle cx="190" cy="25" r="0.6" fill="white" />
<circle cx="230" cy="35" r="1.2" fill="white" />
<!-- Special star sparkles -->
<path d="M30,40 L32,42 M28,42 L32,38" stroke="white" stroke-width="0.5" />
<path d="M170,20 L172,22 M168,22 L172,18" stroke="white" stroke-width="0.5" />
<path d="M260,40 L262,42 M258,42 L262,38" stroke="white" stroke-width="0.5" />
</g>
<!-- Honey Sea -->
<rect x="0" y="160" width="300" height="140" fill="url(#honeyGradient)" />
<rect x="0" y="160" width="300" height="140" fill="url(#honeyPattern)" />
<rect x="0" y="160" width="300" height="140" fill="url(#honeyHexPattern)" />
<!-- Honey Waves -->
<path d="M0,170 Q30,165 60,170 T120,170 T180,170 T240,170 T300,170" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
<path d="M0,180 Q30,175 60,180 T120,180 T180,180 T240,180 T300,180" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
<path d="M0,190 Q30,185 60,190 T120,190 T180,190 T240,190 T300,190" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
<!-- Honey Drips -->
<path d="M80,160 C80,150 85,155 85,145" fill="none" stroke="#d4a017" stroke-width="2" />
<path d="M220,160 C220,150 225,155 225,145" fill="none" stroke="#d4a017" stroke-width="2" />
<circle cx="85" cy="145" r="2" fill="#d4a017" />
<circle cx="225" cy="145" r="2" fill="#d4a017" />
<!-- Teacup - Saucer -->
<ellipse cx="150" cy="200" rx="70" ry="15" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="1" />
<ellipse cx="150" cy="200" rx="60" ry="10" fill="#b5c8d9" stroke="#8ca8be" stroke-width="0.5" />
<!-- Saucer decoration -->
<path d="M90,200 A60,10 0 0 0 210,200" fill="none" stroke="#8ca8be" stroke-width="0.5" stroke-dasharray="2,2" />
<path d="M95,200 A55,9 0 0 0 205,200" fill="none" stroke="#8ca8be" stroke-width="0.5" stroke-dasharray="2,2" />
<!-- Teacup - Body -->
<path d="M100,170 Q100,120 150,120 Q200,120 200,170" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="1" />
<path d="M100,170 Q100,175 150,175 Q200,175 200,170" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="0.5" />
<!-- Cup rim decoration -->
<path d="M100,122 Q110,120 120,122 T140,122 T160,122 T180,122 T200,122" fill="none" stroke="#8ca8be" stroke-width="1" />
<!-- Teacup - Inside -->
<ellipse cx="150" cy="170" rx="50" ry="10" fill="#c4d8e9" stroke="#a5b8c9" stroke-width="0.5" />
<!-- Teacup - Handle -->
<path d="M200,150 Q220,150 220,130 Q220,110 200,110" fill="none" stroke="#a5b8c9" stroke-width="3" stroke-linecap="round" />
<!-- Cup Pattern -->
<path d="M100,170 Q100,120 150,120 Q200,120 200,170" fill="url(#cupPattern)" opacity="0.8" />
<!-- Cup decoration -->
<path d="M120,150 Q135,130 150,150 Q165,130 180,150" fill="none" stroke="#8ca8be" stroke-width="0.5" opacity="0.7" />
<path d="M110,135 Q130,125 150,135 Q170,125 190,135" fill="none" stroke="#8ca8be" stroke-width="0.5" opacity="0.7" />
<!-- Floating Library Structure -->
<g id="library" transform="translate(125, 115) scale(0.6)">
<!-- Library Foundation/Platform -->
<rect x="5" y="30" width="90" height="10" rx="2" fill="#8a5a3c" />
<path d="M5,40 L5,35 L95,35 L95,40" fill="#7a4a2c" />
<!-- Library Main Structure -->
<rect x="20" y="0" width="60" height="30" fill="#b87f5c" stroke="#8a5a3c" stroke-width="1" />
<!-- Wall texture -->
<path d="M20,5 H80 M20,10 H80 M20,15 H80 M20,20 H80 M20,25 H80" stroke="#a57f6c" stroke-width="0.5" opacity="0.5" />
<path d="M25,0 V30 M30,0 V30 M35,0 V30 M40,0 V30 M45,0 V30 M50,0 V30 M55,0 V30 M60,0 V30 M65,0 V30 M70,0 V30 M75,0 V30" stroke="#a57f6c" stroke-width="0.5" opacity="0.3" />
<!-- Library Roof -->
<path d="M15,-10 H85 L50,-30 Z" fill="#7a4a2c" stroke="#5a3a1c" stroke-width="1" />
<!-- Roof tiles -->
<path d="M20,-10 V-15 M30,-10 V-20 M40,-10 V-25 M50,-10 V-30 M60,-10 V-25 M70,-10 V-20 M80,-10 V-15" stroke="#5a3a1c" stroke-width="0.5" opacity="0.7" />
<path d="M15,-10 H85" stroke="#5a3a1c" stroke-width="1" />
<path d="M19,-12 H81 M23,-15 H77 M27,-17 H73 M31,-20 H69 M35,-22 H65 M39,-25 H61 M43,-27 H57 M47,-29 H53" stroke="#5a3a1c" stroke-width="0.5" />
<!-- Library Columns -->
<rect x="25" y="5" width="5" height="25" fill="#d9bba8" />
<rect x="70" y="5" width="5" height="25" fill="#d9bba8" />
<path d="M25,7 H30 M25,12 H30 M25,17 H30 M25,22 H30 M25,27 H30" stroke="#c9ab98" stroke-width="0.5" />
<path d="M70,7 H75 M70,12 H75 M70,17 H75 M70,22 H75 M70,27 H75" stroke="#c9ab98" stroke-width="0.5" />
<!-- Column capitals -->
<rect x="23" y="5" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
<rect x="68" y="5" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
<!-- Column bases -->
<rect x="23" y="28" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
<rect x="68" y="28" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
<!-- Library Entrance -->
<rect x="45" y="15" width="10" height="15" fill="#5a3a1c" />
<path d="M45,15 Q50,10 55,15" fill="none" stroke="#7a4a2c" stroke-width="1" />
<!-- Entrance Steps -->
<rect x="46" y="28" width="8" height="2" fill="#8a5a3c" />
<!-- Library Windows -->
<rect x="30" y="10" width="8" height="10" rx="1" fill="#ffeca1" filter="url(#windowGlow)" />
<rect x="62" y="10" width="8" height="10" rx="1" fill="#ffeca1" filter="url(#windowGlow)" />
<path d="M30,15 H38 M34,10 V20" stroke="#8a5a3c" stroke-width="0.5" />
<path d="M62,15 H70 M66,10 V20" stroke="#8a5a3c" stroke-width="0.5" />
<!-- Books visible through windows -->
<rect x="31" y="12" width="2" height="6" fill="#8a3a5c" />
<rect x="33" y="13" width="2" height="5" fill="#3a5a8c" />
<rect x="35" y="11" width="2" height="7" fill="#5a8a3c" />
<rect x="63" y="12" width="2" height="6" fill="#5a8a3c" />
<rect x="65" y="13" width="2" height="5" fill="#8a3a5c" />
<rect x="67" y="11" width="2" height="7" fill="#3a5a8c" />
<!-- Little Flag -->
<line x1="50" y1="-30" x2="50" y2="-40" stroke="#8a5a3c" stroke-width="1" />
<path d="M50,-40 L60,-35 L50,-30" fill="#d55e00" />
<!-- Library chimney -->
<rect x="70" y="-20" width="5" height="10" fill="#7a4a2c" stroke="#5a3a1c" stroke-width="0.5" />
<path d="M69,-22 H76" stroke="#5a3a1c" stroke-width="1" />
<!-- Chimney smoke -->
<path d="M72.5,-22 Q75,-25 77,-23 Q79,-26 78,-29" fill="none" stroke="#d9d9d9" stroke-width="1" opacity="0.7" />
</g>
<!-- Steam from cup -->
<path d="M130,110 Q135,100 140,105 Q145,95 150,100 Q155,90 160,95 Q165,85 170,90" fill="none" stroke="white" stroke-width="1" opacity="0.5" />
<!-- Floating books around the library -->
<g id="floating-books">
<rect x="90" y="150" width="15" height="7" fill="#3a5a8c" transform="rotate(10, 97, 153)" />
<rect x="90" y="150" width="15" height="7" fill="none" stroke="#2a4a7c" stroke-width="0.5" transform="rotate(10, 97, 153)" />
<path d="M95,150 L95,157" stroke="#2a4a7c" stroke-width="0.5" transform="rotate(10, 97, 153)" />
<rect x="190" y="140" width="12" height="8" fill="#8a3a5c" transform="rotate(-5, 196, 144)" />
<rect x="190" y="140" width="12" height="8" fill="none" stroke="#7a2a4c" stroke-width="0.5" transform="rotate(-5, 196, 144)" />
<path d="M195,140 L195,148" stroke="#7a2a4c" stroke-width="0.5" transform="rotate(-5, 196, 144)" />
<rect x="110" y="130" width="10" height="5" fill="#5a8a3c" transform="rotate(15, 115, 132)" />
<rect x="110" y="130" width="10" height="5" fill="none" stroke="#4a7a2c" stroke-width="0.5" transform="rotate(15, 115, 132)" />
<rect x="210" y="160" width="13" height="6" fill="#d55e00" transform="rotate(-15, 216, 163)" />
<rect x="210" y="160" width="13" height="6" fill="none" stroke="#c54e00" stroke-width="0.5" transform="rotate(-15, 216, 163)" />
<path d="M214,160 L214,166" stroke="#c54e00" stroke-width="0.5" transform="rotate(-15, 216, 163)" />
</g>
<!-- Open book with pages -->
<g transform="translate(175, 140) rotate(-10)">
<path d="M0,0 L-10,2 L-10,10 L0,8 Z" fill="#f5f5f5" stroke="#d0d0d0" stroke-width="0.5" />
<path d="M0,0 L10,2 L10,10 L0,8 Z" fill="#f5f5f5" stroke="#d0d0d0" stroke-width="0.5" />
<path d="M-9,3 L-3,2 M-9,5 L-3,4 M-9,7 L-3,6" stroke="#888" stroke-width="0.3" />
<path d="M3,2 L9,3 M3,4 L9,5 M3,6 L9,7" stroke="#888" stroke-width="0.3" />
</g>
<!-- Honey ripples around the teacup -->
<ellipse cx="150" cy="200" rx="80" ry="18" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.6" />
<ellipse cx="150" cy="200" rx="90" ry="25" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.4" />
<ellipse cx="150" cy="200" rx="100" ry="32" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.2" />
<!-- More subtle ripples -->
<path d="M110,190 Q120,187 130,190" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
<path d="M170,190 Q180,187 190,190" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
<path d="M120,210 Q130,213 140,210" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
<path d="M160,210 Q170,213 180,210" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
<!-- Moon reflection in honey -->
<ellipse cx="210" cy="220" rx="15" ry="5" fill="#fffcea" opacity="0.4" />
<!-- Tiny boat with navigator -->
<g transform="translate(80, 185) scale(0.7)">
<path d="M0,0 L15,-5 L30,0 L15,5 Z" fill="#a57f6c" />
<path d="M15,-5 V-15" stroke="#8a5a3c" stroke-width="1" />
<path d="M15,-15 L25,-10 L15,-5" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
<circle cx="10" cy="0" r="2" fill="#5a3a1c" />
<path d="M10,-2 V-4 M8,0 H12" stroke="#5a3a1c" stroke-width="1" />
</g>
<!-- Starlight reflections on honey -->
<circle cx="40" cy="230" r="0.7" fill="white" opacity="0.3" />
<circle cx="90" cy="240" r="0.5" fill="white" opacity="0.3" />
<circle cx="180" cy="225" r="0.8" fill="white" opacity="0.3" />
<circle cx="250" cy="235" r="0.6" fill="white" opacity="0.3" />
<!-- Touch of golden sparkles -->
<path d="M145,160 L147,162 M143,162 L147,158" stroke="#fffcea" stroke-width="0.5" opacity="0.8" />
<path d="M155,158 L157,160 M153,160 L157,156" stroke="#fffcea" stroke-width="0.5" opacity="0.8" />
<path d="M148,145 L150,147 M146,147 L150,143" stroke="#fffcea" stroke-width="0.5" opacity="0.6" />
</svg>
Judge's Analysis
Player 2's submission exhibits greater creativity and adherence to the prompt with a detailed depiction of a floating library in a teacup, enhanced by the intricate design elements and a more dynamic moonlit sky.
The technical quality and visual appeal are superior, showcasing depth and a thoughtful composition in contrast to Player 1's simpler design.
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
"Skyscraper made of giant seashells under aurora borealis"
"A moonlit violin serenades a dancing galaxy, in impressionism"
"A giraffe wearing a top hat, juggling planets in a starry sky"
"A flying teacup with wings, pouring stars into an ocean made of swirling galaxies"
"A giraffe wearing a suit, reading a newspaper, on a tiny unicycle"
"Melting clock dripping over a cactus in the desert"