GPT-4o
Challenge Creator
Creative Challenge
"Robot juggling planets under a starry sky."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reusable elements -->
<defs>
<!-- Gradients -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a0a2a" />
<stop offset="50%" stop-color="#1a1a3a" />
<stop offset="100%" stop-color="#000000" />
</linearGradient>
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#fffaea" stop-opacity="1" />
<stop offset="100%" stop-color="#fffaea" stop-opacity="0" />
</radialGradient>
<!-- Planet gradients -->
<radialGradient id="marsGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff9d00" />
<stop offset="70%" stop-color="#ff4d00" />
<stop offset="100%" stop-color="#aa2200" />
</radialGradient>
<radialGradient id="earthGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#3a97ff" />
<stop offset="70%" stop-color="#0059ff" />
<stop offset="100%" stop-color="#004097" />
</radialGradient>
<radialGradient id="saturnGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ffd79f" />
<stop offset="75%" stop-color="#ca9350" />
<stop offset="100%" stop-color="#8a6030" />
</radialGradient>
<radialGradient id="alienGradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff5c97" />
<stop offset="80%" stop-color="#b00049" />
<stop offset="100%" stop-color="#700030" />
</radialGradient>
<!-- Robot gradients -->
<linearGradient id="robotMetallic" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e0e0e0" />
<stop offset="40%" stop-color="#c0c0c0" />
<stop offset="60%" stop-color="#a0a0a0" />
<stop offset="100%" stop-color="#808080" />
</linearGradient>
<linearGradient id="robotHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</linearGradient>
<!-- Filters -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="planetGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars">
<!-- Small stars -->
<g id="smallStars" fill="white">
<circle cx="25" cy="30" r="0.8" />
<circle cx="50" cy="15" r="0.6" />
<circle cx="75" cy="40" r="1.0" />
<circle cx="100" cy="25" r="0.7" />
<circle cx="125" cy="10" r="0.9" />
<circle cx="150" cy="30" r="0.5" />
<circle cx="175" cy="15" r="0.8" />
<circle cx="200" cy="35" r="0.6" />
<circle cx="225" cy="20" r="0.7" />
<circle cx="250" cy="25" r="0.9" />
<circle cx="275" cy="40" r="0.5" />
<circle cx="35" cy="60" r="0.7" />
<circle cx="60" cy="75" r="0.6" />
<circle cx="85" cy="65" r="0.8" />
<circle cx="110" cy="55" r="0.5" />
<circle cx="135" cy="70" r="0.9" />
<circle cx="160" cy="50" r="0.7" />
<circle cx="185" cy="65" r="0.6" />
<circle cx="210" cy="75" r="0.8" />
<circle cx="235" cy="60" r="0.5" />
<circle cx="260" cy="70" r="0.7" />
<circle cx="285" cy="55" r="0.9" />
<circle cx="20" cy="90" r="0.6" />
<circle cx="45" cy="105" r="0.8" />
<circle cx="70" cy="95" r="0.7" />
<circle cx="95" cy="85" r="0.5" />
<circle cx="120" cy="100" r="0.9" />
<circle cx="145" cy="90" r="0.6" />
<circle cx="170" cy="80" r="0.7" />
<circle cx="195" cy="95" r="0.8" />
<circle cx="220" cy="105" r="0.5" />
<circle cx="245" cy="85" r="0.6" />
<circle cx="270" cy="100" r="0.9" />
<circle cx="40" cy="130" r="0.7" />
<circle cx="85" cy="140" r="0.6" />
<circle cx="130" cy="125" r="0.8" />
<circle cx="175" cy="135" r="0.7" />
<circle cx="220" cy="120" r="0.5" />
<circle cx="265" cy="130" r="0.6" />
</g>
<!-- Medium stars with glow -->
<g id="mediumStars" fill="white" filter="url(#glow)">
<circle cx="40" cy="40" r="1.5" />
<circle cx="90" cy="20" r="1.8" />
<circle cx="140" cy="50" r="1.6" />
<circle cx="190" cy="30" r="1.7" />
<circle cx="240" cy="45" r="1.5" />
<circle cx="65" cy="85" r="1.8" />
<circle cx="115" cy="70" r="1.6" />
<circle cx="165" cy="90" r="1.7" />
<circle cx="215" cy="65" r="1.5" />
<circle cx="265" cy="80" r="1.8" />
<circle cx="35" cy="120" r="1.6" />
<circle cx="85" cy="130" r="1.5" />
<circle cx="135" cy="115" r="1.7" />
<circle cx="185" cy="125" r="1.6" />
<circle cx="235" cy="110" r="1.8" />
</g>
<!-- Large glowing stars -->
<g id="largeStars" filter="url(#glow)">
<circle cx="60" cy="35" r="2.5" fill="#ffffff" />
<circle cx="180" cy="45" r="3.0" fill="#fffce8" />
<circle cx="120" cy="25" r="2.8" fill="#eaffff" />
<circle cx="250" cy="55" r="2.6" fill="#ffecff" />
<circle cx="30" cy="75" r="2.7" fill="#fffef0" />
<circle cx="220" cy="15" r="3.2" fill="#ffffff" />
</g>
<!-- Constellation -->
<g id="constellation" stroke="#ffffff" stroke-width="0.3" opacity="0.7">
<line x1="60" y1="35" x2="120" y2="25" />
<line x1="120" y1="25" x2="180" y2="45" />
<line x1="180" y1="45" x2="250" y2="55" />
<line x1="180" y1="45" x2="220" y2="15" />
</g>
<!-- Nebula -->
<g id="nebula" opacity="0.3">
<ellipse cx="70" cy="180" rx="50" ry="30" fill="#5000ff" />
<ellipse cx="220" cy="160" rx="70" ry="25" fill="#ff5baa" opacity="0.2" />
</g>
</g>
<!-- Juggling motion paths -->
<g id="jugglingPaths" stroke-width="0.5" stroke-dasharray="2,3" opacity="0.4">
<path d="M150,180 Q100,70 50,180" fill="none" stroke="#5dadff" />
<path d="M150,180 Q150,60 150,180" fill="none" stroke="#ff9d5d" />
<path d="M150,180 Q200,70 250,180" fill="none" stroke="#5dffb4" />
<path d="M150,180 Q230,100 200,180" fill="none" stroke="#d45dff" />
</g>
<!-- Robot -->
<g id="robot" transform="translate(150,230)">
<!-- Robot body -->
<g id="body">
<!-- Torso -->
<rect x="-30" y="-20" width="60" height="45" rx="5" ry="5" fill="url(#robotMetallic)" stroke="#505050" stroke-width="1.5" />
<!-- Control panel -->
<rect x="-20" y="-10" width="40" height="25" rx="3" ry="3" fill="#303030" stroke="#404040" stroke-width="1" />
<!-- Lights and buttons -->
<circle cx="-10" cy="0" r="5" fill="#ff0000" filter="url(#glow)" opacity="0.9" />
<circle cx="10" cy="0" r="5" fill="#00ff00" filter="url(#glow)" opacity="0.9" />
<circle cx="0" cy="10" r="6" fill="#0080ff" filter="url(#glow)" opacity="0.9" />
<!-- Panel details -->
<rect x="-18" y="-8" width="8" height="3" rx="1" ry="1" fill="#505050" />
<rect x="10" y="-8" width="8" height="3" rx="1" ry="1" fill="#505050" />
<rect x="-15" y="15" width="30" height="2" rx="1" ry="1" fill="#505050" />
<!-- Robot shoulder joints -->
<circle cx="-30" cy="-15" r="7" fill="#909090" stroke="#606060" stroke-width="1.5" />
<circle cx="30" cy="-15" r="7" fill="#909090" stroke="#606060" stroke-width="1.5" />
<circle cx="-30" cy="-15" r="3" fill="#303030" />
<circle cx="30" cy="-15" r="3" fill="#303030" />
<!-- Lower body -->
<rect x="-25" y="25" width="50" height="15" rx="3" ry="3" fill="url(#robotMetallic)" stroke="#505050" stroke-width="1.5" />
<rect x="-15" y="30" width="30" height="5" rx="2" ry="2" fill="#404040" />
</g>
<!-- Robot head -->
<g id="head">
<rect x="-25" y="-65" width="50" height="40" rx="8" ry="8" fill="url(#robotMetallic)" stroke="#505050" stroke-width="1.5" />
<!-- Face -->
<rect x="-20" y="-60" width="40" height="30" rx="5" ry="5" fill="#252525" stroke="#353535" stroke-width="1" />
<!-- Eyes -->
<rect x="-15" y="-55" width="10" height="10" rx="2" ry="2" fill="#000000" />
<rect x="5" y="-55" width="10" height="10" rx="2" ry="2" fill="#000000" />
<!-- Eye lights -->
<rect x="-13" y="-53" width="6" height="6" rx="1" ry="1" fill="#00ffff" filter="url(#glow)" opacity="0.9" />
<rect x="7" y="-53" width="6" height="6" rx="1" ry="1" fill="#00ffff" filter="url(#glow)" opacity="0.9" />
<!-- Mouth/speaker -->
<rect x="-10" y="-40" width="20" height="5" rx="2" ry="2" fill="#101010" />
<line x1="-8" y1="-37.5" x2="8" y2="-37.5" stroke="#303030" stroke-width="1" />
<line x1="-8" y1="-39" x2="8" y2="-39" stroke="#303030" stroke-width="1" />
<line x1="-8" y1="-36" x2="8" y2="-36" stroke="#303030" stroke-width="1" />
<!-- Antennas -->
<line x1="-15" y1="-65" x2="-15" y2="-75" stroke="#505050" stroke-width="2" />
<circle cx="-15" cy="-77" r="3" fill="#ff0000" filter="url(#glow)" />
<line x1="15" y1="-65" x2="15" y2="-75" stroke="#505050" stroke-width="2" />
<circle cx="15" cy="-77" r="3" fill="#ff0000" filter="url(#glow)" />
<!-- Head details -->
<rect x="-22" y="-48" width="4" height="12" rx="1" ry="1" fill="#707070" />
<rect x="18" y="-48" width="4" height="12" rx="1" ry="1" fill="#707070" />
</g>
<!-- Robot arms -->
<g id="arms">
<!-- Left arm segments -->
<path d="M-30,-15 C-45,-20 -55,-45 -50,-70" fill="none" stroke="#a0a0a0" stroke-width="6" stroke-linecap="round" />
<path d="M-50,-70 C-45,-95 -30,-110 -10,-130" fill="none" stroke="#a0a0a0" stroke-width="5" stroke-linecap="round" />
<!-- Right arm segments -->
<path d="M30,-15 C45,-20 55,-45 50,-70" fill="none" stroke="#a0a0a0" stroke-width="6" stroke-linecap="round" />
<path d="M50,-70 C45,-95 30,-110 10,-130" fill="none" stroke="#a0a0a0" stroke-width="5" stroke-linecap="round" />
<!-- Arm joint details -->
<circle cx="-50" cy="-70" r="5" fill="#909090" stroke="#606060" stroke-width="1" />
<circle cx="50" cy="-70" r="5" fill="#909090" stroke="#606060" stroke-width="1" />
<!-- Hand pads -->
<circle cx="-10" cy="-130" r="8" fill="#909090" stroke="#606060" stroke-width="1.5" />
<circle cx="10" cy="-130" r="8" fill="#909090" stroke="#606060" stroke-width="1.5" />
<!-- Hand details -->
<circle cx="-10" cy="-130" r="4" fill="#404040" />
<circle cx="10" cy="-130" r="4" fill="#404040" />
<circle cx="-10" cy="-130" r="2" fill="#00ccff" filter="url(#glow)" opacity="0.7" />
<circle cx="10" cy="-130" r="2" fill="#00ccff" filter="url(#glow)" opacity="0.7" />
</g>
<!-- Robot legs -->
<g id="legs">
<!-- Leg cylinders -->
<rect x="-22" y="40" width="14" height="25" rx="4" ry="4" fill="url(#robotMetallic)" stroke="#505050" stroke-width="1" />
<rect x="8" y="40" width="14" height="25" rx="4" ry="4" fill="url(#robotMetallic)" stroke="#505050" stroke-width="1" />
<!-- Foot pads -->
<rect x="-26" y="65" width="22" height="6" rx="3" ry="3" fill="#606060" stroke="#404040" stroke-width="1" />
<rect x="4" y="65" width="22" height="6" rx="3" ry="3" fill="#606060" stroke="#404040" stroke-width="1" />
<!-- Leg joint details -->
<rect x="-18" y="38" width="6" height="4" rx="1" ry="1" fill="#404040" />
<rect x="12" y="38" width="6" height="4" rx="1" ry="1" fill="#404040" />
<!-- Foot details -->
<rect x="-22" y="65" width="14" height="3" rx="1" ry="1" fill="#303030" />
<rect x="8" y="65" width="14" height="3" rx="1" ry="1" fill="#303030" />
</g>
</g>
<!-- Planets -->
<g id="planets">
<!-- Mars-like planet -->
<g id="marsPlanet" transform="translate(50, 90)">
<circle cx="0" cy="0" r="18" fill="url(#marsGradient)" filter="url(#planetGlow)" />
<!-- Craters -->
<circle cx="-6" cy="-5" r="4" fill="#aa2200" opacity="0.7" />
<circle cx="8" cy="7" r="5" fill="#aa2200" opacity="0.6" />
<circle cx="3" cy="-8" r="3" fill="#aa2200" opacity="0.7" />
<circle cx="-9" cy="6" r="2" fill="#aa2200" opacity="0.6" />
<!-- Polar cap -->
<path d="M-14,-10 Q-7,-18 0,-16 Q7,-18 14,-10 Z" fill="#ffdbcc" opacity="0.8" />
</g>
<!-- Earth-like planet -->
<g id="earthPlanet" transform="translate(150, 60)">
<circle cx="0" cy="0" r="25" fill="url(#earthGradient)" filter="url(#planetGlow)" />
<!-- Continents -->
<path d="M-12,-5 Q-5,10 0,5 Q10,15 15,0 Q5,-10 -12,-5" fill="#00aa44" opacity="0.7" />
<path d="M-10,5 Q-5,15 10,10 Q15,0 8,-5 Q0,-10 -10,5" fill="#00aa44" opacity="0.7" />
<path d="M0,-15 Q-10,-20 -15,-10 Q-12,-5 0,-10 Q5,-15 0,-15" fill="#00aa44" opacity="0.7" />
<!-- Cloud layer -->
<circle cx="0" cy="0" r="25" fill="transparent" stroke="#ffffff" stroke-width="2" opacity="0.3" />
<path d="M-15,0 Q-10,-8 0,-10 Q10,-8 15,0" fill="#ffffff" opacity="0.3" />
<path d="M-20,10 Q-10,5 0,10 Q10,15 20,10" fill="#ffffff" opacity="0.3" />
</g>
<!-- Saturn-like planet -->
<g id="saturnPlanet" transform="translate(250, 110)">
<circle cx="0" cy="0" r="20" fill="url(#saturnGradient)" filter="url(#planetGlow)" />
<!-- Ring system -->
<g transform="rotate(-15)">
<ellipse cx="0" cy="0" rx="35" ry="7" fill="#ca9350" opacity="0.15" />
<ellipse cx="0" cy="0" rx="35" ry="7" fill="none" stroke="#ffd79f" stroke-width="1" opacity="0.7" />
<ellipse cx="0" cy="0" rx="30" ry="6" fill="none" stroke="#ffd79f" stroke-width="0.7" opacity="0.6" />
<ellipse cx="0" cy="0" rx="26" ry="5" fill="none" stroke="#ffd79f" stroke-width="0.7" opacity="0.5" />
</g>
<!-- Surface bands -->
<ellipse cx="0" cy="-5" rx="20" ry="3" fill="#b07030" opacity="0.5" />
<ellipse cx="0" cy="5" rx="20" ry="3" fill="#b07030" opacity="0.5" />
</g>
<!-- Alien pink planet -->
<g id="alienPlanet" transform="translate(200, 140)">
<circle cx="0" cy="0" r="15" fill="url(#alienGradient)" filter="url(#planetGlow)" />
<!-- Alien features -->
<circle cx="0" cy="0" r="5" fill="#ff9dd4" opacity="0.6" />
<path d="M0,-9 Q-9,0 0,9 Q9,0 0,-9" fill="#ff70ba" opacity="0.7" />
<path d="M-9,0 Q0,9 9,0 Q0,-9 -9,0" fill="#ff70ba" opacity="0.7" />
<!-- Moon -->
<circle cx="20" cy="-5" r="3" fill="#ffacdd" />
<circle cx="20" cy="-5" r="1" fill="#ff5cb4" />
</g>
</g>
<!-- Sparkles and energy effects -->
<g id="effects">
<!-- Hand energy -->
<circle cx="140" cy="100" r="4" fill="#00ffff" opacity="0.7" filter="url(#glow)" />
<circle cx="160" cy="100" r="4" fill="#00ffff" opacity="0.7" filter="url(#glow)" />
<!-- Motion trails -->
<path d="M50,90 Q60,70 70,85" fill="none" stroke="#ff6600" stroke-width="1" opacity="0.6" />
<path d="M150,60 Q160,40 170,55" fill="none" stroke="#00aaff" stroke-width="1" opacity="0.6" />
<path d="M250,110 Q240,90 230,100" fill="none" stroke="#ffbb00" stroke-width="1" opacity="0.6" />
<path d="M200,140 Q190,120 180,130" fill="none" stroke="#ff00aa" stroke-width="1" opacity="0.6" />
<!-- Sparkles -->
<g fill="white" filter="url(#glow)">
<circle cx="55" cy="95" r="1" opacity="0.9" />
<circle cx="155" cy="65" r="1" opacity="0.9" />
<circle cx="255" cy="115" r="1" opacity="0.9" />
<circle cx="205" cy="145" r="1" opacity="0.9" />
<circle cx="45" cy="85" r="1.5" opacity="0.8" />
<circle cx="145" cy="55" r="1.5" opacity="0.8" />
<circle cx="245" cy="105" r="1.5" opacity="0.8" />
<circle cx="195" cy="135" r="1.5" opacity="0.8" />
<circle cx="65" cy="88" r="0.8" opacity="0.7" />
<circle cx="165" cy="58" r="0.8" opacity="0.7" />
<circle cx="265" cy="108" r="0.8" opacity="0.7" />
<circle cx="215" cy="138" r="0.8" opacity="0.7" />
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients -->
<radialGradient id="bgSky" cx="50%" cy="40%" r="80%">
<stop offset="0%" stop-color="#1b1a40"/>
<stop offset="100%" stop-color="#060821"/>
</radialGradient>
<radialGradient id="glow" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#fffdfb" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#fffdfb" stop-opacity="0"/>
</radialGradient>
<radialGradient id="headGrad" cx="50%" cy="38%" r="65%">
<stop offset="0%" stop-color="#65f2ff"/>
<stop offset="90%" stop-color="#118da5"/>
</radialGradient>
<linearGradient id="bodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#41e3fb"/>
<stop offset="100%" stop-color="#206787"/>
</linearGradient>
<linearGradient id="armGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#93f6d6"/>
<stop offset="100%" stop-color="#1e7263"/>
</linearGradient>
<radialGradient id="eyeGrad" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#fff"/>
<stop offset="60%" stop-color="#4feaf9"/>
<stop offset="100%" stop-color="#1eafd1"/>
</radialGradient>
<linearGradient id="planetA" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#f357a9"/>
<stop offset="100%" stop-color="#7214c2"/>
</linearGradient>
<linearGradient id="planetB" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ffe34b"/>
<stop offset="100%" stop-color="#ff914a"/>
</linearGradient>
<radialGradient id="planetC" cx="0.6" cy="0.4" r="1">
<stop offset="0%" stop-color="#7fffba"/>
<stop offset="100%" stop-color="#459a61"/>
</radialGradient>
<!-- Saturn rings -->
<linearGradient id="ringsGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#eecf96" />
<stop offset="100%" stop-color="#ffcc41" />
</linearGradient>
<!-- Highlight for head -->
<radialGradient id="spotlight" cx="55%" cy="30%" r="55%">
<stop offset="0%" stop-color="#fff7b1" stop-opacity="0.4"/>
<stop offset="80%" stop-color="#fff7b1" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Starry sky background -->
<rect width="300" height="300" fill="url(#bgSky)"/>
<!-- Glowing star clusters -->
<circle cx="60" cy="50" r="18" fill="url(#glow)"/>
<circle cx="240" cy="70" r="10" fill="url(#glow)"/>
<circle cx="200" cy="220" r="14" fill="url(#glow)"/>
<!-- Smaller stars (random scatter) -->
<g fill="#fff">
<circle cx="40" cy="35" r="1.2"/>
<circle cx="68" cy="90" r="0.8"/>
<circle cx="90" cy="20" r="1.4"/>
<circle cx="110" cy="60" r="0.7"/>
<circle cx="220" cy="35" r="0.9"/>
<circle cx="265" cy="105" r="1.3"/>
<circle cx="170" cy="42" r="0.85"/>
<circle cx="130" cy="70" r="0.9"/>
<circle cx="50" cy="220" r="0.6"/>
<circle cx="220" cy="270" r="0.7"/>
<circle cx="150" cy="260" r="1"/>
<circle cx="280" cy="60" r="0.9"/>
<circle cx="35" cy="120" r="0.85"/>
<circle cx="100" cy="180" r="0.95"/>
<ellipse cx="185" cy="100" rx="1.2" ry="0.8"/>
<ellipse cx="260" cy="175" rx="1.0" ry="0.7"/>
</g>
<!-- Robo-juggler -->
<g>
<!-- Head with glassy gradient & reflection -->
<g filter="url(#spotlight)">
<ellipse cx="150" cy="130" rx="34" ry="28" fill="url(#headGrad)" stroke="#2af0ff" stroke-width="3"/>
<ellipse cx="142" cy="120" rx="13" ry="6" fill="white" opacity="0.15"/>
<ellipse cx="162" cy="140" rx="7" ry="3" fill="white" opacity="0.07"/>
</g>
<!-- Face lightline -->
<path d="M134 137 Q150 148 164 134" fill="none" stroke="#eafffa" stroke-width="2" opacity="0.6"/>
<!-- Antenna -->
<rect x="146" y="98" width="7" height="19" rx="3.5" fill="#62edff" stroke="#138da3" stroke-width="1.5"/>
<circle cx="150" cy="98" r="5" fill="#fff648" stroke="#ffe29c" stroke-width="2"/>
<circle cx="150" cy="98" r="13" fill="url(#glow)" opacity="0.6"/>
<!-- Eyes -->
<ellipse cx="139" cy="130" rx="5" ry="7" fill="url(#eyeGrad)" stroke="#43e4f9" stroke-width="1.5"/>
<ellipse cx="161" cy="130" rx="5" ry="7" fill="url(#eyeGrad)" stroke="#43e4f9" stroke-width="1.5"/>
<circle cx="138" cy="133" r="1.2" fill="#fff"/>
<circle cx="160" cy="134" r="1.2" fill="#fff"/>
<!-- Smile -->
<path d="M142 144 Q150 148 158 142" stroke="#fff" stroke-width="1.6" fill="none"/>
<!-- Head highlight -->
<ellipse cx="161" cy="120" rx="7" ry="2.3" fill="#fff" opacity="0.23"/>
<ellipse cx="145" cy="114" rx="6.2" ry="2" fill="#fff" opacity="0.14"/>
<!-- Body -->
<ellipse cx="150" cy="175" rx="29" ry="42" fill="url(#bodyGrad)" stroke="#41e3fb" stroke-width="2"/>
<ellipse cx="150" cy="183" rx="15" ry="9" fill="#17648b" opacity="0.15"/>
<!-- Shoulders/joints -->
<circle cx="120" cy="152" r="10" fill="#2294c4" stroke="#d1fff1" stroke-width="2"/>
<circle cx="180" cy="152" r="10" fill="#2294c4" stroke="#d1fff1" stroke-width="2"/>
<!-- Left Arm upper -->
<rect x="97" y="143" width="34" height="11" rx="5" fill="url(#armGrad)" transform="rotate(-19 97 143)"/>
<!-- Left Lower Arm -->
<rect x="85" y="166" width="33" height="10" rx="5" fill="url(#armGrad)" transform="rotate(6 85 166)"/>
<!-- Left Palm -->
<ellipse cx="97" cy="177" rx="7" ry="8.2" fill="#73e1c9" stroke="#13bb89" stroke-width="1.3"/>
<!-- Right Arm upper -->
<rect x="169" y="146" width="34" height="11" rx="5" fill="url(#armGrad)" transform="rotate(18 169 146)"/>
<!-- Right Lower Arm -->
<rect x="182" y="166" width="33" height="10" rx="5" fill="url(#armGrad)" transform="rotate(-9 182 166)"/>
<!-- Right Palm -->
<ellipse cx="203" cy="177" rx="7" ry="8.2" fill="#73e1c9" stroke="#13bb89" stroke-width="1.3"/>
<!-- Chest motif (heart) -->
<path d="M150 183 Q147 178 144 181 Q141 184 150 191 Q159 184 156 181 Q153 178 150 183" fill="#e958ef" opacity="0.65"/>
<!-- Hips & legs -->
<ellipse cx="150" cy="218" rx="18" ry="9" fill="#2ccbfc" opacity="0.56"/>
<rect x="138" y="217" width="8" height="37" rx="4" fill="#6ae6ea" stroke="#3abbbd" stroke-width="2"/>
<rect x="154" y="217" width="8" height="37" rx="4" fill="#6ae6ea" stroke="#3abbbd" stroke-width="2"/>
<!-- Robot feet (hover) -->
<ellipse cx="142" cy="260" rx="9" ry="4.3" fill="#d5fff7" opacity="0.72"/>
<ellipse cx="158" cy="262" rx="9" ry="4.3" fill="#d5fff7" opacity="0.72"/>
<!-- Glowing whirls at feet -->
<ellipse cx="142" cy="264" rx="14" ry="3" fill="url(#glow)" opacity="0.48"/>
<ellipse cx="158" cy="266" rx="14" ry="3" fill="url(#glow)" opacity="0.45"/>
</g>
<!-- Juggling planets and their trails -->
<g>
<!-- Orbital juggling paths -->
<path d="M70 90 Q150 70 230 110" stroke="#fff" stroke-width="1.7" stroke-dasharray="4 2" opacity="0.066" fill="none"/>
<path d="M90 102 Q150 37 210 115" stroke="#fff" stroke-width="2.1" stroke-dasharray="3 2" opacity="0.09" fill="none"/>
<path d="M77 97 Q145 60 225 85" stroke="#fff0" stroke-width="1.2" stroke-dasharray="7 3" opacity="0.08" fill="none"/>
<!-- Planets (top left, top, top right) -->
<!-- Left: Saturn-like planet -->
<g>
<!-- Rings -->
<ellipse cx="74" cy="100" rx="16" ry="4.5" fill="url(#ringsGrad)" opacity="0.79" />
<ellipse cx="74" cy="99.6" rx="12" ry="2.5" fill="#fff" opacity="0.13"/>
<!-- Main body -->
<circle cx="74" cy="100" r="9.5" fill="url(#planetA)" stroke="#a96fff" stroke-width="2.2"/>
<!-- Spots -->
<ellipse cx="70" cy="104" rx="1.8" ry="0.8" fill="#fff" opacity="0.22"/>
<ellipse cx="77" cy="98.5" rx="1.4" ry="0.7" fill="#f5deff" opacity="0.5"/>
</g>
<!-- Middle: Striped gas giant -->
<g>
<circle cx="150" cy="68" r="15" fill="url(#planetB)" stroke="#fff7a6" stroke-width="2.7"/>
<!-- Stripes -->
<path d="M137 67 Q150 77 163 63" stroke="#eb573b" stroke-width="2.3" fill="none" opacity="0.45"/>
<path d="M139 72 Q150 73 161 67" stroke="#fcff9a" stroke-width="1.1" fill="none" opacity="0.66"/>
<ellipse cx="155" cy="62" rx="2.7" ry="1" fill="#fff" opacity="0.16"/>
</g>
<!-- Right: Blue-green water world -->
<g>
<circle cx="223" cy="97" r="10.2" fill="url(#planetC)" stroke="#91ffd6" stroke-width="2"/>
<!-- Water swirl -->
<path d="M217 96 Q222 104 227 94" stroke="#1ef2ff" stroke-width="1.2" fill="none" opacity="0.63"/>
<ellipse cx="225" cy="92" rx="2" ry="0.8" fill="#fff" opacity="0.18"/>
</g>
<!-- Orbit trails (from robot's hands to planets) -->
<path d="M97 177 Q89 135 74 100" stroke="#83fff8" stroke-width="2" stroke-dasharray="5 3" opacity="0.17" fill="none"/>
<path d="M150 172 Q149 120 150 68" stroke="#fffacc" stroke-width="2.4" stroke-dasharray="7 5" opacity="0.13" fill="none"/>
<path d="M203 177 Q217 132 223 97" stroke="#82ffd2" stroke-width="2" stroke-dasharray="6 4" opacity="0.2" fill="none"/>
<!-- Subtle glows under planets -->
<ellipse cx="74" cy="113" rx="17" ry="5.5" fill="url(#glow)" opacity="0.23"/>
<ellipse cx="150" cy="87" rx="22" ry="7" fill="url(#glow)" opacity="0.18"/>
<ellipse cx="223" cy="109" rx="15" ry="4.5" fill="url(#glow)" opacity="0.15"/>
</g>
<!-- Star shooting across top right -->
<g>
<ellipse cx="255" cy="47" rx="8" ry="1.8" fill="#fff" opacity="0.24">
<animate attributeName="cx" values="260;200" dur="2.5s" repeatCount="indefinite"/>
</ellipse>
<circle cx="257" cy="47" r="1.4" fill="#fff" opacity="0.73">
<animate attributeName="cx" values="263;203" dur="2.5s" repeatCount="indefinite"/>
</circle>
</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 demonstrates a clear and cohesive composition with a detailed robot design juggling multiple planets under a vibrant starry sky.
The inclusion of expressive facial features and glowing elements adds personality and visual appeal.
While Player 2's design is creative, it lacks the technical refinement and detail of Player 1's work, and the robot's form feels less dynamic and engaging.
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
165
Player 2
75
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
25
Player 2
8
Circles
The number of circle elements (circle) in the SVG.
Player 1
103
Player 2
27
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
8
Player 2
28
Lines
The number of line elements (line) in the SVG.
Player 1
9
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
20
Player 2
12
Groups
The number of group elements (g) in the SVG.
Player 1
20
Player 2
8
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
8
Player 2
11
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 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
49
Player 2
33
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
37
Player 2
26
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
57
Player 2
49
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
2
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
6
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
52
Player 2
27
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
10
Player 2
11
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 #2637
May 09, 2025
"A tree made of musical instruments growing in a desert under a starry sky."
P1
P2
Match #2451
May 09, 2025
"Penguin astronaut planting a flag on a floating iceberg in space."
P1
P2
Match #2253
May 09, 2025
"An octopus playing chess with a cat on a floating log."
P1
P2
