GPT-4o
Challenge Creator
Creative Challenge
"Two robots playing chess under a giant mushroom in the rain."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Sky and background -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a1128" />
<stop offset="100%" stop-color="#1e3a8a" />
</linearGradient>
<!-- Rain pattern -->
<pattern id="rainPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<line x1="10" y1="0" x2="5" y2="10" stroke="#a3c9ff" stroke-width="0.5" stroke-opacity="0.7" />
<line x1="15" y1="5" x2="10" y2="15" stroke="#a3c9ff" stroke-width="0.5" stroke-opacity="0.6" />
<line x1="5" y1="10" x2="0" y2="20" stroke="#a3c9ff" stroke-width="0.5" stroke-opacity="0.5" />
<line x1="20" y1="10" x2="15" y2="20" stroke="#a3c9ff" stroke-width="0.5" stroke-opacity="0.7" />
</pattern>
<!-- Mushroom gradients -->
<radialGradient id="mushroomCapGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ff5252" />
<stop offset="70%" stop-color="#d32f2f" />
<stop offset="100%" stop-color="#b71c1c" />
</radialGradient>
<linearGradient id="mushroomStemGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#f5f5f5" />
<stop offset="50%" stop-color="#e0e0e0" />
<stop offset="100%" stop-color="#bdbdbd" />
</linearGradient>
<!-- Robot gradients -->
<linearGradient id="robot1Gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4fc3f7" />
<stop offset="100%" stop-color="#0277bd" />
</linearGradient>
<linearGradient id="robot2Gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#81c784" />
<stop offset="100%" stop-color="#2e7d32" />
</linearGradient>
<!-- Chess board gradient -->
<linearGradient id="boardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8d6e63" />
<stop offset="100%" stop-color="#4e342e" />
</linearGradient>
<!-- Glow effects -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Robot eye glow -->
<filter id="eyeGlow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur stdDeviation="1" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<rect x="0" y="0" width="300" height="300" fill="url(#rainPattern)" opacity="0.7" />
<!-- Ground/grass -->
<ellipse cx="150" cy="285" rx="150" ry="25" fill="#1b5e20" />
<!-- Puddles -->
<ellipse cx="50" cy="285" rx="30" ry="8" fill="#1e3a8a" opacity="0.4" />
<ellipse cx="250" cy="285" rx="35" ry="7" fill="#1e3a8a" opacity="0.4" />
<ellipse cx="150" cy="290" rx="50" ry="10" fill="#1e3a8a" opacity="0.3" />
<!-- Rain drops around the mushroom -->
<g id="rain">
<!-- Left side rain -->
<line x1="30" y1="50" x2="20" y2="80" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="40" y1="40" x2="30" y2="70" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="50" y1="30" x2="40" y2="60" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
<line x1="20" y1="60" x2="10" y2="90" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="60" y1="35" x2="50" y2="65" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="10" y1="100" x2="0" y2="130" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="15" y1="140" x2="5" y2="170" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
<line x1="25" y1="150" x2="15" y2="180" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="35" y1="160" x2="25" y2="190" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="45" y1="155" x2="35" y2="185" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
<!-- Right side rain -->
<line x1="250" y1="50" x2="260" y2="80" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="260" y1="40" x2="270" y2="70" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="270" y1="30" x2="280" y2="60" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
<line x1="240" y1="60" x2="250" y2="90" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="280" y1="35" x2="290" y2="65" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="265" y1="100" x2="275" y2="130" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="255" y1="140" x2="265" y2="170" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
<line x1="275" y1="150" x2="285" y2="180" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.8" />
<line x1="245" y1="160" x2="255" y2="190" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.7" />
<line x1="265" y1="155" x2="275" y2="185" stroke="#a3c9ff" stroke-width="1.5" stroke-opacity="0.9" />
</g>
<!-- Giant mushroom -->
<g id="mushroom">
<!-- Mushroom stem -->
<path d="M130,180 C130,180 120,120 150,120 C180,120 170,180 170,180 L170,240 L130,240 Z" fill="url(#mushroomStemGradient)" />
<!-- Mushroom cap -->
<ellipse cx="150" cy="120" rx="100" ry="50" fill="url(#mushroomCapGradient)" />
<!-- Mushroom spots -->
<circle cx="120" cy="110" r="8" fill="white" opacity="0.8" />
<circle cx="170" cy="105" r="10" fill="white" opacity="0.8" />
<circle cx="140" cy="100" r="6" fill="white" opacity="0.8" />
<circle cx="190" cy="120" r="7" fill="white" opacity="0.8" />
<circle cx="110" cy="130" r="9" fill="white" opacity="0.8" />
<circle cx="150" cy="110" r="5" fill="white" opacity="0.8" />
</g>
<!-- Lighting effect under mushroom -->
<ellipse cx="150" cy="200" rx="80" ry="20" fill="#64b5f6" opacity="0.15" filter="url(#glow)" />
<!-- Chess board -->
<g id="chessboard" transform="translate(115, 210) scale(0.7) rotate(-5)">
<rect x="0" y="0" width="100" height="100" fill="url(#boardGradient)" stroke="#4e342e" stroke-width="4" />
<!-- Chess squares -->
<g id="squares">
<!-- Row 1 -->
<rect x="0" y="0" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="12.5" y="0" width="12.5" height="12.5" fill="#5D4037" />
<rect x="25" y="0" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="37.5" y="0" width="12.5" height="12.5" fill="#5D4037" />
<rect x="50" y="0" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="62.5" y="0" width="12.5" height="12.5" fill="#5D4037" />
<rect x="75" y="0" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="87.5" y="0" width="12.5" height="12.5" fill="#5D4037" />
<!-- Row 2 -->
<rect x="0" y="12.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="12.5" y="12.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="25" y="12.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="37.5" y="12.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="50" y="12.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="62.5" y="12.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="75" y="12.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="87.5" y="12.5" width="12.5" height="12.5" fill="antiquewhite" />
<!-- Row 3-8 -->
<rect x="0" y="25" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="12.5" y="25" width="12.5" height="12.5" fill="#5D4037" />
<rect x="25" y="25" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="37.5" y="25" width="12.5" height="12.5" fill="#5D4037" />
<rect x="50" y="25" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="62.5" y="25" width="12.5" height="12.5" fill="#5D4037" />
<rect x="75" y="25" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="87.5" y="25" width="12.5" height="12.5" fill="#5D4037" />
<rect x="0" y="37.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="12.5" y="37.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="25" y="37.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="37.5" y="37.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="50" y="37.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="62.5" y="37.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="75" y="37.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="87.5" y="37.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="0" y="50" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="12.5" y="50" width="12.5" height="12.5" fill="#5D4037" />
<rect x="25" y="50" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="37.5" y="50" width="12.5" height="12.5" fill="#5D4037" />
<rect x="50" y="50" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="62.5" y="50" width="12.5" height="12.5" fill="#5D4037" />
<rect x="75" y="50" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="87.5" y="50" width="12.5" height="12.5" fill="#5D4037" />
<rect x="0" y="62.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="12.5" y="62.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="25" y="62.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="37.5" y="62.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="50" y="62.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="62.5" y="62.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="75" y="62.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="87.5" y="62.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="0" y="75" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="12.5" y="75" width="12.5" height="12.5" fill="#5D4037" />
<rect x="25" y="75" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="37.5" y="75" width="12.5" height="12.5" fill="#5D4037" />
<rect x="50" y="75" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="62.5" y="75" width="12.5" height="12.5" fill="#5D4037" />
<rect x="75" y="75" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="87.5" y="75" width="12.5" height="12.5" fill="#5D4037" />
<rect x="0" y="87.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="12.5" y="87.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="25" y="87.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="37.5" y="87.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="50" y="87.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="62.5" y="87.5" width="12.5" height="12.5" fill="antiquewhite" />
<rect x="75" y="87.5" width="12.5" height="12.5" fill="#5D4037" />
<rect x="87.5" y="87.5" width="12.5" height="12.5" fill="antiquewhite" />
</g>
<!-- Chess pieces -->
<g id="pieces">
<!-- White pieces -->
<circle cx="12.5" cy="87.5" r="4" fill="white" stroke="#ccc" stroke-width="0.5" />
<circle cx="37.5" cy="87.5" r="4" fill="white" stroke="#ccc" stroke-width="0.5" />
<path d="M50,88 L53,82 L47,82 Z" fill="white" stroke="#ccc" stroke-width="0.5" />
<path d="M75,88 L78,82 L75,82 L75,80 L75,82 L72,82 Z" fill="white" stroke="#ccc" stroke-width="0.5" />
<!-- Black pieces -->
<circle cx="12.5" cy="12.5" r="4" fill="#333" stroke="#111" stroke-width="0.5" />
<circle cx="37.5" cy="12.5" r="4" fill="#333" stroke="#111" stroke-width="0.5" />
<circle cx="62.5" cy="37.5" r="4" fill="#333" stroke="#111" stroke-width="0.5" />
<path d="M25,13 L28,7 L22,7 Z" fill="#333" stroke="#111" stroke-width="0.5" />
<path d="M87.5,13 L90.5,7 L87.5,7 L87.5,5 L87.5,7 L84.5,7 Z" fill="#333" stroke="#111" stroke-width="0.5" />
</g>
</g>
<!-- Robot 1 (Blue) -->
<g id="robot1" transform="translate(70, 200) scale(0.8)">
<!-- Body -->
<rect x="0" y="10" width="30" height="40" rx="3" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<!-- Head -->
<rect x="5" y="0" width="20" height="15" rx="2" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<!-- Eyes -->
<circle cx="12" cy="7" r="2" fill="#e1f5fe" />
<circle cx="18" cy="7" r="2" fill="#e1f5fe" />
<circle cx="12" cy="7" r="1" fill="#29b6f6" filter="url(#eyeGlow)" />
<circle cx="18" cy="7" r="1" fill="#29b6f6" filter="url(#eyeGlow)" />
<!-- Mouth/Grille -->
<rect x="10" y="12" width="10" height="1" fill="#e1f5fe" />
<!-- Arms -->
<rect x="-5" y="15" width="10" height="5" rx="2" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<rect x="25" y="25" width="10" height="5" rx="2" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<!-- Legs -->
<rect x="5" y="50" width="8" height="10" rx="2" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<rect x="17" y="50" width="8" height="10" rx="2" fill="url(#robot1Gradient)" stroke="#0277bd" stroke-width="1" />
<!-- Details -->
<circle cx="15" cy="25" r="3" fill="#e1f5fe" stroke="#29b6f6" stroke-width="0.5" />
<circle cx="15" cy="35" r="3" fill="#e1f5fe" stroke="#29b6f6" stroke-width="0.5" />
<rect x="10" y="45" width="10" height="2" fill="#e1f5fe" />
</g>
<!-- Light beam from Robot 1's eyes -->
<path d="M82,207 L100,220 L80,223 Z" fill="#29b6f6" opacity="0.2" filter="url(#glow)" />
<path d="M88,207 L110,215 L90,223 Z" fill="#29b6f6" opacity="0.2" filter="url(#glow)" />
<!-- Robot 2 (Green) -->
<g id="robot2" transform="translate(200, 200) scale(0.8)">
<!-- Body - more angular than Robot 1 -->
<path d="M0,15 L30,10 L25,50 L5,45 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<!-- Head -->
<path d="M5,0 L25,0 L30,10 L0,15 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<!-- Eyes -->
<rect x="10" y="5" width="4" height="2" fill="#c8e6c9" />
<rect x="18" y="4" width="4" height="2" fill="#c8e6c9" />
<rect x="11" y="5.5" width="2" height="1" fill="#66bb6a" filter="url(#eyeGlow)" />
<rect x="19" y="4.5" width="2" height="1" fill="#66bb6a" filter="url(#eyeGlow)" />
<!-- Mouth/Grille -->
<path d="M10,10 L20,9 L19,12 L11,13 Z" fill="#c8e6c9" />
<!-- Arms -->
<path d="M0,15 L-10,25 L-8,30 L0,25 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<path d="M30,10 L40,15 L38,20 L28,15 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<!-- Legs -->
<path d="M5,45 L0,60 L8,60 L10,45 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<path d="M20,45 L25,60 L17,60 L15,47 Z" fill="url(#robot2Gradient)" stroke="#2e7d32" stroke-width="1" />
<!-- Details -->
<circle cx="15" cy="25" r="3" fill="#c8e6c9" stroke="#66bb6a" stroke-width="0.5" />
<line x1="10" y1="35" x2="20" y2="33" stroke="#c8e6c9" stroke-width="2" />
</g>
<!-- Light beam from Robot 2's eyes -->
<path d="M208,204 L190,220 L210,223 Z" fill="#66bb6a" opacity="0.2" filter="url(#glow)" />
<path d="M216,203 L200,215 L220,219 Z" fill="#66bb6a" opacity="0.2" filter="url(#glow)" />
<!-- Foreground rain for depth -->
<g id="foreground-rain" opacity="0.9">
<line x1="120" y1="50" x2="130" y2="80" stroke="#a3c9ff" stroke-width="2" />
<line x1="170" y1="40" x2="180" y2="70" stroke="#a3c9ff" stroke-width="2" />
<line x1="100" y1="80" x2="110" y2="110" stroke="#a3c9ff" stroke-width="2" />
<line x1="190" y1="90" x2="200" y2="120" stroke="#a3c9ff" stroke-width="2" />
<line x1="80" y1="120" x2="90" y2="150" stroke="#a3c9ff" stroke-width="2" />
<line x1="210" y1="130" x2="220" y2="160" stroke="#a3c9ff" stroke-width="2" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2c3e50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#465869;stop-opacity:1" />
</linearGradient>
<radialGradient id="mushroomCapGradient" cx="50%" cy="40%" r="60%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#e74c3c;stop-opacity:1" /> <!-- Bright red -->
<stop offset="80%" style="stop-color:#c0392b;stop-opacity:1" /> <!-- Darker red -->
<stop offset="100%" style="stop-color:#a03020;stop-opacity:1" /> <!-- Deepest red for edge -->
</radialGradient>
<linearGradient id="mushroomStemGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f0e6d2;stop-opacity:1" /> <!-- Creamy beige -->
<stop offset="100%" style="stop-color:#c8bda8;stop-opacity:1" /> <!-- Shadowed beige -->
</linearGradient>
<linearGradient id="robot1Gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#7f8c8d;stop-opacity:1" /> <!-- Medium Grey -->
<stop offset="100%" style="stop-color:#34495e;stop-opacity:1" /> <!-- Dark Blue-Grey -->
</linearGradient>
<linearGradient id="robot2Gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#bdc3c7;stop-opacity:1" /> <!-- Light Silver -->
<stop offset="100%" style="stop-color:#7f8c8d;stop-opacity:1" /> <!-- Medium Grey -->
</linearGradient>
<pattern id="chessPattern" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="5" height="5" fill="#ecf0f1"/> <!-- Light square -->
<rect x="5" width="5" height="5" fill="#3A3A3A"/> <!-- Dark square -->
<rect y="5" width="5" height="5" fill="#3A3A3A"/>
<rect x="5" y="5" width="5" height="5" fill="#ecf0f1"/>
</pattern>
<symbol id="raindrop" viewBox="0 0 8 20">
<path d="M4 0 Q0 8 4 20 Q8 8 4 0 Z" fill="rgba(173,216,230,0.6)"/>
</symbol>
<symbol id="pawnPiece" viewBox="-3 -12 6 12"> <!-- H=12, W=6 -->
<path d="M0 0 A2.5 2.5 0 0 1 0 -5 L0 -8 A1.2 1.2 0 1 1 0 -10.4 A1.2 1.2 0 1 1 0 -8 Z" stroke-width="0.4" stroke="#101010"/>
</symbol>
<symbol id="kingPiece" viewBox="-3.5 -17 7 17"> <!-- H=17, W=7 -->
<path d="M0 0 A3 3 0 0 1 0 -6 L0 -12 A1.5 1.5 0 1 1 0 -15 A1.5 1.5 0 1 1 0 -12 M-1.5 -15 L1.5 -15 M0 -14 L0 -17 M-1 -16.5 L1 -16.5" stroke-width="0.4" stroke="#101010"/>
</symbol>
<symbol id="queenPiece" viewBox="-3.5 -16 7 16"> <!-- H=16, W=7 -->
<path d="M0 0 A3 3 0 0 1 0 -6 L0 -11 A2.5 2.5 0 1 1 0 -16 A2.5 2.5 0 1 1 0 -11 Z M-2 -13.5 A0.8 0.8 0 1 1 -2 -13.6 M0 -14.5 A0.8 0.8 0 1 1 0 -14.6 M2 -13.5 A0.8 0.8 0 1 1 2 -13.6" stroke-width="0.4" stroke="#101010"/>
</symbol>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<path d="M0 230 Q80 210 150 225 T300 230 L300 300 L0 300 Z" fill="#4A5D23" /> <!-- Ground far -->
<path d="M0 240 Q100 230 150 245 T300 240 L300 300 L0 300 Z" fill="#556B2F" opacity="0.8"/> <!-- Ground near -->
<!-- Puddles -->
<ellipse cx="70" cy="245" rx="30" ry="6" fill="rgba(70,88,105,0.5)" transform="rotate(-10 70 245)"/>
<ellipse cx="220" cy="250" rx="25" ry="5" fill="rgba(70,88,105,0.4)" transform="rotate(5 220 250)"/>
<!-- Mushroom -->
<g id="mushroom">
<rect x="130" y="100" width="40" height="150" fill="url(#mushroomStemGradient)" rx="10" ry="10" />
<path d="M136 110 V 240 M142 105 V 245 M150 105 V 245 M158 110 V 240" stroke="#B0A890" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
<path d="M35 155 Q150 185 265 155" stroke="#a03020" stroke-width="12" fill="none" opacity="0.7"/> <!-- cap under-rim shadow -->
<ellipse cx="150" cy="100" rx="120" ry="70" fill="url(#mushroomCapGradient)" />
<circle cx="100" cy="80" r="12" fill="#fdf5e6" opacity="0.9"/>
<circle cx="150" cy="60" r="15" fill="#fdf5e6" opacity="0.9"/>
<circle cx="200" cy="85" r="10" fill="#fdf5e6" opacity="0.9"/>
<circle cx="70" cy="110" r="9" fill="#fdf5e6" opacity="0.9"/>
<circle cx="230" cy="115" r="10" fill="#fdf5e6" opacity="0.9"/>
<circle cx="120" cy="125" r="7" fill="#fdf5e6" opacity="0.9"/>
<circle cx="180" cy="128" r="8" fill="#fdf5e6" opacity="0.9"/>
</g>
<!-- Rain splashes on mushroom cap (static) -->
<g id="mushroomSplashes">
<circle cx="150" cy="38" r="2.5" fill="none" stroke="rgba(190,220,240,0.5)" stroke-width="1" opacity="0.7"/>
<circle cx="100" cy="48" r="2" fill="none" stroke="rgba(190,220,240,0.5)" stroke-width="0.8" opacity="0.6"/>
<circle cx="200" cy="50" r="2.2" fill="none" stroke="rgba(190,220,240,0.5)" stroke-width="1" opacity="0.65"/>
<circle cx="75" cy="70" r="1.5" fill="none" stroke="rgba(190,220,240,0.4)" stroke-width="0.5" opacity="0.5"/>
<circle cx="225" cy="75" r="1.8" fill="none" stroke="rgba(190,220,240,0.4)" stroke-width="0.5" opacity="0.5"/>
</g>
<!-- Chessboard Base (under robots) -->
<rect x="110" y="215" width="80" height="45" fill="#7A5230" rx="3" ry="3" transform="skewX(-10) rotate(-5 150 230)" />
<!-- Robot 1 (Left) -->
<g id="robot1" transform="translate(75 200) scale(0.8)">
<rect x="0" y="0" width="40" height="55" fill="url(#robot1Gradient)" rx="5" /> <!-- Body -->
<rect x="5" y="-25" width="30" height="25" fill="url(#robot1Gradient)" rx="3" /> <!-- Head -->
<circle cx="28" cy="-13" r="5" fill="#f1c40f" /> <!-- Eye -->
<circle cx="28" cy="-13" r="2" fill="#2c3e50" /> <!-- Pupil -->
<rect x="10" y="-5" width="20" height="3" fill="#566573" /> <!-- Mouth slit detail -->
<!-- Right Arm (reaching) -->
<g transform="translate(40 12) rotate(10)">
<rect x="0" y="0" width="28" height="10" fill="#566573" rx="3"/>
<g transform="translate(25 0) rotate(45)">
<rect x="0" y="0" width="22" height="8" fill="#415052" rx="2"/>
<circle cx="25" cy="4" r="5" fill="#2c3e50"/> <!-- Hand -->
</g>
</g>
</g>
<!-- Robot 2 (Right) -->
<g id="robot2" transform="translate(175 202) scale(0.78)">
<path d="M0 20 Q0 0 20 0 Q40 0 40 20 L35 50 Q20 58 5 50 Z" fill="url(#robot2Gradient)" /> <!-- Body -->
<ellipse cx="20" cy="-15" rx="12" ry="10" fill="url(#robot2Gradient)" /> <!-- Head -->
<rect x="10" y="-18" width="20" height="7" fill="#3498db" rx="2"/> <!-- Visor -->
<path d="M12 -8 L18 -8" stroke="#2980b9" stroke-width="1"/> <!-- Visor line -->
<!-- Left Arm (reaching) -->
<g transform="translate(2 18) rotate(-10)">
<rect x="-28" y="0" width="28" height="9" fill="#95a5a6" rx="3"/>
<g transform="translate(-25 0) rotate(-45)">
<rect x="-22" y="0" width="22" height="7" fill="#7f8c8d" rx="2"/>
<ellipse cx="-25" cy="3.5" rx="5" ry="4" fill="#34495e"/> <!-- Claw/Hand -->
</g>
</g>
</g>
<!-- Chess Set -->
<g id="chessSet" transform="skewX(-10) rotate(-5 150 225)"> <!-- Adjusted Y in rotate center -->
<rect x="115" y="205" width="70" height="30" fill="url(#chessPattern)" stroke="#4A3B31" stroke-width="1.5"/>
<use href="#kingPiece" fill="#2c3e50" transform="translate(128 218) scale(0.8)"/>
<use href="#pawnPiece" fill="#2c3e50" transform="translate(138 222) scale(0.7)"/>
<use href="#queenPiece" fill="#ecf0f1" transform="translate(167 218) scale(0.8)"/>
<use href="#pawnPiece" fill="#ecf0f1" transform="translate(157 222) scale(0.7)"/>
</g>
<!-- Rain -->
<g id="rainEffect" transform="rotate(8 150 150)">
<!-- Raindrops using symbol -->
<use href="#raindrop" x="10" y="40"/> <use href="#raindrop" x="20" y="100"/> <use href="#raindrop" x="15" y="180"/> <use href="#raindrop" x="5" y="250"/>
<use href="#raindrop" x="35" y="60"/> <use href="#raindrop" x="45" y="140"/> <use href="#raindrop" x="40" y="220"/>
<use href="#raindrop" x="60" y="170" opacity="0.4"/> <use href="#raindrop" x="70" y="80" opacity="0.6"/>
<use href="#raindrop" x="230" y="175" opacity="0.4"/> <use href="#raindrop" x="240" y="90" opacity="0.6"/>
<use href="#raindrop" x="275" y="50"/> <use href="#raindrop" x="285" y="120"/> <use href="#raindrop" x="280" y="200"/> <use href="#raindrop" x="290" y="260"/>
<use href="#raindrop" x="290" y="20"/> <use href="#raindrop" x="150" y="280" opacity="0.3"/> <!-- foreground drop -->
<use href="#raindrop" x="50" y="20"/> <use href="#raindrop" x="250" y="30"/>
<!-- Rain Streaks (static) -->
<line x1="25" y1="10" x2="20" y2="50" stroke="rgba(173,216,230,0.4)" stroke-width="1"/>
<line x1="45" y1="70" x2="40" y2="110" stroke="rgba(173,216,230,0.35)" stroke-width="0.8"/>
<line x1="15" y1="130" x2="10" y2="170" stroke="rgba(173,216,230,0.4)" stroke-width="1"/>
<line x1="280" y1="30" x2="275" y2="70" stroke="rgba(173,216,230,0.4)" stroke-width="1"/>
<line x1="260" y1="100" x2="255" y2="140" stroke="rgba(173,216,230,0.35)" stroke-width="0.8"/>
<line x1="285" y1="160" x2="280" y2="200" stroke="rgba(173,216,230,0.4)" stroke-width="1"/>
<line x1="80" y1="10" x2="70" y2="80" stroke="rgba(173,216,230,0.3)" stroke-width="1.2" opacity="0.5"/>
<line x1="220" y1="50" x2="210" y2="120" stroke="rgba(173,216,230,0.3)" stroke-width="1.2" opacity="0.5"/>
<line x1="120" y1="200" x2="115" y2="240" stroke="rgba(173,216,230,0.4)" stroke-width="1" opacity="0.3"/>
<line x1="180" y1="220" x2="175" y2="260" stroke="rgba(173,216,230,0.4)" stroke-width="1" opacity="0.3"/>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's submission better adheres to the prompt, clearly depicting two robots playing chess under a giant mushroom in the rain.
The composition is straightforward, the rain is well-rendered, and the robots are distinctly visible.
Player 2's submission, while creative, lacks clarity in showing two robots playing chess, and the visual elements are less cohesive.
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
Total Shapes
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
Player 1
150
Player 2
—
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
79
Player 2
—
Circles
The number of circle elements (circle) in the SVG.
Player 1
18
Player 2
—
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
6
Player 2
—
Lines
The number of line elements (line) in the SVG.
Player 1
31
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
16
Player 2
—
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
—
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
—
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
2
Player 2
—
Masks
The number of mask definitions (mask) in the SVG.
Player 1
—
Player 2
—
Clip Paths
The number of clipping path definitions (clipPath) in the SVG.
Player 1
—
Player 2
—
Elements with Opacity
The number of elements with opacity attributes in the SVG.
Player 1
16
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
56
Player 2
—
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
27
Player 2
—
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
3
Player 2
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
79
Player 2
—
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
9
Player 2
—
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
—
Text Metrics
Text Elements
The number of text elements (text) in the SVG.
Player 1
—
Player 2
—
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
Match #2724
May 09, 2025
"Whimsical treehouse atop a giant snail in a glowing mushroom forest."
P1
P2
Match #2635
May 09, 2025
"A cactus wearing a bowtie in the middle of a snowy desert."
P1
P2
Match #2555
May 09, 2025
"A single tree on a tiny floating island under a surreal, colorful nebula-filled sky."
P1
P2
Match #2254
May 09, 2025
"Flying fish leaping over a crescent moon at sunset."
P1
P2
