Creative Challenge
"Battling chess pieces on a melting ice chessboard"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="iceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#a8d7ff;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#eaf6ff;stop-opacity:0.4"/>
</linearGradient>
<filter id="ripple">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3"/>
<feDisplacementMap in="SourceGraphic" scale="10"/>
</filter>
<linearGradient id="meltGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.1"/>
<stop offset="100%" style="stop-color:#68c5ff;stop-opacity:0.8"/>
</linearGradient>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#1a1a2e"/>
<!-- Melting Chessboard -->
<path d="M50,50 Q150,80 250,50 Q270,150 250,250 Q150,220 50,250 Q30,150 50,50"
fill="url(#iceGradient)" filter="url(#ripple)"/>
<!-- Chess Grid (Distorted) -->
<path d="M70,70 Q150,90 230,70 Q240,150 230,230 Q150,210 70,230 Q60,150 70,70"
fill="none" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.3"/>
<!-- Melting Effect -->
<path d="M50,250 Q150,270 250,250 L250,280 Q150,300 50,280 Z"
fill="url(#meltGradient)" opacity="0.6"/>
<!-- Black Knight -->
<g transform="translate(120,120) rotate(-15)">
<path d="M0,0 C5,-10 15,-15 20,-5 C25,0 20,10 15,15 L-15,15 C-20,10 -25,0 -20,-5 C-15,-15 -5,-10 0,0"
fill="#2b2b2b" stroke="#000000"/>
<path d="M-5,-5 L5,-5" stroke="#444" stroke-width="2"/>
</g>
<!-- White Queen -->
<g transform="translate(180,160) rotate(15)">
<path d="M0,-20 L10,-10 L0,20 L-10,-10 Z" fill="#ffffff" stroke="#cccccc"/>
<circle cx="0" cy="-15" r="5" fill="#ffffff" stroke="#cccccc"/>
<path d="M-8,-8 L8,-8" stroke="#ffffff" stroke-width="2"/>
</g>
<!-- Battle Effects -->
<g opacity="0.6">
<circle cx="150" cy="140" r="20" fill="#ff6b6b" opacity="0.2">
<animate attributeName="r" values="20;25;20" dur="2s" repeatCount="indefinite"/>
</circle>
<path d="M140,130 L160,150 M160,130 L140,150" stroke="#fff" stroke-width="2">
<animate attributeName="stroke-width" values="2;3;2" dur="1s" repeatCount="indefinite"/>
</path>
</g>
<!-- Ice Crystals -->
<g fill="#ffffff" opacity="0.4">
<path d="M60,80 L65,75 L70,80 L65,85 Z"/>
<path d="M220,90 L225,85 L230,90 L225,95 Z"/>
<path d="M200,200 L205,195 L210,200 L205,205 Z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="iceMelt" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#E0F7FA"/>
<stop offset="30%" stop-color="#B3E5FC"/>
<stop offset="60%" stop-color="#81D4FA"/>
<stop offset="100%" stop-color="#4FC3F7"/>
</linearGradient>
<linearGradient id="waterPool" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#29B6F6" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#0288D1" stop-opacity="0.9"/>
</linearGradient>
<radialGradient id="whiteGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#E0E0E0" stop-opacity="0.3"/>
</radialGradient>
<radialGradient id="darkGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#424242" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#212121" stop-opacity="0.3"/>
</radialGradient>
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2" result="offsetblur"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.5"/>
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<filter id="waterRipple" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2" result="turbulence"/>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="#1A237E"/>
<!-- Chess board base with melting effect -->
<g transform="translate(30, 40)">
<g filter="url(#dropShadow)">
<!-- Distorted chessboard -->
<path d="M0,0 L240,0 L240,220 C210,235 180,230 150,245 C120,260 90,240 60,250 C30,260 15,240 0,220 Z" fill="url(#iceMelt)"/>
<!-- Chess squares with melting distortion -->
<g opacity="0.8">
<!-- Row 1 -->
<path d="M0,0 L30,0 L30,30 L0,32 Z" fill="#37474F"/>
<path d="M60,0 L90,0 L90,28 L60,30 Z" fill="#37474F"/>
<path d="M120,0 L150,0 L150,30 L120,28 Z" fill="#37474F"/>
<path d="M180,0 L210,0 L210,32 L180,30 Z" fill="#37474F"/>
<!-- Row 2 -->
<path d="M30,0 L60,0 L60,30 L30,28 Z" fill="#CFD8DC"/>
<path d="M90,0 L120,0 L120,30 L90,32 Z" fill="#CFD8DC"/>
<path d="M150,0 L180,0 L180,28 L150,30 Z" fill="#CFD8DC"/>
<path d="M210,0 L240,0 L240,30 L210,28 Z" fill="#CFD8DC"/>
<!-- Row 3 -->
<path d="M0,32 L30,28 L30,58 L0,62 Z" fill="#CFD8DC"/>
<path d="M60,30 L90,28 L90,60 L60,58 Z" fill="#CFD8DC"/>
<path d="M120,28 L150,30 L150,56 L120,60 Z" fill="#CFD8DC"/>
<path d="M180,30 L210,32 L210,58 L180,56 Z" fill="#CFD8DC"/>
<!-- Row 4 -->
<path d="M30,28 L60,30 L60,58 L30,60 Z" fill="#37474F"/>
<path d="M90,28 L120,30 L120,56 L90,58 Z" fill="#37474F"/>
<path d="M150,30 L180,28 L180,60 L150,62 Z" fill="#37474F"/>
<path d="M210,28 L240,30 L240,58 L210,60 Z" fill="#37474F"/>
</g>
</g>
<!-- Melting/Dripping effects -->
<path d="M50,60 C50,90 40,110 30,130 C20,150 40,170 30,190" fill="none" stroke="#81D4FA" stroke-width="8" stroke-linecap="round" opacity="0.7"/>
<path d="M100,62 C100,92 90,112 110,142 C120,162 100,182 115,210" fill="none" stroke="#81D4FA" stroke-width="6" stroke-linecap="round" opacity="0.7"/>
<path d="M170,60 C170,90 190,110 180,140 C170,160 190,180 180,200" fill="none" stroke="#81D4FA" stroke-width="7" stroke-linecap="round" opacity="0.7"/>
<!-- Water pool at bottom -->
<path d="M0,220 C30,240 60,250 90,245 C120,240 150,255 180,250 C210,245 240,230 240,220 L240,240 L0,240 Z" fill="url(#waterPool)" filter="url(#waterRipple)"/>
</g>
<!-- Chess pieces in battle -->
<!-- White King with battle stance -->
<g transform="translate(75, 85)" filter="url(#dropShadow)">
<path d="M0,35 L5,15 L-5,15 Z" fill="#E0E0E0"/>
<rect x="-8" y="12" width="16" height="3" fill="#E0E0E0"/>
<path d="M-6,12 C-6,5 0,-2 0,-8 C0,-2 6,5 6,12 Z" fill="#FAFAFA"/>
<rect x="-6" y="7" width="12" height="3" fill="#E0E0E0"/>
<path d="M-2,-8 L2,-8 L2,-12 L-2,-12 Z" fill="#E0E0E0"/>
<path d="M-4,-12 L4,-12 L0,-18 Z" fill="#FAFAFA"/>
<!-- Battle effects -->
<circle cx="0" cy="0" r="20" fill="url(#whiteGlow)" opacity="0.5"/>
<path d="M15,-5 L25,-15" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15,5 L25,15" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
<path d="M-15,-5 L-25,-15" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
<path d="M-15,5 L-25,15" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- White Queen -->
<g transform="translate(140, 60) rotate(-15)" filter="url(#dropShadow)">
<path d="M0,30 L8,10 L-8,10 Z" fill="#F5F5F5"/>
<path d="M-8,10 C-8,0 0,-8 0,-15 C0,-8 8,0 8,10 Z" fill="#FAFAFA"/>
<ellipse cx="0" cy="-17" rx="4" ry="2" fill="#F5F5F5"/>
<circle cx="0" cy="-20" r="2" fill="#FAFAFA"/>
<!-- Crown points -->
<path d="M-6,0 L-8,-5 L-4,-3 L0,-8 L4,-3 L8,-5 L6,0 Z" fill="#F5F5F5"/>
<!-- Battle effects -->
<circle cx="0" cy="0" r="15" fill="url(#whiteGlow)" opacity="0.4"/>
</g>
<!-- White Knight in attack position -->
<g transform="translate(185, 95) rotate(15)" filter="url(#dropShadow)">
<path d="M0,25 L6,5 L-6,5 Z" fill="#EEEEEE"/>
<path d="M-5,5 C-2,0 2,-10 -3,-15 C-8,-20 -12,-10 -6,-5 C0,0 4,-5 6,-15 C8,-20 2,-20 0,-15 C-2,-10 -4,-5 -5,5 Z" fill="#FAFAFA"/>
<ellipse cx="-3" cy="-12" rx="1.5" ry="1" fill="#212121"/>
<!-- Battle effects -->
<path d="M10,-15 L15,-25" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15,-10 L25,-15" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Black King -->
<g transform="translate(220, 130) rotate(-10)" filter="url(#dropShadow)">
<path d="M0,35 L5,15 L-5,15 Z" fill="#424242"/>
<rect x="-8" y="12" width="16" height="3" fill="#424242"/>
<path d="M-6,12 C-6,5 0,-2 0,-8 C0,-2 6,5 6,12 Z" fill="#212121"/>
<rect x="-6" y="7" width="12" height="3" fill="#424242"/>
<path d="M-2,-8 L2,-8 L2,-12 L-2,-12 Z" fill="#424242"/>
<path d="M-4,-12 L4,-12 L0,-18 Z" fill="#212121"/>
<path d="M-1,-18 L1,-18 L1,-22 L-1,-22 Z" fill="#424242"/>
<path d="M-3,-22 L3,-22 L0,-25 Z" fill="#212121"/>
<!-- Battle effects -->
<circle cx="0" cy="0" r="20" fill="url(#darkGlow)" opacity="0.5"/>
<path d="M15,-5 L25,-15" stroke="#424242" stroke-width="1.5" stroke-linecap="round"/>
<path d="M15,5 L25,15" stroke="#424242" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Black Queen -->
<g transform="translate(110, 150) rotate(20)" filter="url(#dropShadow)">
<path d="M0,30 L8,10 L-8,10 Z" fill="#424242"/>
<path d="M-8,10 C-8,0 0,-8 0,-15 C0,-8 8,0 8,10 Z" fill="#212121"/>
<ellipse cx="0" cy="-17" rx="4" ry="2" fill="#424242"/>
<circle cx="0" cy="-20" r="2" fill="#212121"/>
<!-- Crown points -->
<path d="M-6,0 L-8,-5 L-4,-3 L0,-8 L4,-3 L8,-5 L6,0 Z" fill="#424242"/>
<!-- Battle effects -->
<circle cx="0" cy="0" r="15" fill="url(#darkGlow)" opacity="0.4"/>
</g>
<!-- Black Knight fallen in water -->
<g transform="translate(160, 220) rotate(90)" filter="url(#waterRipple)">
<path d="M0,25 L6,5 L-6,5 Z" fill="#424242" opacity="0.8"/>
<path d="M-5,5 C-2,0 2,-10 -3,-15 C-8,-20 -12,-10 -6,-5 C0,0 4,-5 6,-15 C8,-20 2,-20 0,-15 C-2,-10 -4,-5 -5,5 Z" fill="#212121" opacity="0.8"/>
<ellipse cx="-3" cy="-12" rx="1.5" ry="1" fill="#E0E0E0" opacity="0.8"/>
</g>
<!-- Battle Effects -->
<!-- Clash lightning between pieces -->
<g opacity="0.8">
<path d="M100,85 L130,70 L120,90 L145,65" fill="none" stroke="#FFECB3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 3"/>
<path d="M180,110 L150,130 L170,120 L140,140" fill="none" stroke="#FFECB3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 3"/>
</g>
<!-- Energy burst -->
<circle cx="150" cy="100" r="10" fill="#FFECB3" opacity="0.6">
<animate attributeName="r" values="10;20;15;10" dur="2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="2s" repeatCount="indefinite"/>
</circle>
<!-- Melting ice droplets -->
<g>
<circle cx="65" cy="190" r="3" fill="#B3E5FC" opacity="0.7"/>
<circle cx="120" cy="180" r="2" fill="#B3E5FC" opacity="0.7"/>
<circle cx="200" cy="195" r="2.5" fill="#B3E5FC" opacity="0.7"/>
<circle cx="170" cy="185" r="2" fill="#B3E5FC" opacity="0.7"/>
<circle cx="90" cy="200" r="3" fill="#B3E5FC" opacity="0.7"/>
</g>
<!-- Steam/Mist effect -->
<g opacity="0.3">
<path d="M50,170 C60,160 40,150 50,140 C60,130 40,120 50,110" fill="none" stroke="#E0F7FA" stroke-width="3" stroke-linecap="round"/>
<path d="M220,160 C210,150 230,140 220,130 C210,120 230,110 220,100" fill="none" stroke="#E0F7FA" stroke-width="3" stroke-linecap="round"/>
<path d="M150,190 C160,180 140,170 150,160 C160,150 140,140 150,130" fill="none" stroke="#E0F7FA" stroke-width="2" stroke-linecap="round"/>
</g>
</svg>Judge's Analysis
Player 2's submission creatively depicts the concept of battling chess pieces on a melting ice chessboard with more clarity and detail.
The inclusion of melting effects and dynamic positioning of the pieces adds to the sense of movement and chaos.
In contrast, Player 1's image is more abstract and less identifiable with the prompt, lacking the visual elements necessary to convey the theme effectively.
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 wearing scuba gear under a full moon"
"A neon jellyfish floating in a futuristic cityscape at night"
"Floating jellyfish over a desert, geometric style"
"Surreal clock with melting numbers in a candy forest"
"Moonlit octopus ballroom waltz, undersea elegance, in Art Deco style"
"Surreal clock melting over a neon cityscape"
