Back

SVG Drawing Match #719

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A clockwork dragonfly landing on a melting pocket watch"

Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
ELO: 1,274.425 1,278.868 (+4.4)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Gold/brass gradient for watch -->
    <linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f6e27a" />
      <stop offset="50%" stop-color="#d4af37" />
      <stop offset="100%" stop-color="#a67c00" />
    </linearGradient>
    
    <!-- Silver/chrome gradient for mechanical parts -->
    <linearGradient id="silverGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f1f1f1" />
      <stop offset="50%" stop-color="#c0c0c0" />
      <stop offset="100%" stop-color="#a1a1a1" />
    </linearGradient>
    
    <!-- Blue-purple gradient for dragonfly wings -->
    <linearGradient id="wingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#9ef0f0" stop-opacity="0.8" />
      <stop offset="50%" stop-color="#7a9ef0" stop-opacity="0.6" />
      <stop offset="100%" stop-color="#7a7af0" stop-opacity="0.4" />
    </linearGradient>
    
    <!-- Bronze gradient -->
    <linearGradient id="bronzeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e6c795" />
      <stop offset="50%" stop-color="#c8a66b" />
      <stop offset="100%" stop-color="#a67c3d" />
    </linearGradient>
    
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0e6d2" />
      <stop offset="100%" stop-color="#d9c7a6" />
    </linearGradient>
    
    <!-- Melting effect filter -->
    <filter id="meltEffect" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur" />
      <feDisplacementMap in="blur" in2="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" result="displace" />
      <feComposite in="SourceGraphic" in2="displace" operator="over" />
    </filter>
    
    <!-- Glow effect for dragonfly -->
    <filter id="glowEffect" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="2" result="glow" />
      <feComposite in="SourceGraphic" in2="glow" operator="over" />
    </filter>
    
    <!-- Clock face pattern -->
    <pattern id="clockPattern" width="60" height="60" patternUnits="userSpaceOnUse">
      <circle cx="30" cy="30" r="29" fill="#f9f6e8" stroke="#333" stroke-width="0.5" />
      <!-- Clock numbers -->
      <g font-family="serif" font-size="6" text-anchor="middle" fill="#333">
        <text x="30" y="10">12</text>
        <text x="50" y="30">3</text>
        <text x="30" y="50">6</text>
        <text x="10" y="30">9</text>
        
        <text x="40" y="12">1</text>
        <text x="48" y="18">2</text>
        <text x="48" y="42">4</text>
        <text x="40" y="48">5</text>
        <text x="20" y="48">7</text>
        <text x="12" y="42">8</text>
        <text x="12" y="18">10</text>
        <text x="20" y="12">11</text>
      </g>
      <!-- Clock ticks -->
      <g stroke="#333" stroke-width="0.5">
        <line x1="30" y1="5" x2="30" y2="10" />
        <line x1="55" y1="30" x2="50" y2="30" />
        <line x1="30" y1="55" x2="30" y2="50" />
        <line x1="5" y1="30" x2="10" y2="30" />
        
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(30 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(60 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(120 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(150 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(210 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(240 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(300 30 30)" />
        <line x1="44" y1="9" x2="41" y2="13" transform="rotate(330 30 30)" />
      </g>
    </pattern>
    
    <!-- Gear pattern -->
    <pattern id="gearPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="8" fill="none" stroke="#333" stroke-width="0.5" />
      <circle cx="10" cy="10" r="1" fill="#333" />
      <g stroke="#333" stroke-width="0.5">
        <line x1="10" y1="2" x2="10" y2="4" />
        <line x1="10" y1="16" x2="10" y2="18" />
        <line x1="2" y1="10" x2="4" y2="10" />
        <line x1="16" y1="10" x2="18" y2="10" />
        <line x1="4" y1="4" x2="6" y2="6" />
        <line x1="14" y1="14" x2="16" y2="16" />
        <line x1="4" y1="16" x2="6" y2="14" />
        <line x1="14" y1="6" x2="16" y2="4" />
      </g>
    </pattern>
  </defs>
  
  <!-- Background with subtle gradient -->
  <rect x="0" y="0" width="300" height="300" fill="url(#bgGradient)" />
  
  <!-- Additional background elements -->
  <g id="background">
    <!-- Subtle steampunk gear patterns in the background -->
    <g opacity="0.1" fill="#555">
      <circle cx="40" cy="40" r="25" />
      <circle cx="40" cy="40" r="20" fill="none" stroke="#555" stroke-width="1" />
      <circle cx="40" cy="40" r="15" />
      
      <circle cx="250" cy="60" r="30" />
      <circle cx="250" cy="60" r="25" fill="none" stroke="#555" stroke-width="1" />
      <circle cx="250" cy="60" r="18" />
      
      <circle cx="270" cy="230" r="35" />
      <circle cx="270" cy="230" r="28" fill="none" stroke="#555" stroke-width="1" />
      <circle cx="270" cy="230" r="20" />
    </g>
    
    <!-- Time spiral effect in background -->
    <path d="M150,150 C100,100 200,50 150,100 C100,150 50,200 150,200 C250,200 200,100 150,150" 
          fill="none" stroke="#a67c00" stroke-width="0.5" opacity="0.2" />
  </g>
  
  <!-- Shadow under the melting watch -->
  <ellipse cx="150" cy="230" rx="70" ry="15" fill="#333" opacity="0.2" />
  
  <!-- Melting pocket watch -->
  <g id="pocketWatch" transform="translate(150, 170)">
    <!-- Watch chain -->
    <path d="M0,-60 C10,-70 20,-75 30,-65 C40,-55 30,-45 40,-35 C50,-25 60,-30 60,-20" 
          stroke="url(#goldGradient)" stroke-width="3" fill="none" />
          
    <!-- Watch body (circular base) -->
    <circle cx="0" cy="0" r="50" fill="url(#goldGradient)" />
    
    <!-- Watch rim -->
    <circle cx="0" cy="0" r="44" fill="#f9f6e8" stroke="#a67c00" stroke-width="2" />
    
    <!-- Watch face (inside the watch) -->
    <circle cx="0" cy="0" r="42" fill="#f9f6e8" />
    
    <!-- Clock pattern -->
    <circle cx="0" cy="0" r="42" fill="url(#clockPattern)" />
    
    <!-- Visible gears inside (showing through transparent/broken glass) -->
    <g transform="translate(-15, 5)">
      <circle cx="0" cy="0" r="8" fill="url(#bronzeGradient)" opacity="0.8" />
      <path d="M0,0 M0,-8 L2,-7 L2,-2 L7,-2 L8,0 L7,2 L2,2 L2,7 L0,8 L-2,7 L-2,2 L-7,2 L-8,0 L-7,-2 L-2,-2 L-2,-7 Z" 
            fill="url(#bronzeGradient)" stroke="#333" stroke-width="0.2" />
      <circle cx="0" cy="0" r="1.5" fill="#333" />
    </g>
    
    <g transform="translate(15, 10)">
      <circle cx="0" cy="0" r="10" fill="url(#bronzeGradient)" opacity="0.8" />
      <path d="M0,0 M0,-10 L2,-9 L2,-2 L9,-2 L10,0 L9,2 L2,2 L2,9 L0,10 L-2,9 L-2,2 L-9,2 L-10,0 L-9,-2 L-2,-2 L-2,-9 Z" 
            fill="url(#bronzeGradient)" stroke="#333" stroke-width="0.2" />
      <circle cx="0" cy="0" r="2" fill="#333" />
    </g>
    
    <g transform="translate(0, -15)">
      <circle cx="0" cy="0" r="6" fill="url(#bronzeGradient)" opacity="0.8" />
      <path d="M0,0 M0,-6 L1.5,-5.5 L1.5,-1.5 L5.5,-1.5 L6,0 L5.5,1.5 L1.5,1.5 L1.5,5.5 L0,6 L-1.5,5.5 L-1.5,1.5 L-5.5,1.5 L-6,0 L-5.5,-1.5 L-1.5,-1.5 L-1.5,-5.5 Z" 
            fill="url(#bronzeGradient)" stroke="#333" stroke-width="0.2" />
      <circle cx="0" cy="0" r="1" fill="#333" />
    </g>
    
    <!-- Clock hands -->
    <line x1="0" y1="0" x2="0" y2="-30" stroke="#333" stroke-width="1.5" transform="rotate(50)" />
    <line x1="0" y1="0" x2="0" y2="-20" stroke="#333" stroke-width="2" transform="rotate(260)" />
    <circle cx="0" cy="0" r="3" fill="url(#goldGradient)" stroke="#333" stroke-width="0.5" />
    
    <!-- Melting effects -->
    <g filter="url(#meltEffect)">
      <!-- Melting bottom of watch -->
      <path d="M-20,40 C-30,60 -25,80 -15,85 C-5,90 0,80 -5,60 Z" fill="url(#goldGradient)" />
      <path d="M10,45 C15,75 30,90 40,85 C50,80 45,60 35,45 Z" fill="url(#goldGradient)" />
      
      <!-- Melting watch face -->
      <path d="M-25,30 C-35,40 -30,50 -20,45 C-15,42 -10,38 -15,30 Z" fill="#f9f6e8" stroke="#a67c00" stroke-width="0.5" />
      <path d="M20,35 C25,45 35,50 40,40 C42,35 40,30 35,25 Z" fill="#f9f6e8" stroke="#a67c00" stroke-width="0.5" />
    </g>
    
    <!-- Watch crown (winding mechanism) -->
    <rect x="43" y="-10" width="10" height="5" rx="2" fill="url(#goldGradient)" />
    <circle cx="48" cy="-7.5" r="3" fill="url(#goldGradient)" stroke="#333" stroke-width="0.5" />
    <circle cx="48" cy="-7.5" r="2" fill="none" stroke="#333" stroke-width="0.3" />
    <line x1="46" y1="-7.5" x2="50" y2="-7.5" stroke="#333" stroke-width="0.5" />
    <line x1="48" y1="-9.5" x2="48" y2="-5.5" stroke="#333" stroke-width="0.5" />
  </g>
  
  <!-- Clockwork dragonfly -->
  <g id="dragonfly" transform="translate(130, 130) rotate(-20)">
    <!-- Body sections (mechanical segments) -->
    <g id="body">
      <!-- Head -->
      <ellipse cx="0" cy="-10" rx="8" ry="10" fill="url(#silverGradient)" stroke="#444" stroke-width="0.5" />
      <circle cx="-3" cy="-12" r="2" fill="#222" /> <!-- Eye -->
      <circle cx="-3" cy="-12" r="0.5" fill="white" /> <!-- Eye highlight -->
      <circle cx="3" cy="-12" r="2" fill="#222" /> <!-- Eye -->
      <circle cx="3" cy="-12" r="0.5" fill="white" /> <!-- Eye highlight -->
      
      <!-- Upper body (thorax) with visible gears -->
      <rect x="-7" y="0" width="14" height="20" rx="4" fill="url(#silverGradient)" stroke="#444" stroke-width="0.5" />
      
      <!-- Small visible gears in thorax -->
      <circle cx="0" cy="10" r="4" fill="none" stroke="#444" stroke-width="0.5" />
      <circle cx="0" cy="10" r="2" fill="none" stroke="#444" stroke-width="0.5" />
      <g transform="translate(0, 10)">
        <path d="M0,0 M0,-4 L1,-3.5 L1,-1 L3.5,-1 L4,0 L3.5,1 L1,1 L1,3.5 L0,4 L-1,3.5 L-1,1 L-3.5,1 L-4,0 L-3.5,-1 L-1,-1 L-1,-3.5 Z" 
              fill="#333" opacity="0.8" />
      </g>
      
      <circle cx="-4" cy="5" r="2" fill="none" stroke="#444" stroke-width="0.5" />
      <g transform="translate(-4, 5)">
        <path d="M0,0 M0,-2 L0.5,-1.8 L0.5,-0.5 L1.8,-0.5 L2,0 L1.8,0.5 L0.5,0.5 L0.5,1.8 L0,2 L-0.5,1.8 L-0.5,0.5 L-1.8,0.5 L-2,0 L-1.8,-0.5 L-0.5,-0.5 L-0.5,-1.8 Z" 
              fill="#333" opacity="0.8" />
      </g>
      
      <circle cx="4" cy="5" r="2" fill="none" stroke="#444" stroke-width="0.5" />
      <g transform="translate(4, 5)">
        <path d="M0,0 M0,-2 L0.5,-1.8 L0.5,-0.5 L1.8,-0.5 L2,0 L1.8,0.5 L0.5,0.5 L0.5,1.8 L0,2 L-0.5,1.8 L-0.5,0.5 L-1.8,0.5 L-2,0 L-1.8,-0.5 L-0.5,-0.5 L-0.5,-1.8 Z" 
              fill="#333" opacity="0.8" />
      </g>
      
      <!-- Lower body (abdomen) segments -->
      <path d="M-4,20 Q-5,25 -4,30 Q-3,35 -2,40 Q-1,45 0,50 Q1,45 2,40 Q3,35 4,30 Q5,25 4,20 Z" 
            fill="url(#silverGradient)" stroke="#444" stroke-width="0.5" />
            
      <!-- Segment details -->
      <line x1="-4" y1="25" x2="4" y2="25" stroke="#444" stroke-width="0.5" />
      <line x1="-3" y1="30" x2="3" y2="30" stroke="#444" stroke-width="0.5" />
      <line x1="-2" y1="35" x2="2" y2="35" stroke="#444" stroke-width="0.5" />
      <line x1="-1" y1="40" x2="1" y2="40" stroke="#444" stroke-width="0.5" />
      
      <!-- Small spikes along abdomen (rivets or mechanical details) -->
      <g fill="#333">
        <circle cx="-4" cy="22" r="0.5" />
        <circle cx="4" cy="22" r="0.5" />
        <circle cx="-3" cy="27" r="0.5" />
        <circle cx="3" cy="27" r="0.5" />
        <circle cx="-2" cy="32" r="0.5" />
        <circle cx="2" cy="32" r="0.5" />
        <circle cx="-1" cy="37" r="0.5" />
        <circle cx="1" cy="37" r="0.5" />
        <circle cx="0" cy="42" r="0.5" />
      </g>
    </g>
    
    <!-- Wings (translucent with visible structure) -->
    <g id="wings" filter="url(#glowEffect)">
      <!-- Top left wing -->
      <path d="M-5,5 C-30,-15 -50,-10 -60,5 C-50,15 -30,20 -5,10 Z" 
            fill="url(#wingGradient)" stroke="#777" stroke-width="0.5" />
      
      <!-- Top right wing -->
      <path d="M5,5 C30,-15 50,-10 60,5 C50,15 30,20 5,10 Z" 
            fill="url(#wingGradient)" stroke="#777" stroke-width="0.5" />
      
      <!-- Bottom left wing -->
      <path d="M-5,15 C-35,10 -55,30 -50,40 C-40,45 -20,35 -5,20 Z" 
            fill="url(#wingGradient)" stroke="#777" stroke-width="0.5" />
      
      <!-- Bottom right wing -->
      <path d="M5,15 C35,10 55,30 50,40 C40,45 20,35 5,20 Z" 
            fill="url(#wingGradient)" stroke="#777" stroke-width="0.5" />
      
      <!-- Wing veins/structure -->
      <g stroke="#777" stroke-width="0.3">
        <!-- Top left wing veins -->
        <path d="M-5,5 C-20,-5 -40,0 -60,5" fill="none" />
        <path d="M-5,10 C-20,0 -40,10 -60,5" fill="none" />
        <path d="M-20,-5 C-25,0 -30,5 -20,15" fill="none" />
        <path d="M-40,0 C-40,5 -40,10 -35,15" fill="none" />
        
        <!-- Top right wing veins -->
        <path d="M5,5 C20,-5 40,0 60,5" fill="none" />
        <path d="M5,10 C20,0 40,10 60,5" fill="none" />
        <path d="M20,-5 C25,0 30,5 20,15" fill="none" />
        <path d="M40,0 C40,5 40,10 35,15" fill="none" />
        
        <!-- Bottom left wing veins -->
        <path d="M-5,15 C-25,15 -45,30 -50,40" fill="none" />
        <path d="M-5,20 C-15,25 -30,35 -40,45" fill="none" />
        <path d="M-20,15 C-25,20 -30,30 -25,35" fill="none" />
        <path d="M-35,25 C-35,30 -35,35 -30,40" fill="none" />
        
        <!-- Bottom right wing veins -->
        <path d="M5,15 C25,15 45,30 50,40" fill="none" />
        <path d="M5,20 C15,25 30,35 40,45" fill="none" />
        <path d="M20,15 C25,20 30,30 25,35" fill="none" />
        <path d="M35,25 C35,30 35,35 30,40" fill="none" />
      </g>
      
      <!-- Clockwork details in wings -->
      <g opacity="0.7">
        <circle cx="-30" cy="0" r="3" fill="url(#gearPattern)" />
        <circle cx="30" cy="0" r="3" fill="url(#gearPattern)" />
        <circle cx="-35" cy="25" r="4" fill="url(#gearPattern)" />
        <circle cx="35" cy="25" r="4" fill="url(#gearPattern)" />
      </g>
    </g>
    
    <!-- Legs (mechanical joints) -->
    <g id="legs" stroke="#333" stroke-width="0.7" fill="none">
      <!-- Left legs -->
      <path d="M-7,2 C-15,0 -20,5 -25,10" />
      <path d="M-7,8 C-15,10 -25,15 -30,15" />
      <path d="M-7,14 C-15,20 -20,25 -25,25" />
      
      <!-- Right legs -->
      <path d="M7,2 C15,0 20,5 25,10" />
      <path d="M7,8 C15,10 25,15 30,15" />
      <path d="M7,14 C15,20 20,25 25,25" />
      
      <!-- Mechanical joints on legs -->
      <g fill="#333">
        <circle cx="-15" cy="0" r="0.7" />
        <circle cx="-20" cy="5" r="0.7" />
        <circle cx="-15" cy="10" r="0.7" />
        <circle cx="-25" cy="15" r="0.7" />
        <circle cx="-15" cy="20" r="0.7" />
        <circle cx="-20" cy="25" r="0.7" />
        
        <circle cx="15" cy="0" r="0.7" />
        <circle cx="20" cy="5" r="0.7" />
        <circle cx="15" cy="10" r="0.7" />
        <circle cx="25" cy="15" r="0.7" />
        <circle cx="15" cy="20" r="0.7" />
        <circle cx="20" cy="25" r="0.7" />
      </g>
    </g>
    
    <!-- Antennae -->
    <path d="M-3,-15 C-5,-25 -10,-30 -15,-28" stroke="#333" stroke-width="0.7" fill="none" />
    <path d="M3,-15 C5,-25 10,-30 15,-28" stroke="#333" stroke-width="0.7" fill="none" />
    <circle cx="-15" cy="-28" r="1" fill="#333" />
    <circle cx="15" cy="-28" r="1" fill="#333" />
  </g>
  
  <!-- Steam/vapor elements -->
  <g id="steam" opacity="0.5">
    <path d="M160,130 C170,120 165,110 155,105 C145,100 140,90 145,80 C150,70 160,65 170,70" 
          fill="none" stroke="#fff" stroke-width="1" />
    <path d="M180,140 C190,135 195,125 190,115 C185,105 190,95 200,90" 
          fill="none" stroke="#fff" stroke-width="1" />
    <path d="M120,125 C110,115 115,105 125,100 C135,95 135,85 125,80" 
          fill="none" stroke="#fff" stroke-width="0.7" />
  </g>
  
  <!-- Highlights and shadows -->
  <g id="highlights">
    <!-- Watch highlights -->
    <ellipse cx="140" cy="160" rx="30" ry="10" fill="white" opacity="0.1" />
    
    <!-- Dragonfly highlights -->
    <ellipse cx="120" cy="120" rx="10" ry="20" fill="white" opacity="0.1" transform="rotate(-20)" />
  </g>
</svg>
DeepSeek V3
Player 2
ELO: 957.415 952.971 (-4.4)
SVG by DeepSeek V3 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="watchGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#8B4513" />
      <stop offset="100%" stop-color="#D2691E" />
    </linearGradient>
    <linearGradient id="dragonflyGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#00CED1" />
      <stop offset="100%" stop-color="#008B8B" />
    </linearGradient>
    <pattern id="clockPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="1" fill="#000000" />
    </pattern>
  </defs>
  <rect width="300" height="300" fill="#F0E68C" />
  <ellipse cx="150" cy="180" rx="70" ry="40" fill="url(#watchGradient)" />
  <path d="M150,180 L150,220" stroke="#000000" stroke-width="2" />
  <path d="M150,180 L130,150" stroke="#000000" stroke-width="2" />
  <circle cx="150" cy="180" r="10" fill="url(#clockPattern)" />
  <path d="M150,180 Q170,160 190,180" stroke="#000000" stroke-width="2" fill="none" />
  <path d="M150,180 Q130,200 110,180" stroke="#000000" stroke-width="2" fill="none" />
  <path d="M150,130 Q170,150 150,170 Q130,150 150,130" fill="url(#dragonflyGradient)" />
  <path d="M150,130 L170,110" stroke="#000000" stroke-width="2" />
  <path d="M150,130 L130,110" stroke="#000000" stroke-width="2" />
  <path d="M150,170 L170,190" stroke="#000000" stroke-width="2" />
  <path d="M150,170 L130,190" stroke="#000000" stroke-width="2" />
  <path d="M150,130 L150,170" stroke="#000000" stroke-width="2" />
  <path d="M150,130 Q140,140 150,150 Q160,140 150,130" fill="url(#dragonflyGradient)" />
  <path d="M150,170 Q140,160 150,150 Q160,160 150,170" fill="url(#dragonflyGradient)" />
  <path d="M150,150 L150,170" stroke="#000000" stroke-width="2" />
  <path d="M150,150 L130,150" stroke="#000000" stroke-width="2" />
  <path d="M150,150 L170,150" stroke="#000000" stroke-width="2" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's submission demonstrates a more detailed and creative approach to the prompt, with a clearly designed clockwork dragonfly and a melting pocket watch.

    The technical quality is higher, with attention to shading and color gradients, enhancing the visual appeal.

    Player 2's image lacks the complexity and clarity needed to effectively convey the theme.

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
139
Player 2
19
Rectangles

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

Player 1
3
Player 2
1
Circles

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

Player 1
60
Player 2
2
Ellipses

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

Player 1
4
Player 2
1
Lines

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

Player 1
28
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
44
Player 2
15
Groups

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

Player 1
23
Player 2
—

Visual Effects Metrics

Gradients

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

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

The number of elements with stroke attributes in the SVG.

Player 1
44
Player 2
12

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
22
Player 2
6

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
19
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
214
Player 2
33
Max Group Nesting

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

Player 1
2
Player 2
—
Defs Elements

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

Player 1
9
Player 2
3
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
12
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 #1290 Mar 13, 2025

"Raining goldfish from a floating umbrella over a cityscape"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek V3
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek V3
View
Match #595 Mar 13, 2025

"Rainbow-colored snail playing a saxophone"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek V3
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek V3
View
Match #387 Mar 13, 2025

"Clockwork cityscape under a swirling, starry sky"

P1
SVG by DeepSeek V3
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek V3
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #248 Mar 13, 2025

"A balloon animal spaceship floating in a starry galaxy"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by DeepSeek V3
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
DeepSeek V3
View
Match #175 Mar 13, 2025

"Galactic jellyfish floating among neon asteroid fields"

P1
SVG by DeepSeek V3
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
DeepSeek V3
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View