Creative Challenge
"Robot octopus playing chess against a wizard on a floating iceberg."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="skyGrad" cx="50%" cy="30%">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="100%" stop-color="#4682B4"/>
</radialGradient>
<linearGradient id="iceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#E6F3FF"/>
<stop offset="50%" stop-color="#B8E6FF"/>
<stop offset="100%" stop-color="#7DB8E8"/>
</linearGradient>
<linearGradient id="robotGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#C0C0C0"/>
<stop offset="50%" stop-color="#708090"/>
<stop offset="100%" stop-color="#2F4F4F"/>
</linearGradient>
<linearGradient id="tentacleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4169E1"/>
<stop offset="50%" stop-color="#1E90FF"/>
<stop offset="100%" stop-color="#0066CC"/>
</linearGradient>
<linearGradient id="wizardRobe" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8A2BE2"/>
<stop offset="50%" stop-color="#4B0082"/>
<stop offset="100%" stop-color="#2E0051"/>
</linearGradient>
<pattern id="chessPattern" patternUnits="userSpaceOnUse" width="8" height="8">
<rect width="4" height="4" fill="#000"/>
<rect x="4" y="4" width="4" height="4" fill="#000"/>
<rect x="4" y="0" width="4" height="4" fill="#FFF"/>
<rect x="0" y="4" width="4" height="4" fill="#FFF"/>
</pattern>
<!-- Star pattern for magic -->
<g id="star">
<polygon points="0,-4 1,-1 4,0 1,1 0,4 -1,1 -4,0 -1,-1" fill="#FFD700"/>
</g>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Water ripples -->
<ellipse cx="150" cy="280" rx="120" ry="15" fill="#1E90FF" opacity="0.3"/>
<ellipse cx="150" cy="285" rx="100" ry="10" fill="#4169E1" opacity="0.2"/>
<!-- Floating iceberg -->
<path d="M80 200 L220 200 L210 160 L180 140 L160 130 L140 135 L120 145 L90 165 Z"
fill="url(#iceGrad)" stroke="#B0E0E6" stroke-width="2"/>
<!-- Ice crystals on berg -->
<polygon points="95,180 100,165 105,180" fill="#E0F6FF" opacity="0.8"/>
<polygon points="200,175 205,160 210,175" fill="#E0F6FF" opacity="0.8"/>
<!-- Chess board -->
<rect x="135" y="175" width="30" height="30" fill="url(#chessPattern)" stroke="#8B4513" stroke-width="1"/>
<!-- Robot Octopus (left side) -->
<!-- Robot head/body -->
<circle cx="90" cy="170" r="20" fill="url(#robotGrad)" stroke="#2F4F4F" stroke-width="2"/>
<circle cx="85" cy="165" r="3" fill="#FF0000"/>
<circle cx="95" cy="165" r="3" fill="#FF0000"/>
<rect x="87" y="175" width="6" height="4" fill="#C0C0C0"/>
<!-- Tentacles -->
<path d="M70 180 Q60 190 55 200 Q50 210 60 220 Q70 225 75 215"
fill="url(#tentacleGrad)" stroke="#0066CC" stroke-width="1"/>
<circle cx="55" cy="200" r="3" fill="#FF4500"/>
<circle cx="65" cy="210" r="2" fill="#FF4500"/>
<path d="M110 180 Q120 185 125 195 Q130 205 120 210"
fill="url(#tentacleGrad)" stroke="#0066CC" stroke-width="1"/>
<circle cx="125" cy="195" r="2" fill="#FF4500"/>
<path d="M85 190 Q80 200 85 210 Q90 215 95 210"
fill="url(#tentacleGrad)" stroke="#0066CC" stroke-width="1"/>
<path d="M95 190 Q105 195 110 205 Q115 215 105 220"
fill="url(#tentacleGrad)" stroke="#0066CC" stroke-width="1"/>
<!-- Wizard (right side) -->
<!-- Wizard body -->
<ellipse cx="210" cy="185" rx="12" ry="20" fill="url(#wizardRobe)"/>
<!-- Wizard head -->
<circle cx="210" cy="155" r="8" fill="#FDBCB4"/>
<!-- Wizard hat -->
<path d="M202 150 L210 125 L218 150 Z" fill="#4B0082"/>
<circle cx="210" cy="125" r="3" fill="#FFD700"/>
<!-- Wizard beard -->
<path d="M205 160 Q210 170 215 160 Q210 175 205 160" fill="#FFFFFF"/>
<!-- Wizard staff -->
<line x1="225" y1="140" x2="225" y2="200" stroke="#8B4513" stroke-width="3"/>
<circle cx="225" cy="140" r="5" fill="#9370DB"/>
<!-- Magic sparkles around staff -->
<use href="#star" transform="translate(230,135) scale(0.5)"/>
<use href="#star" transform="translate(235,145) scale(0.3)"/>
<use href="#star" transform="translate(220,150) scale(0.4)"/>
<!-- Chess pieces -->
<circle cx="140" cy="180" r="2" fill="#000"/>
<circle cx="148" cy="188" r="2" fill="#FFF"/>
<circle cx="156" cy="180" r="2" fill="#000"/>
<circle cx="152" cy="196" r="2" fill="#FFF"/>
<!-- Robot arm reaching for chess piece -->
<line x1="110" y1="170" x2="130" y2="175" stroke="url(#robotGrad)" stroke-width="3"/>
<circle cx="130" cy="175" r="3" fill="#C0C0C0"/>
<!-- Wizard hand reaching for piece -->
<circle cx="195" cy="175" r="2" fill="#FDBCB4"/>
<line x1="195" y1="175" x2="165" y2="185" stroke="#FDBCB4" stroke-width="2"/>
<!-- Magic aura around wizard -->
<circle cx="210" cy="170" r="30" fill="none" stroke="#9370DB" stroke-width="1" opacity="0.3"/>
<circle cx="210" cy="170" r="35" fill="none" stroke="#8A2BE2" stroke-width="0.5" opacity="0.2"/>
<!-- Bubbles around iceberg -->
<circle cx="50" cy="240" r="3" fill="#87CEEB" opacity="0.6"/>
<circle cx="250" cy="250" r="4" fill="#87CEEB" opacity="0.5"/>
<circle cx="30" cy="260" r="2" fill="#B0E0E6" opacity="0.7"/>
<circle cx="270" cy="270" r="3" fill="#B0E0E6" opacity="0.4"/>
<!-- Additional magical effects -->
<path d="M190 140 Q200 130 210 140" fill="none" stroke="#FFD700" stroke-width="1" opacity="0.8"/>
<path d="M205 135 Q215 125 225 135" fill="none" stroke="#FF69B4" stroke-width="1" opacity="0.6"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background -->
<defs>
<linearGradient id="sky-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87cefa" />
<stop offset="100%" stop-color="#1e90ff" />
</linearGradient>
<radialGradient id="water-gradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1e90ff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#00008b" stop-opacity="0.9"/>
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#sky-gradient)" />
<ellipse cx="150" cy="280" rx="300" ry="120" fill="url(#water-gradient)" />
<!-- Iceberg -->
<polygon points="50,250 150,120 250,250" fill="#d4f0ff" stroke="#00bfff" stroke-width="2"/>
<polygon points="105,235 150,140 195,235" fill="#b0e2ff" stroke="#00bfff" stroke-width="2"/>
<!-- Chessboard -->
<rect x="110" y="140" width="80" height="80" fill="#c0c0c0" stroke="#000" stroke-width="2"/>
<pattern id="checker-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="#000" />
<rect x="10" y="10" width="10" height="10" fill="#000" />
</pattern>
<rect x="110" y="140" width="80" height="80" fill="url(#checker-pattern)" />
<!-- Chess Pieces -->
<circle cx="130" cy="160" r="4" fill="#000" />
<circle cx="150" cy="180" r="4" fill="#fff" />
<circle cx="170" cy="160" r="4" fill="#000" />
<circle cx="130" cy="200" r="4" fill="#fff" />
<circle cx="170" cy="200" r="4" fill="#000" />
<!-- Robot Octopus -->
<g>
<!-- Body -->
<ellipse cx="80" cy="160" rx="20" ry="15" fill="#6c757d" stroke="#000" stroke-width="1"/>
<!-- Eyes -->
<circle cx="73" cy="158" r="3" fill="#fff" />
<circle cx="87" cy="158" r="3" fill="#fff" />
<circle cx="73" cy="158" r="1.5" fill="#000" />
<circle cx="87" cy="158" r="1.5" fill="#000" />
<!-- Tentacles -->
<path d="M80 165 C60 180, 50 200, 65 210" stroke="#6c757d" stroke-width="4" fill="none"/>
<path d="M80 165 C75 190, 70 215, 75 225" stroke="#6c757d" stroke-width="4" fill="none"/>
<path d="M80 165 C85 190, 90 215, 85 225" stroke="#6c757d" stroke-width="4" fill="none"/>
<path d="M80 165 C100 180, 115 200, 100 210" stroke="#6c757d" stroke-width="4" fill="none"/>
<!-- Tentacle holding chess piece -->
<circle cx="150" cy="180" r="4" fill="#6c757d"/>
</g>
<!-- Wizard -->
<g>
<!-- Hat -->
<path d="M230 130 L220 170 L240 170 Z" fill="#8b008b" stroke="#4b0082" stroke-width="2"/>
<circle cx="230" cy="120" r="4" fill="#ff0"/>
<!-- Face -->
<circle cx="230" cy="185" r="12" fill="#fdd5b1" />
<!-- Beard -->
<path d="M220 190 C225 200, 235 200, 240 190" fill="#fff" />
<!-- Body -->
<path d="M220 195 L240 195 L235 240 L225 240 Z" fill="#8b008b" />
<!-- Wand -->
<line x1="215" y1="200" x2="200" y2="180" stroke="#b8860b" stroke-width="2"/>
<circle cx="200" cy="180" r="3" fill="#ff0" />
</g>
</svg>Judge's Analysis
Player 1's submission is more creative and visually engaging, with a robot octopus that has mechanical details and dynamic tentacles, as well as a wizard with clear magical elements.
The floating iceberg feels more integrated into the scene, and the composition is more balanced overall.
Player 2's submission is simpler and less detailed, with less dynamic interaction between the characters and the chessboard.
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.