Back

SVG Drawing Match #800

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A flamingo playing a saxophone on a floating iceberg"

SVG by Claude 3.7 Sonnet (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background gradients -->
  <defs>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#2E86C1"/>
      <stop offset="100%" stop-color="#85C1E9"/>
    </linearGradient>
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#3498DB"/>
      <stop offset="100%" stop-color="#1B4F72"/>
    </linearGradient>
    <linearGradient id="flamingoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FF9EAA"/>
      <stop offset="100%" stop-color="#FF6B81"/>
    </linearGradient>
    <linearGradient id="saxGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFD700"/>
      <stop offset="100%" stop-color="#FFA500"/>
    </linearGradient>
    <radialGradient id="icebergGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#F7F9F9"/>
      <stop offset="60%" stop-color="#D6EAF8"/>
      <stop offset="100%" stop-color="#AED6F1"/>
    </radialGradient>
    <filter id="waterRipple" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" result="turbulence"/>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="G"/>
    </filter>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
  </defs>

  <!-- Sky background -->
  <rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)"/>
  
  <!-- Water background -->
  <rect x="0" y="200" width="300" height="100" fill="url(#waterGradient)" filter="url(#waterRipple)"/>
  
  <!-- Sun -->
  <circle cx="250" cy="40" r="20" fill="#FFF176" filter="url(#glow)"/>
  <circle cx="250" cy="40" r="15" fill="#FFEB3B"/>
  
  <!-- Music notes floating in air -->
  <path d="M70,40 Q80,30 85,45 T100,40" stroke="#FFEB3B" stroke-width="1.5" fill="none"/>
  <path d="M95,20 Q105,10 110,25 T125,20" stroke="#FFEB3B" stroke-width="1.5" fill="none"/>
  <circle cx="85" cy="45" r="3" fill="#FFEB3B"/>
  <circle cx="110" cy="25" r="3" fill="#FFEB3B"/>
  <path d="M120,50 Q130,40 135,55 T150,50" stroke="#FFEB3B" stroke-width="1.5" fill="none"/>
  <circle cx="135" cy="55" r="3" fill="#FFEB3B"/>
  
  <!-- Iceberg -->
  <path d="M70,230 C80,190 100,180 130,185 C150,180 170,190 180,210 C200,200 220,210 230,230 C170,210 130,220 70,230 Z" fill="url(#icebergGradient)"/>
  <path d="M90,200 L100,185 L110,195 Z" fill="#E8F8FF" opacity="0.7"/>
  <path d="M130,190 L140,180 L155,195 Z" fill="#E8F8FF" opacity="0.7"/>
  <path d="M170,195 L180,185 L200,210 Z" fill="#E8F8FF" opacity="0.7"/>
  
  <!-- Iceberg reflection in water -->
  <path d="M70,230 C80,250 100,255 130,245 C150,255 170,250 180,240 C200,255 220,245 230,230" fill="url(#icebergGradient)" opacity="0.3" filter="url(#waterRipple)"/>
  
  <!-- Flamingo body -->
  <ellipse cx="150" cy="185" rx="25" ry="15" fill="url(#flamingoGradient)" transform="rotate(-20, 150, 185)"/>
  <path d="M138,175 C120,155 110,135 115,115 C120,95 140,85 145,90 C150,95 145,115 130,130" stroke="#FF6B81" stroke-width="4" fill="none"/>
  
  <!-- Flamingo head and beak -->
  <circle cx="148" cy="110" r="8" fill="url(#flamingoGradient)"/>
  <path d="M150,110 C154,109 158,110 160,112 C162,114 163,118 160,120 C158,121 148,121 146,119 Z" fill="#555"/>
  <ellipse cx="152" cy="107" rx="2" ry="2" fill="#111"/>
  
  <!-- Flamingo legs -->
  <path d="M170,190 L180,230" stroke="#FF6B81" stroke-width="2" fill="none"/>
  <path d="M180,230 L185,232" stroke="#FF6B81" stroke-width="1.5" fill="none"/>
  <path d="M160,195 L155,230" stroke="#FF6B81" stroke-width="2" fill="none"/>
  <path d="M155,230 L160,232" stroke="#FF6B81" stroke-width="1.5" fill="none"/>
  
  <!-- Saxophone -->
  <path d="M145,125 C140,130 138,135 140,140 C142,145 145,150 150,150 L160,140 C155,138 150,135 145,125 Z" fill="url(#saxGradient)"/>
  <path d="M160,140 L175,125 C180,123 180,120 175,118 L160,130 Z" fill="url(#saxGradient)"/>
  <path d="M160,130 L145,125" stroke="#D4A017" stroke-width="1" fill="none"/>
  <circle cx="170" cy="122" r="2" fill="#111"/>
  <circle cx="165" cy="125" r="2" fill="#111"/>
  <circle cx="160" cy="128" r="2" fill="#111"/>
  
  <!-- Flamingo wing -->
  <path d="M130,185 C125,175 130,165 140,165 C150,165 155,175 150,185" fill="url(#flamingoGradient)"/>
  
  <!-- Bubbles in water -->
  <circle cx="70" cy="250" r="3" fill="#ffffff" opacity="0.6"/>
  <circle cx="90" cy="260" r="2" fill="#ffffff" opacity="0.5"/>
  <circle cx="110" cy="245" r="1.5" fill="#ffffff" opacity="0.4"/>
  <circle cx="200" cy="255" r="2.5" fill="#ffffff" opacity="0.6"/>
  <circle cx="220" cy="245" r="1.5" fill="#ffffff" opacity="0.5"/>
  <circle cx="240" cy="260" r="2" fill="#ffffff" opacity="0.4"/>
</svg>
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions -->
  <defs>
    <!-- Gradients -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1a3a8f" />
      <stop offset="100%" stop-color="#0c1d45" />
    </linearGradient>
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ff9e6d" />
      <stop offset="50%" stop-color="#ff758c" />
      <stop offset="100%" stop-color="#5f2c82" />
    </linearGradient>
    <linearGradient id="icebergGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="50%" stop-color="#e0f7fa" />
      <stop offset="100%" stop-color="#b2ebf2" />
    </linearGradient>
    <linearGradient id="flamingoGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff9a9e" />
      <stop offset="100%" stop-color="#ff6b6b" />
    </linearGradient>
    <linearGradient id="flamingoShadowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e57373" />
      <stop offset="100%" stop-color="#c62828" />
    </linearGradient>
    <linearGradient id="saxGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffd700" />
      <stop offset="100%" stop-color="#b8860b" />
    </linearGradient>
    <linearGradient id="saxHighlightGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </linearGradient>
    
    <!-- Patterns and Filters -->
    <pattern id="waterPattern" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
      <path d="M0 5 Q 5 0, 10 5 Q 15 10, 20 5" fill="none" stroke="#4a6fc1" stroke-width="1" />
    </pattern>
    <filter id="iceCrystals" x="-20%" y="-20%" width="140%" height="140%">
      <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" result="noise" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="3" />
    </filter>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    <pattern id="starPattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="1" fill="#ffffff" opacity="0.8" />
      <circle cx="30" cy="25" r="0.8" fill="#ffffff" opacity="0.7" />
      <circle cx="50" cy="15" r="1.2" fill="#ffffff" opacity="0.9" />
      <circle cx="70" cy="35" r="0.6" fill="#ffffff" opacity="0.6" />
      <circle cx="90" cy="5" r="1" fill="#ffffff" opacity="0.8" />
      <circle cx="15" cy="55" r="0.7" fill="#ffffff" opacity="0.7" />
      <circle cx="35" cy="75" r="1.1" fill="#ffffff" opacity="0.9" />
      <circle cx="55" cy="45" r="0.5" fill="#ffffff" opacity="0.6" />
      <circle cx="75" cy="85" r="0.9" fill="#ffffff" opacity="0.8" />
      <circle cx="95" cy="65" r="0.7" fill="#ffffff" opacity="0.7" />
    </pattern>
  </defs>
  
  <!-- Background elements -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  <rect x="0" y="0" width="300" height="200" fill="url(#starPattern)" opacity="0.8" />
  <rect x="0" y="200" width="300" height="100" fill="url(#waterGradient)" />
  <rect x="0" y="200" width="300" height="30" fill="url(#waterPattern)" opacity="0.3" />
  
  <!-- Moon -->
  <circle cx="250" cy="50" r="20" fill="#fff9c4" opacity="0.8">
    <animate attributeName="opacity" values="0.7;0.9;0.7" dur="5s" repeatCount="indefinite" />
  </circle>
  <circle cx="240" cy="45" r="5" fill="#ffffff" opacity="0.5" />
  <circle cx="260" cy="55" r="3" fill="#ffffff" opacity="0.4" />
  
  <!-- Northern lights effect -->
  <path d="M0 80 Q 50 60, 100 80 Q 150 100, 200 80 Q 250 60, 300 80" fill="none" stroke="#72ffb6" stroke-width="3" opacity="0.5">
    <animate attributeName="d" values="M0 80 Q 50 60, 100 80 Q 150 100, 200 80 Q 250 60, 300 80;
                                     M0 85 Q 50 70, 100 85 Q 150 100, 200 85 Q 250 70, 300 85;
                                     M0 80 Q 50 60, 100 80 Q 150 100, 200 80 Q 250 60, 300 80" 
             dur="10s" repeatCount="indefinite" />
  </path>
  <path d="M0 100 Q 50 80, 100 100 Q 150 120, 200 100 Q 250 80, 300 100" fill="none" stroke="#a64dff" stroke-width="2" opacity="0.3">
    <animate attributeName="d" values="M0 100 Q 50 80, 100 100 Q 150 120, 200 100 Q 250 80, 300 100;
                                     M0 105 Q 50 90, 100 105 Q 150 120, 200 105 Q 250 90, 300 105;
                                     M0 100 Q 50 80, 100 100 Q 150 120, 200 100 Q 250 80, 300 100" 
             dur="15s" repeatCount="indefinite" />
  </path>
  
  <!-- Iceberg -->
  <path d="M50 200 L70 150 L90 180 L120 140 L150 170 L200 120 L230 180 L250 150 L260 200 Z" fill="url(#icebergGradient)" filter="url(#iceCrystals)" />
  
  <!-- Iceberg highlights -->
  <path d="M120 140 L150 170 L200 120" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.6" />
  <path d="M70 150 L90 180" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.6" />
  <circle cx="120" cy="140" r="5" fill="#ffffff" opacity="0.4" />
  <circle cx="200" cy="120" r="4" fill="#ffffff" opacity="0.3" />
  
  <!-- Iceberg reflections -->
  <path d="M50 200 L70 230 L90 220 L120 240 L150 225 L200 260 L230 220 L250 235 L260 200" fill="url(#icebergGradient)" opacity="0.3" />

  <!-- Water ripples around iceberg -->
  <path d="M40 200 Q 50 198, 60 200 Q 70 202, 80 200 Q 90 198, 100 200" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.5" />
  <path d="M260 200 Q 270 198, 280 200 Q 290 202, 300 200" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.5" />
  <path d="M160 200 Q 170 198, 180 200 Q 190 202, 200 200" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.5" />
  
  <!-- Flamingo shadow on iceberg -->
  <ellipse cx="145" cy="185" rx="20" ry="10" fill="#000000" opacity="0.1" />
  
  <!-- Flamingo legs -->
  <line x1="155" y1="200" x2="150" y2="160" stroke="#ff6b6b" stroke-width="3" />
  <line x1="135" y1="195" x2="140" y2="165" stroke="#ff6b6b" stroke-width="3" />
  <line x1="135" y1="195" x2="130" y2="195" stroke="#ff6b6b" stroke-width="3" />
  <line x1="155" y1="200" x2="160" y2="200" stroke="#ff6b6b" stroke-width="3" />
  <ellipse cx="130" cy="195" rx="3" ry="1" fill="#e57373" />
  <ellipse cx="160" cy="200" rx="3" ry="1" fill="#e57373" />
  
  <!-- Flamingo body -->
  <ellipse cx="145" cy="160" rx="25" ry="40" fill="url(#flamingoGradient)" transform="rotate(-20, 145, 160)" />
  
  <!-- Flamingo wing -->
  <path d="M145 140 Q 165 130, 160 160 Q 155 170, 145 165" fill="url(#flamingoShadowGradient)" />
  
  <!-- Flamingo neck -->
  <path d="M135 130 C 120 110, 130 90, 120 70 C 110 50, 105 40, 115 30" stroke="url(#flamingoGradient)" stroke-width="8" fill="none" />
  
  <!-- Flamingo head -->
  <ellipse cx="115" cy="30" rx="10" ry="7" fill="url(#flamingoGradient)" />
  
  <!-- Flamingo eye -->
  <circle cx="118" cy="28" r="1.5" fill="#000" />
  <circle cx="119" cy="27" r="0.5" fill="#ffffff" />
  
  <!-- Flamingo beak -->
  <path d="M115 30 Q 110 33, 95 30" stroke="#ff6b6b" stroke-width="3" fill="#ff6b6b" />
  <path d="M115 30 Q 110 33, 100 31" stroke="#e57373" stroke-width="1" fill="none" />
  
  <!-- Saxophone -->
  <g>
    <!-- Saxophone body -->
    <path d="M95 30 C 90 32, 82 33, 80 28 C 78 23, 85 20, 90 25 Z" fill="url(#saxGradient)" />
    <path d="M95 30 L100 25 C 105 20, 95 15, 90 25" fill="url(#saxGradient)" />
    
    <!-- Saxophone bell -->
    <path d="M80 28 C 75 25, 70 20, 72 15 C 74 10, 80 12, 85 18 C 87 20, 90 25, 90 25" fill="url(#saxGradient)" />
    
    <!-- Saxophone keys -->
    <circle cx="95" cy="27" r="1" fill="#ffffff" />
    <circle cx="93" cy="25" r="1" fill="#ffffff" />
    <circle cx="91" cy="23" r="1" fill="#ffffff" />
    <circle cx="83" cy="20" r="1" fill="#ffffff" />
    <circle cx="79" cy="18" r="1" fill="#ffffff" />
    
    <!-- Mouthpiece -->
    <path d="M95 30 C 96 29, 98 28, 98 27" stroke="#b8860b" stroke-width="1.5" />
    
    <!-- Saxophone highlight -->
    <path d="M82 23 C 85 20, 90 22, 93 25" stroke="url(#saxHighlightGradient)" stroke-width="2" fill="none" />
  </g>
  
  <!-- Musical notes with animations -->
  <g filter="url(#glow)">
    <!-- Static musical notes -->
    <g fill="#ffffff" opacity="0.6">
      <path d="M70 40 L70 30 L75 28 L75 38 Z" />
      <circle cx="75" cy="38" r="2" />
      
      <path d="M90 30 L90 20 L95 18 L95 28 Z" />
      <circle cx="95" cy="28" r="2" />
      
      <path d="M80 50 L80 40 L85 38 L85 48 Z" />
      <circle cx="85" cy="48" r="2" />
    </g>
    
    <!-- Animated musical notes -->
    <g fill="#ffffff">
      <g>
        <path d="M60 60 L60 50 L65 48 L65 58 Z" />
        <circle cx="65" cy="58" r="2" />
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="20 -30" to="30 -70" dur="4s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" dur="4s" repeatCount="indefinite" />
      </g>
      
      <g>
        <path d="M100 70 L100 60 L105 58 L105 68 Z" />
        <circle cx="105" cy="68" r="2" />
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-20 -40" to="-35 -90" dur="5s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
      </g>
      
      <g>
        <path d="M85 80 L85 70 L90 68 L90 78 Z" />
        <circle cx="90" cy="78" r="2" />
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 -50" to="20 -110" dur="6s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="1" to="0" dur="6s" repeatCount="indefinite" />
      </g>
    </g>
  </g>
  
  <!-- Water sparkles -->
  <g>
    <circle cx="70" cy="210" r="1" fill="#ffffff">
      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="100" cy="220" r="1" fill="#ffffff">
      <animate attributeName="opacity" values="0;1;0" dur="2.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="215" r="1" fill="#ffffff">
      <animate attributeName="opacity" values="0;1;0" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="200" cy="225" r="1" fill="#ffffff">
      <animate attributeName="opacity" values="0;1;0" dur="3.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="250" cy="210" r="1" fill="#ffffff">
      <animate attributeName="opacity" values="0;1;0" dur="3s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Ice crystal particles -->
  <g>
    <circle cx="100" cy="150" r="1" fill="#ffffff">
      <animate attributeName="cy" values="150;140;150" dur="4s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.7;0.9;0.7" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="120" cy="130" r="1.5" fill="#ffffff">
      <animate attributeName="cy" values="130;120;130" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.7;0.9;0.7" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle cx="190" cy="140" r="1" fill="#ffffff">
      <animate attributeName="cy" values="140;130;140" dur="6s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.7;0.9;0.7" dur="6s" repeatCount="indefinite" />
    </circle>
    <circle cx="220" cy="160" r="1.2" fill="#ffffff">
      <animate attributeName="cy" values="160;150;160" dur="4.5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.7;0.9;0.7" dur="4.5s" repeatCount="indefinite" />
    </circle>
  </g>
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet (2025-02-19) Player 1

Judge's Analysis

    Player 1's image adheres more closely to the prompt by clearly depicting a flamingo playing a saxophone on a distinct iceberg.

    The technical quality and compositional clarity are strong, with the flamingo's posture and the saxophone visually integrated.

    Player 2's image, while colorful and creative, lacks clarity in the depiction of the saxophone and the iceberg is less defined, reducing adherence to 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
37
Player 2
75
Rectangles

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

Player 1
2
Player 2
4
Circles

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

Player 1
15
Player 2
37
Ellipses

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

Player 1
2
Player 2
5
Lines

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

Player 1
Player 2
4
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
18
Player 2
25
Groups

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

Player 1
Player 2
9

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
7
Patterns

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

Player 1
Player 2
2
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
9
Player 2
17

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
18
Player 2
20

Interactivity Metrics

Animations

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

Player 1
Player 2
22
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
1
Player 2
1

Complexity Metrics

Path Commands

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

Player 1
64
Player 2
100
Max Group Nesting

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

Player 1
Player 2
2
Defs Elements

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

Player 1
7
Player 2
11
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