Creative Challenge
"An upside-down castle floating above a crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad-moon" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#f7f7f7" stop-opacity="1" />
<stop offset="100%" stop-color="#e6e6e6" stop-opacity="1" />
</linearGradient>
<linearGradient id="grad-castle" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#85586F" stop-opacity="1" />
<stop offset="100%" stop-color="#3F3244" stop-opacity="1" />
</linearGradient>
<pattern id="stone-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="#999999" />
<circle cx="10" cy="10" r="5" fill="#666666" />
</pattern>
</defs>
<!-- Crescent Moon -->
<path d="M150 250 A 120 120, 0, 1, 0, 210 170 L 150 250 Z" fill="url(#grad-moon)" />
<!-- Floating Castle -->
<g transform="translate(150, 100) scale(1, -1)">
<rect x="-50" y="-120" width="100" height="120" fill="url(#grad-castle)" rx="10" />
<rect x="-40" y="-100" width="80" height="100" fill="url(#stone-pattern)" rx="10" />
<polygon points="-60,-90 -30,-70 30,-70 60,-90" fill="#666666" />
<circle cx="0" cy="-80" r="20" fill="#999999" />
</g>
<!-- Clouds and Stars -->
<g>
<circle cx="100" cy="50" r="20" fill="#FFFFFF" opacity="0.5" />
<circle cx="200" cy="150" r="30" fill="#FFFFFF" opacity="0.5" />
<circle cx="50" cy="200" r="15" fill="#FFFFFF" opacity="0.5" />
<circle cx="250" cy="50" r="10" fill="#FFFFFF" opacity="0.5" />
</g>
<g>
<circle cx="150" cy="50" r="5" fill="#FFFFFF" />
<circle cx="220" cy="180" r="5" fill="#FFFFFF" />
<circle cx="80" cy="220" r="5" fill="#FFFFFF" />
<circle cx="280" cy="80" r="5" fill="#FFFFFF" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<radialGradient id="moonGlow" cx="50%" cy="50%" r="60%" fx="50%" fy="55%">
<stop offset="0%" stop-color="#fdf3b3" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#bfb058" stop-opacity="0"/>
</radialGradient>
<radialGradient id="moonGradient" cx="40%" cy="45%" r="70%" fx="40%" fy="45%">
<stop offset="0%" stop-color="#ffe97d" />
<stop offset="100%" stop-color="#d5b344" />
</radialGradient>
<linearGradient id="castleWall" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8b7d78" />
<stop offset="100%" stop-color="#4a433f" />
</linearGradient>
<linearGradient id="castleRoof" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#bf3e3e" />
<stop offset="100%" stop-color="#610d0d" />
</linearGradient>
<pattern id="brickPattern" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="10" height="10" fill="#6a6059" />
<rect x="10" y="5" width="10" height="5" fill="#7f736a" />
</pattern>
<filter id="castleShadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB" >
<feDropShadow dx="3" dy="5" stdDeviation="4" flood-color="#000000" flood-opacity="0.6"/>
</filter>
<filter id="moonInnerGlow" x="-40%" y="-40%" width="180%" height="180%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#fff7b7" flood-opacity="0.4" />
<feDropShadow dx="0" dy="0" stdDeviation="12" flood-color="#fff0a5" flood-opacity="0.25" />
</filter>
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%" color-interpolation-filters="sRGB" >
<feDropShadow dx="0" dy="0" stdDeviation="1.5" flood-color="white" flood-opacity="0.8" />
</filter>
</defs>
<!-- Background sky gradient -->
<rect width="300" height="300" fill="url(#nightSky)" />
<defs>
<linearGradient id="nightSky" x1="0" y1="1" x2="1" y2="0">
<stop offset="0%" stop-color="#0b1a2c" />
<stop offset="100%" stop-color="#112a46" />
</linearGradient>
</defs>
<!-- Glimmering stars -->
<g>
<circle cx="240" cy="45" r="1.8" fill="white" filter="url(#starGlow)" opacity="0.9" />
<circle cx="85" cy="30" r="1.2" fill="white" filter="url(#starGlow)" opacity="0.6" />
<circle cx="180" cy="210" r="1.5" fill="white" filter="url(#starGlow)" opacity="0.7" />
<circle cx="260" cy="160" r="1" fill="white" filter="url(#starGlow)" opacity="0.5" />
<circle cx="120" cy="110" r="1.3" fill="white" filter="url(#starGlow)" opacity="0.8" />
<circle cx="55" cy="180" r="1.6" fill="white" filter="url(#starGlow)" opacity="0.6" />
</g>
<!-- Crescent moon base shape -->
<g filter="url(#moonInnerGlow)">
<path d="M102,220
A85,85 0 1,1 190,143
A60,60 0 1,0 102,220Z"
fill="url(#moonGradient)" stroke="#eadb72" stroke-width="1.8" />
<circle cx="138" cy="168" r="48" fill="url(#moonGlow)" />
</g>
<!-- Moon crater pattern -->
<g fill="#dbca61" opacity="0.5">
<circle cx="140" cy="155" r="8"/>
<ellipse cx="115" cy="190" rx="7" ry="4" transform="rotate(-30 115 190)" />
<circle cx="160" cy="190" r="5" />
<ellipse cx="170" cy="140" rx="4" ry="7" transform="rotate(15 170 140)" />
<circle cx="130" cy="180" r="3" />
</g>
<!-- Upside-down castle container -->
<g transform="translate(150 100) scale(1 -1) translate(-75 -65)" filter="url(#castleShadow)">
<!-- Base wall with brick pattern -->
<rect x="10" y="10" width="130" height="110" fill="url(#brickPattern)" stroke="#3b342f" stroke-width="1" rx="8" ry="8" />
<!-- Large central tower -->
<rect x="55" y="90" width="40" height="80" fill="url(#castleWall)" stroke="#453d39" stroke-width="1.5" rx="4" ry="4" />
<polygon points="55,90 75,110 95,90" fill="url(#castleRoof)" stroke="#5a1f1f" stroke-width="1" />
<polygon points="95,90 115,110 135,90" fill="url(#castleRoof)" stroke="#5a1f1f" stroke-width="1" />
<!-- Left tower -->
<rect x="25" y="60" width="30" height="70" fill="url(#castleWall)" stroke="#453d39" stroke-width="1.3" rx="3" ry="3" />
<polygon points="25,60 40,80 55,60" fill="url(#castleRoof)" stroke="#5a1f1f" stroke-width="1" />
<!-- Right tower -->
<rect x="105" y="55" width="30" height="75" fill="url(#castleWall)" stroke="#453d39" stroke-width="1.3" rx="3" ry="3" />
<polygon points="105,55 120,75 135,55" fill="url(#castleRoof)" stroke="#5a1f1f" stroke-width="1" />
<!-- Battlements -->
<g fill="#6c615b" stroke="#4c4642" stroke-width="0.8" >
<rect x="10" y="120" width="15" height="10" />
<rect x="35" y="120" width="15" height="10" />
<rect x="60" y="120" width="15" height="10" />
<rect x="85" y="120" width="15" height="10" />
<rect x="110" y="120" width="15" height="10" />
<rect x="135" y="120" width="15" height="10" />
</g>
<!-- Windows -->
<g stroke="#2e2926" stroke-width="1" fill="#f7eeb6" opacity="0.85">
<rect x="65" y="130" width="10" height="15" rx="3" ry="3" />
<rect x="115" y="90" width="8" height="12" rx="2" ry="2" />
<rect x="30" y="80" width="8" height="12" rx="2" ry="2" />
<rect x="110" y="70" width="6" height="10" rx="2" ry="2" />
<rect x="45" y="130" width="6" height="10" rx="2" ry="2" />
<rect x="100" y="140" width="6" height="10" rx="2" ry="2" />
</g>
<!-- Flags atop towers -->
<g fill="#c42828" stroke="#7a1c1c" stroke-width="0.8">
<path d="M45 165 L45 175 L60 170 Z" />
<path d="M110 160 L110 170 L125 165 Z" />
<path d="M25 130 L25 140 L40 135 Z" />
</g>
<g stroke="#5a1515" stroke-width="1">
<line x1="45" y1="165" x2="45" y2="175" />
<line x1="110" y1="160" x2="110" y2="170" />
<line x1="25" y1="130" x2="25" y2="140" />
</g>
<!-- Door with arch -->
<g fill="#412d22" stroke="#3a271c" stroke-width="1.5">
<rect x="70" y="10" width="30" height="40" rx="12" ry="20" />
<ellipse cx="85" cy="10" rx="15" ry="12" />
</g>
<line x1="85" y1="10" x2="85" y2="50" stroke="#1b180f" stroke-width="1" />
<line x1="75" y1="30" x2="95" y2="30" stroke="#2f2a1e" stroke-width="0.8" />
<!-- Decorative vines (artistic metaphor) growing down the castle walls -->
<path d="M40 100 C45 95, 55 110, 60 95 S 75 90, 80 100" fill="none" stroke="#355e3b" stroke-width="2" stroke-linecap="round" />
<path d="M110 85 Q115 78, 120 85 T130 85" fill="none" stroke="#2f5a36" stroke-width="1.8" />
<!-- Roof windows -->
<circle cx="75" cy="107" r="4" fill="#eae5a4" stroke="#666130" stroke-width="0.6" />
<circle cx="115" cy="105" r="4" fill="#eae5a4" stroke="#666130" stroke-width="0.6" />
</g>
<!-- Soft glow around castle to emphasize floating -->
<ellipse cx="150" cy="106" rx="73" ry="22" fill="url(#moonGlow)" opacity="0.32" />
</svg>Judge's Analysis
Player 2's submission demonstrates stronger adherence to the prompt with a clear depiction of an upside-down castle floating above a crescent moon.
The design is more detailed and visually appealing, with a glowing moon and starry background that enhances the composition.
Player 1's submission, while abstract, lacks clarity and recognizable elements of the prompt, making Player 2 the stronger choice overall.
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.
