Creative Challenge
"Three-eyed owl perched on a glowing crescent moon."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- Gradients -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#0F0519; stop-opacity:1" />
<stop offset="30%" style="stop-color:#1E0B30; stop-opacity:1" />
<stop offset="100%" style="stop-color:#3A125A; stop-opacity:1" />
</linearGradient>
<radialGradient id="nebulaGlow" cx="30%" cy="25%" r="50%">
<stop offset="0%" stop-color="rgba(100, 80, 150, 0.3)" />
<stop offset="100%" stop-color="rgba(80, 60, 120, 0)" />
</radialGradient>
<radialGradient id="moonSurface" cx="30%" cy="50%" r="70%">
<stop offset="0%" stop-color="#FFFDE7"/>
<stop offset="60%" stop-color="#FFFACD"/>
<stop offset="100%" stop-color="#F0E68C"/>
</radialGradient>
<radialGradient id="owlBodyGradient" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#9D7F73" /> <!-- Lighter mid-tone -->
<stop offset="100%" stop-color="#4E342E" /> <!-- Darker brown -->
</radialGradient>
<radialGradient id="owlHeadGradient" cx="50%" cy="40%" r="70%">
<stop offset="0%" stop-color="#B0988F" /> <!-- Lighter for head center -->
<stop offset="100%" stop-color="#5D4037" />
</radialGradient>
<radialGradient id="thirdEyeIris" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFCCFF" /> <!-- Very light pink/purple center -->
<stop offset="30%" stop-color="#F06FFB" /> <!-- Bright Purple/Pink -->
<stop offset="60%" stop-color="#B000FF" /> <!-- Saturated Purple -->
<stop offset="100%" stop-color="#7A00AF" /> <!-- Dark Purple -->
</radialGradient>
<!-- Filters -->
<filter id="strongMoonGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"/>
</filter>
<filter id="mediumMoonGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
</filter>
<filter id="eyeGlowFilter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3.5" result="blur" />
<feComponentTransfer in="blur" result="boostedBlur">
<feFuncA type="linear" slope="1.5"/>
</feComponentTransfer>
<feMerge>
<feMergeNode in="boostedBlur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="starShine" x="-150%" y="-150%" width="400%" height="400%">
<feGaussianBlur stdDeviation="1.2" />
</filter>
<!-- Moon Path: A crescent shape, cusps at (50,0) and (50,100) when not transformed. -->
<!-- Outer arc is right side of circle R50. Inner arc is right side of circle R38, offset. -->
<path id="simpleCrescent" d="M50,0 A50,50 0 0 1 50,100 A38,38 0 0 0 50,0 Z" />
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<rect width="300" height="300" fill="url(#nebulaGlow)" opacity="0.9" />
<!-- Stars -->
<g id="stars">
<circle cx="60" cy="40" r="1.2" fill="white" opacity="0.9"/>
<circle cx="250" cy="60" r="0.8" fill="#F0F8FF" opacity="0.7"/>
<circle cx="120" cy="20" r="1" fill="#FFF5EE" opacity="0.8"/>
<circle cx="30" cy="150" r="1" fill="white" opacity="0.6"/>
<circle cx="270" cy="180" r="1.2" fill="#FFF5EE" opacity="0.9"/>
<circle cx="150" cy="280" r="0.9" fill="#F0F8FF" opacity="0.7"/>
<circle cx="200" cy="250" r="1.5" fill="#FFFACD" opacity="0.85"/>
<g transform="translate(80 90)">
<circle r="2.2" fill="rgba(255,255,220,0.4)" filter="url(#starShine)"/>
<circle r="1.3" fill="white"/>
</g>
<g transform="translate(230 130)">
<circle r="2.5" fill="rgba(220,220,255,0.4)" filter="url(#starShine)"/>
<circle r="1.5" fill="#F0F8FF"/>
</g>
<g transform="translate(50 240)">
<circle r="1.8" fill="rgba(255,220,220,0.4)" filter="url(#starShine)"/>
<circle r="1" fill="#FFE4E1"/>
</g>
</g>
<!-- Glowing Crescent Moon -->
<g id="glowingMoon" transform="translate(170 90) rotate(20) scale(1.5)">
<use href="#simpleCrescent" fill="#FFFDE7" opacity="0.4" filter="url(#strongMoonGlow)"/>
<use href="#simpleCrescent" fill="#FFFDE7" opacity="0.6" filter="url(#mediumMoonGlow)"/>
<use href="#simpleCrescent" fill="url(#moonSurface)" stroke="#D0C07C" stroke-width="0.4"/>
</g>
<!-- Three-Eyed Owl -->
<g id="owl" transform="translate(180 125)"> <!-- Owl global position: feet around Y=125+72=197 -->
<!-- Talons -->
<g id="talons" fill="#4A3B31" stroke="#3E2723" stroke-width="0.6">
<path d="M23,70 Q26,75 30,72 L28,77 Q26,79 24,77 Z" /> <!-- Left talon -->
<path d="M36,71 Q39,76 43,73 L41,78 Q39,80 37,78 Z" /> <!-- Right talon -->
</g>
<!-- Body -->
<path id="owlBody" d="M32,22 C10,27 2,55 15,72 L50,72 C63,55 55,27 32,22 Z" fill="url(#owlBodyGradient)" />
<!-- Chest Feathers Detail -->
<path d="M32.5,40 C25,38 20,45 20,50 C20,55 25,62 32.5,62 S45,55 45,50 C45,45 40,38 32.5,40 Z" fill="#B0988F" opacity="0.25"/>
<path d="M25,65 C28,62 30,62 32,65 M33,65 C35,62 37,62 40,65" stroke="#4E342E" stroke-width="0.25" fill="none" opacity="0.7"/>
<!-- Wings (folded) -->
<path id="leftWing" d="M15,32 C2,42 2,62 17,69 L24,67 C12,60 12,42 20,32 Z" fill="#6D4C41" stroke="#4E342E" stroke-width="0.3"/>
<path id="rightWing" d="M50,32 C63,42 63,62 48,69 L41,67 C53,60 53,42 45,32 Z" fill="#6D4C41" stroke="#4E342E" stroke-width="0.3"/>
<!-- Head -->
<ellipse cx="32.5" cy="28" rx="23" ry="24" fill="url(#owlHeadGradient)" />
<!-- Ear Tufts -->
<path d="M10,12 Q8,-2 19,6 Z" fill="#6D4C41" transform="rotate(-10 14 5)"/>
<path d="M55,12 Q57,-2 46,6 Z" fill="#6D4C41" transform="rotate(10 51 5)"/>
<!-- Facial Disk outline -->
<path d="M32.5,30 C22.5,20 12.5,25 12.5,35 S22.5,50 32.5,45 C42.5,50 52.5,45 52.5,35 S42.5,20 32.5,30 Z"
fill="none" stroke="#8D6E63" stroke-width="0.7" opacity="0.4"/>
<!-- Eyes -->
<g id="leftRegularEye">
<circle cx="21" cy="30" r="7.5" fill="#FFEB3B"/> <!-- Yellow iris -->
<circle cx="21" cy="30" r="3.8" fill="#212121"/> <!-- Pupil -->
<ellipse cx="19.5" cy="28.5" rx="1.2" ry="1.8" fill="white" opacity="0.9"/> <!-- Highlight -->
</g>
<g id="rightRegularEye">
<circle cx="44" cy="30" r="7.5" fill="#FFEB3B"/>
<circle cx="44" cy="30" r="3.8" fill="#212121"/>
<ellipse cx="42.5" cy="28.5" rx="1.2" ry="1.8" fill="white" opacity="0.9"/>
</g>
<!-- Third Eye -->
<g id="thirdEye" filter="url(#eyeGlowFilter)" transform="translate(32.5, 18)"> <!-- Centered on forehead -->
<ellipse cx="0" cy="0" rx="6" ry="4.5" fill="url(#thirdEyeIris)"/>
<ellipse cx="0" cy="0" rx="1.8" ry="1.2" fill="#FFFFFF" opacity="0.85"/> <!-- Central highlight -->
</g>
<!-- Beak -->
<path id="beak" d="M30,36 Q32.5,41 35,36 L32.5,34 Z" fill="#FFA000" stroke="#D84315" stroke-width="0.4"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#f4f0bb" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#6b46c1" stop-opacity="0"/>
</radialGradient>
<linearGradient id="featherGrad" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" stop-color="#2d1b69"/>
<stop offset="100%" stop-color="#4a2c91"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="#0f0526"/>
<g transform="translate(150 180)">
<!-- Moon -->
<path d="M-80 0A80 80 0 1 1 80 0A60 60 0 0 0-80 0Z" fill="url(#moonGlow)" filter="url(#glow)"/>
<path d="M-60 0A60 60 0 1 1 60 0A40 40 0 0 0-60 0Z" fill="#e6e2b6"/>
<!-- Owl Body -->
<g transform="translate(0 -30)">
<path d="M-40 0Q0-60 40 0L30 40Q0 70-30 40Z" fill="url(#featherGrad)"/>
<ellipse cx="0" cy="-20" rx="35" ry="50" fill="#36215e"/>
<!-- Eyes -->
<circle cx="-20" cy="-40" r="12" fill="#f8f4d3"/>
<circle cx="20" cy="-40" r="12" fill="#f8f4d3"/>
<circle cx="0" cy="-10" r="10" fill="#ff6b6b"/>
<circle cx="-20" cy="-40" r="4" fill="#0f0526"/>
<circle cx="20" cy="-40" r="4" fill="#0f0526"/>
<path d="M-5-12A5 5 0 0 1 5-12" stroke="#0f0526" fill="none"/>
<!-- Wings -->
<path d="M-50 10Q-30-20 0 0" fill="#4a2c91" opacity="0.8"/>
<path d="M50 10Q30-20 0 0" fill="#4a2c91" opacity="0.8"/>
</g>
</g>
<!-- Stars -->
<g fill="#f8f4d3" opacity="0.7">
<circle cx="50" cy="60" r="1.5"/>
<circle cx="250" cy="90" r="2"/>
<circle cx="180" cy="30" r="1.2"/>
<circle cx="120" cy="150" r="1.8"/>
</g>
<!-- Mystical Details -->
<path d="M150 180q20-40 40-10" stroke="url(#featherGrad)" fill="none" stroke-width="2" stroke-dasharray="4 4"/>
</svg>Judge's Analysis
Player 1's image adheres more closely to the prompt by depicting a three-eyed owl perched on a crescent moon, with the glowing crescent moon represented by a subtle arc.
The composition is clear and visually appealing, with a cohesive celestial background.
In contrast, Player 2's image is less representative of the prompt, as the depicted figure lacks clear owl features and the crescent moon is absent, reducing adherence to the idea.
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
"Clock tower with melting gears under a swirling aurora sky."
"A giant snail racing a time-traveling turtle under a starry sky."
"An octopus wearing a top hat and monocle, sipping tea at a tiny table underwater."
"A snail racing a cheetah on roller skates under a full moon."
