Back

SVG Drawing Match #2642

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A flamingo dancing ballet on a tiny circus stage under a single spotlight."

o4-mini medium (2025-04-16)
Player 1
ELO: 1,064.602 1,059.168 (-5.4)
SVG by o4-mini medium (2025-04-16) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <radialGradient id="spotlight" cx="150" cy="40" r="150" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="rgba(255,255,230,0.9)"/>
      <stop offset="50%" stop-color="rgba(255,255,230,0.5)"/>
      <stop offset="100%" stop-color="rgba(0,0,0,0)"/>
    </radialGradient>
    <linearGradient id="stageFloorGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#EEDDAA"/>
      <stop offset="100%" stop-color="#AA8855"/>
    </linearGradient>
    <radialGradient id="flamingoGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#FFC0CB"/>
      <stop offset="100%" stop-color="#FF69B4"/>
    </radialGradient>
    <pattern id="curtainStripes" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <rect width="5" height="10" fill="#8B0000"/>
      <rect x="5" width="5" height="10" fill="#B22222"/>
    </pattern>
  </defs>

  <!-- Background and Spotlight -->
  <rect width="300" height="300" fill="#111"/>
  <circle cx="150" cy="0" r="200" fill="url(#spotlight)"/>

  <!-- Stage Curtains -->
  <path d="M0,0 L0,180 C80,130 220,130 300,180 L300,0 Z" fill="url(#curtainStripes)" opacity="0.8"/>

  <!-- Stage Floor -->
  <ellipse cx="150" cy="280" rx="140" ry="30" fill="url(#stageFloorGrad)"/>
  <ellipse cx="150" cy="280" rx="140" ry="30" fill="rgba(255,255,255,0.05)"/>

  <!-- Flamingo Ballet Dancer -->
  <g transform="translate(150,200)">
    <!-- Legs -->
    <path d="M-5,0 L-5,60" stroke="#F08080" stroke-width="4" stroke-linecap="round"/>
    <path d="M5,0 l5,-40 l0,40" stroke="#F08080" stroke-width="4" stroke-linecap="round" fill="none"/>

    <!-- Tutu -->
    <g fill="#FFE4E1" opacity="0.9" transform="translate(0,-40)">
      <ellipse cx="0" cy="0" rx="25" ry="7"/>
      <ellipse cx="0" cy="0" rx="25" ry="7" transform="rotate(60)"/>
      <ellipse cx="0" cy="0" rx="25" ry="7" transform="rotate(120)"/>
      <ellipse cx="0" cy="0" rx="25" ry="7" transform="rotate(180)"/>
      <ellipse cx="0" cy="0" rx="25" ry="7" transform="rotate(240)"/>
      <ellipse cx="0" cy="0" rx="25" ry="7" transform="rotate(300)"/>
    </g>

    <!-- Body -->
    <ellipse cx="0" cy="-40" rx="20" ry="30" fill="url(#flamingoGrad)" stroke="#FF1493" stroke-width="2"/>

    <!-- Neck -->
    <path d="M10,-50 C30,-90 60,-90 65,-60" stroke="#FF69B4" stroke-width="4" fill="none" stroke-linecap="round"/>

    <!-- Head -->
    <circle cx="65" cy="-60" r="8" fill="#FFC0CB" stroke="#FF1493" stroke-width="2"/>
    <circle cx="63" cy="-62" r="2" fill="#000"/>

    <!-- Beak -->
    <path d="M73,-60 l12,-5 l0,10 z" fill="#333" stroke="#222" stroke-width="1"/>

    <!-- Wing -->
    <path d="M-10,-50 C-40,-70 -30,-10 0,-30" fill="url(#flamingoGrad)" stroke="#FF1493" stroke-width="2"/>
  </g>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,340.291 1,345.725 (+5.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>
    <radialGradient id="spotlight" cx="50%" cy="20%" r="80%" fx="50%" fy="20%">
      <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
      <stop offset="40%" stop-color="#FFFFEE" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>
    
    <linearGradient id="stageGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#8A459C"/>
      <stop offset="100%" stop-color="#512E80"/>
    </linearGradient>
    
    <pattern id="goldTrim" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#B8860B"/>
      <circle cx="5" cy="5" r="2" fill="#FFD700"/>
    </pattern>
    
    <linearGradient id="flamingoPink" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFAABB"/>
      <stop offset="100%" stop-color="#FF6699"/>
    </linearGradient>
    
    <linearGradient id="tutuGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="100%" stop-color="#FFCCFF"/>
    </linearGradient>
    
    <radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#000000" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#000000" stop-opacity="0"/>
    </radialGradient>
    
    <linearGradient id="curtainGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#CC0000"/>
      <stop offset="100%" stop-color="#880000"/>
    </linearGradient>
    
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur"/>
      <feComposite in="SourceGraphic" in2="blur" operator="over"/>
    </filter>
  </defs>
  
  <!-- Background - dark circus tent interior -->
  <rect width="300" height="300" fill="#0A0712"/>
  
  <!-- Distant ceiling of circus tent -->
  <path d="M0,0 L0,50 Q75,80 150,50 Q225,80 300,50 L300,0 Z" fill="#220033" opacity="0.6"/>
  
  <!-- Circus tent ceiling details -->
  <path d="M50,20 L60,30 M100,10 L110,20 M150,5 L160,15 M200,10 L210,20 M250,20 L260,30" 
        stroke="#440066" stroke-width="1" opacity="0.5"/>
  
  <!-- Curtains -->
  <path d="M0,0 L0,120 Q30,140 30,200 L0,300 L0,0 Z" fill="url(#curtainGradient)" opacity="0.9"/>
  <path d="M300,0 L300,120 Q270,140 270,200 L300,300 L300,0 Z" fill="url(#curtainGradient)" opacity="0.9"/>
  
  <!-- Curtain details - folds and highlights -->
  <path d="M10,50 Q15,70 10,90 Q15,110 10,130 Q15,150 10,170 Q15,190 10,210" fill="none" stroke="#DD0000" stroke-width="1" opacity="0.7"/>
  <path d="M20,40 Q25,65 20,90 Q25,115 20,140 Q25,165 20,190 Q25,215 20,240" fill="none" stroke="#DD0000" stroke-width="1" opacity="0.7"/>
  <path d="M290,50 Q285,70 290,90 Q285,110 290,130 Q285,150 290,170 Q285,190 290,210" fill="none" stroke="#DD0000" stroke-width="1" opacity="0.7"/>
  <path d="M280,40 Q275,65 280,90 Q275,115 280,140 Q275,165 280,190 Q275,215 280,240" fill="none" stroke="#DD0000" stroke-width="1" opacity="0.7"/>
  
  <!-- Spotlight beam -->
  <polygon points="135,0 165,0 210,200 90,200" fill="url(#spotlight)" opacity="0.5"/>
  
  <!-- Circular stage -->
  <ellipse cx="150" cy="220" rx="80" ry="25" fill="url(#stageGradient)"/>
  <ellipse cx="150" cy="217" rx="75" ry="22" fill="#3A1465" stroke="#FFD700" stroke-width="1"/>
  <ellipse cx="150" cy="215" rx="70" ry="20" fill="#2C0D4D"/>
  
  <!-- Stage decorative trim -->
  <ellipse cx="150" cy="215" rx="65" ry="17" fill="none" stroke="url(#goldTrim)" stroke-width="2"/>
  
  <!-- Star decorations around stage -->
  <g opacity="0.8">
    <path d="M90,215 L93,210 L96,215 L100,212 L97,217 L102,220 L96,220 L95,226 L92,220 L86,219 Z" fill="#FFD700" filter="url(#starGlow)"/>
    <path d="M210,215 L213,210 L216,215 L220,212 L217,217 L222,220 L216,220 L215,226 L212,220 L206,219 Z" fill="#FFD700" filter="url(#starGlow)"/>
    <path d="M110,200 L113,195 L116,200 L120,197 L117,202 L122,205 L116,205 L115,211 L112,205 L106,204 Z" fill="#FFD700" filter="url(#starGlow)" opacity="0.6"/>
    <path d="M190,200 L193,195 L196,200 L200,197 L197,202 L202,205 L196,205 L195,211 L192,205 L186,204 Z" fill="#FFD700" filter="url(#starGlow)" opacity="0.6"/>
  </g>
  
  <!-- Stage spotlight effect -->
  <ellipse cx="150" cy="215" rx="60" ry="15" fill="url(#spotlight)" opacity="0.8"/>
  
  <!-- Shadow on stage -->
  <ellipse cx="150" cy="215" rx="30" ry="8" fill="url(#shadow)" opacity="0.7"/>
  
  <!-- Tiny audience silhouettes in the background -->
  <g opacity="0.5">
    <ellipse cx="50" cy="240" rx="5" ry="10" fill="#000000"/>
    <ellipse cx="70" cy="245" rx="5" ry="10" fill="#000000"/>
    <ellipse cx="90" cy="248" rx="5" ry="10" fill="#000000"/>
    <ellipse cx="250" cy="240" rx="5" ry="10" fill="#000000"/>
    <ellipse cx="230" cy="245" rx="5" ry="10" fill="#000000"/>
    <ellipse cx="210" cy="248" rx="5" ry="10" fill="#000000"/>
  </g>
  
  <!-- Flamingo - performing a ballet arabesque -->
  
  <!-- Supporting leg -->
  <path d="M150,200 C148,190 150,180 152,170" stroke="#FF6699" stroke-width="3" fill="none"/>
  
  <!-- Foot of supporting leg -->
  <path d="M152,170 L156,168 L154,166" stroke="#FF6699" stroke-width="2" fill="none"/>
  
  <!-- Body -->
  <path d="M152,170 C155,165 160,162 165,160 C170,158 175,158 180,160" fill="url(#flamingoPink)"/>
  
  <!-- Extended leg in arabesque position -->
  <path d="M180,160 C190,155 200,155 210,160 C215,162 220,165 225,170" stroke="#FF6699" stroke-width="3" fill="none"/>
  <path d="M225,170 L230,168 L228,166" stroke="#FF6699" stroke-width="2" fill="none"/>
  
  <!-- Tutu - more detailed and flowing -->
  <ellipse cx="165" cy="165" rx="25" ry="10" fill="url(#tutuGradient)" opacity="0.9"/>
  <path d="M140,165 C145,170 150,173 155,175 C160,177 170,177 175,175 C180,173 185,170 190,165" fill="url(#tutuGradient)" opacity="0.95"/>
  
  <!-- Tutu details -->
  <path d="M140,165 C145,168 150,170 155,172" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  <path d="M145,162 C150,166 155,168 160,170" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  <path d="M150,160 C155,164 160,166 165,168" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  <path d="M190,165 C185,168 180,170 175,172" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  <path d="M185,162 C180,166 175,168 170,170" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  <path d="M180,160 C175,164 170,166 165,168" fill="none" stroke="#FFFFFF" stroke-width="0.5" opacity="0.7"/>
  
  <!-- Tutu texture - small dots -->
  <g opacity="0.8">
    <circle cx="145" cy="166" r="0.5" fill="#FFFFFF"/>
    <circle cx="150" cy="168" r="0.5" fill="#FFFFFF"/>
    <circle cx="155" cy="170" r="0.5" fill="#FFFFFF"/>
    <circle cx="160" cy="171" r="0.5" fill="#FFFFFF"/>
    <circle cx="165" cy="172" r="0.5" fill="#FFFFFF"/>
    <circle cx="170" cy="171" r="0.5" fill="#FFFFFF"/>
    <circle cx="175" cy="170" r="0.5" fill="#FFFFFF"/>
    <circle cx="180" cy="168" r="0.5" fill="#FFFFFF"/>
    <circle cx="185" cy="166" r="0.5" fill="#FFFFFF"/>
  </g>
  
  <!-- Neck -->
  <path d="M165,160 C160,150 158,140 160,130 C162,120 170,115 175,110" fill="url(#flamingoPink)" stroke="#FF3377" stroke-width="0.5"/>
  
  <!-- Head -->
  <ellipse cx="177" cy="105" rx="8" ry="6" fill="url(#flamingoPink)"/>
  
  <!-- Beak -->
  <path d="M177,105 C187,103 192,104 195,106 C197,108 197,110 195,112 C192,114 187,111 177,105" fill="#FF5555" stroke="#FF3366" stroke-width="0.5"/>
  
  <!-- Eyes -->
  <circle cx="180" cy="103" r="1.5" fill="#000000"/>
  <circle cx="179.5" cy="102.5" r="0.5" fill="#FFFFFF"/>
  
  <!-- Crown/plume for ballet dancer -->
  <path d="M173,98 C175,95 180,94 182,96 C184,98 185,97 177,99" fill="#FFCCFF" stroke="#FF99CC" stroke-width="0.5"/>
  
  <!-- Wings/arms in graceful ballet position -->
  <path d="M165,160 C160,155 155,150 150,152 C145,154 142,160 140,165" fill="url(#flamingoPink)" stroke="#FF3377" stroke-width="0.5"/>
  <path d="M180,160 C185,150 190,145 195,147 C200,149 202,155 200,160" fill="url(#flamingoPink)" stroke="#FF3377" stroke-width="0.5"/>
  
  <!-- Small starbursts for magical effect around the flamingo -->
  <g opacity="0.8" filter="url(#starGlow)">
    <path d="M130,130 L133,133 L130,136 L127,133 Z" fill="#FFFFFF"/>
    <path d="M200,150 L203,153 L200,156 L197,153 Z" fill="#FFFFFF"/>
    <path d="M180,120 L183,123 L180,126 L177,123 Z" fill="#FFFFFF"/>
    <path d="M140,110 L143,113 L140,116 L137,113 Z" fill="#FFFFFF"/>
    <path d="M220,130 L223,133 L220,136 L217,133 Z" fill="#FFFFFF"/>
  </g>
  
  <!-- Spotlight circular glow on stage -->
  <circle cx="165" cy="170" r="80" fill="url(#spotlight)" opacity="0.4"/>
  
  <!-- Larger stars with glow -->
  <path d="M70,60 L72,67 L80,67 L74,72 L76,80 L70,75 L64,80 L66,72 L60,67 L68,67 Z" fill="#FFFFFF" opacity="0.7" filter="url(#starGlow)"/>
  <path d="M230,40 L232,47 L240,47 L234,52 L236,60 L230,55 L224,60 L226,52 L220,47 L228,47 Z" fill="#FFFFFF" opacity="0.7" filter="url(#starGlow)"/>
  <path d="M120,30 L122,37 L130,37 L124,42 L126,50 L120,45 L114,50 L116,42 L110,37 L118,37 Z" fill="#FFFFFF" opacity="0.6" filter="url(#starGlow)"/>
  
  <!-- Additional decorative elements -->
  <path d="M40,80 C50,75 60,80 50,85 C60,90 50,95 40,90 C30,95 20,90 30,85 C20,80 30,75 40,80" 
        fill="#AA5588" opacity="0.3"/>
  <path d="M260,80 C270,75 280,80 270,85 C280,90 270,95 260,90 C250,95 240,90 250,85 C240,80 250,75 260,80" 
        fill="#5588AA" opacity="0.3"/>
  
  <!-- Spotlight fixture -->
  <g transform="translate(150,0)">
    <rect x="-10" y="0" width="20" height="10" fill="#333333"/>
    <rect x="-15" y="10" width="30" height="5" fill="#222222"/>
    <circle cx="0" cy="15" r="12" fill="#111111" stroke="#444444" stroke-width="1"/>
    <circle cx="0" cy="15" r="8" fill="#FFFFCC"/>
    <circle cx="0" cy="15" r="4" fill="#FFFFFF"/>
  </g>
  
  <!-- Small flying sparkles for additional magic -->
  <g opacity="0.7">
    <circle cx="140" cy="140" r="1" fill="#FFFFFF"/>
    <circle cx="160" cy="130" r="0.8" fill="#FFFFFF"/>
    <circle cx="180" cy="150" r="1.2" fill="#FFFFFF"/>
    <circle cx="130" cy="160" r="0.7" fill="#FFFFFF"/>
    <circle cx="190" cy="130" r="0.9" fill="#FFFFFF"/>
    <circle cx="150" cy="120" r="1.1" fill="#FFFFFF"/>
  </g>
</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 is more detailed and visually appealing, with a well-defined circus stage, spotlight, and decorations that enhance the scene.

    The flamingo's pose better conveys the idea of ballet, and the overall composition captures the whimsical and theatrical atmosphere of the prompt more effectively.

    Player 1's submission, while simple and clear, lacks the depth and richness of Player 2's design.

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
21
Player 2
80
Rectangles

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

Player 1
3
Player 2
4
Circles

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

Player 1
3
Player 2
22
Ellipses

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

Player 1
9
Player 2
14
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
1
Paths

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

Player 1
6
Player 2
39
Groups

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

Player 1
2
Player 2
6

Visual Effects Metrics

Gradients

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

Player 1
3
Player 2
6
Patterns

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

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

The number of elements with stroke attributes in the SVG.

Player 1
7
Player 2
23

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
17
Player 2
29

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
7
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
18
Player 2
206
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
4
Player 2
8
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 #2730 May 10, 2025

"A cactus wearing sunglasses under a disco ball in the desert."

P1
SVG by o4-mini medium (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini medium (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2561 May 09, 2025

"Two penguins fencing with candy canes on an iceberg under the northern lights."

P1
SVG by o4-mini medium (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini medium (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2515 May 09, 2025

"A snail racing a cheetah on a rainbow-striped track."

P1
SVG by o4-mini medium (2025-04-16)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
o4-mini medium (2025-04-16)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #2305 May 09, 2025

"A snail racing a rocket on a winding track."

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by o4-mini medium (2025-04-16)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
o4-mini medium (2025-04-16)
View