Back

SVG Drawing Match #625

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A giraffe wearing a spacesuit, floating among colorful planets"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,265.613 1,271.077 (+5.5)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Gradients -->
    <linearGradient id="spaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0F0B2F" />
      <stop offset="50%" stop-color="#1F1155" />
      <stop offset="100%" stop-color="#2C0E37" />
    </linearGradient>
    
    <radialGradient id="planet1Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff9d00" />
      <stop offset="100%" stop-color="#ff6200" />
    </radialGradient>
    
    <radialGradient id="planet2Gradient" cx="50%" cy="50%" r="50%" fx="20%" fy="20%">
      <stop offset="0%" stop-color="#42c9ff" />
      <stop offset="100%" stop-color="#0096ff" />
    </radialGradient>
    
    <radialGradient id="planet3Gradient" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#ff5ed9" />
      <stop offset="100%" stop-color="#b019a3" />
    </radialGradient>
    
    <radialGradient id="planet4Gradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#9dff8c" />
      <stop offset="100%" stop-color="#3bca2b" />
    </radialGradient>
    
    <linearGradient id="spacesuitGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="100%" stop-color="#d0d0d0" />
    </linearGradient>
    
    <linearGradient id="helmetGlass" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a8ecff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#65c7ff" stop-opacity="0.9" />
    </linearGradient>
    
    <linearGradient id="flameGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#fff" />
      <stop offset="40%" stop-color="#ffdd00" />
      <stop offset="70%" stop-color="#ff9500" />
      <stop offset="100%" stop-color="#ff5500" />
    </linearGradient>
    
    <!-- Patterns -->
    <pattern id="giraffePattern" width="12" height="12" patternUnits="userSpaceOnUse">
      <rect width="12" height="12" fill="#f7d06b" />
      <path d="M0,0 L6,6 L12,0 L6,12 Z" fill="#cf9840" />
    </pattern>
    
    <pattern id="neckPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#f7d06b" />
      <circle cx="5" cy="5" r="2.5" fill="#cf9840" />
    </pattern>
    
    <!-- Filters -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.7" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="planetShine" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1.5" result="blur" />
      <feSpecularLighting result="spec" specularExponent="20" lighting-color="#ffffff">
        <fePointLight x="150" y="60" z="200" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
    </filter>
  </defs>
  
  <!-- Space background -->
  <rect width="300" height="300" fill="url(#spaceGradient)" />
  
  <!-- Stars -->
  <g id="stars">
    <!-- Large stars -->
    <circle cx="25" cy="35" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="60" cy="55" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="25" r="1.5" fill="white" filter="url(#starGlow)" />
    <circle cx="130" cy="45" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="30" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="220" cy="65" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="40" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="40" cy="85" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="80" cy="100" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="120" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="160" cy="80" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="210" cy="110" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="250" cy="95" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="30" cy="140" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="70" cy="160" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="110" cy="175" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="150" cy="145" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="190" cy="165" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="230" cy="180" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="270" cy="150" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="50" cy="200" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="90" cy="220" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="130" cy="205" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="170" cy="225" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="210" cy="240" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="250" cy="215" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="20" cy="260" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="60" cy="280" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="100" cy="265" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="140" cy="285" r="1.3" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="255" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="220" cy="275" r="1.4" fill="white" filter="url(#starGlow)" />
    <circle cx="260" cy="270" r="1.2" fill="white" filter="url(#starGlow)" />
    
    <!-- Small stars -->
    <g opacity="0.8">
      <circle cx="15" cy="20" r="0.6" fill="white" />
      <circle cx="45" cy="40" r="0.5" fill="white" />
      <circle cx="75" cy="15" r="0.7" fill="white" />
      <circle cx="105" cy="35" r="0.5" fill="white" />
      <circle cx="135" cy="25" r="0.6" fill="white" />
      <circle cx="165" cy="45" r="0.7" fill="white" />
      <circle cx="195" cy="20" r="0.5" fill="white" />
      <circle cx="225" cy="40" r="0.6" fill="white" />
      <circle cx="255" cy="30" r="0.7" fill="white" />
      <circle cx="285" cy="50" r="0.5" fill="white" />
      <circle cx="35" cy="70" r="0.6" fill="white" />
      <circle cx="65" cy="90" r="0.7" fill="white" />
      <circle cx="95" cy="75" r="0.5" fill="white" />
      <circle cx="125" cy="95" r="0.6" fill="white" />
      <circle cx="155" cy="65" r="0.7" fill="white" />
      <circle cx="185" cy="85" r="0.5" fill="white" />
      <circle cx="215" cy="75" r="0.6" fill="white" />
      <circle cx="245" cy="80" r="0.7" fill="white" />
      <circle cx="275" cy="100" r="0.5" fill="white" />
      <circle cx="25" cy="120" r="0.6" fill="white" />
      <circle cx="55" cy="140" r="0.7" fill="white" />
      <circle cx="85" cy="125" r="0.5" fill="white" />
      <circle cx="115" cy="145" r="0.6" fill="white" />
      <circle cx="145" cy="115" r="0.7" fill="white" />
      <circle cx="175" cy="135" r="0.5" fill="white" />
      <circle cx="205" cy="125" r="0.6" fill="white" />
      <circle cx="235" cy="145" r="0.7" fill="white" />
      <circle cx="265" cy="130" r="0.5" fill="white" />
      <circle cx="295" cy="150" r="0.6" fill="white" />
      <circle cx="45" cy="170" r="0.7" fill="white" />
      <circle cx="75" cy="190" r="0.5" fill="white" />
      <circle cx="105" cy="175" r="0.6" fill="white" />
      <circle cx="135" cy="195" r="0.7" fill="white" />
      <circle cx="165" cy="180" r="0.5" fill="white" />
      <circle cx="195" cy="200" r="0.6" fill="white" />
      <circle cx="225" cy="185" r="0.7" fill="white" />
      <circle cx="255" cy="205" r="0.5" fill="white" />
      <circle cx="285" cy="190" r="0.6" fill="white" />
      <circle cx="35" cy="220" r="0.7" fill="white" />
      <circle cx="65" cy="240" r="0.5" fill="white" />
      <circle cx="95" cy="225" r="0.6" fill="white" />
      <circle cx="125" cy="245" r="0.7" fill="white" />
      <circle cx="155" cy="230" r="0.5" fill="white" />
      <circle cx="185" cy="250" r="0.6" fill="white" />
      <circle cx="215" cy="235" r="0.7" fill="white" />
      <circle cx="245" cy="255" r="0.5" fill="white" />
      <circle cx="275" cy="240" r="0.6" fill="white" />
      <circle cx="15" cy="270" r="0.7" fill="white" />
      <circle cx="45" cy="290" r="0.5" fill="white" />
      <circle cx="75" cy="275" r="0.6" fill="white" />
      <circle cx="105" cy="295" r="0.7" fill="white" />
      <circle cx="135" cy="265" r="0.5" fill="white" />
      <circle cx="165" cy="285" r="0.6" fill="white" />
      <circle cx="195" cy="270" r="0.7" fill="white" />
      <circle cx="225" cy="290" r="0.5" fill="white" />
      <circle cx="255" cy="280" r="0.6" fill="white" />
      <circle cx="285" cy="295" r="0.7" fill="white" />
    </g>
  </g>
  
  <!-- Cosmic Nebula -->
  <g opacity="0.2">
    <path d="M-30,120 Q50,100 120,140 Q190,170 260,130 Q320,100 350,150" fill="#7B42AF" opacity="0.3" />
    <path d="M-20,200 Q60,230 140,190 Q220,160 300,200 Q360,230 380,180" fill="#FF69B4" opacity="0.2" />
  </g>
  
  <!-- Background Planets -->
  <g id="backgroundPlanets">
    <circle cx="35" cy="45" r="6" fill="#9b82ff" filter="url(#planetShine)" />
    <circle cx="280" cy="230" r="8" fill="#ff9e7a" filter="url(#planetShine)" />
    <circle cx="260" cy="100" r="5" fill="#91ffbd" filter="url(#planetShine)" />
    <circle cx="70" cy="270" r="7" fill="#ffdf6f" filter="url(#planetShine)" />
  </g>
  
  <!-- Main Planets -->
  <g id="planets">
    <!-- Orange Planet with Ring -->
    <circle cx="45" cy="70" r="23" fill="url(#planet1Gradient)" filter="url(#planetShine)" />
    <ellipse cx="45" cy="70" rx="30" ry="6" fill="none" stroke="#ffcc00" stroke-width="0.8" transform="rotate(-15,45,70)" />
    <ellipse cx="45" cy="70" rx="32" ry="6.5" fill="none" stroke="#ffcc00" stroke-width="0.4" transform="rotate(-15,45,70)" />
    
    <!-- Blue Planet with Rings -->
    <circle cx="240" cy="60" r="28" fill="url(#planet2Gradient)" filter="url(#planetShine)" />
    <circle cx="240" cy="60" r="33" fill="none" stroke="#80d1ff" stroke-width="0.8" stroke-dasharray="3,2" />
    <circle cx="240" cy="60" r="36" fill="none" stroke="#80d1ff" stroke-width="0.5" stroke-dasharray="2,3" />
    
    <!-- Pink Planet with Ring -->
    <circle cx="200" cy="210" r="18" fill="url(#planet3Gradient)" filter="url(#planetShine)" />
    <ellipse cx="200" cy="210" rx="24" ry="6" fill="none" stroke="#ff8aed" stroke-width="0.7" transform="rotate(20,200,210)" />
    <ellipse cx="200" cy="210" rx="26" ry="6.5" fill="none" stroke="#ff8aed" stroke-width="0.4" transform="rotate(20,200,210)" />
    
    <!-- Green Planet with Atmospheric Glow -->
    <circle cx="70" cy="240" r="25" fill="url(#planet4Gradient)" filter="url(#planetShine)" />
    <circle cx="70" cy="240" r="28" fill="none" stroke="#c8ffbd" stroke-width="0.8" stroke-dasharray="4,2" />
    <circle cx="70" cy="240" r="26" fill="none" stroke="white" stroke-width="0.3" opacity="0.5" />
  </g>
  
  <!-- Giraffe in Spacesuit -->
  <g id="spaceGiraffe" transform="translate(150, 150)">
    <!-- Jetpack Flames -->
    <g id="flames">
      <path d="M-12,35 L-18,55 L-6,55 Z" fill="url(#flameGradient)" opacity="0.8">
        <animate attributeName="d" values="M-12,35 L-18,55 L-6,55 Z;M-12,35 L-18,60 L-6,60 Z;M-12,35 L-18,55 L-6,55 Z" dur="0.7s" repeatCount="indefinite" />
      </path>
      <path d="M12,35 L6,55 L18,55 Z" fill="url(#flameGradient)" opacity="0.8">
        <animate attributeName="d" values="M12,35 L6,55 L18,55 Z;M12,35 L6,60 L18,60 Z;M12,35 L6,55 L18,55 Z" dur="0.6s" repeatCount="indefinite" />
      </path>
      
      <path d="M-12,35 L-15,45 L-9,45 Z" fill="#fff" opacity="0.9">
        <animate attributeName="d" values="M-12,35 L-15,45 L-9,45 Z;M-12,35 L-15,48 L-9,48 Z;M-12,35 L-15,45 L-9,45 Z" dur="0.5s" repeatCount="indefinite" />
      </path>
      <path d="M12,35 L9,45 L15,45 Z" fill="#fff" opacity="0.9">
        <animate attributeName="d" values="M12,35 L9,45 L15,45 Z;M12,35 L9,48 L15,48 Z;M12,35 L9,45 L15,45 Z" dur="0.4s" repeatCount="indefinite" />
      </path>
    </g>
    
    <!-- Spacesuit Body -->
    <ellipse cx="0" cy="10" rx="25" ry="35" fill="url(#spacesuitGradient)" stroke="#a0a0a0" stroke-width="1.2" />
    
    <!-- Backpack/Jetpack -->
    <rect x="-20" y="5" width="40" height="30" rx="5" ry="5" fill="#c0c0c0" stroke="#909090" stroke-width="1" />
    <rect x="-15" y="10" width="10" height="20" rx="2" ry="2" fill="#a0a0a0" stroke="#808080" stroke-width="0.8" />
    <rect x="5" y="10" width="10" height="20" rx="2" ry="2" fill="#a0a0a0" stroke="#808080" stroke-width="0.8" />
    
    <!-- Air Tank -->
    <ellipse cx="0" cy="15" rx="5" ry="12" fill="#d8d8d8" stroke="#b0b0b0" stroke-width="0.8" />
    <rect x="-2" y="3" width="4" height="24" fill="#c0c0c0" stroke="#a8a8a8" stroke-width="0.5" rx="1" ry="1" />
    
    <!-- Spacesuit Control Panel -->
    <rect x="-10" y="-5" width="20" height="10" rx="2" ry="2" fill="#c0c0c0" stroke="#909090" stroke-width="0.8" />
    <circle cx="0" cy="0" r="3" fill="#ff0000" stroke="#c00000" stroke-width="0.5">
      <animate attributeName="fill" values="#ff0000;#ff5500;#ff0000" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="-7" cy="0" r="2" fill="#00ff00" stroke="#009000" stroke-width="0.5" />
    <circle cx="7" cy="0" r="2" fill="#0099ff" stroke="#0066aa" stroke-width="0.5" />
    
    <!-- Hoses and Tubes -->
    <path d="M-15,-15 Q-20,-10 -20,-5" fill="none" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="1,1" />
    <path d="M15,-15 Q20,-10 20,-5" fill="none" stroke="#d0d0d0" stroke-width="1.5" stroke-dasharray="1,1" />
    
    <!-- Giraffe Neck -->
    <path d="M0,-10 C-5,-15 -8,-20 -5,-30 C-2,-40 0,-45 0,-45" fill="url(#neckPattern)" stroke="#cf9840" stroke-width="1.5" />
    
    <!-- Helmet -->
    <circle cx="0" cy="-45" r="15" fill="url(#spacesuitGradient)" stroke="#a0a0a0" stroke-width="1.5" />
    
    <!-- Giraffe Head Inside Helmet -->
    <g transform="translate(0,-45)">
      <!-- Head Shape -->
      <path d="M-8,0 C-8,-5 -6,-10 0,-13 C6,-10 8,-5 8,0 C8,7 4,10 0,10 C-4,10 -8,7 -8,0" fill="url(#giraffePattern)" stroke="#a07030" stroke-width="0.8" />
      
      <!-- Eyes -->
      <ellipse cx="-4" cy="0" rx="1.5" ry="2" fill="#000" />
      <ellipse cx="4" cy="0" rx="1.5" ry="2" fill="#000" />
      <circle cx="-3.5" cy="-0.5" r="0.5" fill="#fff" />
      <circle cx="4.5" cy="-0.5" r="0.5" fill="#fff" />
      
      <!-- Muzzle -->
      <path d="M-4,3 C-2,7 2,7 4,3" fill="none" stroke="#a07030" stroke-width="0.8" />
      <ellipse cx="0" cy="5" rx="2" ry="1" fill="#a07030" />
      
      <!-- Ears -->
      <path d="M-8,-3 L-12,-8 L-9,-2" fill="#f7d06b" stroke="#a07030" stroke-width="0.7" />
      <path d="M8,-3 L12,-8 L9,-2" fill="#f7d06b" stroke="#a07030" stroke-width="0.7" />
      
      <!-- Horns/Ossicones -->
      <path d="M-5,-10 C-6,-12 -6,-14 -5,-15" fill="#a07030" stroke="#a07030" stroke-width="1.5" stroke-linecap="round" />
      <path d="M5,-10 C6,-12 6,-14 5,-15" fill="#a07030" stroke="#a07030" stroke-width="1.5" stroke-linecap="round" />
    </g>
    
    <!-- Helmet Glass -->
    <ellipse cx="0" cy="-45" rx="11" ry="12" fill="url(#helmetGlass)" stroke="#d0d0d0" stroke-width="0.8" />
    
    <!-- Helmet Reflection -->
    <path d="M-8,-50 C-5,-45 0,-43 5,-45" fill="none" stroke="#ffffff" stroke-width="0.8" opacity="0.7" />
    <path d="M-6,-47 C-3,-44 2,-42 6,-44" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.5" />
    
    <!-- Spacesuit Arms -->
    <path d="M-25,0 Q-33,-5 -35,5" fill="none" stroke="url(#spacesuitGradient)" stroke-width="8" stroke-linecap="round" />
    <path d="M25,0 Q33,-5 35,5" fill="none" stroke="url(#spacesuitGradient)" stroke-width="8" stroke-linecap="round" />
    
    <!-- Gloves -->
    <circle cx="-35" cy="5" r="5" fill="#ffffff" stroke="#a0a0a0" stroke-width="0.8" />
    <circle cx="35" cy="5" r="5" fill="#ffffff" stroke="#a0a0a0" stroke-width="0.8" />
    
    <!-- Leg Portions -->
    <path d="M-15,40 Q-20,50 -15,60" fill="none" stroke="url(#spacesuitGradient)" stroke-width="8" stroke-linecap="round" />
    <path d="M15,40 Q20,50 15,60" fill="none" stroke="url(#spacesuitGradient)" stroke-width="8" stroke-linecap="round" />
    
    <!-- Boots -->
    <ellipse cx="-15" cy="60" rx="7" ry="5" fill="#ffffff" stroke="#a0a0a0" stroke-width="0.8" />
    <ellipse cx="15" cy="60" rx="7" ry="5" fill="#ffffff" stroke="#a0a0a0" stroke-width="0.8" />
  </g>
  
  <!-- Additional Cosmic Elements -->
  <g id="cosmicElements">
    <!-- Comet -->
    <path d="M280,20 L250,50" stroke="#ffffff" stroke-width="1.5" />
    <ellipse cx="250" cy="50" rx="4" ry="2.5" fill="#ffffff" opacity="0.8" transform="rotate(-45,250,50)" />
    <path d="M275,25 L245,55" stroke="#ffffff" stroke-width="0.8" stroke-opacity="0.6" />
    <path d="M285,15 L255,45" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.4" />
    
    <!-- Shooting Star -->
    <g>
      <path d="M170,25 L190,45" stroke="#ffffff" stroke-width="1.5" stroke-opacity="0.9">
        <animate attributeName="stroke-opacity" values="0.9;0.5;0.9" dur="3s" repeatCount="indefinite" />
      </path>
      <circle cx="190" cy="45" r="1" fill="#ffffff">
        <animate attributeName="r" values="1;1.5;1" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
    
    <!-- Space Station -->
    <g transform="translate(260,250) scale(0.5) rotate(-15)">
      <rect x="-20" y="-3" width="40" height="6" fill="#d0d0d0" stroke="#a0a0a0" stroke-width="0.8" />
      <rect x="-3" y="-15" width="6" height="30" fill="#d0d0d0" stroke="#a0a0a0" stroke-width="0.8" />
      <circle cx="0" cy="0" r="7" fill="#a0a0a0" stroke="#808080" stroke-width="0.8" />
      <path d="M-20,0 L-32,7 L-32,-7 Z" fill="#c0c0c0" stroke="#a0a0a0" stroke-width="0.8" />
      <rect x="15" y="-10" width="10" height="20" fill="#c0c0c0" stroke="#a0a0a0" stroke-width="0.8" />
      <circle cx="20" cy="5" r="2" fill="#00aaff" />
    </g>
    
    <!-- Floating Space Debris -->
    <path d="M100,100 L105,105 L110,100 L105,95 Z" fill="#d0d0d0" opacity="0.7" />
    <circle cx="120" cy="90" r="2" fill="#b0b0b0" opacity="0.7" />
    <circle cx="115" cy="110" r="1.5" fill="#b0b0b0" opacity="0.6" />
    
    <!-- Small Asteroid Field -->
    <g transform="translate(30,190)">
      <path d="M0,0 L5,3 L8,0 L5,-4 L0,0" fill="#a0a0a0" opacity="0.7" />
      <path d="M10,5 L12,10 L15,7 L13,2 L10,5" fill="#a0a0a0" opacity="0.7" />
      <path d="M7,-8 L12,-10 L10,-15 L5,-12 L7,-8" fill="#a0a0a0" opacity="0.7" />
      <circle cx="18" cy="-5" r="2" fill="#a0a0a0" opacity="0.7" />
      <circle cx="3" cy="15" r="1.5" fill="#a0a0a0" opacity="0.7" />
    </g>
  </g>
</svg>
DeepSeek-R1-Distill-Llama-70B
Player 2
ELO: 991.075 985.611 (-5.5)
SVG by DeepSeek-R1-Distill-Llama-70B 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Background with radial gradient for space effect -->
  <defs>
    <radialGradient id="spaceBg" cx="150" cy="150" r="150" fx="150" fy="150">
      <stop offset="0" stop-color="#0b0b2d" />
      <stop offset="1" stop-color="#1a1a4a" />
    </radialGradient>
    
    <!-- Custom star pattern -->
    <pattern id="stars" x="0" y="0" width="100%" height="100%">
      <circle cx="50%" cy="50%" r="1" fill="white" opacity="0.6"/>
    </pattern>
    
    <!-- Giraffe spot pattern -->
    <pattern id="spots" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <ellipse cx="5" cy="5" rx="1" ry="1" fill="#e69f00"/>
    </pattern>
    
    <!-- Gradient for planets -->
    <linearGradient id="planetGrad1" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#ff6b6b" />
      <stop offset="1" stop-color="#ff8e8e" />
    </linearGradient>
    <linearGradient id="planetGrad2" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#4facfe" />
      <stop offset="1" stop-color="#00f2fe" />
    </linearGradient>
    <linearGradient id="planetGrad3" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#00ff00" />
      <stop offset="1" stop-color="#32ff7f" />
    </linearGradient>
    
    <!-- Space suit gradient -->
    <linearGradient id="suitGrad" x1="0" y1="0" x2="100%" y2="100%">
      <stop offset="0" stop-color="#f0f0f0" />
      <stop offset="1" stop-color="#d0d0d0" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#spaceBg)"/>
  <rect width="100%" height="100%" fill="url(#stars)"/>

  <!-- Planets and orbits -->
  <path d="M100,150m-50,0a50,50 0 1,0 100,0a50,50 0 1,0 -100,0" stroke="#4facfe" fill="none" opacity="0.3"/>
  <circle cx="100" cy="150" r="30" fill="url(#planetGrad1)"/>
  
  <path d="M220,150m-40,0a40,40 0 1,0 80,0a40,40 0 1,0 -80,0" stroke="#00ff00" fill="none" opacity="0.3"/>
  <circle cx="220" cy="150" r="25" fill="url(#planetGrad3)"/>
  
  <path d="M180,100m-30,0a30,30 0 1,0 60,0a30,30 0 1,0 -60,0" stroke="#ff6b6b" fill="none" opacity="0.3"/>
  <circle cx="180" cy="100" r="20" fill="url(#planetGrad2)"/>

  <!-- Giraffe -->
  <path d="M150,180c0,-20 20,-40 40,-40s40,20 40,40v40h-80v-40zM150,200l-10,-10 10,-10 20,20-20,20z" fill="url(#suitGrad)"/>
  <path d="M150,180c0,-20 20,-40 40,-40s40,20 40,40v40h-80v-40zM150,200l-10,-10 10,-10 20,20-20,20z" fill="url(#spots)"/>
  
  <!-- Helmet -->
  <circle cx="150" cy="120" r="20" fill="url(#suitGrad)"/>
  <path d="M150,120m-15,-5a10,10 0 0,0 15,10a10,10 0 0,0 -15,10m15,-5a10,10 0 0,0 -15,10a10,10 0 0,0 15,10" fill="#ffffff"/>
  <circle cx="140" cy="110" r="2" fill="#000000"/>
  <circle cx="160" cy="110" r="2" fill="#000000"/>
  <path d="M140,110 Q150,105 160,110" fill="#ffffff"/>

  <!-- Floating elements -->
  <circle cx="280" cy="80" r="10" fill="#ffff00"/>
  <circle cx="50" cy="250" r="15" fill="#ff00ff" opacity="0.6"/>
  <path d="M150,150m-10,-50q0,-20 10,-30 5,0 20,0 -5,20 -20,30" fill="#ffffff" opacity="0.3"/>

  <!-- Comet effect -->
  <path d="M50,150q50,50 100,0 -50,-50z" fill="url(#suitGrad)"/>
  <path d="M50,150q50,50 100,0 -50,-50z" fill="#ffd700" opacity="0.6"/>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's image clearly depicts a giraffe in a spacesuit, floating among colorful planets, adhering closely to the prompt.

    The technical quality is strong, with clear details and vibrant colors that enhance visual appeal.

    Player 2's image is more abstract and lacks the clear representation of a giraffe and planets, making it less aligned 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
173
Player 2
22
Rectangles

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

Player 1
11
Player 2
2
Circles

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

Player 1
118
Player 2
9
Ellipses

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

Player 1
13
Player 2
1
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
31
Player 2
10
Groups

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

Player 1
12
Player 2
—

Visual Effects Metrics

Gradients

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

Player 1
8
Player 2
5
Patterns

The number of pattern definitions (pattern) in the SVG.

Player 1
2
Player 2
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
20
Player 2
7
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
48
Player 2
3

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
47
Player 2
16

Interactivity Metrics

Animations

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

Player 1
7
Player 2
—
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
9
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
97
Player 2
50
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
12
Player 2
7
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 #1259 Mar 13, 2025

"Astronaut squirrel juggling planets, in a geometric style"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek-R1-Distill-Llama-70B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek-R1-Distill-Llama-70B
View
Match #1202 Mar 13, 2025

"Dandelion made of clock gears, in a minimalist steampunk style"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1124 Mar 13, 2025

"A geometric zebra made entirely of triangles drinking neon water from a pixelated oasis"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1017 Mar 13, 2025

"A clock with melting numbers in a surreal desert landscape"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek-R1-Distill-Llama-70B
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek-R1-Distill-Llama-70B
View
Match #581 Mar 13, 2025

"A flamingo in a top hat playing the violin under a moonlit sky"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #545 Mar 13, 2025

"Floating island with skyscrapers, underlit by bioluminescent jellyfish in the sky"

P1
SVG by DeepSeek-R1-Distill-Llama-70B
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek-R1-Distill-Llama-70B
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View