Back

SVG Drawing Match #212

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Cosmic octopus juggling glowing planets in a starry nebula"

Claude 3.7 Sonnet (2025-02-19)

Player 1

ELO: 1,126.841 1,109.739 (-17.1)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="nebula" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#3a015c" />
      <stop offset="40%" stop-color="#4b0082" />
      <stop offset="70%" stop-color="#220042" />
      <stop offset="100%" stop-color="#0d001a" />
    </radialGradient>
    
    <radialGradient id="planet1" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff9d00" />
      <stop offset="100%" stop-color="#ff4500" />
    </radialGradient>
    
    <radialGradient id="planet2" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#00ffff" />
      <stop offset="100%" stop-color="#0088ff" />
    </radialGradient>
    
    <radialGradient id="planet3" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff00ff" />
      <stop offset="100%" stop-color="#9400d3" />
    </radialGradient>
    
    <radialGradient id="planet4" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#adff2f" />
      <stop offset="100%" stop-color="#008000" />
    </radialGradient>
    
    <radialGradient id="planet5" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ffff00" />
      <stop offset="100%" stop-color="#ffd700" />
    </radialGradient>
    
    <radialGradient id="octopusBody" cx="50%" cy="40%" r="60%" fx="40%" fy="30%">
      <stop offset="0%" stop-color="#9c6eb3" />
      <stop offset="70%" stop-color="#673a7e" />
      <stop offset="100%" stop-color="#4a2759" />
    </radialGradient>
    
    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="starGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background Nebula -->
  <rect x="0" y="0" width="300" height="300" fill="url(#nebula)" />
  
  <!-- Stars -->
  <g filter="url(#starGlow)">
    <circle cx="30" cy="40" r="0.8" fill="white" />
    <circle cx="50" cy="60" r="0.6" fill="white" />
    <circle cx="80" cy="30" r="1" fill="white" />
    <circle cx="120" cy="50" r="0.7" fill="white" />
    <circle cx="150" cy="20" r="0.9" fill="white" />
    <circle cx="180" cy="40" r="0.8" fill="white" />
    <circle cx="200" cy="70" r="0.6" fill="white" />
    <circle cx="230" cy="30" r="1" fill="white" />
    <circle cx="260" cy="50" r="0.7" fill="white" />
    <circle cx="20" cy="90" r="0.8" fill="white" />
    <circle cx="60" cy="120" r="0.6" fill="white" />
    <circle cx="90" cy="100" r="1" fill="white" />
    <circle cx="140" cy="90" r="0.7" fill="white" />
    <circle cx="170" cy="110" r="0.9" fill="white" />
    <circle cx="210" cy="130" r="0.8" fill="white" />
    <circle cx="240" cy="100" r="0.6" fill="white" />
    <circle cx="270" cy="120" r="1" fill="white" />
    <circle cx="30" cy="170" r="0.8" fill="white" />
    <circle cx="70" cy="200" r="0.6" fill="white" />
    <circle cx="100" cy="170" r="1" fill="white" />
    <circle cx="140" cy="220" r="0.7" fill="white" />
    <circle cx="180" cy="190" r="0.9" fill="white" />
    <circle cx="220" cy="210" r="0.8" fill="white" />
    <circle cx="250" cy="180" r="0.6" fill="white" />
    <circle cx="280" cy="230" r="1" fill="white" />
    <circle cx="40" cy="260" r="0.8" fill="white" />
    <circle cx="80" cy="240" r="0.6" fill="white" />
    <circle cx="120" cy="270" r="1" fill="white" />
    <circle cx="160" cy="250" r="0.7" fill="white" />
    <circle cx="200" cy="260" r="0.9" fill="white" />
    <circle cx="240" cy="280" r="0.8" fill="white" />
    <circle cx="270" cy="260" r="0.6" fill="white" />
  </g>
  
  <!-- Cosmic dust -->
  <path d="M20,130 Q80,90 130,150 Q200,50 250,120 Q280,190 240,230 Q170,250 120,210 Q70,250 20,130" fill="rgba(138,43,226,0.2)" />
  <path d="M50,80 Q120,40 180,90 Q240,40 270,100 Q250,170 190,190 Q120,170 90,220 Q40,170 50,80" fill="rgba(75,0,130,0.15)" />
  
  <!-- Octopus body -->
  <ellipse cx="150" cy="170" rx="35" ry="45" fill="url(#octopusBody)" />
  
  <!-- Octopus eyes -->
  <circle cx="140" cy="157" r="8" fill="white" />
  <circle cx="160" cy="157" r="8" fill="white" />
  <circle cx="140" cy="157" r="4" fill="black" />
  <circle cx="160" cy="157" r="4" fill="black" />
  <circle cx="138" cy="155" r="2" fill="white" />
  <circle cx="158" cy="155" r="2" fill="white" />
  
  <!-- Octopus mouth -->
  <path d="M145,175 Q150,182 155,175" stroke="#4a2759" stroke-width="2" fill="none" />
  
  <!-- Octopus tentacles -->
  <path d="M120,180 Q100,200 80,190 Q60,180 40,200" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M115,185 Q90,215 70,200 Q50,220 20,210" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M130,200 Q120,230 90,240 Q80,255 70,270" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M150,210 Q150,240 140,260 Q145,270 150,280" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M170,200 Q180,230 200,240 Q220,250 230,270" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M180,185 Q210,215 235,200 Q255,210 280,210" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M185,175 Q215,180 225,160 Q235,145 270,150" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  <path d="M175,160 Q190,130 210,120 Q230,110 240,90" stroke="#673a7e" stroke-width="6" fill="none" stroke-linecap="round" />
  
  <!-- Juggling planets with glow effect -->
  <g filter="url(#glow)">
    <circle cx="90" cy="125" r="15" fill="url(#planet1)" />
    <circle cx="210" cy="125" r="18" fill="url(#planet2)" />
    <circle cx="150" cy="70" r="20" fill="url(#planet3)" />
    <circle cx="60" cy="170" r="12" fill="url(#planet4)" />
    <circle cx="240" cy="170" r="14" fill="url(#planet5)" />
    
    <!-- Rings around planets -->
    <ellipse cx="150" cy="70" rx="26" ry="8" fill="none" stroke="#ff80ff" stroke-width="1.5" transform="rotate(20,150,70)" />
    <ellipse cx="210" cy="125" rx="24" ry="7" fill="none" stroke="#80ffff" stroke-width="1.5" transform="rotate(-15,210,125)" />
  </g>
  
  <!-- Motion trails for juggling -->
  <path d="M90,125 Q110,100 150,70 Q190,100 210,125 Q230,150 240,170 Q200,190 150,200 Q100,190 60,170 Q70,150 90,125" stroke="rgba(255,255,255,0.3)" stroke-width="1" stroke-dasharray="3,3" fill="none" />
  
  <!-- Sparkles around planets -->
  <g filter="url(#starGlow)">
    <circle cx="85" cy="120" r="1" fill="white" />
    <circle cx="95" cy="130" r="1" fill="white" />
    <circle cx="205" cy="120" r="1" fill="white" />
    <circle cx="215" cy="130" r="1" fill="white" />
    <circle cx="145" cy="65" r="1" fill="white" />
    <circle cx="155" cy="75" r="1" fill="white" />
    <circle cx="55" cy="165" r="1" fill="white" />
    <circle cx="65" cy="175" r="1" fill="white" />
    <circle cx="235" cy="165" r="1" fill="white" />
    <circle cx="245" cy="175" r="1" fill="white" />
  </g>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,102.886 1,119.988 (+17.1)

Winner

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions -->
  <defs>
    <!-- Space background gradient -->
    <linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="50%" stop-color="#0f0f35" />
      <stop offset="100%" stop-color="#1a1a40" />
    </linearGradient>
    
    <!-- Nebula gradients -->
    <radialGradient id="nebulaGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ff55aa" stop-opacity="0.7" />
      <stop offset="40%" stop-color="#aa55ff" stop-opacity="0.5" />
      <stop offset="70%" stop-color="#5555ff" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#0a0a2a" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="nebulaGradient2" cx="30%" cy="70%" r="60%" fx="30%" fy="70%">
      <stop offset="0%" stop-color="#55ffaa" stop-opacity="0.6" />
      <stop offset="50%" stop-color="#55aaff" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#0a0a2a" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="nebulaGradient3" cx="70%" cy="30%" r="50%" fx="70%" fy="30%">
      <stop offset="0%" stop-color="#ffaa55" stop-opacity="0.5" />
      <stop offset="60%" stop-color="#ff5555" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#0a0a2a" stop-opacity="0" />
    </radialGradient>
    
    <!-- Glow filters -->
    <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>
    
    <filter id="strongGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Planet gradients -->
    <radialGradient id="planet1Gradient" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#ffdd55" />
      <stop offset="80%" stop-color="#ff8800" />
      <stop offset="100%" stop-color="#ff5500" />
    </radialGradient>
    
    <radialGradient id="planet2Gradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#55ffdd" />
      <stop offset="70%" stop-color="#00aaff" />
      <stop offset="100%" stop-color="#0055ff" />
    </radialGradient>
    
    <radialGradient id="planet3Gradient" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff55aa" />
      <stop offset="70%" stop-color="#aa0055" />
      <stop offset="100%" stop-color="#550022" />
    </radialGradient>
    
    <radialGradient id="planet4Gradient" cx="60%" cy="30%" r="70%" fx="60%" fy="30%">
      <stop offset="0%" stop-color="#aaffcc" />
      <stop offset="50%" stop-color="#55cc99" />
      <stop offset="100%" stop-color="#228866" />
    </radialGradient>
    
    <radialGradient id="planet5Gradient" cx="40%" cy="40%" r="60%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#eeeeff" />
      <stop offset="70%" stop-color="#aaaadd" />
      <stop offset="100%" stop-color="#7777aa" />
    </radialGradient>
    
    <!-- Ring gradient -->
    <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffcc88" stop-opacity="0.7" />
      <stop offset="20%" stop-color="#ffaa55" stop-opacity="0.6" />
      <stop offset="50%" stop-color="#ffddaa" stop-opacity="0.8" />
      <stop offset="80%" stop-color="#ffaa55" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#ffcc88" stop-opacity="0.7" />
    </linearGradient>
    
    <!-- Octopus gradients -->
    <radialGradient id="octopusGradient" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
      <stop offset="0%" stop-color="#aa55ff" />
      <stop offset="50%" stop-color="#9900ff" />
      <stop offset="80%" stop-color="#6600aa" />
      <stop offset="100%" stop-color="#44008c" />
    </radialGradient>
    
    <linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#9900ff" />
      <stop offset="50%" stop-color="#aa55ff" />
      <stop offset="100%" stop-color="#cc88ff" />
    </linearGradient>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)" />
  
  <!-- Distant galaxies -->
  <g id="distant-galaxies">
    <ellipse cx="260" cy="50" rx="15" ry="5" fill="#ffaaff" opacity="0.3" filter="url(#starGlow)" transform="rotate(45,260,50)" />
    <ellipse cx="40" cy="280" rx="20" ry="6" fill="#aaffff" opacity="0.2" filter="url(#starGlow)" transform="rotate(-20,40,280)" />
    <ellipse cx="270" cy="200" rx="12" ry="3" fill="#ffffaa" opacity="0.2" filter="url(#starGlow)" transform="rotate(10,270,200)" />
  </g>
  
  <!-- Nebula clouds -->
  <ellipse cx="150" cy="150" rx="200" ry="180" fill="url(#nebulaGradient)" />
  <ellipse cx="90" cy="200" rx="150" ry="120" fill="url(#nebulaGradient2)" />
  <ellipse cx="210" cy="90" rx="120" ry="100" fill="url(#nebulaGradient3)" />
  
  <!-- Stars in background -->
  <g id="stars">
    <!-- Small stars -->
    <circle cx="20" cy="30" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="50" cy="50" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="20" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="110" cy="40" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="140" cy="70" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="170" cy="30" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="200" cy="60" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="230" cy="80" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="40" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="280" cy="90" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="40" cy="100" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="70" cy="120" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="100" cy="90" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="130" cy="110" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="160" cy="100" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="190" cy="130" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="220" cy="100" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="250" cy="120" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="30" cy="150" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="60" cy="170" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="140" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="160" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="150" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="210" cy="170" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="240" cy="190" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="270" cy="160" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="20" cy="200" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="50" cy="220" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="190" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="110" cy="210" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="140" cy="230" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="170" cy="200" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="200" cy="220" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="230" cy="240" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="210" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="290" cy="230" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="30" cy="250" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="60" cy="270" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="240" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="260" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="150" cy="280" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="250" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="210" cy="270" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="240" cy="290" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="270" cy="260" r="0.8" fill="white" filter="url(#starGlow)" />
    
    <!-- Brighter stars -->
    <circle cx="45" cy="75" r="1.5" fill="#fffdfa" filter="url(#starGlow)" />
    <circle cx="175" cy="65" r="1.8" fill="#fffdfa" filter="url(#starGlow)" />
    <circle cx="265" cy="145" r="1.7" fill="#fffdfa" filter="url(#starGlow)" />
    <circle cx="95" cy="215" r="1.6" fill="#fffdfa" filter="url(#starGlow)" />
    <circle cx="195" cy="255" r="1.9" fill="#fffdfa" filter="url(#starGlow)" />
    
    <!-- Super bright stars -->
    <circle cx="25" cy="55" r="1.2" fill="#ffffff" filter="url(#strongGlow)" />
    <circle cx="255" cy="25" r="1.3" fill="#ffffff" filter="url(#strongGlow)" />
    <circle cx="155" cy="275" r="1.4" fill="#ffffff" filter="url(#strongGlow)" />
  </g>
  
  <!-- Octopus -->
  <g id="octopus">
    <!-- Tentacles -->
    <!-- Tentacle 1 - top left -->
    <path d="M135,125 C120,100 100,85 75,80" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M135,125 C120,100 100,85 75,80" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 2 - top -->
    <path d="M150,115 C150,90 140,70 150,40" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M150,115 C150,90 140,70 150,40" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 3 - top right -->
    <path d="M165,125 C180,100 200,85 225,80" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M165,125 C180,100 200,85 225,80" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 4 - left -->
    <path d="M125,155 C100,155 80,150 50,165" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M125,155 C100,155 80,150 50,165" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 5 - right -->
    <path d="M175,155 C200,155 220,150 250,165" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M175,155 C200,155 220,150 250,165" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 6 - bottom left -->
    <path d="M135,175 C120,200 95,215 75,220" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M135,175 C120,200 95,215 75,220" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 7 - bottom -->
    <path d="M150,185 C150,210 140,235 150,260" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M150,185 C150,210 140,235 150,260" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Tentacle 8 - bottom right -->
    <path d="M165,175 C180,200 205,215 225,220" stroke="url(#tentacleGradient)" stroke-width="8" fill="none" stroke-linecap="round" />
    <path d="M165,175 C180,200 205,215 225,220" stroke="#cc88ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="1,8" />
    
    <!-- Main body -->
    <ellipse cx="150" cy="150" rx="30" ry="35" fill="url(#octopusGradient)" />
    
    <!-- Cosmic patterns on body -->
    <path d="M155,130 C160,140 170,145 165,160 C160,170 150,175 140,165 C135,155 130,140 140,130 C147,125 150,125 155,130" fill="#aa88ff" opacity="0.3" />
    <circle cx="135" cy="160" r="5" fill="#cc99ff" opacity="0.5" />
    <circle cx="165" cy="155" r="4" fill="#cc99ff" opacity="0.4" />
    <circle cx="150" cy="170" r="6" fill="#cc99ff" opacity="0.3" />
    
    <!-- Eyes -->
    <circle cx="140" cy="140" r="8" fill="#aa88ff" />
    <circle cx="160" cy="140" r="8" fill="#aa88ff" />
    <circle cx="140" cy="140" r="4" fill="white" />
    <circle cx="160" cy="140" r="4" fill="white" />
    <circle cx="138" cy="138" r="2" fill="black" />
    <circle cx="158" cy="138" r="2" fill="black" />
    
    <!-- Glowing spots -->
    <circle cx="125" cy="145" r="1.5" fill="#ffffff" filter="url(#starGlow)" />
    <circle cx="175" cy="145" r="1.5" fill="#ffffff" filter="url(#starGlow)" />
    <circle cx="150" cy="125" r="1.5" fill="#ffffff" filter="url(#starGlow)" />
    <circle cx="150" cy="175" r="1.5" fill="#ffffff" filter="url(#starGlow)" />
  </g>
  
  <!-- Planets being juggled -->
  <g id="planets">
    <!-- Planet 1 - Saturn-like -->
    <ellipse cx="150" cy="40" rx="25" ry="4" fill="url(#ringGradient)" filter="url(#glow)" transform="rotate(15,150,40)" />
    <circle cx="150" cy="40" r="15" fill="url(#planet1Gradient)" filter="url(#glow)" />
    <path d="M145,30 Q150,25 155,30 Q160,35 155,40 Q150,45 145,40 Z" fill="#ffaa55" opacity="0.7" />
    
    <!-- Planet 2 - Ice planet -->
    <circle cx="225" cy="80" r="12" fill="url(#planet2Gradient)" filter="url(#glow)" />
    <ellipse cx="225" cy="80" rx="15" ry="3" fill="white" opacity="0.3" />
    <path d="M220,75 Q225,70 230,75 M225,78 Q230,83 235,78" stroke="#ffffff" stroke-width="1" opacity="0.8" />
    
    <!-- Planet 3 - Hot planet -->
    <circle cx="250" cy="165" r="18" fill="url(#planet3Gradient)" filter="url(#glow)" />
    <circle cx="245" cy="160" r="4" fill="#ff88bb" opacity="0.7" />
    <circle cx="255" cy="170" r="3" fill="#ff88bb" opacity="0.7" />
    <circle cx="250" cy="165" r="20" fill="none" stroke="#ff88bb" stroke-width="1" opacity="0.5" />
    
    <!-- Planet 4 - Earth-like -->
    <circle cx="225" cy="220" r="14" fill="url(#planet4Gradient)" filter="url(#glow)" />
    <ellipse cx="225" cy="220" rx="14" ry="2" fill="white" opacity="0.4" transform="rotate(-15,225,220)" />
    <ellipse cx="225" cy="220" rx="14" ry="1.5" fill="white" opacity="0.3" transform="rotate(45,225,220)" />
    <path d="M218,215 C220,213 222,216 225,214 C228,212 232,215 230,218" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.7" />
    
    <!-- Planet 5 - Moon-like -->
    <circle cx="150" cy="260" r="13" fill="url(#planet5Gradient)" filter="url(#glow)" />
    <circle cx="153" cy="255" r="3" fill="white" opacity="0.6" />
    <circle cx="145" cy="262" r="2" fill="white" opacity="0.5" />
    <circle cx="155" cy="266" r="1.5" fill="white" opacity="0.4" />
    
    <!-- Planet 6 - Gas giant -->
    <circle cx="75" cy="220" r="16" fill="url(#planet1Gradient)" filter="url(#glow)" transform="rotate(180,75,220)" />
    <path d="M70,215 Q75,210 80,215 Q85,220 80,225 Q75,230 70,225 Z" fill="#ffaa55" opacity="0.5" />
    <ellipse cx="75" cy="220" rx="16" ry="3" fill="#ffaa55" opacity="0.2" transform="rotate(30,75,220)" />
    <ellipse cx="75" cy="220" rx="16" ry="2" fill="#ffaa55" opacity="0.2" transform="rotate(60,75,220)" />
    
    <!-- Planet 7 - Ringed mini planet -->
    <ellipse cx="50" cy="165" rx="15" ry="3" fill="url(#ringGradient)" opacity="0.6" filter="url(#glow)" transform="rotate(-10,50,165)" />
    <circle cx="50" cy="165" r="11" fill="url(#planet4Gradient)" filter="url(#glow)" transform="rotate(90,50,165)" />
    <ellipse cx="50" cy="165" rx="11" ry="2" fill="white" opacity="0.4" transform="rotate(30,50,165)" />
    
    <!-- Planet 8 - Water planet -->
    <circle cx="75" cy="80" r="17" fill="url(#planet2Gradient)" filter="url(#glow)" transform="rotate(270,75,80)" />
    <ellipse cx="75" cy="80" rx="20" ry="3" fill="white" opacity="0.2" transform="rotate(15,75,80)" />
    <path d="M65,75 C70,72 75,78 80,75 C85,72 90,78 85,82" fill="none" stroke="#aaffff" stroke-width="1.5" opacity="0.6" />
  </g>
  
  <!-- Sparkles and motion lines -->
  <g id="sparkles">
    <!-- Sparkles around planets -->
    <path d="M145,35 L155,45 M155,35 L145,45" stroke="#ffffaa" stroke-width="1" />
    <path d="M220,75 L230,85 M230,75 L220,85" stroke="#aaffff" stroke-width="1" />
    <path d="M245,160 L255,170 M255,160 L245,170" stroke="#ffaadd" stroke-width="1" />
    <path d="M220,215 L230,225 M230,215 L220,225" stroke="#aaffdd" stroke-width="1" />
    <path d="M145,255 L155,265 M155,255 L145,265" stroke="#ddddff" stroke-width="1" />
    <path d="M70,215 L80,225 M80,215 L70,225" stroke="#ffffaa" stroke-width="1" />
    <path d="M45,160 L55,170 M55,160 L45,170" stroke="#aaffdd" stroke-width="1" />
    <path d="M70,75 L80,85 M80,75 L70,85" stroke="#aaffff" stroke-width="1" />
    
    <!-- Motion arcs for juggling -->
    <path d="M90,120 C120,80 180,80 210,120" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.4" />
    <path d="M210,180 C180,220 120,220 90,180" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.4" />
    <path d="M60,150 C100,100 200,100 240,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.3" />
    <path d="M240,150 C200,200 100,200 60,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.3" />
    
    <!-- Motion trails -->
    <path d="M150,60 C145,55 145,50 150,40" stroke="#ffffaa" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M200,90 C210,85 220,82 225,80" stroke="#aaffff" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M230,165 C235,165 245,165 250,165" stroke="#ffaadd" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M200,215 C210,215 220,218 225,220" stroke="#aaffdd" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M150,240 C150,245 150,255 150,260" stroke="#ddddff" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M100,215 C90,218 80,220 75,220" stroke="#ffffaa" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M70,165 C65,165 55,165 50,165" stroke="#aaffdd" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
    <path d="M100,90 C90,85 80,82 75,80" stroke="#aaffff" stroke-width="1" stroke-dasharray="1,2" opacity="0.5" />
  </g>
  
  <!-- Energy particles -->
  <g id="energy-particles">
    <circle cx="120" cy="110" r="1" fill="#ffffff" opacity="0.7" />
    <circle cx="200" cy="130" r="0.8" fill="#ffffff" opacity="0.7" />
    <circle cx="90" cy="180" r="1.2" fill="#ffffff" opacity="0.7" />
    <circle cx="220" cy="190" r="0.7" fill="#ffffff" opacity="0.7" />
    <circle cx="130" cy="230" r="0.9" fill="#ffffff" opacity="0.7" />
    <circle cx="185" cy="90" r="1.1" fill="#ffffff" opacity="0.7" />
    <circle cx="90" cy="100" r="0.6" fill="#ffffff" opacity="0.7" />
    <circle cx="210" cy="170" r="0.8" fill="#ffffff" opacity="0.7" />
  </g>
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 2

Judge's Analysis

Player 2's submission excels in its vibrant color palette and dynamic composition, effectively capturing the cosmic theme.

The planets are more distinct and creatively designed, enhancing the overall visual appeal.

Additionally, the use of a nebula background adds depth, aligning closely with the prompt.

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

Player 2

147

Rectangles

The number of rectangle elements (rect) in the SVG.

Player 1

Player 2

Circles

The number of circle elements (circle) in the SVG.

Player 1

Player 2

Ellipses

The number of ellipse elements (ellipse) in the SVG.

Player 1

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

—

Player 2

—

Paths

The number of path elements (path) in the SVG.

Player 1

Player 2

Groups

The number of group elements (g) in the SVG.

Player 1

Player 2

Visual Effects Metrics

Gradients

The number of gradient definitions (linearGradient, radialGradient) in the SVG.

Player 1

Player 2

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

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

—

Player 2

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

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

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

Player 2

113

Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1

—

Player 2

—

Defs Elements

The number of elements defined within the defs element in the SVG.

Player 1

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.