Creative Challenge
"An owl wearing a crown, perched on a crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Moon gradient -->
<radialGradient id="moonGrad" cx="60%" cy="65%" r="82%">
<stop offset="0%" stop-color="#FFF6D8"/>
<stop offset="70%" stop-color="#FFE26F"/>
<stop offset="100%" stop-color="#F6C560"/>
</radialGradient>
<!-- Owl body gradient -->
<radialGradient id="owlBodyGrad" cx="45%" cy="40%" r="85%">
<stop offset="0%" stop-color="#ffe3a9"/>
<stop offset="60%" stop-color="#ba8246"/>
<stop offset="100%" stop-color="#865819"/>
</radialGradient>
<!-- Wing gradient -->
<linearGradient id="wingGrad" x1="0%" y1="0%" x2="100%" y2="40%">
<stop offset="0%" stop-color="#d6ad55"/>
<stop offset="90%" stop-color="#7d4e18"/>
</linearGradient>
<!-- Crown gradient -->
<linearGradient id="crownGrad" x1="0%" y1="10%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFED91"/>
<stop offset="70%" stop-color="#FFD700"/>
<stop offset="100%" stop-color="#B38B0B"/>
</linearGradient>
<!-- Eye gradient -->
<radialGradient id="eyeGrad" cx="42%" cy="40%" r="70%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="25%" stop-color="#f6e4ad"/>
<stop offset="40%" stop-color="#eeae48"/>
<stop offset="80%" stop-color="#7a4309"/>
<stop offset="100%" stop-color="#22160a"/>
</radialGradient>
<!-- Night sky -->
<radialGradient id="skyGrad" cx="60%" cy="35%" r="100%">
<stop offset="0%" stop-color="#25184A"/>
<stop offset="70%" stop-color="#0B1C26"/>
<stop offset="100%" stop-color="#0b1019"/>
</radialGradient>
<!-- Moon shadow -->
<radialGradient id="moonShadow" cx="60%" cy="65%" r="80%">
<stop offset="0%" stop-color="#000" stop-opacity="0"/>
<stop offset="80%" stop-color="#000" stop-opacity="0.18"/>
<stop offset="100%" stop-color="#000" stop-opacity="0.27"/>
</radialGradient>
<!-- Feather pattern -->
<pattern id="featherPat" patternUnits="userSpaceOnUse" width="14" height="16">
<ellipse cx="7" cy="8" rx="5" ry="5" fill="#FCC873" fill-opacity="0.5"/>
<ellipse cx="9" cy="11" rx="3" ry="3" fill="#AC6E24" fill-opacity="0.3"/>
</pattern>
<!-- Sparkle star -->
<g id="star">
<polygon points="2,0 2.7,1.5 4.2,2 2.7,2.5 2,4 1.3,2.5 0,2 1.3,1.5" fill="#fff" opacity="0.8"/>
</g>
</defs>
<!-- Night sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)"/>
<!-- Crescent moon -->
<g>
<ellipse cx="180" cy="170" rx="110" ry="100" fill="url(#moonGrad)" />
<ellipse cx="200" cy="165" rx="83" ry="82" fill="url(#skyGrad)" />
<ellipse cx="180" cy="170" rx="110" ry="100" fill="url(#moonShadow)" />
</g>
<!-- Decorative blocks for moon craters -->
<ellipse cx="135" cy="120" rx="8" ry="5" fill="#FFE6AD" opacity="0.45"/>
<ellipse cx="170" cy="220" rx="7" ry="4" fill="#F8D77D" opacity="0.31"/>
<ellipse cx="220" cy="140" rx="4" ry="3" fill="#FFDB93" opacity="0.32"/>
<ellipse cx="190" cy="170" rx="5" ry="3" fill="#D7C683" opacity="0.25"/>
<!-- Owl shadow on moon -->
<ellipse cx="130" cy="220" rx="25" ry="10" fill="#503813" opacity="0.23"/>
<!-- Owl group -->
<g>
<!-- Left wing -->
<ellipse cx="80" cy="180" rx="30" ry="60" fill="url(#wingGrad)" opacity="0.98" transform="rotate(-12 80 180)"/>
<!-- Right wing (folded) -->
<ellipse cx="185" cy="196" rx="23" ry="49" fill="url(#wingGrad)" opacity="0.95" transform="rotate(17 185 196)"/>
<!-- Body outline -->
<ellipse cx="130" cy="168" rx="40" ry="55" fill="url(#owlBodyGrad)" stroke="#5f3c0c" stroke-width="3"/>
<!-- Feather pattern overlay -->
<ellipse cx="130" cy="178" rx="36" ry="43" fill="url(#featherPat)" opacity="0.85"/>
<!-- Belly oval -->
<ellipse cx="130" cy="195" rx="18" ry="25" fill="#fff8dc" opacity="0.92" />
<!-- Head -->
<ellipse cx="130" cy="113" rx="34" ry="30" fill="#a87024" stroke="#43310d" stroke-width="3"/>
<!-- Ear tufts -->
<path d="M105 85 Q94 78 107 98" fill="#a87024" stroke="#43310d" stroke-width="2"/>
<path d="M155 85 Q166 75 150 102" fill="#a87024" stroke="#43310d" stroke-width="2"/>
<!-- Face disc -->
<ellipse cx="130" cy="118" rx="28" ry="22" fill="#fef8ea" opacity="0.8"/>
<ellipse cx="130" cy="121" rx="20" ry="16" fill="#fff8e3" opacity="0.72"/>
<!-- Left Eye -->
<g>
<ellipse cx="115" cy="120" rx="7" ry="9" fill="url(#eyeGrad)" stroke="#67491e" stroke-width="0.7"/>
<ellipse cx="115" cy="122" rx="3.5" ry="3.5" fill="#22190d"/>
<ellipse cx="117" cy="121" rx="1.3" ry="1" fill="#fff" opacity="0.7"/>
</g>
<!-- Right Eye -->
<g>
<ellipse cx="145" cy="120" rx="7" ry="9" fill="url(#eyeGrad)" stroke="#67491e" stroke-width="0.7"/>
<ellipse cx="145" cy="122" rx="3.5" ry="3.5" fill="#22190d"/>
<ellipse cx="147" cy="121" rx="1.3" ry="1" fill="#fff" opacity="0.7"/>
</g>
<!-- Eyebrows -->
<path d="M106 112 Q115 109 122 114" stroke="#5e391a" stroke-width="2.1" fill="none"/>
<path d="M154 112 Q145 109 138 114" stroke="#5e391a" stroke-width="2.1" fill="none"/>
<!-- Beak -->
<polygon points="128,130 132,130 130,138" fill="#e27921" stroke="#823801" stroke-width="1"/>
<!-- Talons -->
<g>
<path d="M113 230 Q117 238 121 228" stroke="#c79c62" stroke-width="3" fill="none"/>
<ellipse cx="117" cy="241.5" rx="2.5" ry="1.3" fill="#FBCC5E"/>
<path d="M118 231 Q122 237 125 228" stroke="#c79c62" stroke-width="3" fill="none"/>
<ellipse cx="122" cy="241.5" rx="2.5" ry="1.3" fill="#FBCC5E"/>
<path d="M127 233 Q132 240 134 228" stroke="#c79c62" stroke-width="3" fill="none"/>
<ellipse cx="130" cy="243.5" rx="2.5" ry="1.3" fill="#FBCC5E"/>
</g>
</g>
<!-- Crown group -->
<g transform="translate(115,77)">
<polygon points="5,8 13,-14 23,8" fill="url(#crownGrad)" stroke="#b38b0b" stroke-width="1.3"/>
<ellipse cx="13" cy="-15.3" rx="2.5" ry="2.7" fill="#ffe93d" stroke="#e9b602" stroke-width="0.7"/>
<circle cx="13" cy="9" r="9" fill="url(#crownGrad)" stroke="#d2ad2b" stroke-width="1.2"/>
<!-- gems -->
<circle cx="8.3" cy="7" r="1.7" fill="#7BE7FF" stroke="#37C8BC" stroke-width="0.5"/>
<circle cx="17.5" cy="7" r="1.7" fill="#F958A8" stroke="#A5034E" stroke-width="0.5"/>
<circle cx="13" cy="4.3" r="1.3" fill="#f2e85d" stroke="#c9ab13" stroke-width="0.4"/>
</g>
<!-- Stars (scattered) -->
<use href="#star" x="64" y="34" transform="scale(1.3)" />
<use href="#star" x="210" y="46" transform="scale(1)" />
<use href="#star" x="240" y="120" transform="scale(0.8)"/>
<use href="#star" x="66" y="93" transform="scale(0.7)"/>
<use href="#star" x="52" y="210" transform="scale(1.7)"/>
<use href="#star" x="220" y="260" transform="scale(1.1)"/>
<use href="#star" x="272" y="83" transform="scale(1.4)" />
<!-- Sparkle by crown -->
<g>
<line x1="126" y1="70" x2="134" y2="72" stroke="#fffce3" stroke-width="1.3" stroke-linecap="round" opacity="0.83"/>
<line x1="130" y1="67" x2="130" y2="76" stroke="#fffce3" stroke-width="1.1" stroke-linecap="round" opacity="0.83"/>
<line x1="128" y1="73" x2="132" y2="70" stroke="#fffce3" stroke-width="1.3" stroke-linecap="round" opacity="0.48"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#1a2a6c"/>
<stop offset="100%" stop-color="#b21f1f"/>
</linearGradient>
<radialGradient id="moonGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff9c4"/>
<stop offset="100%" stop-color="#fdd835"/>
</radialGradient>
<linearGradient id="owlBodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f5f3e9"/>
<stop offset="100%" stop-color="#cbbfa5"/>
</linearGradient>
<radialGradient id="eyeGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#ddd"/>
</radialGradient>
<linearGradient id="crownGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffe066"/>
<stop offset="100%" stop-color="#f9a825"/>
</linearGradient>
<filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"/>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGrad)" />
<!-- Stars -->
<g fill="#fff" opacity="0.8">
<circle cx="40" cy="60" r="1.5"/>
<circle cx="200" cy="30" r="2"/>
<circle cx="260" cy="80" r="1"/>
<circle cx="120" cy="100" r="1.2"/>
<circle cx="80" cy="200" r="1"/>
<circle cx="220" cy="180" r="1.3"/>
</g>
<!-- Crescent Moon -->
<g filter="url(#softGlow)">
<path d="M200,50
A60,60 0 1,0 200,170
A45,45 0 1,1 200,65
Z"
fill="url(#moonGrad)"/>
</g>
<!-- Owl perched on moon -->
<g transform="translate(180,120) scale(0.8)">
<!-- Body -->
<ellipse cx="0" cy="60" rx="35" ry="50" fill="url(#owlBodyGrad)" stroke="#8c795d" stroke-width="2"/>
<!-- Wings -->
<path d="M-35,50 C-70,80 -50,120 -15,80" fill="#d1c4b2" stroke="#8c795d" stroke-width="2"/>
<path d="M35,50 C70,80 50,120 15,80" fill="#d1c4b2" stroke="#8c795d" stroke-width="2"/>
<!-- Head -->
<circle cx="0" cy="0" r="30" fill="url(#owlBodyGrad)" stroke="#8c795d" stroke-width="2"/>
<!-- Eyes -->
<circle cx="-12" cy="0" r="10" fill="url(#eyeGrad)" stroke="#5d4037" stroke-width="2"/>
<circle cx="12" cy="0" r="10" fill="url(#eyeGrad)" stroke="#5d4037" stroke-width="2"/>
<circle cx="-12" cy="0" r="4" fill="#333"/>
<circle cx="12" cy="0" r="4" fill="#333"/>
<!-- Beak -->
<path d="M0,8 L-5,18 L5,18 Z" fill="#fb8c00"/>
<!-- Feathers on chest -->
<g fill="#bfa57a">
<path d="M-20,70 Q-15,80 -10,70"/>
<path d="M-10,70 Q-5,80 0,70"/>
<path d="M0,70 Q5,80 10,70"/>
<path d="M10,70 Q15,80 20,70"/>
</g>
<!-- Crown -->
<polygon points="-20,-30 0,-60 20,-30" fill="url(#crownGrad)" stroke="#a57c00" stroke-width="2"/>
<circle cx="-20" cy="-30" r="4" fill="#ffe066" stroke="#a57c00" stroke-width="1"/>
<circle cx="0" cy="-60" r="4" fill="#ffe066" stroke="#a57c00" stroke-width="1"/>
<circle cx="20" cy="-30" r="4" fill="#ffe066" stroke="#a57c00" stroke-width="1"/>
</g>
</svg>Judge's Analysis
Player 1's submission excels in creativity, technical quality, and visual appeal.
The owl is well-detailed, with a nicely designed crown and a clear crescent moon that fits the prompt beautifully.
In contrast, Player 2's submission is less detailed, with a simpler design and a less defined crescent moon, making it less visually compelling 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.
Similar Challenges
"An upside-down city skyline reflected in a lake shaped like a giant key."
"Cat wearing a top hat and balancing on a unicycle under a spotlight."
