Back

SVG Drawing Match #8

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Jellyfish chandelier glowing in a stormy underwater ballroom"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,016 1,031.264 (+15.3)
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>
    <!-- Water background gradients -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a2e38" />
      <stop offset="50%" stop-color="#0c4356" />
      <stop offset="100%" stop-color="#05141a" />
    </linearGradient>
    
    <radialGradient id="stormCenter" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#0c4356" stop-opacity="0.5" />
      <stop offset="100%" stop-color="#05141a" stop-opacity="0.9" />
    </radialGradient>
    
    <!-- Storm effect filters -->
    <filter id="stormEffect" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" seed="5" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    
    <filter id="waterRipple" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="1" seed="3" result="turbulence" />
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="5" xChannelSelector="R" yChannelSelector="G" />
    </filter>
    
    <!-- Glow effect for jellyfish -->
    <filter id="jellyfishGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <filter id="strongGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="6" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Jellyfish body gradients -->
    <radialGradient id="jellyfishBody1" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
      <stop offset="0%" stop-color="#f0f6ff" stop-opacity="0.9" />
      <stop offset="40%" stop-color="#c4e0ff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#94c2ff" stop-opacity="0.4" />
    </radialGradient>
    
    <radialGradient id="jellyfishBody2" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
      <stop offset="0%" stop-color="#fff0f6" stop-opacity="0.9" />
      <stop offset="40%" stop-color="#ffc4e0" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ff94c2" stop-opacity="0.4" />
    </radialGradient>
    
    <radialGradient id="jellyfishBody3" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
      <stop offset="0%" stop-color="#f0fff6" stop-opacity="0.9" />
      <stop offset="40%" stop-color="#c4ffe0" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#94ffc2" stop-opacity="0.4" />
    </radialGradient>
    
    <!-- Jellyfish inner glow -->
    <radialGradient id="jellyfishGlowBlue" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="30%" stop-color="#f0f8ff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#c4e0ff" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="jellyfishGlowPink" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="30%" stop-color="#fff0f8" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ffc4e0" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="jellyfishGlowGreen" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="30%" stop-color="#f0fff8" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#c4ffc4" stop-opacity="0" />
    </radialGradient>
    
    <!-- Bubble pattern -->
    <radialGradient id="bubbleGradient" cx="30%" cy="30%" r="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0.1" />
    </radialGradient>
    
    <!-- Floor patterns -->
    <pattern id="marblePattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="40" height="40" fill="#123845" />
      <ellipse cx="20" cy="20" rx="15" ry="15" fill="#1a4754" opacity="0.3" />
      <path d="M0,0 L40,40 M40,0 L0,40" stroke="#1e5869" stroke-width="0.5" opacity="0.2" />
    </pattern>
    
    <!-- Lightning effect -->
    <filter id="lightningBlur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
    </filter>
    
    <!-- Chandelier chain -->
    <pattern id="chainPattern" width="10" height="20" patternUnits="userSpaceOnUse">
      <ellipse cx="5" cy="5" rx="4" ry="2" fill="none" stroke="#1e5869" stroke-width="1" />
      <ellipse cx="5" cy="15" rx="4" ry="2" fill="none" stroke="#1e5869" stroke-width="1" />
    </pattern>
  </defs>
  
  <!-- Background and water -->
  <rect x="0" y="0" width="300" height="300" fill="url(#waterGradient)" />
  <rect x="0" y="0" width="300" height="300" fill="url(#stormCenter)" opacity="0.6" />
  
  <!-- Stormy water effects -->
  <rect x="0" y="0" width="300" height="300" fill="url(#waterGradient)" opacity="0.3" filter="url(#stormEffect)" />
  
  <!-- Light rays from the chandelier -->
  <path d="M80,120 L20,290 M110,130 L50,290 M150,140 L100,290 M180,130 L200,290 M220,120 L260,290" stroke="#f0f8ff" stroke-width="2" opacity="0.1" />
  
  <!-- Lightning in the background -->
  <path d="M50,30 L60,60 L30,70 L45,100" stroke="#a0e9ff" stroke-width="1" fill="none" opacity="0.6" filter="url(#lightningBlur)" />
  <path d="M230,20 L210,50 L250,65 L220,110" stroke="#a0e9ff" stroke-width="1.5" fill="none" opacity="0.5" filter="url(#lightningBlur)" />
  <path d="M140,10 L120,40 L150,50 L130,100" stroke="#a0e9ff" stroke-width="2" fill="none" opacity="0.4" filter="url(#lightningBlur)" />
  
  <!-- Distant architectural elements -->
  <path d="M10,180 Q55,155 100,180" stroke="#0c3844" stroke-width="3" fill="none" opacity="0.5" />
  <path d="M200,180 Q245,155 290,180" stroke="#0c3844" stroke-width="3" fill="none" opacity="0.5" />
  <rect x="15" y="180" width="5" height="110" fill="#0c3844" opacity="0.5" />
  <rect x="97" y="180" width="5" height="110" fill="#0c3844" opacity="0.5" />
  <rect x="198" y="180" width="5" height="110" fill="#0c3844" opacity="0.5" />
  <rect x="280" y="180" width="5" height="110" fill="#0c3844" opacity="0.5" />
  
  <!-- Ballroom floor -->
  <path d="M30,260 C50,240 250,240 270,260 L270,290 L30,290 Z" fill="url(#marblePattern)" />
  <ellipse cx="150" cy="265" rx="100" ry="15" fill="#0c3844" opacity="0.3" />
  
  <!-- Ballroom columns -->
  <rect x="40" y="140" width="15" height="120" fill="#1a4754" rx="2" />
  <rect x="245" y="140" width="15" height="120" fill="#1a4754" rx="2" />
  <rect x="40" y="130" width="15" height="10" fill="#235e6f" rx="1" />
  <rect x="245" y="130" width="15" height="10" fill="#235e6f" rx="1" />
  <rect x="35" y="140" width="25" height="5" fill="#235e6f" rx="1" />
  <rect x="35" y="255" width="25" height="5" fill="#235e6f" rx="1" />
  <rect x="240" y="140" width="25" height="5" fill="#235e6f" rx="1" />
  <rect x="240" y="255" width="25" height="5" fill="#235e6f" rx="1" />
  
  <!-- Ballroom arches -->
  <path d="M40,140 Q150,60 260,140" stroke="#235e6f" stroke-width="5" fill="none" />
  <path d="M50,150 Q150,80 250,150" stroke="#1a4754" stroke-width="3" fill="none" />
  
  <!-- Underwater plants -->
  <path d="M20,290 C25,270 15,260 20,240 C25,250 35,245 30,270 Z" fill="#0a5c3e" />
  <path d="M35,290 C30,280 40,270 35,260 C40,270 30,275 30,290 Z" fill="#0a704c" />
  <path d="M280,290 C275,270 285,260 280,240 C275,250 265,245 270,270 Z" fill="#0a5c3e" />
  <path d="M265,290 C270,280 260,270 265,260 C260,270 270,275 270,290 Z" fill="#0a704c" />
  <path d="M15,290 C10,260 25,250 15,220 C5,250 15,260 10,290 Z" fill="#0a5c3e" opacity="0.7" />
  <path d="M285,290 C290,260 275,250 285,220 C295,250 285,260 290,290 Z" fill="#0a5c3e" opacity="0.7" />
  
  <!-- Coral decorations -->
  <path d="M60,280 C65,270 55,265 65,260 C70,265 75,270 72,280 Z" fill="#cc6666" opacity="0.6" />
  <path d="M240,280 C235,270 245,265 235,260 C230,265 225,270 228,280 Z" fill="#cc6666" opacity="0.6" />
  
  <!-- Dancing figures (silhouettes) -->
  <path d="M100,270 C95,260 105,250 110,260 C115,250 125,260 120,270 Z" fill="#1e5869" opacity="0.4" />
  <path d="M180,270 C175,260 185,250 190,260 C195,250 205,260 200,270 Z" fill="#1e5869" opacity="0.4" />
  <path d="M140,280 C135,265 145,255 150,265 C155,255 165,265 160,280 Z" fill="#1e5869" opacity="0.4" />
  
  <!-- Jellyfish chandelier - base structure -->
  <ellipse cx="150" cy="100" rx="70" ry="15" fill="#163c47" opacity="0.7" />
  <ellipse cx="150" cy="100" rx="30" ry="7" fill="#235e6f" opacity="0.9" />
  
  <!-- Chandelier chains -->
  <rect x="147" y="30" width="6" height="70" fill="url(#chainPattern)" />
  <path d="M150,30 L150,10" stroke="#1e5869" stroke-width="2" />
  
  <!-- Chandelier arms -->
  <path d="M150,100 L110,110" stroke="#235e6f" stroke-width="3" fill="none" />
  <path d="M150,100 L190,110" stroke="#235e6f" stroke-width="3" fill="none" />
  <path d="M150,100 L130,105" stroke="#235e6f" stroke-width="2" fill="none" />
  <path d="M150,100 L170,105" stroke="#235e6f" stroke-width="2" fill="none" />
  <path d="M150,100 L150,120" stroke="#235e6f" stroke-width="4" fill="none" />
  
  <!-- Main jellyfish body -->
  <ellipse cx="150" cy="130" rx="40" ry="30" fill="url(#jellyfishBody1)" filter="url(#jellyfishGlow)" />
  <ellipse cx="150" cy="125" rx="25" ry="18" fill="url(#jellyfishGlowBlue)" opacity="0.7" />
  
  <!-- Main jellyfish pattern details -->
  <path d="M130,115 C135,120 145,125 150,120 C155,125 165,120 170,115" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.4" />
  <path d="M130,125 C135,130 145,135 150,130 C155,135 165,130 170,125" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.4" />
  <path d="M130,135 C135,140 145,145 150,140 C155,145 165,140 170,135" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.4" />
  
  <!-- Main jellyfish tentacles -->
  <path d="M120,150 C115,170 110,180 120,200 C125,180 127,170 120,150" fill="#c4e0ff" opacity="0.6" />
  <path d="M130,155 C125,185 130,200 125,220 C120,200 125,185 130,155" fill="#c4e0ff" opacity="0.6" />
  <path d="M140,155 C135,175 140,195 135,215 C130,195 125,175 140,155" fill="#c4e0ff" opacity="0.6" />
  <path d="M150,160 C145,190 150,210 145,230 C140,210 135,190 150,160" fill="#c4e0ff" opacity="0.6" />
  <path d="M160,155 C165,175 160,195 165,215 C170,195 175,175 160,155" fill="#c4e0ff" opacity="0.6" />
  <path d="M170,155 C175,185 170,200 175,220 C180,200 175,185 170,155" fill="#c4e0ff" opacity="0.6" />
  <path d="M180,150 C185,170 190,180 180,200 C175,180 173,170 180,150" fill="#c4e0ff" opacity="0.6" />
  
  <!-- Secondary jellyfish - pink -->
  <ellipse cx="110" cy="110" rx="20" ry="15" fill="url(#jellyfishBody2)" filter="url(#jellyfishGlow)" />
  <ellipse cx="110" cy="105" rx="12" ry="8" fill="url(#jellyfishGlowPink)" opacity="0.7" />
  
  <!-- Pink jellyfish tentacles -->
  <path d="M100,120 C95,130 90,140 100,155 C105,140 102,130 100,120" fill="#ffc4e0" opacity="0.6" />
  <path d="M105,122 C100,142 105,150 100,170 C95,150 100,142 105,122" fill="#ffc4e0" opacity="0.6" />
  <path d="M110,125 C115,145 110,155 115,175 C120,155 125,145 110,125" fill="#ffc4e0" opacity="0.6" />
  <path d="M115,122 C120,142 115,150 120,170 C125,150 120,142 115,122" fill="#ffc4e0" opacity="0.6" />
  <path d="M120,120 C125,130 130,140 120,155 C115,140 118,130 120,120" fill="#ffc4e0" opacity="0.6" />
  
  <!-- Secondary jellyfish - green -->
  <ellipse cx="190" cy="110" rx="20" ry="15" fill="url(#jellyfishBody3)" filter="url(#jellyfishGlow)" />
  <ellipse cx="190" cy="105" rx="12" ry="8" fill="url(#jellyfishGlowGreen)" opacity="0.7" />
  
  <!-- Green jellyfish tentacles -->
  <path d="M180,120 C175,130 170,140 180,155 C185,140 182,130 180,120" fill="#c4ffc4" opacity="0.6" />
  <path d="M185,122 C180,142 185,150 180,170 C175,150 180,142 185,122" fill="#c4ffc4" opacity="0.6" />
  <path d="M190,125 C185,145 190,155 185,175 C180,155 175,145 190,125" fill="#c4ffc4" opacity="0.6" />
  <path d="M195,122 C200,142 195,150 200,170 C205,150 200,142 195,122" fill="#c4ffc4" opacity="0.6" />
  <path d="M200,120 C205,130 210,140 200,155 C195,140 198,130 200,120" fill="#c4ffc4" opacity="0.6" />
  
  <!-- Top jellyfish - blue -->
  <ellipse cx="150" cy="75" rx="15" ry="12" fill="url(#jellyfishBody1)" filter="url(#jellyfishGlow)" />
  <ellipse cx="150" cy="72" rx="9" ry="7" fill="url(#jellyfishGlowBlue)" opacity="0.7" />
  
  <!-- Top jellyfish tentacles -->
  <path d="M140,83 C138,90 135,100 138,112 C141,100 142,90 140,83" fill="#c4e0ff" opacity="0.6" />
  <path d="M145,87 C143,97 145,107 143,117 C141,107 139,97 145,87" fill="#c4e0ff" opacity="0.6" />
  <path d="M150,88 C153,98 150,108 153,118 C156,108 159,98 150,88" fill="#c4e0ff" opacity="0.6" />
  <path d="M155,87 C157,97 155,107 157,117 C159,107 161,97 155,87" fill="#c4e0ff" opacity="0.6" />
  <path d="M160,83 C162,90 165,100 162,112 C159,100 158,90 160,83" fill="#c4e0ff" opacity="0.6" />
  
  <!-- Small mini jellyfish around the chandelier -->
  <ellipse cx="130" cy="85" rx="8" ry="6" fill="url(#jellyfishBody2)" filter="url(#jellyfishGlow)" />
  <path d="M127,89 C125,95 123,100 127,105 C129,100 130,95 127,89" fill="#ffc4e0" opacity="0.6" />
  <path d="M130,90 C132,97 130,103 132,110 C134,103 136,97 130,90" fill="#ffc4e0" opacity="0.6" />
  <path d="M133,89 C135,95 137,100 133,105 C131,100 130,95 133,89" fill="#ffc4e0" opacity="0.6" />
  
  <ellipse cx="170" cy="85" rx="8" ry="6" fill="url(#jellyfishBody3)" filter="url(#jellyfishGlow)" />
  <path d="M167,89 C165,95 163,100 167,105 C169,100 170,95 167,89" fill="#c4ffc4" opacity="0.6" />
  <path d="M170,90 C172,97 170,103 172,110 C174,103 176,97 170,90" fill="#c4ffc4" opacity="0.6" />
  <path d="M173,89 C175,95 177,100 173,105 C171,100 170,95 173,89" fill="#c4ffc4" opacity="0.6" />
  
  <ellipse cx="135" cy="140" rx="5" ry="4" fill="url(#jellyfishBody3)" filter="url(#jellyfishGlow)" />
  <path d="M133,142 C131,147 133,152 131,155 C129,152 131,147 133,142" fill="#c4ffc4" opacity="0.6" />
  <path d="M135,143 C137,148 135,153 137,156 C139,153 137,148 135,143" fill="#c4ffc4" opacity="0.6" />
  
  <ellipse cx="165" cy="140" rx="5" ry="4" fill="url(#jellyfishBody2)" filter="url(#jellyfishGlow)" />
  <path d="M163,142 C161,147 163,152 161,155 C159,152 161,147 163,142" fill="#ffc4e0" opacity="0.6" />
  <path d="M165,143 C167,148 165,153 167,156 C169,153 167,148 165,143" fill="#ffc4e0" opacity="0.6" />
  
  <!-- Bubbles -->
  <circle cx="80" cy="60" r="5" fill="url(#bubbleGradient)" />
  <circle cx="220" cy="70" r="7" fill="url(#bubbleGradient)" />
  <circle cx="180" cy="40" r="3" fill="url(#bubbleGradient)" />
  <circle cx="120" cy="30" r="4" fill="url(#bubbleGradient)" />
  <circle cx="100" cy="180" r="6" fill="url(#bubbleGradient)" />
  <circle cx="200" cy="190" r="4" fill="url(#bubbleGradient)" />
  <circle cx="130" cy="210" r="3" fill="url(#bubbleGradient)" />
  <circle cx="170" cy="220" r="2" fill="url(#bubbleGradient)" />
  <circle cx="60" cy="150" r="2" fill="url(#bubbleGradient)" />
  <circle cx="240" cy="130" r="3" fill="url(#bubbleGradient)" />
  <circle cx="90" cy="100" r="1" fill="url(#bubbleGradient)" />
  <circle cx="210" cy="95" r="1.5" fill="url(#bubbleGradient)" />
  <circle cx="140" cy="50" r="2" fill="url(#bubbleGradient)" />
  <circle cx="160" cy="45" r="1" fill="url(#bubbleGradient)" />
  
  <!-- Additional water ripple effects -->
  <ellipse cx="150" cy="150" rx="120" ry="70" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.1" filter="url(#waterRipple)" />
  
  <!-- Additional glow effects for the chandelier -->
  <ellipse cx="150" cy="120" rx="80" ry="60" fill="url(#jellyfishGlowBlue)" opacity="0.15" filter="url(#strongGlow)" />
  
  <!-- Light beams from jellyfish -->
  <path d="M150,130 L140,200 M150,130 L160,200" stroke="#ffffff" stroke-width="0.3" opacity="0.2" />
  <path d="M110,110 L100,170 M110,110 L120,170" stroke="#ffffff" stroke-width="0.3" opacity="0.2" />
  <path d="M190,110 L180,170 M190,110 L200,170" stroke="#ffffff" stroke-width="0.3" opacity="0.2" />
</svg>
Llama 3.0 70B (8192)
Player 2
ELO: 1,000 984.736 (-15.3)
SVG by Llama 3.0 70B (8192) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#stormy-sea)" />
  <linearGradient id="stormy-sea" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#032B44" />
    <stop offset="1" stop-color="#021331" />
  </linearGradient>

  <!-- Ballroom Floor -->
  <rect x="50" y="200" width="200" height="50" fill="#444" rx="10" />
  <pattern id="marble-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="20" height="20" fill="#777" rx="2" />
    <circle cx="10" cy="10" r="3" fill="#fff" />
  </pattern>
  <rect x="50" y="200" width="200" height="50" fill="url(#marble-pattern)" rx="10" />

  <!-- Jellyfish Chandelier -->
  <g transform="translate(150, 100)">
    <circle cx="0" cy="0" r="30" fill="#fff" />
    <circle cx="0" cy="0" r="25" fill="url(#jellyfish-glow)" />
    <linearGradient id="jellyfish-glow" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#FFC67D" />
      <stop offset="1" stop-color="#FF99CC" />
    </linearGradient>
    <circle cx="0" cy="0" r="20" fill="#fff" />
    <circle cx="0" cy="0" r="15" fill="url(#jellyfish-glow)" />
    <circle cx="0" cy="0" r="10" fill="#fff" />
    <circle cx="0" cy="0" r="5" fill="url(#jellyfish-glow)" />

    <!-- Tentacles -->
    <g transform="rotate(45)">
      <path d="M 0,0 C 20,0 30,10 40,20" stroke="#fff" stroke-width="2" fill="none" />
      <path d="M 0,0 C 20,0 30,-10 40,-20" stroke="#fff" stroke-width="2" fill="none" />
    </g>
    <g transform="rotate(-45)">
      <path d="M 0,0 C 20,0 30,10 40,20" stroke="#fff" stroke-width="2" fill="none" />
      <path d="M 0,0 C 20,0 30,-10 40,-20" stroke="#fff" stroke-width="2" fill="none" />
    </g>
  </g>

  <!-- Stormy Sea -->
  <g transform="translate(0, 250)">
    <rect x="0" y="0" width="300" height="50" fill="#032B44" rx="10" />
    <circle cx="150" cy="25" r="20" fill="#fff" />
    <circle cx="150" cy="25" r="15" fill="#032B44" />
    <circle cx="150" cy="25" r="10" fill="#fff" />
    <circle cx="150" cy="25" r="5" fill="#032B44" />
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's image effectively captures the concept of a 'Jellyfish chandelier glowing in a stormy underwater ballroom' with a detailed depiction of jellyfish acting as a chandelier, complete with an underwater setting and stormy elements.

    The use of color and composition enhances the visual appeal and adheres closely to the prompt.

    In contrast, Player 2's submission lacks clarity and detail, making it less representative of 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
116
Player 2
20
Rectangles

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

Player 1
17
Player 2
5
Circles

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

Player 1
14
Player 2
11
Ellipses

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

Player 1
20
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
65
Player 2
4
Groups

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

Player 1
—
Player 2
4

Visual Effects Metrics

Gradients

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

Player 1
9
Player 2
2
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
5
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
68
Player 2
—
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
24
Player 2
4

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
27
Player 2
7

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
4

Complexity Metrics

Path Commands

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

Player 1
212
Player 2
8
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
16
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.

Similar Challenges

Match #1307 Mar 13, 2025

"A steam-punk jellyfish floating above a Victorian cityscape"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Llama 3.0 70B (8192)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Llama 3.0 70B (8192)
View
Match #664 Mar 13, 2025

"Mushroom cityscape under a cosmic aurora sky"

P1
SVG by Llama 3.0 70B (8192)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Llama 3.0 70B (8192)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #242 Mar 13, 2025

"A snail with a cityscape shell, complete with tiny skyscrapers and glowing windows"

P1
SVG by Llama 3.0 70B (8192)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Llama 3.0 70B (8192)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #198 Mar 13, 2025

"Upside-down cityscape reflected in an ocean wave"

P1
SVG by Llama 3.0 70B (8192)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Llama 3.0 70B (8192)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View