Back

SVG Drawing Match #2458

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Alien watering a carnivorous plant under two suns."

SVG by GPT-4.1 nano (2025-04-14)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Background gradient representing the sky with two suns -->
  <defs>
    <linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#ffe066"/>
      <stop offset="100%" stop-color="#89f7fe"/>
    </linearGradient>
    <radialGradient id="sunGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFD700"/>
      <stop offset="100%" stop-color="#FF8C00"/>
    </radialGradient>
    <radialGradient id="secondSunGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFC0CB"/>
      <stop offset="100%" stop-color="#FF69B4"/>
    </radialGradient>
    <linearGradient id="plantGradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#32CD32"/>
      <stop offset="100%" stop-color="#006400"/>
    </linearGradient>
    <radialGradient id="waterGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#3FC9EE"/>
      <stop offset="100%" stop-color="#005f73"/>
    </radialGradient>
    <linearGradient id="alienGradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#7FFFD4"/>
      <stop offset="100%" stop-color="#2E8B57"/>
    </linearGradient>
  </defs>

  <!-- Sky background -->
  <rect width="300" height="300" fill="url(#skyGradient)" />

  <!-- First Sun -->
  <circle cx="80" cy="80" r="40" fill="url(#sunGradient)" opacity="0.8"/>
  <!-- Sun rays -->
  { for i in range(0, 360, 30): }
    <line x1="80" y1="40" x2="{80 + 60 * cos(i)}" y2="{80 + 60 * sin(i)}" stroke="#FFD700" stroke-width="2" opacity="0.6" transform="rotate({i} 80 80)"/>
  { endfor }

  <!-- Second Sun -->
  <circle cx="220" cy="60" r="25" fill="url(#secondSunGradient)" opacity="0.7"/>
  <!-- Second Sun rays -->
  { for i in range(0, 360, 45): }
    <line x1="220" y1="35" x2="{220 + 30 * cos(i)}" y2="{60 + 30 * sin(i)}" stroke="#FF69B4" stroke-width="1.5" opacity="0.5" transform="rotate({i} 220 60)"/>
  { endfor }

  <!-- Ground -->
  <rect y="250" width="300" height="50" fill="#654321"/>

  <!-- Carnivorous Plant -->
  <g id="plant" transform="translate(150,220)">
    <!-- Root -->
    <ellipse cx="0" cy="0" rx="20" ry="8" fill="#4B5320"/>
    <!-- Main Stem -->
    <rect x="-2" y="-40" width="4" height="40" fill="url(#plantGradient)" rx="1"/>
    <!-- Top Leaves -->
    <ellipse cx="0" cy="-50" rx="15" ry="7" fill="#228B22"/>
    <ellipse cx="0" cy="-58" rx="10" ry="4" fill="#006400"/>
    <!-- Carnivorous mouth -->
    <ellipse cx="0" cy="-55" rx="12" ry="6" fill="#8B0000"/>
    <!-- Carnivorous tongue -->
    <polygon points="0,-55 20,-50 0,-45" fill="#FF4500"/>
  </g>

  <!-- Alien -->
  <g id="alien" transform="translate(80,200)">
    <!-- Body -->
    <circle cx="0" cy="0" r="15" fill="linearGradient(#alienGradient)" />
    <!-- Head -->
    <circle cx="0" cy="-12" r="10" fill="url(#alienGradient)" />
    <!-- Eyes -->
    <circle cx="-3" cy="-14" r="2" fill="#FFFFFF" stroke="#000" stroke-width="0.5"/>
    <circle cx="3" cy="-14" r="2" fill="#FFFFFF" stroke="#000" stroke-width="0.5"/>
    <!-- Pupils -->
    <circle cx="-3" cy="-14" r="0.7" fill="#000"/>
    <circle cx="3" cy="-14" r="0.7" fill="#000"/>
    <!-- Antennae -->
    <line x1="0" y1="-20" x2="-5" y2="-30" stroke="#7FFFD4" stroke-width="1"/>
    <line x1="0" y1="-20" x2="5" y2="-30" stroke="#7FFFD4" stroke-width="1"/>
    <!-- Antennae tips -->
    <circle cx="-5" cy="-30" r="1.5" fill="#7FFFD4"/>
    <circle cx="5" cy="-30" r="1.5" fill="#7FFFD4"/>
    <!-- Left hand holding watering can -->
    <line x1="-12" y1="0" x2="-20" y2="10" stroke="#8A2BE2" stroke-width="2"/>
    <circle cx="-20" cy="10" r="3" fill="#8A2BE2"/>
  </g>

  <!-- Watering can -->
  <g id="wateringCan" transform="translate(60,195)">
    <!-- Can body -->
    <rect x="0" y="0" width="8" height="15" fill="#708090" rx="1"/>
    <!-- Spout -->
    <polygon points="8,2 12,4 8,6" fill="#708090"/>
    <!-- Water stream -->
    <line x1="8" y1="3" x2="8" y2="13" stroke="#00ffff" stroke-width="1"/>
    <circle cx="8" cy="14" r="1.5" fill="#00ffff"/>
  </g>
</svg>
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0c0140" />
      <stop offset="60%" stop-color="#5d2d8c" />
      <stop offset="100%" stop-color="#d64391" />
    </linearGradient>
    
    <!-- Sun gradients -->
    <radialGradient id="sunGlow1" cx="70%" cy="20%" r="50%" fx="70%" fy="20%">
      <stop offset="0%" stop-color="#ffef9b" />
      <stop offset="20%" stop-color="#ffcf4b" />
      <stop offset="100%" stop-color="#ff8400" stop-opacity="0" />
    </radialGradient>
    
    <radialGradient id="sunGlow2" cx="30%" cy="15%" r="30%" fx="30%" fy="15%">
      <stop offset="0%" stop-color="#ff9b9b" />
      <stop offset="20%" stop-color="#ff5c5c" />
      <stop offset="100%" stop-color="#ff0000" stop-opacity="0" />
    </radialGradient>
    
    <!-- Ground pattern -->
    <pattern id="groundPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="1" fill="#8a67c9" />
      <path d="M0,0 L20,20 M20,0 L0,20" stroke="#6a4a9c" stroke-width="0.5" />
    </pattern>
    
    <!-- Water droplet -->
    <radialGradient id="waterDrop" cx="30%" cy="30%" r="60%" fx="20%" fy="20%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="25%" stop-color="#a0e9ff" />
      <stop offset="100%" stop-color="#0097ff" />
    </radialGradient>
    
    <!-- Plant texture -->
    <linearGradient id="plantGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a5c0a" />
      <stop offset="50%" stop-color="#1e8c1e" />
      <stop offset="100%" stop-color="#0a5c0a" />
    </linearGradient>
    
    <!-- Trap inside -->
    <linearGradient id="trapInside" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff2f92" />
      <stop offset="100%" stop-color="#b80065" />
    </linearGradient>
    
    <!-- Alien skin -->
    <linearGradient id="alienSkin" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#5ee8c8" />
      <stop offset="100%" stop-color="#05a583" />
    </linearGradient>
    
    <!-- Watering device -->
    <linearGradient id="wateringCanGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#c6c6ff" />
      <stop offset="100%" stop-color="#8484ea" />
    </linearGradient>
    
    <!-- Star glow filter -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="0.8" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g>
    <circle cx="30" cy="30" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="60" cy="15" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="120" cy="25" r="1.2" fill="white" filter="url(#starGlow)" />
    <circle cx="150" cy="40" r="0.7" fill="white" filter="url(#starGlow)" />
    <circle cx="240" cy="20" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="265" cy="45" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="180" cy="15" r="1.1" fill="white" filter="url(#starGlow)" />
    <circle cx="70" cy="55" r="0.9" fill="white" filter="url(#starGlow)" />
    <circle cx="280" cy="70" r="1" fill="white" filter="url(#starGlow)" />
    <circle cx="40" cy="90" r="0.8" fill="white" filter="url(#starGlow)" />
    <circle cx="100" cy="35" r="1.2" fill="white" filter="url(#starGlow)" />
  </g>
  
  <!-- Distant planet -->
  <circle cx="40" cy="75" r="8" fill="#9a65d5" opacity="0.7" />
  <path d="M34,71 A8,8 0 0,0 46,71" fill="none" stroke="#b085e6" stroke-width="1.5" opacity="0.7" />
  
  <!-- Suns & their glows -->
  <circle cx="210" cy="60" r="25" fill="#ffef9b" />
  <circle cx="210" cy="60" r="75" fill="url(#sunGlow1)" />
  
  <circle cx="90" cy="45" r="15" fill="#ff9b9b" />
  <circle cx="90" cy="45" r="45" fill="url(#sunGlow2)" />
  
  <!-- Ground -->
  <path d="M0,160 C60,140 120,170 180,150 C240,130 300,160 300,160 L300,300 L0,300 Z" fill="#3a1f68" />
  <path d="M0,160 C60,140 120,170 180,150 C240,130 300,160 300,160 L300,300 L0,300 Z" fill="url(#groundPattern)" fill-opacity="0.3" />
  
  <!-- Distant alien landscape features -->
  <path d="M20,160 Q30,120 40,160 Q50,110 60,160 Q70,130 80,160" fill="none" stroke="#562e91" stroke-width="1.5" />
  <path d="M220,160 Q230,100 240,160 Q260,90 280,160" fill="none" stroke="#562e91" stroke-width="2" />
  <ellipse cx="150" cy="165" rx="140" ry="15" fill="#2d1252" opacity="0.7" />
  
  <!-- Small crystals in the background -->
  <path d="M40,230 L45,210 L50,230 L40,230 Z" fill="#9c71e3" />
  <path d="M260,240 L270,210 L280,240 L260,240 Z" fill="#9c71e3" />
  <path d="M70,220 L75,205 L80,220 L70,220 Z" fill="#9c71e3" />
  
  <!-- Plant pot -->
  <path d="M140,220 L120,260 L170,260 L150,220 Z" fill="#7a3611" />
  <path d="M140,220 L120,260 L170,260 L150,220 Z" fill="none" stroke="#5e280d" stroke-width="1" />
  <ellipse cx="145" cy="220" rx="15" ry="5" fill="#5e280d" />
  <path d="M130,230 C135,235 155,235 160,230" fill="none" stroke="#5e280d" stroke-width="1" />
  <path d="M135,240 C140,245 150,245 155,240" fill="none" stroke="#5e280d" stroke-width="1" />
  
  <!-- Plant stem -->
  <path d="M145,220 C150,200 135,190 145,170 C155,150 140,135 145,120" fill="none" stroke="#1e8c1e" stroke-width="5" stroke-linecap="round" />
  
  <!-- Plant branches -->
  <path d="M145,170 C135,165 130,160 125,155" fill="none" stroke="#1e8c1e" stroke-width="3" stroke-linecap="round" />
  <path d="M145,170 C155,165 160,160 165,155" fill="none" stroke="#1e8c1e" stroke-width="3" stroke-linecap="round" />
  
  <!-- Small unopened buds -->
  <circle cx="145" cy="185" r="3" fill="#1e8c1e" />
  <circle cx="155" cy="175" r="2" fill="#1e8c1e" />
  
  <!-- First trap (open) -->
  <g transform="translate(145,120) rotate(-10)">
    <!-- Left half -->
    <path d="M0,0 C-10,-5 -20,-5 -15,5 C-25,15 -25,25 -15,20 C-10,25 -5,25 0,20 Z" fill="url(#plantGradient)" />
    <path d="M-13,10 C-20,15 -20,20 -12,17" fill="none" stroke="#0a5c0a" stroke-width="1" />
    <!-- Right half -->
    <path d="M0,0 C10,-5 20,-5 15,5 C25,15 25,25 15,20 C10,25 5,25 0,20 Z" fill="url(#plantGradient)" />
    <path d="M13,10 C20,15 20,20 12,17" fill="none" stroke="#0a5c0a" stroke-width="1" />
    <!-- Inside coloration -->
    <ellipse cx="0" cy="10" rx="8" ry="10" fill="url(#trapInside)" />
    <!-- Teeth -->
    <path d="M-8,8 L-10,10 L-8,12 L-6,10 Z M-5,14 L-7,16 L-5,18 L-3,16 Z M8,8 L10,10 L8,12 L6,10 Z M5,14 L7,16 L5,18 L3,16 Z" fill="white" />
    <!-- Trigger hairs -->
    <path d="M0,5 L0,0 M-3,7 L-6,3 M3,7 L6,3" fill="none" stroke="#ff69b4" stroke-width="0.5" />
  </g>
  
  <!-- Second trap (half-open) -->
  <g transform="translate(125,155) rotate(30)">
    <!-- Left half -->
    <path d="M0,0 C-8,-3 -15,-3 -12,3 C-18,10 -18,15 -12,12 C-8,15 -3,15 0,12 Z" fill="url(#plantGradient)" />
    <!-- Right half -->
    <path d="M0,0 C8,-3 15,-3 12,3 C18,10 18,15 12,12 C8,15 3,15 0,12 Z" fill="url(#plantGradient)" />
    <!-- Inside coloration -->
    <ellipse cx="0" cy="6" rx="6" ry="6" fill="url(#trapInside)" />
    <!-- Teeth -->
    <path d="M-6,5 L-7,6 L-6,7 L-5,6 Z M6,5 L7,6 L6,7 L5,6 Z" fill="white" />
    <!-- Trigger hairs -->
    <path d="M0,3 L0,0 M-3,4 L-5,2" fill="none" stroke="#ff69b4" stroke-width="0.5" />
  </g>
  
  <!-- Third trap (closed) -->
  <g transform="translate(165,155) rotate(-15)">
    <ellipse cx="0" cy="0" rx="10" ry="5" fill="url(#plantGradient)" />
    <path d="M-9,0 L9,0" fill="none" stroke="#0a5c0a" stroke-width="1" />
    <!-- Teeth meeting -->
    <path d="M-8,-1 L-7,0 L-8,1 M-5,-1 L-4,0 L-5,1 M-2,-1 L-1,0 L-2,1 M1,-1 L2,0 L1,1 M4,-1 L5,0 L4,1 M7,-1 L8,0 L7,1" fill="none" stroke="white" stroke-width="0.5" />
  </g>
  
  <!-- Alien -->
  <!-- Body -->
  <ellipse cx="200" cy="230" rx="15" ry="25" fill="url(#alienSkin)" />
  
  <!-- Head -->
  <ellipse cx="200" cy="190" rx="12" ry="15" fill="url(#alienSkin)" />
  
  <!-- Eyes (large almond shaped) -->
  <g transform="translate(200,185) rotate(-10)">
    <ellipse cx="-5" cy="0" rx="4" ry="6" fill="black" />
    <ellipse cx="-5" cy="-2" rx="1.5" ry="2.5" fill="white" />
    <ellipse cx="-5" cy="-2" rx="0.5" ry="1" fill="black" />
  </g>
  <g transform="translate(200,185) rotate(10)">
    <ellipse cx="5" cy="0" rx="4" ry="6" fill="black" />
    <ellipse cx="5" cy="-2" rx="1.5" ry="2.5" fill="white" />
    <ellipse cx="5" cy="-2" rx="0.5" ry="1" fill="black" />
  </g>
  
  <!-- Mouth (small and expressive) -->
  <path d="M197,195 C200,197 203,195 206,195" fill="none" stroke="black" stroke-width="0.75" />
  
  <!-- Antenna -->
  <path d="M195,175 C190,165 185,170 183,160" fill="none" stroke="#05a583" stroke-width="2" />
  <path d="M205,175 C210,165 215,170 217,160" fill="none" stroke="#05a583" stroke-width="2" />
  <circle cx="183" cy="160" r="3" fill="#f75efd">
    <animate attributeName="opacity" values="1;0.6;1" dur="2s" repeatCount="indefinite" />
  </circle>
  <circle cx="217" cy="160" r="3" fill="#f75efd">
    <animate attributeName="opacity" values="0.6;1;0.6" dur="2s" repeatCount="indefinite" />
  </circle>
  
  <!-- Arms -->
  <path d="M190,215 C175,210 170,195 170,185" fill="none" stroke="url(#alienSkin)" stroke-width="3" stroke-linecap="round" />
  <path d="M210,215 C225,210 230,195 230,185" fill="none" stroke="url(#alienSkin)" stroke-width="3" stroke-linecap="round" />
  
  <!-- Secondary set of smaller arms -->
  <path d="M190,225 C180,225 175,215 170,210" fill="none" stroke="url(#alienSkin)" stroke-width="2" stroke-linecap="round" />
  <path d="M210,225 C220,225 225,215 230,210" fill="none" stroke="url(#alienSkin)" stroke-width="2" stroke-linecap="round" />
  
  <!-- Legs -->
  <path d="M195,255 C190,265 185,270 180,280" fill="none" stroke="url(#alienSkin)" stroke-width="4" stroke-linecap="round" />
  <path d="M205,255 C210,265 215,270 220,280" fill="none" stroke="url(#alienSkin)" stroke-width="4" stroke-linecap="round" />
  
  <!-- Feet -->
  <path d="M180,280 C177,283 183,283 180,280 Z" fill="#05a583" />
  <path d="M220,280 C217,283 223,283 220,280 Z" fill="#05a583" />
  
  <!-- Futuristic watering device -->
  <g transform="translate(165,185) rotate(-10)">
    <path d="M0,0 L15,5 L12,10 L-3,5 Z" fill="url(#wateringCanGradient)" />
    <path d="M15,5 L25,3 L25,8 L12,10 Z" fill="#a0a0ff" />
    <path d="M25,5.5 L30,5" fill="none" stroke="#a0a0ff" stroke-width="2" stroke-linecap="round" />
    
    <!-- Tech details on watering device -->
    <path d="M5,5 L8,5" fill="none" stroke="#ffffff" stroke-width="0.5" />
    <path d="M10,6 L13,6" fill="none" stroke="#ffffff" stroke-width="0.5" />
    <circle cx="22" cy="6" r="1" fill="#ffff00" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.4;0.8" dur="1s" repeatCount="indefinite" />
    </circle>
    
    <!-- Water stream -->
    <path d="M30,5 C45,20 60,35 75,50 C85,60 90,75 95,85" fill="none" stroke="#a0e9ff" stroke-width="1.5" stroke-dasharray="2,2" />
    
    <!-- Water droplets -->
    <g transform="translate(75,55)">
      <path d="M0,0 C1,-3 3,-3 4,0 C4,3 0,3 0,0 Z" fill="url(#waterDrop)">
        <animate attributeName="opacity" values="1;0.7;1" dur="3s" repeatCount="indefinite" />
      </path>
    </g>
    <g transform="translate(85,70)">
      <path d="M0,0 C2,-4 5,-4 7,0 C7,4 0,4 0,0 Z" fill="url(#waterDrop)">
        <animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
      </path>
    </g>
    <g transform="translate(95,85)">
      <path d="M0,0 C1.5,-3.5 4.5,-3.5 6,0 C6,3.5 0,3.5 0,0 Z" fill="url(#waterDrop)">
        <animate attributeName="opacity" values="0.8;0.5;0.8" dur="2.5s" repeatCount="indefinite" />
      </path>
    </g>
  </g>
  
  <!-- Glowing particles around the plant -->
  <circle cx="135" cy="130" r="1.5" fill="#f75efd" opacity="0.8">
    <animate attributeName="opacity" values="0.8;0.2;0.8" dur="3s" repeatCount="indefinite" />
  </circle>
  <circle cx="155" cy="140" r="1" fill="#f75efd" opacity="0.6">
    <animate attributeName="opacity" values="0.6;0.1;0.6" dur="2.5s" repeatCount="indefinite" />
  </circle>
  <circle cx="165" cy="120" r="1.2" fill="#f75efd" opacity="0.7">
    <animate attributeName="opacity" values="0.7;0.3;0.7" dur="4s" repeatCount="indefinite" />
  </circle>
  <circle cx="130" cy="155" r="1" fill="#f75efd" opacity="0.5">
    <animate attributeName="opacity" values="0.5;0.2;0.5" dur="3.5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Additional landscape elements -->
  <path d="M50,250 Q60,240 70,250 Q80,230 90,250 Q100,240 110,250" fill="#3a1f68" stroke="#562e91" stroke-width="1" />
  <path d="M230,260 Q240,240 250,260 Q260,230 270,260" fill="#3a1f68" stroke="#562e91" stroke-width="1" />
  
  <!-- Tiny additional plants -->
  <path d="M60,250 C58,245 62,245 60,240" fill="none" stroke="#1e8c1e" stroke-width="1" />
  <circle cx="60" cy="240" r="2" fill="#b83dac" />
  
  <path d="M250,255 C248,248 252,248 250,241" fill="none" stroke="#1e8c1e" stroke-width="1" />
  <path d="M247,245 C250,242 253,245 250,248" fill="#b83dac" />
</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 demonstrates superior creativity and technical quality.

    The alien and carnivorous plant are more detailed, and the background with two suns and additional celestial elements adds depth and visual interest.

    In contrast, Player 1's image, though adhering to the prompt, lacks the same level of detail and compositional strength.

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
28
Player 2
94
Rectangles

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

Player 1
4
Player 2
1
Circles

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

Player 1
12
Player 2
27
Ellipses

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

Player 1
4
Player 2
13
Lines

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

Player 1
6
Player 2
Polygons

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

Player 1
2
Player 2
Paths

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

Player 1
Player 2
53
Groups

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

Player 1
3
Player 2
10

Visual Effects Metrics

Gradients

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

Player 1
6
Player 2
8
Patterns

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

Player 1
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
8
Player 2
33

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
22
Player 2
36

Interactivity Metrics

Animations

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

Player 1
Player 2
10
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
5
Player 2
9

Complexity Metrics

Path Commands

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

Player 1
Player 2
213
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
6
Player 2
10
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