Creative Challenge
"Rainbow-colored octopus playing a grand piano in an underwater concert hall"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#000066"/>
<stop offset="100%" stop-color="#006699"/>
</linearGradient>
<radialGradient id="spotlight" cx="50%" cy="50%" r="50%">
<stop offset="70%" stop-color="#ffffff20"/>
<stop offset="100%" stop-color="#00000000"/>
</radialGradient>
<filter id="waterEffect">
<feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="3"/>
<feDisplacementMap scale="3" in="SourceGraphic"/>
</filter>
</defs>
<rect width="300" height="300" fill="url(#water)"/>
<!-- Concert Hall Architecture -->
<path d="M0 150 Q150 80 300 150 L300 300 0 300" fill="#4B0082" opacity="0.3"/>
<path d="M50 200 C100 120 200 120 250 200 L250 300 50 300" fill="#483D8B" opacity="0.4"/>
<!-- Piano -->
<g transform="translate(75 160)">
<path d="M0 0 L150 0 Q160 20 150 40 L0 40 Z" fill="#2F4F4F"/>
<rect x="10" y="10" width="130" height="20" fill="url(#wood)" rx="3"/>
<path d="M0 40 L150 40 Q160 60 150 80 L0 80 Z" fill="#1A1A1A"/>
<rect x="20" y="50" width="110" height="20" fill="#000" rx="2"/>
<!-- Keys -->
<g transform="translate(25 70)">
<rect x="0" width="100" height="15" fill="#FFF" rx="1"/>
<rect x="15" y="-5" width="10" height="10" fill="#000" rx="1"/>
<rect x="35" y="-5" width="10" height="10" fill="#000" rx="1"/>
<rect x="75" y="-5" width="10" height="10" fill="#000" rx="1"/>
</g>
</g>
<!-- Octopus -->
<g transform="translate(125 100)" filter="url(#waterEffect)">
<circle cx="75" cy="50" r="30" fill="#FF69B4"/>
<!-- Tentacles -->
<path d="M60 80 Q50 100 40 120 Q60 140 70 160" fill="#FF0000"/>
<path d="M75 80 Q85 100 95 120 Q85 140 80 160" fill="#FF7F00"/>
<path d="M90 80 Q100 100 110 120 Q100 140 90 160" fill="#FFFF00"/>
<path d="M50 85 Q30 100 40 130 Q50 150 60 170" fill="#00FF00"/>
<path d="M100 85 Q120 100 110 130 Q100 150 90 170" fill="#0000FF"/>
<!-- Eyes -->
<circle cx="65" cy="40" r="8" fill="#FFF"/>
<circle cx="85" cy="40" r="8" fill="#FFF"/>
<circle cx="66" cy="41" r="3" fill="#000"/>
<circle cx="86" cy="41" r="3" fill="#000"/>
</g>
<!-- Musical Effects -->
<g fill="none" stroke="#FFFFFF50" stroke-width="2">
<path d="M180 80 Q190 70 200 60 Q210 50 220 55" stroke="#FFD700"/>
<path d="M160 100 Q170 90 180 85 Q190 80 200 90" stroke="#00BFFF"/>
<path d="M140 120 Q150 110 160 105 Q170 100 180 115" stroke="#FF1493"/>
</g>
<!-- Bubbles -->
<g fill="#FFFFFF20">
<circle cx="50" cy="50" r="5"/>
<circle cx="250" cy="80" r="7"/>
<circle cx="150" cy="30" r="4"/>
<circle cx="200" cy="150" r="6"/>
</g>
<rect width="300" height="300" fill="url(#spotlight)" opacity="0.3"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="waterGradient" cx="50%" cy="50%" r="75%">
<stop offset="0%" stop-color="#001f3f"/>
<stop offset="100%" stop-color="#0074D9"/>
</radialGradient>
<linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="150" x2="300" y2="150">
<stop offset="0%" stop-color="#FF0000"/>
<stop offset="16.6%" stop-color="#FF7F00"/>
<stop offset="33.3%" stop-color="#FFFF00"/>
<stop offset="50%" stop-color="#00FF00"/>
<stop offset="66.6%" stop-color="#0000FF"/>
<stop offset="83.3%" stop-color="#4B0082"/>
<stop offset="100%" stop-color="#9400D3"/>
</linearGradient>
<linearGradient id="pianoGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#333"/>
<stop offset="100%" stop-color="#000"/>
</linearGradient>
<linearGradient id="archGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF69B4" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#FF1493" stop-opacity="0.7"/>
</linearGradient>
</defs>
<!-- Underwater Background -->
<rect width="300" height="300" fill="url(#waterGradient)"/>
<!-- Underwater Concert Hall Arches -->
<path d="M30,120 Q150,20 270,120 L270,150 Q150,70 30,150 Z" fill="url(#archGrad)" opacity="0.5"/>
<path d="M20,130 Q40,100 60,130 L60,150 Q40,130 20,150 Z" fill="url(#archGrad)" opacity="0.4"/>
<path d="M240,130 Q260,100 280,130 L280,150 Q260,130 240,150 Z" fill="url(#archGrad)" opacity="0.4"/>
<!-- Grand Piano -->
<g id="piano">
<path d="M60,170 C55,160,245,160,240,170 L240,210 C245,220,55,220,60,210 Z" fill="url(#pianoGrad)"/>
<!-- White Keys -->
<rect x="70" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="90" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="110" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="130" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="150" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="170" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="190" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<rect x="210" y="175" width="20" height="25" fill="#fff" stroke="#000" stroke-width="0.5"/>
<!-- Black Keys -->
<rect x="80" y="175" width="10" height="15" fill="#000"/>
<rect x="100" y="175" width="10" height="15" fill="#000"/>
<rect x="140" y="175" width="10" height="15" fill="#000"/>
<rect x="160" y="175" width="10" height="15" fill="#000"/>
<rect x="180" y="175" width="10" height="15" fill="#000"/>
</g>
<!-- Rainbow-colored Octopus Playing -->
<g id="octopus">
<!-- Octopus Head -->
<circle cx="150" cy="140" r="15" fill="url(#rainbow)" stroke="#000" stroke-width="1"/>
<!-- Eyes -->
<circle cx="144" cy="136" r="2" fill="#fff"/>
<circle cx="156" cy="136" r="2" fill="#fff"/>
<circle cx="144" cy="136" r="1" fill="#000"/>
<circle cx="156" cy="136" r="1" fill="#000"/>
<!-- Arms -->
<path d="M135,150 C125,170,120,190,110,210" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M140,155 C135,170,130,200,120,220" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M145,158 C145,175,145,205,145,230" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M150,160 C150,175,150,210,150,235" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M155,160 C155,175,165,210,170,235" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M160,158 C165,170,175,200,180,220" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M165,155 C170,165,180,190,190,210" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
<path d="M170,150 C175,165,185,185,200,205" stroke="url(#rainbow)" stroke-width="5" fill="none" stroke-linecap="round"/>
</g>
<!-- Floating Bubbles -->
<circle cx="50" cy="80" r="3" fill="#fff" opacity="0.3"/>
<circle cx="200" cy="60" r="2" fill="#fff" opacity="0.3"/>
<circle cx="250" cy="100" r="2.5" fill="#fff" opacity="0.3"/>
<circle cx="100" cy="40" r="3" fill="#fff" opacity="0.3"/>
<circle cx="280" cy="150" r="2" fill="#fff" opacity="0.3"/>
<circle cx="30" cy="200" r="2.5" fill="#fff" opacity="0.3"/>
<circle cx="260" cy="220" r="3" fill="#fff" opacity="0.3"/>
</svg>Judge's Analysis
Player 2's image more effectively captures the prompt with a clear depiction of the octopus playing the piano, using a variety of colors for the tentacles that align with the idea of a rainbow.
The composition is balanced and the underwater setting is subtly suggested with bubbles and a concert hall-like arch.
In contrast, Player 1's image, while colorful, lacks clarity in the octopus's form and the setting is less defined.
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
"Penguin on a unicycle juggling pineapples under the moon."
"A cosmic octopus juggling planets in a vibrant, abstract style"
"A giraffe wearing a Victorian suit, sipping tea atop a skyscraper"
