Back

SVG Drawing Match #2672

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A spaceship shaped like a teapot soaring through a galaxy filled with glowing donuts."

GPT-4o mini (2024-07-18)
Player 1
ELO: 813.454 812.026 (-1.4)
SVG by GPT-4o mini (2024-07-18) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="teapotGradient" x1="0%" y1="100%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff7f50; stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#ff6347; stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="donutGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#ffd700; stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#fff8dc; stop-opacity:1"/>
    </linearGradient>
    <radialGradient id="glowGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:#ffcc00; stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#ff8c00; stop-opacity:0"/>
    </radialGradient>
  </defs>
  
  <rect width="100%" height="100%" fill="black" />
  
  <g transform="translate(150,150)">
    <path d="M-30,20 C-50,-20 50,-20 30,20 L50,0 C90,20 70,60 0,60 L-50,60 C-50,20 -30,20 0,0" fill="url(#teapotGradient)" />
    <path d="M-50,60 L-70,80 L70,80 L50,60 Z" fill="url(#teapotGradient)" />
    <circle cx="-30" cy="0" r="5" fill="#000" />
    <path d="M-24,-15 L-20,-30 L-16,-15 Z" fill="#0e0e10" />
    <path d="M16,-15 L20,-30 L24,-15 Z" fill="#0e0e10" />
  </g>

  <g>
    <circle cx="75" cy="50" r="25" fill="url(#donutGradient)" stroke="#8b4513" stroke-width="3" />
    <circle cx="75" cy="50" r="5" fill="#fff" />
    
    <circle cx="-50" cy="-60" r="20" fill="url(#donutGradient)" stroke="#8b4513" stroke-width="2" />
    <circle cx="-50" cy="-60" r="4" fill="#fff" />

    <circle cx="120" cy="-80" r="30" fill="url(#donutGradient)" stroke="#8b4513" stroke-width="3" />
    <circle cx="120" cy="-80" r="6" fill="#fff" />
  </g>

  <g>
    <ellipse cx="0" cy="0" rx="150" ry="75" fill="url(#glowGradient)" opacity="0.5" />
    <ellipse cx="0" cy="0" rx="120" ry="60" fill="url(#glowGradient)" opacity="0.3" />
  </g>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,345.725 1,347.152 (+1.4)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions for reusable elements -->
  <defs>
    <!-- Space background gradient -->
    <radialGradient id="spaceGradient" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#1a0a2e" />
      <stop offset="50%" stop-color="#0f0524" />
      <stop offset="100%" stop-color="#050211" />
    </radialGradient>
    
    <!-- Teapot engine glow -->
    <radialGradient id="engineGlow" cx="30%" cy="50%" r="70%" fx="30%" fy="50%">
      <stop offset="0%" stop-color="#ff9500" />
      <stop offset="40%" stop-color="#ff5d00" />
      <stop offset="100%" stop-color="rgba(255,0,0,0)" />
    </radialGradient>
    
    <!-- Donut glow filter -->
    <filter id="donutGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Strong donut glow filter -->
    <filter id="strongDonutGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="4" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Star glow -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Nebula pattern -->
    <filter id="nebula" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" result="noise" />
      <feColorMatrix type="matrix" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 0.5 0" result="coloredNoise" />
      <feBlend in="SourceGraphic" in2="coloredNoise" mode="overlay" />
    </filter>
    
    <!-- Donut gradients -->
    <linearGradient id="donutGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff55cc" />
      <stop offset="100%" stop-color="#ff007b" />
    </linearGradient>
    
    <linearGradient id="donutGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#55ffcc" />
      <stop offset="100%" stop-color="#00c3ff" />
    </linearGradient>
    
    <linearGradient id="donutGrad3" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffcc55" />
      <stop offset="100%" stop-color="#ff8c00" />
    </linearGradient>
    
    <linearGradient id="donutGrad4" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff55ff" />
      <stop offset="100%" stop-color="#aa00ff" />
    </linearGradient>
    
    <!-- Teapot metallic gradient -->
    <linearGradient id="teapotMetal" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e0e0e0" />
      <stop offset="45%" stop-color="#ffffff" />
      <stop offset="55%" stop-color="#f0f0f0" />
      <stop offset="100%" stop-color="#c0c0c0" />
    </linearGradient>
    
    <!-- Space dust particles -->
    <radialGradient id="spaceDust" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="rgba(255,255,255,0.3)" />
      <stop offset="100%" stop-color="rgba(255,255,255,0)" />
    </radialGradient>
    
    <!-- Distant planet gradient -->
    <radialGradient id="planetGradient" cx="40%" cy="40%" r="60%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#4466aa" />
      <stop offset="100%" stop-color="#223366" />
    </radialGradient>
    
    <!-- Window glow -->
    <radialGradient id="windowGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#80ffff" />
      <stop offset="100%" stop-color="#00ccff" />
    </radialGradient>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#spaceGradient)" />
  
  <!-- Nebula effect -->
  <rect x="0" y="0" width="300" height="300" fill="rgba(60,20,120,0.1)" filter="url(#nebula)" />
  
  <!-- Distant hazy planet -->
  <circle cx="270" cy="40" r="25" fill="url(#planetGradient)" opacity="0.7" />
  <ellipse cx="270" cy="35" rx="20" ry="5" fill="rgba(150,180,255,0.2)" transform="rotate(-15, 270, 40)" />
  
  <!-- Stars -->
  <g class="stars">
    <circle cx="20" cy="30" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="50" cy="60" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="40" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="20" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="150" cy="80" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="200" cy="50" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="230" cy="90" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="60" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="40" cy="120" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="180" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="140" cy="210" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="170" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="220" cy="230" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="270" cy="190" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="30" cy="250" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="270" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="130" cy="290" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="190" cy="260" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="240" cy="280" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="280" cy="240" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="35" cy="45" r="0.5" fill="white" filter="url(#starGlow)" />
    <circle cx="65" cy="75" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="95" cy="35" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="125" cy="55" r="0.4" fill="white" filter="url(#starGlow)" />
    <circle cx="155" cy="25" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="185" cy="45" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="215" cy="65" r="0.5" fill="white" filter="url(#starGlow)" />
    <circle cx="245" cy="35" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="275" cy="55" r="0.4" fill="white" filter="url(#starGlow)" />
    <circle cx="25" cy="85" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="55" cy="105" r="0.5" fill="white" filter="url(#starGlow)" />
    <circle cx="85" cy="125" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="115" cy="145" r="0.4" fill="white" filter="url(#starGlow)" />
    <circle cx="145" cy="165" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="175" cy="185" r="0.5" fill="white" filter="url(#starGlow)" />
    <circle cx="205" cy="205" r="0.6" fill="white" filter="url(#starGlow)" />
    <circle cx="235" cy="225" r="0.4" fill="white" filter="url(#starGlow)" />
    <circle cx="265" cy="245" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="295" cy="265" r="0.5" fill="white" filter="url(#starGlow)" />
  </g>
  
  <!-- Glowing Donuts (in the background) -->
  <g class="backgroundDonuts">
    <!-- Donut 1 (far background) -->
    <g transform="translate(210, 50) rotate(45) scale(0.6)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad1)" filter="url(#donutGlow)" opacity="0.7" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
    </g>
    
    <!-- Donut 2 (far background) -->
    <g transform="translate(40, 220) rotate(20) scale(0.5)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad2)" filter="url(#donutGlow)" opacity="0.6" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
    </g>
    
    <!-- Donut 3 (far background) -->
    <g transform="translate(260, 170) rotate(70) scale(0.4)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad3)" filter="url(#donutGlow)" opacity="0.5" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
    </g>
    
    <!-- More distant donuts -->
    <g transform="translate(30, 60) rotate(15) scale(0.3)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad4)" filter="url(#donutGlow)" opacity="0.4" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
    </g>
    
    <g transform="translate(190, 280) rotate(40) scale(0.25)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad1)" filter="url(#donutGlow)" opacity="0.3" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
    </g>
  </g>
  
  <!-- Spaceship trail/exhaust -->
  <g class="shipExhaust">
    <path d="M 120,150 C 100,152 80,155 40,160 C 60,140 80,150 120,150 Z" fill="url(#engineGlow)" opacity="0.7">
      <animate attributeName="d" 
               values="M 120,150 C 100,152 80,155 40,160 C 60,140 80,150 120,150 Z;
                      M 120,150 C 100,152 80,155 30,165 C 50,135 80,150 120,150 Z;
                      M 120,150 C 100,152 80,155 40,160 C 60,140 80,150 120,150 Z" 
               dur="1.5s" repeatCount="indefinite" />
    </path>
    
    <!-- Smaller exhaust particles -->
    <g opacity="0.6">
      <circle cx="90" cy="150" r="2" fill="#ff9500">
        <animate attributeName="cx" values="90;70;50;30" dur="2s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0.3;0" dur="2s" repeatCount="indefinite" />
      </circle>
      <circle cx="85" cy="155" r="1.5" fill="#ff9500">
        <animate attributeName="cx" values="85;65;45;25" dur="1.7s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0.3;0" dur="1.7s" repeatCount="indefinite" />
      </circle>
      <circle cx="88" cy="145" r="1.8" fill="#ff9500">
        <animate attributeName="cx" values="88;68;48;28" dur="1.9s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0.3;0" dur="1.9s" repeatCount="indefinite" />
      </circle>
    </g>
  </g>
  
  <!-- Teapot Spaceship -->
  <g class="teapotShip" transform="translate(150, 150)">
    <animateTransform attributeName="transform" 
                      type="translate" 
                      values="150,150; 152,148; 150,146; 148,148; 150,150" 
                      dur="4s" 
                      repeatCount="indefinite" />
    
    <!-- Teapot body -->
    <ellipse cx="0" cy="0" rx="30" ry="20" fill="url(#teapotMetal)" stroke="#a0a0a0" stroke-width="1" />
    
    <!-- Teapot base -->
    <ellipse cx="0" cy="10" rx="20" ry="8" fill="url(#teapotMetal)" stroke="#a0a0a0" stroke-width="0.5" />
    
    <!-- Teapot spout -->
    <path d="M 30,0 C 40,-5 50,-5 60,0 C 65,5 65,15 60,20 C 50,25 40,15 30,0" fill="url(#teapotMetal)" stroke="#a0a0a0" stroke-width="1" />
    
    <!-- Spout detail/thruster -->
    <circle cx="60" cy="5" r="3" fill="#ff3300" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.4;0.8" dur="0.5s" repeatCount="indefinite" />
    </circle>
    
    <!-- Teapot handle -->
    <path d="M -30,0 C -40,-15 -35,-25 -25,-25 C -15,-25 -10,-15 -20,0" fill="none" stroke="url(#teapotMetal)" stroke-width="4" stroke-linecap="round" />
    
    <!-- Teapot lid -->
    <ellipse cx="0" cy="-5" rx="15" ry="10" fill="url(#teapotMetal)" stroke="#a0a0a0" stroke-width="1" transform="rotate(-10)" />
    <circle cx="0" cy="-12" r="3" fill="url(#teapotMetal)" stroke="#a0a0a0" stroke-width="0.5" />
    
    <!-- Spaceship windows (along the body) -->
    <circle cx="-15" cy="-5" r="3" fill="url(#windowGlow)" stroke="#a0a0a0" stroke-width="0.5">
      <animate attributeName="opacity" values="1;0.7;1" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="0" cy="-7" r="3" fill="url(#windowGlow)" stroke="#a0a0a0" stroke-width="0.5">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="15" cy="-5" r="3" fill="url(#windowGlow)" stroke="#a0a0a0" stroke-width="0.5">
      <animate attributeName="opacity" values="1;0.7;1" dur="3s" repeatCount="indefinite" />
    </circle>
    
    <!-- Additional window on spout -->
    <circle cx="40" cy="0" r="2" fill="url(#windowGlow)" stroke="#a0a0a0" stroke-width="0.5">
      <animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite" />
    </circle>
    
    <!-- Decorative elements on teapot body -->
    <path d="M -10,12 C 0,15 10,15 20,12" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
    <path d="M -20,8 C -10,11 0,11 10,8" fill="none" stroke="#a0a0a0" stroke-width="0.5" />
    
    <!-- Spaceship engine lights -->
    <circle cx="-25" cy="8" r="2" fill="#ff5500">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="0.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="-25" cy="0" r="2" fill="#ff5500">
      <animate attributeName="opacity" values="1;0.7;1" dur="0.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="-25" cy="-8" r="2" fill="#ff5500">
      <animate attributeName="opacity" values="0.7;1;0.7" dur="0.5s" repeatCount="indefinite" />
    </circle>
    
    <!-- Spaceship antenna -->
    <line x1="0" y1="-15" x2="0" y2="-25" stroke="#a0a0a0" stroke-width="1" />
    <circle cx="0" cy="-25" r="2" fill="#ff0000">
      <animate attributeName="opacity" values="1;0.5;1" dur="1s" repeatCount="indefinite" />
    </circle>
    
    <!-- Additional antennas -->
    <line x1="-10" y1="-8" x2="-15" y2="-20" stroke="#a0a0a0" stroke-width="0.5" />
    <circle cx="-15" cy="-20" r="1" fill="#00ff00">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="1.2s" repeatCount="indefinite" />
    </circle>
    
    <line x1="10" y1="-8" x2="15" y2="-20" stroke="#a0a0a0" stroke-width="0.5" />
    <circle cx="15" cy="-20" r="1" fill="#0088ff">
      <animate attributeName="opacity" values="0.5;1;0.5" dur="0.8s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Mid-ground Glowing Donuts -->
  <g class="midgroundDonuts">
    <!-- Mid-ground Donut 1 -->
    <g transform="translate(100, 250) rotate(20) scale(0.7)">
      <circle cx="0" cy="0" r="25" fill="url(#donutGrad4)" filter="url(#donutGlow)" opacity="0.8" />
      <circle cx="0" cy="0" r="12" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-20" y1="-10" x2="-15" y2="-8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-10" y1="-20" x2="-8" y2="-15" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="10" y1="-20" x2="8" y2="-15" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="20" y1="-5" x2="15" y2="-3" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="15" x2="10" y2="10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-15" y1="15" x2="-10" y2="10" stroke="#00ff00" stroke-width="2" stroke-linecap="round" />
    </g>
    
    <!-- Mid-ground Donut 2 -->
    <g transform="translate(200, 100) rotate(60) scale(0.65)">
      <circle cx="0" cy="0" r="25" fill="url(#donutGrad1)" filter="url(#donutGlow)" opacity="0.8" />
      <circle cx="0" cy="0" r="12" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-20" y1="-10" x2="-15" y2="-8" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="-10" y1="-20" x2="-8" y2="-15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="10" y1="-20" x2="8" y2="-15" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="20" y1="-5" x2="15" y2="-3" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="15" x2="10" y2="10" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="-15" y1="15" x2="-10" y2="10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
    </g>
  </g>
  
  <!-- Foreground Glowing Donuts -->
  <g class="foregroundDonuts">
    <!-- Donut 4 (foreground) -->
    <g transform="translate(80, 80) rotate(30) scale(0.9)">
      <circle cx="0" cy="0" r="25" fill="url(#donutGrad1)" filter="url(#strongDonutGlow)" />
      <circle cx="0" cy="0" r="12" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-20" y1="-10" x2="-15" y2="-8" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-10" y1="-20" x2="-8" y2="-15" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="10" y1="-20" x2="8" y2="-15" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="20" y1="-5" x2="15" y2="-3" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="15" x2="10" y2="10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-15" y1="15" x2="-10" y2="10" stroke="#00ff00" stroke-width="2" stroke-linecap="round" />
    </g>
    
    <!-- Donut 5 (foreground) -->
    <g transform="translate(220, 190) rotate(60) scale(0.8)">
      <circle cx="0" cy="0" r="25" fill="url(#donutGrad2)" filter="url(#strongDonutGlow)" />
      <circle cx="0" cy="0" r="12" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-20" y1="-10" x2="-15" y2="-8" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="-10" y1="-20" x2="-8" y2="-15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="10" y1="-20" x2="8" y2="-15" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="20" y1="-5" x2="15" y2="-3" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="15" x2="10" y2="10" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="-15" y1="15" x2="-10" y2="10" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
    </g>
    
    <!-- Donut 6 (closest to viewer, partially cut off) -->
    <g transform="translate(50, 270) rotate(15) scale(1.3)">
      <circle cx="0" cy="0" r="25" fill="url(#donutGrad3)" filter="url(#strongDonutGlow)" />
      <circle cx="0" cy="0" r="12" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-20" y1="-10" x2="-15" y2="-8" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-10" y1="-20" x2="-8" y2="-15" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="10" y1="-20" x2="8" y2="-15" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="20" y1="-5" x2="15" y2="-3" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="15" x2="10" y2="10" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="-15" y1="15" x2="-10" y2="10" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
    </g>
    
    <!-- Another foreground donut -->
    <g transform="translate(250, 100) rotate(40) scale(1.1)">
      <circle cx="0" cy="0" r="20" fill="url(#donutGrad1)" filter="url(#strongDonutGlow)" opacity="0.9" />
      <circle cx="0" cy="0" r="10" fill="#050211" />
      <!-- Sprinkles on the donut -->
      <line x1="-15" y1="-8" x2="-11" y2="-6" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="-8" y1="-15" x2="-6" y2="-11" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
      <line x1="8" y1="-15" x2="6" y2="-11" stroke="#ff00ff" stroke-width="2" stroke-linecap="round" />
      <line x1="15" y1="-4" x2="11" y2="-2" stroke="#ffffff" stroke-width="2" stroke-linecap="round" />
      <line x1="11" y1="11" x2="8" y2="8" stroke="#ffff00" stroke-width="2" stroke-linecap="round" />
      <line x1="-11" y1="11" x2="-8" y2="8" stroke="#00ffff" stroke-width="2" stroke-linecap="round" />
    </g>
  </g>
  
  <!-- Space dust particles -->
  <g class="spaceDust">
    <circle cx="100" cy="120" r="1" fill="url(#spaceDust)" />
    <circle cx="120" cy="100" r="0.8" fill="url(#spaceDust)" />
    <circle cx="140" cy="130" r="1.2" fill="url(#spaceDust)" />
    <circle cx="160" cy="110" r="0.9" fill="url(#spaceDust)" />
    <circle cx="180" cy="140" r="1.1" fill="url(#spaceDust)" />
    <circle cx="90" cy="150" r="0.7" fill="url(#spaceDust)" />
    <circle cx="110" cy="170" r="1" fill="url(#spaceDust)" />
    <circle cx="130" cy="190" r="0.8" fill="url(#spaceDust)" />
    <circle cx="150" cy="160" r="1.2" fill="url(#spaceDust)" />
    <circle cx="170" cy="180" r="0.9" fill="url(#spaceDust)" />
    <!-- Additional dust particles -->
    <circle cx="95" cy="135" r="0.6" fill="url(#spaceDust)" />
    <circle cx="115" cy="155" r="0.5" fill="url(#spaceDust)" />
    <circle cx="135" cy="175" r="0.7" fill="url(#spaceDust)" />
    <circle cx="155" cy="125" r="0.4" fill="url(#spaceDust)" />
    <circle cx="175" cy="145" r="0.5" fill="url(#spaceDust)" />
  </g>
  
  <!-- Comet passing in the distance -->
  <g transform="translate(10, 100) rotate(-15)">
    <path d="M 0,0 L 30,5 C 25,0 25,-5 30,-10 Z" fill="#ffffff" opacity="0.8" />
    <line x1="30" y1="0" x2="80" y2="0" stroke="white" stroke-width="1" opacity="0.5" />
    <line x1="30" y1="0" x2="60" y2="0" stroke="white" stroke-width="2" opacity="0.6" />
    <line x1="30" y1="0" x2="45" y2="0" stroke="white" stroke-width="3" opacity="0.7" />
    
    <animateTransform attributeName="transform" 
                      type="translate" 
                      from="-50,100" 
                      to="350,100" 
                      dur="10s" 
                      repeatCount="indefinite" />
  </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 adheres closely to the prompt, creatively depicting a teapot-shaped spaceship in a galaxy filled with glowing donuts.

    The technical quality, use of vibrant colors, and the detailed composition of the donuts and the spaceship are visually appealing.

    Player 1's submission is more abstract and lacks clarity in representing the specified theme, making Player 2 the clear winner.

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
14
Player 2
146
Rectangles

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

Player 1
1
Player 2
2
Circles

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

Player 1
7
Player 2
92
Ellipses

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

Player 1
2
Player 2
4
Lines

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

Player 1
—
Player 2
42
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
4
Player 2
6
Groups

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

Player 1
3
Player 2
20

Visual Effects Metrics

Gradients

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

Player 1
3
Player 2
10
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
4
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
2
Player 2
16
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
3
Player 2
54

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
5
Player 2
35

Interactivity Metrics

Animations

The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.

Player 1
—
Player 2
20
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
1
Player 2
15

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1
19
Player 2
19
Max Group Nesting

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

Player 1
—
Player 2
1
Defs Elements

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

Player 1
3
Player 2
14
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 #1031 Mar 13, 2025

"Surreal: A clock melting over a tree branch, with a sunset backdrop"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by GPT-4o mini (2024-07-18)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
GPT-4o mini (2024-07-18)
View
Match #647 Mar 13, 2025

"A giraffe on roller skates juggling flamingos"

P1
SVG by GPT-4o mini (2024-07-18)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o mini (2024-07-18)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #17 Mar 13, 2025

"Dancing octopus in a moonlit forest clearing"

P1
SVG by GPT-4o mini (2024-07-18)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
GPT-4o mini (2024-07-18)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View