GPT-4o
Challenge Creator
Creative Challenge
"A giraffe in a spacesuit playing chess with a floating jellyfish"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Space background gradient -->
<linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0B0B3B" />
<stop offset="50%" stop-color="#180B3B" />
<stop offset="100%" stop-color="#300B3B" />
</linearGradient>
<!-- Giraffe gradient -->
<linearGradient id="giraffeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F5DEB3" />
<stop offset="100%" stop-color="#D2B48C" />
</linearGradient>
<!-- Giraffe spots pattern -->
<pattern id="giraffeSpots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill="#8B4513" />
</pattern>
<!-- Spacesuit gradient -->
<linearGradient id="spacesuitGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#D3D3D3" />
</linearGradient>
<!-- Jellyfish gradient -->
<radialGradient id="jellyfishGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FF88FF" stop-opacity="0.9" />
<stop offset="80%" stop-color="#AA00AA" stop-opacity="0.7" />
<stop offset="100%" stop-color="#800080" stop-opacity="0.5" />
</radialGradient>
<!-- Jellyfish tentacles gradient -->
<linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FF88FF" />
<stop offset="100%" stop-color="#800080" />
</linearGradient>
<!-- Chess board gradient -->
<linearGradient id="boardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#8B4513" />
<stop offset="100%" stop-color="#A0522D" />
</linearGradient>
</defs>
<!-- Space background with stars -->
<rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)" />
<!-- Light beams -->
<g id="lightBeams" opacity="0.15">
<polygon points="50,0 30,300 70,300" fill="white" />
<polygon points="150,0 120,300 180,300" fill="white" />
<polygon points="250,0 220,300 280,300" fill="white" />
</g>
<!-- Stars in the background -->
<g id="stars">
<circle cx="30" cy="20" r="1" fill="white" />
<circle cx="50" cy="40" r="0.8" fill="white" />
<circle cx="70" cy="15" r="1.2" fill="white" />
<circle cx="90" cy="30" r="0.6" fill="white" />
<circle cx="120" cy="10" r="1.5" fill="white" />
<circle cx="150" cy="25" r="0.7" fill="white" />
<circle cx="180" cy="15" r="1" fill="white" />
<circle cx="200" cy="40" r="0.9" fill="white" />
<circle cx="220" cy="20" r="1.3" fill="white" />
<circle cx="250" cy="35" r="0.8" fill="white" />
<circle cx="270" cy="25" r="1.1" fill="white" />
<circle cx="25" cy="60" r="1" fill="white" />
<circle cx="45" cy="80" r="0.7" fill="white" />
<circle cx="65" cy="100" r="1.2" fill="white" />
<circle cx="85" cy="65" r="0.6" fill="white" />
<circle cx="105" cy="85" r="1.4" fill="white" />
<circle cx="125" cy="70" r="0.8" fill="white" />
<circle cx="145" cy="90" r="1" fill="white" />
<circle cx="165" cy="75" r="0.7" fill="white" />
<circle cx="185" cy="95" r="1.3" fill="white" />
<circle cx="205" cy="80" r="0.9" fill="white" />
<circle cx="225" cy="100" r="1.1" fill="white" />
<circle cx="245" cy="70" r="0.8" fill="white" />
<circle cx="265" cy="90" r="1.2" fill="white" />
<circle cx="285" cy="75" r="0.7" fill="white" />
<!-- More stars -->
<circle cx="10" cy="120" r="1" fill="white" />
<circle cx="30" cy="140" r="0.8" fill="white" />
<circle cx="50" cy="160" r="1.2" fill="white" />
<circle cx="70" cy="120" r="0.6" fill="white" />
<circle cx="90" cy="140" r="1.4" fill="white" />
<circle cx="110" cy="160" r="0.8" fill="white" />
<circle cx="130" cy="120" r="1" fill="white" />
<circle cx="150" cy="140" r="0.7" fill="white" />
<circle cx="170" cy="160" r="1.3" fill="white" />
<circle cx="190" cy="120" r="0.9" fill="white" />
<circle cx="210" cy="140" r="1.1" fill="white" />
<circle cx="230" cy="160" r="0.8" fill="white" />
<circle cx="250" cy="120" r="1.2" fill="white" />
<circle cx="270" cy="140" r="0.7" fill="white" />
<circle cx="290" cy="160" r="1" fill="white" />
<!-- Twinkling stars -->
<circle cx="15" cy="200" r="1.5" fill="white">
<animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="45" cy="220" r="1.2" fill="white">
<animate attributeName="opacity" values="1;0.5;1" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="75" cy="240" r="1.3" fill="white">
<animate attributeName="opacity" values="1;0.4;1" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="105" cy="200" r="1.1" fill="white">
<animate attributeName="opacity" values="1;0.6;1" dur="3.5s" repeatCount="indefinite" />
</circle>
<circle cx="135" cy="220" r="1.4" fill="white">
<animate attributeName="opacity" values="1;0.3;1" dur="2.8s" repeatCount="indefinite" />
</circle>
<circle cx="165" cy="240" r="1" fill="white">
<animate attributeName="opacity" values="1;0.5;1" dur="3.2s" repeatCount="indefinite" />
</circle>
<circle cx="195" cy="200" r="1.3" fill="white">
<animate attributeName="opacity" values="1;0.4;1" dur="4.2s" repeatCount="indefinite" />
</circle>
<circle cx="225" cy="220" r="1.2" fill="white">
<animate attributeName="opacity" values="1;0.6;1" dur="3.7s" repeatCount="indefinite" />
</circle>
<circle cx="255" cy="240" r="1.5" fill="white">
<animate attributeName="opacity" values="1;0.3;1" dur="2.6s" repeatCount="indefinite" />
</circle>
<circle cx="285" cy="200" r="1.1" fill="white">
<animate attributeName="opacity" values="1;0.5;1" dur="3.3s" repeatCount="indefinite" />
</circle>
</g>
<!-- A distant planet -->
<circle cx="250" cy="50" r="15" fill="#708090">
<animate attributeName="r" values="15;15.5;15" dur="10s" repeatCount="indefinite" />
</circle>
<ellipse cx="250" cy="50" rx="15" ry="3" fill="none" stroke="#A9A9A9" stroke-width="0.5" />
<!-- Bubbles -->
<g id="bubbles">
<circle cx="50" cy="110" r="3" fill="rgba(255, 255, 255, 0.3)" stroke="rgba(255, 255, 255, 0.5)" stroke-width="0.5">
<animate attributeName="cy" values="110;90;70;50;30;10;-10" dur="15s" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="200" r="2" fill="rgba(255, 255, 255, 0.3)" stroke="rgba(255, 255, 255, 0.5)" stroke-width="0.5">
<animate attributeName="cy" values="200;180;160;140;120;100;80;60;40;20;0;-20" dur="12s" repeatCount="indefinite" />
</circle>
<circle cx="170" cy="230" r="4" fill="rgba(255, 255, 255, 0.3)" stroke="rgba(255, 255, 255, 0.5)" stroke-width="0.5">
<animate attributeName="cy" values="230;210;190;170;150;130;110;90;70;50;30;10;-10" dur="20s" repeatCount="indefinite" />
</circle>
<circle cx="210" cy="190" r="2.5" fill="rgba(255, 255, 255, 0.3)" stroke="rgba(255, 255, 255, 0.5)" stroke-width="0.5">
<animate attributeName="cy" values="190;170;150;130;110;90;70;50;30;10;-10" dur="17s" repeatCount="indefinite" />
</circle>
<circle cx="100" cy="220" r="3.5" fill="rgba(255, 255, 255, 0.3)" stroke="rgba(255, 255, 255, 0.5)" stroke-width="0.5">
<animate attributeName="cy" values="220;200;180;160;140;120;100;80;60;40;20;0;-20" dur="14s" repeatCount="indefinite" />
</circle>
</g>
<!-- Chess board floating in space -->
<g id="chessBoard" transform="translate(115, 175) rotate(-10)">
<!-- Board base -->
<rect x="-35" y="-35" width="70" height="70" rx="3" ry="3" fill="url(#boardGradient)" />
<!-- Chess squares -->
<g id="squares">
<rect x="-32" y="-32" width="8" height="8" fill="white" />
<rect x="-24" y="-32" width="8" height="8" fill="black" />
<rect x="-16" y="-32" width="8" height="8" fill="white" />
<rect x="-8" y="-32" width="8" height="8" fill="black" />
<rect x="0" y="-32" width="8" height="8" fill="white" />
<rect x="8" y="-32" width="8" height="8" fill="black" />
<rect x="16" y="-32" width="8" height="8" fill="white" />
<rect x="24" y="-32" width="8" height="8" fill="black" />
<rect x="-32" y="-24" width="8" height="8" fill="black" />
<rect x="-24" y="-24" width="8" height="8" fill="white" />
<rect x="-16" y="-24" width="8" height="8" fill="black" />
<rect x="-8" y="-24" width="8" height="8" fill="white" />
<rect x="0" y="-24" width="8" height="8" fill="black" />
<rect x="8" y="-24" width="8" height="8" fill="white" />
<rect x="16" y="-24" width="8" height="8" fill="black" />
<rect x="24" y="-24" width="8" height="8" fill="white" />
<rect x="-32" y="-16" width="8" height="8" fill="white" />
<rect x="-24" y="-16" width="8" height="8" fill="black" />
<rect x="-16" y="-16" width="8" height="8" fill="white" />
<rect x="-8" y="-16" width="8" height="8" fill="black" />
<rect x="0" y="-16" width="8" height="8" fill="white" />
<rect x="8" y="-16" width="8" height="8" fill="black" />
<rect x="16" y="-16" width="8" height="8" fill="white" />
<rect x="24" y="-16" width="8" height="8" fill="black" />
<rect x="-32" y="-8" width="8" height="8" fill="black" />
<rect x="-24" y="-8" width="8" height="8" fill="white" />
<rect x="-16" y="-8" width="8" height="8" fill="black" />
<rect x="-8" y="-8" width="8" height="8" fill="white" />
<rect x="0" y="-8" width="8" height="8" fill="black" />
<rect x="8" y="-8" width="8" height="8" fill="white" />
<rect x="16" y="-8" width="8" height="8" fill="black" />
<rect x="24" y="-8" width="8" height="8" fill="white" />
<rect x="-32" y="0" width="8" height="8" fill="white" />
<rect x="-24" y="0" width="8" height="8" fill="black" />
<rect x="-16" y="0" width="8" height="8" fill="white" />
<rect x="-8" y="0" width="8" height="8" fill="black" />
<rect x="0" y="0" width="8" height="8" fill="white" />
<rect x="8" y="0" width="8" height="8" fill="black" />
<rect x="16" y="0" width="8" height="8" fill="white" />
<rect x="24" y="0" width="8" height="8" fill="black" />
<rect x="-32" y="8" width="8" height="8" fill="black" />
<rect x="-24" y="8" width="8" height="8" fill="white" />
<rect x="-16" y="8" width="8" height="8" fill="black" />
<rect x="-8" y="8" width="8" height="8" fill="white" />
<rect x="0" y="8" width="8" height="8" fill="black" />
<rect x="8" y="8" width="8" height="8" fill="white" />
<rect x="16" y="8" width="8" height="8" fill="black" />
<rect x="24" y="8" width="8" height="8" fill="white" />
<rect x="-32" y="16" width="8" height="8" fill="white" />
<rect x="-24" y="16" width="8" height="8" fill="black" />
<rect x="-16" y="16" width="8" height="8" fill="white" />
<rect x="-8" y="16" width="8" height="8" fill="black" />
<rect x="0" y="16" width="8" height="8" fill="white" />
<rect x="8" y="16" width="8" height="8" fill="black" />
<rect x="16" y="16" width="8" height="8" fill="white" />
<rect x="24" y="16" width="8" height="8" fill="black" />
<rect x="-32" y="24" width="8" height="8" fill="black" />
<rect x="-24" y="24" width="8" height="8" fill="white" />
<rect x="-16" y="24" width="8" height="8" fill="black" />
<rect x="-8" y="24" width="8" height="8" fill="white" />
<rect x="0" y="24" width="8" height="8" fill="black" />
<rect x="8" y="24" width="8" height="8" fill="white" />
<rect x="16" y="24" width="8" height="8" fill="black" />
<rect x="24" y="24" width="8" height="8" fill="white" />
</g>
<!-- Chess pieces -->
<!-- White pieces (simplified) -->
<circle cx="-28" cy="20" r="3.5" fill="white" stroke="#ccc" stroke-width="0.5" />
<circle cx="-12" cy="4" r="3.5" fill="white" stroke="#ccc" stroke-width="0.5" />
<path d="M 4,12 L 7,15 L 1,15 Z" fill="white" stroke="#ccc" stroke-width="0.5" />
<!-- Black pieces (simplified) -->
<circle cx="20" cy="-28" r="3.5" fill="black" stroke="#333" stroke-width="0.5" />
<circle cx="4" cy="-12" r="3.5" fill="black" stroke="#333" stroke-width="0.5" />
<path d="M 12,-4 L 15,-1 L 9,-1 Z" fill="black" stroke="#333" stroke-width="0.5" />
</g>
<!-- Giraffe in spacesuit on the left -->
<g id="giraffe" transform="translate(65, 170) scale(0.8)">
<!-- Spacesuit body -->
<ellipse cx="0" cy="30" rx="25" ry="30" fill="url(#spacesuitGradient)" stroke="#A9A9A9" stroke-width="1.5" />
<!-- Spacesuit helmet -->
<circle cx="0" cy="-35" r="20" fill="url(#spacesuitGradient)" stroke="#A9A9A9" stroke-width="1.5" />
<circle cx="0" cy="-35" r="15" fill="rgba(200, 230, 255, 0.5)" stroke="#A9A9A9" stroke-width="0.5" />
<!-- Giraffe face inside helmet -->
<path d="M 0,-45 L 5,-35 L -5,-35 Z" fill="url(#giraffeGradient)" />
<ellipse cx="0" cy="-35" rx="10" ry="7" fill="url(#giraffeGradient)" />
<circle cx="-4" cy="-36" r="1.5" fill="black" />
<circle cx="4" cy="-36" r="1.5" fill="black" />
<path d="M -3,-30 Q 0,-28 3,-30" fill="none" stroke="black" stroke-width="0.8" />
<!-- Giraffe neck -->
<path d="M 0,-15 Q 10,-40 0,-55 Q -5,-70 0,-80" fill="url(#giraffeGradient)" stroke="#A9A9A9" stroke-width="1" />
<path d="M 0,-15 Q 10,-40 0,-55 Q -5,-70 0,-80" fill="url(#giraffeSpots)" fill-opacity="0.3" />
<!-- Spacesuit details -->
<rect x="-15" y="20" width="30" height="10" rx="5" ry="5" fill="#888" stroke="#666" stroke-width="0.5" />
<circle cx="-12" cy="25" r="3" fill="#444" stroke="#222" stroke-width="0.5" />
<circle cx="-5" cy="25" r="3" fill="red" stroke="#990000" stroke-width="0.5" />
<circle cx="2" cy="25" r="3" fill="green" stroke="#006600" stroke-width="0.5" />
<circle cx="9" cy="25" r="3" fill="blue" stroke="#000066" stroke-width="0.5" />
<!-- Space suit arms -->
<path d="M -25,20 Q -40,30 -50,15" fill="none" stroke="#A9A9A9" stroke-width="10" stroke-linecap="round" />
<path d="M 25,20 Q 40,30 50,5" fill="none" stroke="#A9A9A9" stroke-width="10" stroke-linecap="round" />
<!-- Giraffe's "hand" extending from the spacesuit -->
<circle cx="50" cy="5" r="8" fill="url(#spacesuitGradient)" stroke="#A9A9A9" stroke-width="1" />
<path d="M 50,5 Q 53,5 56,2" stroke="#D2B48C" stroke-width="2" stroke-linecap="round" />
<path d="M 50,5 Q 53,7 56,7" stroke="#D2B48C" stroke-width="2" stroke-linecap="round" />
<path d="M 50,5 Q 53,8 54,12" stroke="#D2B48C" stroke-width="2" stroke-linecap="round" />
<!-- Air tank -->
<rect x="-10" y="40" width="20" height="30" rx="5" ry="5" fill="#CCC" stroke="#999" stroke-width="1" />
<circle cx="0" cy="40" r="5" fill="#999" stroke="#666" stroke-width="0.5" />
<!-- Giraffe's spacesuit legs -->
<path d="M -15,60 Q -20,80 -30,90" fill="none" stroke="#A9A9A9" stroke-width="12" stroke-linecap="round" />
<path d="M 15,60 Q 20,80 30,90" fill="none" stroke="#A9A9A9" stroke-width="12" stroke-linecap="round" />
<!-- Spacesuit boots -->
<ellipse cx="-30" cy="95" rx="10" ry="5" fill="#333" stroke="#111" stroke-width="1" />
<ellipse cx="30" cy="95" rx="10" ry="5" fill="#333" stroke="#111" stroke-width="1" />
</g>
<!-- Jellyfish on the right -->
<g id="jellyfish" transform="translate(195, 140)">
<!-- Jellyfish bell/dome -->
<ellipse cx="0" cy="0" rx="25" ry="20" fill="url(#jellyfishGradient)">
<animate attributeName="ry" values="20;22;20" dur="3s" repeatCount="indefinite" />
</ellipse>
<!-- Glow effect around jellyfish -->
<ellipse cx="0" cy="0" rx="30" ry="25" fill="url(#jellyfishGradient)" opacity="0.3">
<animate attributeName="opacity" values="0.3;0.1;0.3" dur="3s" repeatCount="indefinite" />
</ellipse>
<!-- Inner bell detail -->
<ellipse cx="0" cy="5" rx="15" ry="10" fill="rgba(255, 136, 255, 0.6)" />
<!-- Jellyfish eyes -->
<circle cx="-8" cy="-2" r="2" fill="white" />
<circle cx="-8" cy="-2" r="1" fill="black" />
<circle cx="8" cy="-2" r="2" fill="white" />
<circle cx="8" cy="-2" r="1" fill="black" />
<!-- Smiling mouth -->
<path d="M -5,5 Q 0,8 5,5" fill="none" stroke="rgba(100, 0, 100, 0.8)" stroke-width="1" />
<!-- Tentacles -->
<path d="M -20,10 Q -25,20 -20,30 Q -15,40 -20,50" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" opacity="0.8">
<animate attributeName="d" values="M -20,10 Q -25,20 -20,30 Q -15,40 -20,50;M -20,10 Q -15,20 -20,30 Q -25,40 -20,50;M -20,10 Q -25,20 -20,30 Q -15,40 -20,50" dur="5s" repeatCount="indefinite" />
</path>
<path d="M -10,15 Q -15,25 -10,35 Q -5,45 -10,55" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" opacity="0.8">
<animate attributeName="d" values="M -10,15 Q -15,25 -10,35 Q -5,45 -10,55;M -10,15 Q -5,25 -10,35 Q -15,45 -10,55;M -10,15 Q -15,25 -10,35 Q -5,45 -10,55" dur="6s" repeatCount="indefinite" />
</path>
<path d="M 0,18 Q -5,28 0,38 Q 5,48 0,58" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" opacity="0.8">
<animate attributeName="d" values="M 0,18 Q -5,28 0,38 Q 5,48 0,58;M 0,18 Q 5,28 0,38 Q -5,48 0,58;M 0,18 Q -5,28 0,38 Q 5,48 0,58" dur="4.5s" repeatCount="indefinite" />
</path>
<path d="M 10,15 Q 5,25 10,35 Q 15,45 10,55" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" opacity="0.8">
<animate attributeName="d" values="M 10,15 Q 5,25 10,35 Q 15,45 10,55;M 10,15 Q 15,25 10,35 Q 5,45 10,55;M 10,15 Q 5,25 10,35 Q 15,45 10,55" dur="7s" repeatCount="indefinite" />
</path>
<path d="M 20,10 Q 15,20 20,30 Q 25,40 20,50" fill="none" stroke="url(#tentacleGradient)" stroke-width="2" opacity="0.8">
<animate attributeName="d" values="M 20,10 Q 15,20 20,30 Q 25,40 20,50;M 20,10 Q 25,20 20,30 Q 15,40 20,50;M 20,10 Q 15,20 20,30 Q 25,40 20,50" dur="5.5s" repeatCount="indefinite" />
</path>
<!-- Jellyfish bioluminescence glow points -->
<circle cx="-15" cy="5" r="2" fill="#FFAAFF">
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="15" cy="5" r="2" fill="#FFAAFF">
<animate attributeName="opacity" values="1;0.5;1" dur="2.3s" repeatCount="indefinite" />
</circle>
<circle cx="0" cy="12" r="2" fill="#FFAAFF">
<animate attributeName="opacity" values="1;0.5;1" dur="1.8s" repeatCount="indefinite" />
</circle>
<circle cx="-10" cy="-10" r="2" fill="#FFAAFF">
<animate attributeName="opacity" values="1;0.5;1" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="10" cy="-10" r="2" fill="#FFAAFF">
<animate attributeName="opacity" values="1;0.5;1" dur="2.7s" repeatCount="indefinite" />
</circle>
<!-- Floating chess piece the jellyfish is controlling telekinetically -->
<g id="floatingPiece" transform="translate(0, -35)">
<animate attributeName="transform" values="translate(0, -35);translate(0, -38);translate(0, -35)" dur="3s" repeatCount="indefinite" />
<!-- Chess king -->
<path d="M 0,0 L 0,-10 M -3,-7 L 3,-7" stroke="black" stroke-width="1.5" />
<path d="M -3,0 C -3,-3 3,-3 3,0 C 3,1 1,2 0,4 C -1,2 -3,1 -3,0 Z" fill="black" />
<!-- Glowing effect showing telekinesis -->
<circle cx="0" cy="-5" r="8" fill="url(#jellyfishGradient)" opacity="0.3">
<animate attributeName="opacity" values="0.3;0.1;0.3" dur="2s" repeatCount="indefinite" />
<animate attributeName="r" values="8;9;8" dur="2s" repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background gradient -->
<defs>
<radialGradient id="spaceGradient" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
<stop offset="0%" stop-color="#312stice" stop-opacity="0.8" />
<stop offset="20%" stop-color="#151B54" stop-opacity="0.7" />
<stop offset="80%" stop-color="#080e3c" stop-opacity="0.9" />
<stop offset="100%" stop-color="#021C36" stop-opacity="1" />
</radialGradient>
<radialGradient id="jellyGradient" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
<stop offset="0%" stop-color="#AEDDFF" stop-opacity="0.5" />
<stop offset="100%" stop-color="#F399E6" stop-opacity="0.8" />
</radialGradient>
<linearGradient id="suitGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#464AD6" stop-opacity="0.9" />
<stop offset="50%" stop-color="#9F648F" stop-opacity="0.8" />
<stop offset="100%" stop-color="#D37CB5" stop-opacity="1" />
</linearGradient>
</defs>
<!-- Starry night background -->
<rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)" />
<!-- Random stars -->
<g>
<circle cx="23" cy="43" r="1" fill="#F9F9F9" opacity="0.8" />
<circle cx="40" cy="93" r="1" fill="#F9F9F9" opacity="0.8" />
<circle cx="28" cy="197" r="1" fill="#F9F9F9" opacity="0.8" />
<circle cx="91" cy="176" r="1" fill="#F9F9F9" opacity="0.8" />
<circle cx="25" cy="222" r="1" fill="#F9F9F9" opacity="0.8" />
</g>
<!-- Floating jellyfish -->
<g transform="translate(50,120)">
<circle cx="50" cy="0" r="30" fill="url(#jellyGradient)" />
<path d="M50 0L40 -40Q55 -60 60 -40L50 0" stroke="#F399E6" stroke-width="1" fill="none" />
<path d="M50 0L60 -40Q55 -60 40 -40L50 0" stroke="#F399E6" stroke-width="1" fill="none" />
<circle cx="55" cy="-60" r="3" fill="#AEDDFF" />
<circle cx="45" cy="-60" r="3" fill="#AEDDFF" />
</g>
<!-- Spacesuit -->
<g transform="translate(170,60)">
<path d="M 50 20 L 60 -40 L 70 40 L 50 20" stroke="#6B699F" stroke-width="2" fill="url(#suitGradient)" />
<rect x="20" y="5" width="50" height="60" fill="#4C515B" rx="10" />
<rect x="15" y="55" width="60" height="40" fill="#7B72D1" rx="5" />
<path d="M 65 50 Q 75 40 65 30" stroke="#464AD6" stroke-width="2" fill="none" />
<rect x="30" y="75" width="30" height="15" fill="#8660BB" rx="3" />
</g>
<!-- Giraffe -->
<g transform="translate(185,30)">
<circle cx="10" cy="20" r="15" fill="#E79935" />
<rect x="10" y="25" width="10" height="30" fill="#A07E4E" rx="2" />
<circle cx="5" cy="5" r="2" fill="#331909" />
<path d="M 5 15 L 15 10" stroke="#240A0B" stroke-width="2" fill="none" />
</g>
<!-- Chess board -->
<g transform="translate(180,140)">
<rect x="0" y="0" width="40" height="40" fill="#9646DE" rx="10" />
<g>
<rect x="2" y="2" width="10" height="10" fill="#63546C" rx="2" />
<rect x="2" y="12" width="10" height="10" fill="#63546C" rx="2" />
<rect x="2" y="22" width="10" height="10" fill="#63546C" rx="2" />
<rect x="2" y="32" width="10" height="10" fill="#63546C" rx="2" />
<rect x="12" y="2" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="12" y="12" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="12" y="22" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="12" y="32" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="22" y="2" width="10" height="10" fill="#63546C" rx="2" />
<rect x="22" y="12" width="10" height="10" fill="#63546C" rx="2" />
<rect x="22" y="22" width="10" height="10" fill="#63546C" rx="2" />
<rect x="22" y="32" width="10" height="10" fill="#63546C" rx="2" />
<rect x="32" y="2" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="32" y="12" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="32" y="22" width="10" height="10" fill="#8F80AD" rx="2" />
<rect x="32" y="32" width="10" height="10" fill="#8F80AD" rx="2" />
</g>
<!-- Chess pieces -->
<g>
<!-- Pawn -->
<rect x="3" y="8" width="4" height="6" fill="#78750D" rx="1" />
<!-- Knight -->
<path d="M 10 10 H 12 Q 13 10 13 12 V 18 Q 13 20 12 20 H 10 V 10 Z" stroke="#43576F" stroke-width="1" fill="none" />
<rect x="11" y="13" width="4" height="5" fill="#43576F" rx="1" />
</g>
</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 image clearly depicts a giraffe in a spacesuit holding a chessboard and interacting with a jellyfish, adhering closely to the prompt.
The composition is whimsical and colorful, effectively capturing the imaginative scenario.
In contrast, Player 2's image lacks clear representation of the elements specified in the prompt, making it less effective in terms of adherence and clarity.
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
181
Player 2
40
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
68
Player 2
24
Circles
The number of circle elements (circle) in the SVG.
Player 1
81
Player 2
10
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
8
Player 2
—
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
3
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
21
Player 2
6
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
7
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
Player 2
3
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
—
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
8
Player 2
5
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
41
Player 2
6
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
35
Player 2
22
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
31
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
4
Player 2
4
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
60
Player 2
24
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
Player 2
3
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 #2727
May 10, 2025
"Two penguins swordfighting with candy canes on an iceberg."
P1
P2
Match #2639
May 09, 2025
"A snail racing a rocket on a winding, abstract track."
P1
P2
Match #459
Mar 13, 2025
"Clockwork butterfly with gears for wings fluttering above a blooming metal flower"
P1
P2
Match #122
Mar 13, 2025
"Floating city on giant turtle's back in a starry sky"
P1
P2
