GPT-4o
Challenge Creator
Creative Challenge
"An astronaut riding a giant jellyfish through a colorful nebula."
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
<defs>
<!-- Nebula gradients -->
<radialGradient id="nebulaGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#0a001a" />
<stop offset="20%" stop-color="#1a0033" />
<stop offset="40%" stop-color="#330066" />
<stop offset="60%" stop-color="#660099" />
<stop offset="80%" stop-color="#9900cc" />
<stop offset="100%" stop-color="#cc33ff" />
</radialGradient>
<radialGradient id="nebulaOverlay1" cx="30%" cy="30%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ff6699" stop-opacity="0.3" />
<stop offset="100%" stop-color="#ff6699" stop-opacity="0" />
</radialGradient>
<radialGradient id="nebulaOverlay2" cx="70%" cy="60%" r="60%" fx="70%" fy="60%">
<stop offset="0%" stop-color="#66ccff" stop-opacity="0.3" />
<stop offset="100%" stop-color="#66ccff" stop-opacity="0" />
</radialGradient>
<!-- Jellyfish gradients -->
<radialGradient id="jellyfishDome" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
<stop offset="0%" stop-color="#88ffff" stop-opacity="0.9" />
<stop offset="50%" stop-color="#44aaff" stop-opacity="0.7" />
<stop offset="100%" stop-color="#0066cc" stop-opacity="0.5" />
</radialGradient>
<radialGradient id="jellyfishInnerGlow" cx="50%" cy="30%" r="50%" fx="50%" fy="30%">
<stop offset="0%" stop-color="#ffffff" stop-opacity="0.7" />
<stop offset="50%" stop-color="#aaffff" stop-opacity="0.5" />
<stop offset="100%" stop-color="#44aaff" stop-opacity="0.3" />
</radialGradient>
<!-- Filters -->
<filter id="jellyfishGlow">
<feGaussianBlur stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<filter id="starGlow">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Astronaut elements -->
<linearGradient id="visorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#000033" />
<stop offset="20%" stop-color="#0000cc" stop-opacity="0.8" />
<stop offset="50%" stop-color="#0099ff" stop-opacity="0.6" />
<stop offset="80%" stop-color="#00ccff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#000033" />
</linearGradient>
<pattern id="tentaclePattern" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="2" fill="#88ffff" fill-opacity="0.6" />
</pattern>
<radialGradient id="planetGradient" cx="40%" cy="40%" r="60%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#ffcc99" />
<stop offset="50%" stop-color="#ff9966" />
<stop offset="100%" stop-color="#cc6633" />
</radialGradient>
<pattern id="spacesuitTexture" patternUnits="userSpaceOnUse" width="5" height="5">
<rect x="0" y="0" width="5" height="5" fill="#f0f0f0" />
<rect x="0" y="0" width="2.5" height="2.5" fill="#e0e0e0" />
<rect x="2.5" y="2.5" width="2.5" height="2.5" fill="#e0e0e0" />
</pattern>
</defs>
<!-- Background nebula -->
<rect x="0" y="0" width="300" height="300" fill="url(#nebulaGradient)" />
<rect x="0" y="0" width="300" height="300" fill="url(#nebulaOverlay1)" />
<rect x="0" y="0" width="300" height="300" fill="url(#nebulaOverlay2)" />
<!-- Cosmic dust/nebula details -->
<g id="cosmicDust">
<ellipse cx="100" cy="80" rx="60" ry="40" fill="#ff66cc" fill-opacity="0.2" />
<ellipse cx="200" cy="150" rx="70" ry="50" fill="#66ffcc" fill-opacity="0.2" />
<ellipse cx="150" cy="250" rx="80" ry="40" fill="#ffcc66" fill-opacity="0.2" />
<ellipse cx="50" cy="200" rx="40" ry="60" fill="#cc66ff" fill-opacity="0.2" />
<ellipse cx="250" cy="100" rx="50" ry="50" fill="#66ccff" fill-opacity="0.2" />
<ellipse cx="120" cy="180" rx="100" ry="70" fill="#ff99cc" fill-opacity="0.1" />
<ellipse cx="220" cy="220" rx="70" ry="60" fill="#99ccff" fill-opacity="0.1" />
</g>
<!-- Stars in the background -->
<g id="stars">
<!-- Larger background stars -->
<circle cx="20" cy="30" r="1.2" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="50" cy="50" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="80" cy="20" r="1.5" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="120" cy="40" r="1.2" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="150" cy="70" r="0.8" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="180" cy="30" r="1.3" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="210" cy="50" r="1.1" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="240" cy="20" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="270" cy="60" r="1.4" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="30" cy="90" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="60" cy="110" r="1.2" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="90" cy="130" r="0.9" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="130" cy="100" r="1.3" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="160" cy="120" r="1.1" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="190" cy="90" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="220" cy="110" r="1.4" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="250" cy="130" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="280" cy="150" r="1.2" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="40" cy="170" r="0.9" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="70" cy="190" r="1.3" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="100" cy="210" r="1.1" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="140" cy="180" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="170" cy="200" r="1.4" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="200" cy="220" r="1" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="230" cy="240" r="1.2" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="260" cy="260" r="0.9" fill="white" fill-opacity="0.8" filter="url(#starGlow)" />
<circle cx="290" cy="280" r="1.3" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<circle cx="25" cy="275" r="1.1" fill="white" fill-opacity="0.9" filter="url(#starGlow)" />
<circle cx="55" cy="245" r="1.4" fill="white" fill-opacity="1" filter="url(#starGlow)" />
<!-- Adding some smaller stars for depth -->
<g fill="white" fill-opacity="0.6">
<circle cx="15" cy="45" r="0.5" />
<circle cx="45" cy="75" r="0.4" />
<circle cx="75" cy="35" r="0.6" />
<circle cx="105" cy="65" r="0.5" />
<circle cx="135" cy="25" r="0.4" />
<circle cx="165" cy="55" r="0.6" />
<circle cx="195" cy="15" r="0.5" />
<circle cx="225" cy="45" r="0.4" />
<circle cx="255" cy="75" r="0.6" />
<circle cx="285" cy="35" r="0.5" />
<circle cx="25" cy="105" r="0.4" />
<circle cx="55" cy="135" r="0.6" />
<circle cx="85" cy="95" r="0.5" />
<circle cx="115" cy="125" r="0.4" />
<circle cx="145" cy="85" r="0.6" />
<circle cx="175" cy="115" r="0.5" />
<circle cx="205" cy="75" r="0.4" />
<circle cx="235" cy="105" r="0.6" />
<circle cx="265" cy="135" r="0.5" />
<circle cx="295" cy="95" r="0.4" />
</g>
</g>
<!-- Additional cosmic elements -->
<g id="additionalElements">
<!-- Distant planet -->
<circle cx="40" cy="40" r="15" fill="url(#planetGradient)" />
<ellipse cx="40" cy="40" rx="15" ry="3" fill="#ffcc99" fill-opacity="0.3" />
<!-- Comet -->
<g transform="rotate(-45, 280, 30)">
<path d="M280,30 Q260,50 240,70" stroke="#ffffff" stroke-width="1.5" fill="none" />
<ellipse cx="280" cy="30" rx="5" ry="3" fill="#ffffff" fill-opacity="0.7" />
<ellipse cx="280" cy="30" rx="8" ry="5" fill="#ffffff" fill-opacity="0.3" />
</g>
<!-- Small asteroid field -->
<g fill="#bbbbbb" fill-opacity="0.5" transform="translate(230, 220)">
<circle cx="0" cy="0" r="1.5" />
<circle cx="5" cy="5" r="1" />
<circle cx="-5" cy="3" r="1.2" />
<circle cx="3" cy="-4" r="0.8" />
<circle cx="-4" cy="-5" r="1.1" />
<circle cx="7" cy="-2" r="0.9" />
<circle cx="-3" cy="7" r="1.3" />
</g>
</g>
<!-- Light beams from jellyfish -->
<g opacity="0.2">
<path d="M150,150 L120,110 L150,90 L180,110 Z" fill="#aaffff" />
<path d="M150,150 L100,130 L90,100 L110,90 Z" fill="#aaffff" />
<path d="M150,150 L200,130 L210,100 L190,90 Z" fill="#aaffff" />
</g>
<!-- Jellyfish -->
<g id="jellyfish" transform="translate(150, 150)">
<!-- Main jellyfish dome/bell -->
<ellipse cx="0" cy="0" rx="60" ry="40" fill="url(#jellyfishDome)" filter="url(#jellyfishGlow)" />
<!-- Jellyfish inner glow -->
<ellipse cx="0" cy="-5" rx="40" ry="25" fill="url(#jellyfishInnerGlow)" />
<!-- Jellyfish patterns and details -->
<path d="M-45,-5 Q-20,-25 0,-5 Q20,-25 45,-5" stroke="#aaffff" stroke-width="2" fill="none" opacity="0.8" />
<path d="M-40,5 Q-15,-10 0,5 Q15,-10 40,5" stroke="#aaffff" stroke-width="2" fill="none" opacity="0.7" />
<path d="M-35,15 Q-10,0 0,15 Q10,0 35,15" stroke="#aaffff" stroke-width="2" fill="none" opacity="0.6" />
<!-- Bioluminescent spots -->
<g fill="#ffffff" fill-opacity="0.9">
<circle cx="-30" cy="-10" r="2" />
<circle cx="-20" cy="0" r="1.5" />
<circle cx="-10" cy="-15" r="1.8" />
<circle cx="0" cy="-5" r="2.2" />
<circle cx="10" cy="-15" r="1.7" />
<circle cx="20" cy="0" r="1.5" />
<circle cx="30" cy="-10" r="2" />
<circle cx="-25" cy="10" r="1.6" />
<circle cx="25" cy="10" r="1.6" />
</g>
<!-- Jellyfish tentacles with dynamic curves -->
<path d="M-50,0 C-60,30 -70,60 -50,90 C-45,100 -55,110 -45,120" stroke="url(#tentaclePattern)" stroke-width="4" fill="none" opacity="0.8" />
<path d="M-40,5 C-50,35 -60,65 -30,95 C-25,105 -30,115 -20,125" stroke="url(#tentaclePattern)" stroke-width="3" fill="none" opacity="0.7" />
<path d="M-30,10 C-35,40 -40,70 -10,100 C-5,110 -10,120 0,130" stroke="url(#tentaclePattern)" stroke-width="4" fill="none" opacity="0.8" />
<path d="M-20,15 C-25,45 -30,75 10,105 C15,115 10,125 20,130" stroke="url(#tentaclePattern)" stroke-width="3" fill="none" opacity="0.7" />
<path d="M-10,15 C-5,45 0,75 30,95 C35,105 30,115 40,120" stroke="url(#tentaclePattern)" stroke-width="4" fill="none" opacity="0.8" />
<path d="M0,15 C5,45 10,75 40,100 C45,110 40,120 50,125" stroke="url(#tentaclePattern)" stroke-width="3" fill="none" opacity="0.7" />
<path d="M10,15 C15,45 20,75 50,95 C55,105 50,115 60,120" stroke="url(#tentaclePattern)" stroke-width="4" fill="none" opacity="0.8" />
<path d="M20,15 C30,45 40,75 60,100 C65,110 60,120 70,125" stroke="url(#tentaclePattern)" stroke-width="3" fill="none" opacity="0.7" />
<path d="M30,10 C40,40 50,70 70,95 C75,105 70,115 80,120" stroke="url(#tentaclePattern)" stroke-width="4" fill="none" opacity="0.8" />
<path d="M40,5 C50,35 60,65 80,90 C85,100 80,110 90,115" stroke="url(#tentaclePattern)" stroke-width="3" fill="none" opacity="0.7" />
<!-- Bioluminescent dots along tentacles -->
<g fill="#ffffff" fill-opacity="0.9">
<circle cx="-50" cy="30" r="1" />
<circle cx="-55" cy="60" r="1.5" />
<circle cx="-45" cy="90" r="1.2" />
<circle cx="-30" cy="60" r="1" />
<circle cx="-20" cy="90" r="1.3" />
<circle cx="-10" cy="60" r="1.1" />
<circle cx="5" cy="90" r="1.4" />
<circle cx="25" cy="75" r="1" />
<circle cx="40" cy="90" r="1.5" />
<circle cx="55" cy="70" r="1.2" />
<circle cx="70" cy="85" r="1" />
<circle cx="85" cy="95" r="1.3" />
</g>
</g>
<!-- Astronaut -->
<g id="astronaut" transform="translate(150, 125)">
<!-- Spacesuit base -->
<ellipse cx="0" cy="5" rx="15" ry="22" fill="url(#spacesuitTexture)" />
<!-- Arms connecting to jellyfish -->
<path d="M15,0 C25,-5 30,-15 25,-25" stroke="#ffffff" stroke-width="6" fill="none" />
<path d="M-15,0 C-25,-5 -30,-15 -25,-25" stroke="#ffffff" stroke-width="6" fill="none" />
<!-- Legs -->
<path d="M-7,25 C-10,35 -15,40 -20,50" stroke="#ffffff" stroke-width="6" fill="none" />
<path d="M7,25 C10,35 15,40 20,50" stroke="#ffffff" stroke-width="6" fill="none" />
<!-- Astronaut helmet -->
<circle cx="0" cy="-20" r="12" fill="#ffffff" stroke="#cccccc" stroke-width="1" />
<!-- Visor -->
<path d="M-8,-23 Q0,-28 8,-23 Q10,-19 8,-15 Q0,-13 -8,-15 Q-10,-19 -8,-23" fill="url(#visorGradient)" />
<!-- Helmet details -->
<path d="M-12,-20 L-14,-20" stroke="#cccccc" stroke-width="1" />
<path d="M12,-20 L14,-20" stroke="#cccccc" stroke-width="1" />
<circle cx="0" cy="-32" r="2" fill="#cccccc" />
<!-- Backpack life support -->
<rect x="-10" y="-10" width="20" height="25" rx="5" ry="5" fill="#dddddd" stroke="#bbbbbb" stroke-width="1" />
<rect x="-6" y="-7" width="12" height="5" rx="1" ry="1" fill="#999999" />
<rect x="-6" y="2" width="12" height="5" rx="1" ry="1" fill="#999999" />
<circle cx="-5" cy="-2" r="1.5" fill="#ff6666" />
<circle cx="5" cy="-2" r="1.5" fill="#66ff66" />
<!-- Spacesuit details -->
<rect x="-2" y="5" width="4" height="10" fill="#888888" />
<circle cx="-8" cy="5" r="2" fill="#cccccc" stroke="#888888" stroke-width="0.5" />
<circle cx="8" cy="5" r="2" fill="#cccccc" stroke="#888888" stroke-width="0.5" />
<path d="M-10,15 L10,15" stroke="#888888" stroke-width="1" fill="none" />
<path d="M-7,20 L7,20" stroke="#888888" stroke-width="1" fill="none" />
<!-- Subtle glow around astronaut -->
<circle cx="0" cy="0" r="30" fill="#ffffff" fill-opacity="0.1" />
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradient for nebula background -->
<radialGradient id="nebulaGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ff00ff" stop-opacity="0.8"/>
<stop offset="40%" stop-color="#3a00ff" stop-opacity="0.7"/>
<stop offset="80%" stop-color="#0a0032" stop-opacity="1"/>
</radialGradient>
<!-- Radial gradient for jellyfish bell -->
<radialGradient id="jellyBellGradient" cx="50%" cy="45%" r="55%">
<stop offset="0%" stop-color="#8ffaff"/>
<stop offset="100%" stop-color="#0cf0ff" stop-opacity="0.85"/>
</radialGradient>
<!-- Gradient for jellyfish bell gloss -->
<radialGradient id="bellGloss" cx="40%" cy="30%" r="30%">
<stop offset="0%" stop-color="white" stop-opacity="0.6"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Gradient for jellyfish tentacles -->
<linearGradient id="tentacleGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5afff7" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#00aaff" stop-opacity="0"/>
</linearGradient>
<!-- Astronaut body gradient -->
<linearGradient id="astroBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e0e0e0"/>
<stop offset="100%" stop-color="#a0a0a0"/>
</linearGradient>
<!-- Astronaut helmet glass gradient -->
<radialGradient id="helmetGlass" cx="50%" cy="50%" r="50%">
<stop offset="20%" stop-color="#bbddff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#3399ff" stop-opacity="0.3"/>
</radialGradient>
<!-- Star twinkle -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<!-- Filter for subtle glow -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="cyan" flood-opacity="0.6"/>
</filter>
<!-- Jellyfish bell pattern for subtle texture -->
<pattern id="bellTexture" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
<circle cx="3" cy="3" r="0.6" fill="#aaffff" opacity="0.15"/>
<circle cx="0" cy="0" r="0.9" fill="#bbfffe" opacity="0.08"/>
<circle cx="6" cy="6" r="0.9" fill="#bbfffe" opacity="0.08"/>
</pattern>
<!-- Sparkle shape -->
<symbol id="sparkle" viewBox="0 0 10 10">
<path d="M5 0 L6 4 L10 5 L6 6 L5 10 L4 6 L0 5 L4 4 Z" fill="white"/>
</symbol>
</defs>
<!-- Background nebula -->
<rect width="300" height="300" fill="url(#nebulaGradient)"/>
<!-- Nebula colorful clouds -->
<g opacity="0.6">
<circle cx="60" cy="60" r="45" fill="url(#bellGloss)"/>
<circle cx="200" cy="90" r="60" fill="url(#bellGloss)" />
<circle cx="130" cy="210" r="70" fill="#cc66ff" opacity="0.22" />
<circle cx="240" cy="230" r="40" fill="#ff44ee" opacity="0.2" />
<circle cx="70" cy="190" r="50" fill="#44ccff" opacity="0.18" />
</g>
<!-- Stars -->
<g>
<circle cx="30" cy="30" r="1.5" fill="white" filter="url(#glow)"/>
<circle cx="80" cy="120" r="1" fill="white" />
<circle cx="90" cy="50" r="2" fill="white" filter="url(#glow)"/>
<circle cx="180" cy="40" r="1" fill="white" />
<circle cx="150" cy="150" r="1.2" fill="white" filter="url(#glow)"/>
<circle cx="220" cy="190" r="0.8" fill="white" />
<circle cx="100" cy="250" r="1" fill="white" />
<circle cx="270" cy="40" r="1.8" fill="white" filter="url(#glow)"/>
</g>
<!-- Twinkling sparkles -->
<use href="#sparkle" x="265" y="20" width="6" height="6" fill="#ffccff" opacity="0.6"/>
<use href="#sparkle" x="45" y="75" width="4" height="4" fill="#aaffff" opacity="0.7"/>
<use href="#sparkle" x="180" y="195" width="5" height="5" fill="#ccffff" opacity="0.5"/>
<use href="#sparkle" x="210" y="110" width="5" height="5" fill="#ffccff" opacity="0.6"/>
<!-- Jellyfish tentacles - wavy luminous lines -->
<g filter="url(#glow)" stroke="url(#tentacleGradient)" stroke-width="3" fill="none" stroke-linecap="round">
<!-- Left side tentacles -->
<path d="M130 160 q-12 30 -15 60" />
<path d="M140 165 q-8 38 -10 65" />
<path d="M150 160 q-10 40 -8 62" />
<!-- Right side tentacles -->
<path d="M170 160 q15 35 13 63" />
<path d="M160 155 q22 45 20 68" />
<path d="M180 170 q12 42 14 63" />
<!-- Middle set -->
<path d="M150 150 q0 55 3 70" />
<path d="M155 150 q8 53 5 68" />
</g>
<!-- Jellyfish bell -->
<g filter="url(#glow)">
<ellipse cx="150" cy="140" rx="70" ry="60" fill="url(#jellyBellGradient)" stroke="#22ccff" stroke-width="2" />
<ellipse cx="150" cy="140" rx="70" ry="60" fill="url(#bellTexture)" />
<ellipse cx="150" cy="130" rx="55" ry="40" fill="url(#bellGloss)" />
</g>
<!-- Jellyfish bell shading for volume -->
<path d="M80 160 Q150 30 220 160 Q150 170 80 160Z" fill="url(#bellGloss)" opacity="0.42"/>
<!-- Jellyfish bell decorative spots -->
<circle cx="100" cy="110" r="5" fill="#6ffafe" opacity="0.3"/>
<circle cx="190" cy="120" r="7" fill="#56e8f7" opacity="0.25"/>
<circle cx="140" cy="100" r="4" fill="#9ffeff" opacity="0.3"/>
<circle cx="160" cy="130" r="6" fill="#33ddff" opacity="0.2"/>
<!-- Astronaut group -->
<g id="astronaut" transform="translate(120 100) scale(1.2) rotate(-10)" filter="url(#glow)">
<!-- Backpack -->
<rect x="15" y="40" width="18" height="28" rx="5" ry="5" fill="url(#astroBody)" stroke="#666" stroke-width="1"/>
<rect x="20" y="45" width="8" height="18" fill="#b0c4d9" />
<!-- Body -->
<ellipse cx="20" cy="50" rx="20" ry="30" fill="url(#astroBody)" stroke="#666" stroke-width="1"/>
<!-- Left arm -->
<path d="M10 55 q-12 5 -10 25" fill="url(#astroBody)" stroke="#777" stroke-width="1.5" stroke-linejoin="round"/>
<ellipse cx="1" cy="75" rx="7" ry="10" fill="#d8dee9" />
<!-- Right arm bent holding reins -->
<path d="M33 55 q15 25 4 40" fill="url(#astroBody)" stroke="#777" stroke-width="1.5" stroke-linejoin="round"/>
<ellipse cx="40" cy="85" rx="6" ry="9" fill="#d8dee9" />
<!-- Legs bent sitting -->
<path d="M18 75 q-7 15 -8 24 l12 3 q4 -14 10 -25Z" fill="url(#astroBody)" stroke="#666" stroke-width="1"/>
<!-- Helmet -->
<circle cx="20" cy="35" r="20" fill="url(#astroBody)" stroke="#555" stroke-width="1"/>
<circle cx="20" cy="35" r="15" fill="url(#helmetGlass)" />
<!-- Helmet reflection -->
<path d="M11 30 q10 5 14 0 q-2 -6 -12 -8Z" fill="white" opacity="0.2" />
<circle cx="27" cy="30" r="3" fill="white" opacity="0.25" />
<!-- Helmet details -->
<line x1="15" y1="17" x2="25" y2="22" stroke="#88b2ee" stroke-width="0.8" opacity="0.5" />
<line x1="20" y1="40" x2="33" y2="45" stroke="#5599ee" stroke-width="0.8" opacity="0.4" />
</g>
<!-- Astronaut reins (rope) -->
<path d="M138 80 q-40 40 -60 70" stroke="#66ccff" stroke-width="1.8" fill="none" stroke-linecap="round" filter="url(#glow)" />
<!-- Luminous particles around jellyfish and astronaut -->
<g>
<circle cx="140" cy="135" r="2" fill="#99ffff" opacity="0.7" filter="url(#glow)"/>
<circle cx="160" cy="120" r="2.5" fill="#66e0ff" opacity="0.6" filter="url(#glow)"/>
<circle cx="130" cy="115" r="1.7" fill="#aafffe" opacity="0.5" />
<circle cx="155" cy="150" r="1.8" fill="#ccf9ff" opacity="0.4" />
<circle cx="150" cy="80" r="1.6" fill="#99ddff" opacity="0.5" />
</g>
<!-- Glowing ring around jellyfish base for ethereal effect -->
<ellipse cx="150" cy="200" rx="80" ry="20" fill="url(#tentacleGradient)" opacity="0.12"/>
</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 is more vibrant and adheres closely to the prompt with a clear depiction of an astronaut riding a glowing jellyfish amidst a colorful nebula.
The inclusion of celestial elements like the planet and the strong use of color enhances the visual appeal and creativity.
Player 2's submission, while technically decent, lacks the same level of detail and compositional strength to fully convey the imaginative scene.
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
135
Player 2
55
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
10
Player 2
3
Circles
The number of circle elements (circle) in the SVG.
Player 1
86
Player 2
28
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
13
Player 2
7
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
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
26
Player 2
15
Groups
The number of group elements (g) in the SVG.
Player 1
11
Player 2
6
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
7
Player 2
7
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
2
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
2
Player 2
1
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
14
Player 2
26
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
26
Player 2
11
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
35
Player 2
38
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
4
Player 2
1
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
77
Player 2
44
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
11
Player 2
10
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
4
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.
