Back

SVG Drawing Match #1124

Mar 13, 2025

GPT-4o

Challenge Creator

Creative Challenge

"A geometric zebra made entirely of triangles drinking neon water from a pixelated oasis"

DeepSeek-R1-Distill-Llama-70B

Player 1

ELO: 769.25 767.434 (-1.8)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background with a dark purple gradient -->
  <rect width="300" height="300" fill="url(#bgGradient)"/>
  
  <!-- Oasis in the center with pixelated water -->
  <g transform="translate(180,150)">
    <!-- Pixelated water effect using small rectangles -->
    <rect x="0" y="0" width="60" height="60" fill="url(#waterGradient)"/>
    <rect x="60" y="0" width="60" height="60" fill="url(#waterGradient2)"/>
    <rect x="0" y="60" width="60" height="60" fill="url(#waterGradient3)"/>
    <rect x="60" y="60" width="60" height="60" fill="url(#waterGradient4)"/>
  </g>

  <!-- Geometric zebra made of triangles -->
  <g transform="translate(50,100)">
    <!-- Main zebra body using triangles -->
    <path d="M0 0 L30 30 L60 0 L90 30 L120 0 L150 30 L180 0" fill="url(#zebraGradient)"/>
    <!-- Zebra head with detailed triangles -->
    <path d="M180 0 L210 15 L180 30 L150 15 L180 0" fill="#000000"/>
    <!-- Zebra legs and body details -->
    <path d="M60 0 L90 30 L120 0 L150 30 L180 0" fill="#FFFFFF"/>
  </g>

  <!-- Water drinking effect with glow -->
  <path d="M100 100 Q150 50 200 100" fill="url(#neonWaterGradient)"/>
  <filter id="glowFilter">
    <feGaussianBlur stdDeviation="4" result="glow"/>
    <feMerge>
      <feMergeNode in="glow"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

  <!-- Gradients -->
  <defs>
    <linearGradient id="bgGradient" x1="0" y1="0" x2="300" y2="300" gradientUnits="userSpaceOnUse">
      <stop stop-color="#1A0F3B" offset="0"/>
      <stop stop-color="#4A1010" offset="1"/>
    </linearGradient>

    <linearGradient id="waterGradient" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop stop-color="#00FFFF" offset="0"/>
      <stop stop-color="#00BFFF" offset="1"/>
    </linearGradient>

    <linearGradient id="waterGradient2" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop stop-color="#00BFFF" offset="0"/>
      <stop stop-color="#0099FF" offset="1"/>
    </linearGradient>

    <linearGradient id="waterGradient3" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop stop-color="#0099FF" offset="0"/>
      <stop stop-color="#0066FF" offset="1"/>
    </linearGradient>

    <linearGradient id="waterGradient4" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox">
      <stop stop-color="#0066FF" offset="0"/>
      <stop stop-color="#0033FF" offset="1"/>
    </linearGradient>

    <linearGradient id="zebraGradient" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
      <stop stop-color="#FFFFFF" offset="0"/>
      <stop stop-color="#000000" offset="1"/>
    </linearGradient>

    <radialGradient id="neonWaterGradient" cx="150" cy="150" r="100" fx="150" fy="150" gradientUnits="userSpaceOnUse">
      <stop stop-color="#00FFFF" offset="0"/>
      <stop stop-color="#00BFFF" offset="0.5"/>
      <stop stop-color="#0099FF" offset="1"/>
    </radialGradient>
  </defs>
</svg>

Claude 3.7 Sonnet Thinking (2025-02-19)

Player 2

ELO: 1,257.512 1,259.328 (+1.8)

Winner

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <linearGradient id="neonWaterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00ffff" />
      <stop offset="25%" stop-color="#ff00ff" />
      <stop offset="50%" stop-color="#00ffff" />
      <stop offset="75%" stop-color="#0080ff" />
      <stop offset="100%" stop-color="#00ffff" />
    </linearGradient>
    <linearGradient id="sandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#f2d2a9" />
      <stop offset="50%" stop-color="#e8c292" />
      <stop offset="100%" stop-color="#d9b27c" />
    </linearGradient>
    <filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite operator="over" in="SourceGraphic" />
    </filter>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#1a1a2e" />
  
  <!-- Stars in the sky -->
  <g id="stars">
    <circle cx="30" cy="30" r="1" fill="white" />
    <circle cx="60" cy="40" r="1.5" fill="white" />
    <circle cx="100" cy="20" r="1" fill="white" />
    <circle cx="140" cy="35" r="1.2" fill="white" />
    <circle cx="180" cy="25" r="1" fill="white" />
    <circle cx="220" cy="40" r="1.5" fill="white" />
    <circle cx="260" cy="30" r="1" fill="white" />
    <circle cx="40" cy="70" r="1.2" fill="white" />
    <circle cx="90" cy="60" r="1" fill="white" />
    <circle cx="150" cy="50" r="1.5" fill="white" />
    <circle cx="200" cy="70" r="1" fill="white" />
    <circle cx="250" cy="55" r="1.2" fill="white" />
    <circle cx="280" cy="75" r="1" fill="white" />
    <!-- Twinkling stars -->
    <circle cx="120" cy="40" r="1.3" fill="white">
      <animate attributeName="opacity" values="1;0.2;1" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="210" cy="60" r="1.1" fill="white">
      <animate attributeName="opacity" values="1;0.3;1" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="70" cy="80" r="1.4" fill="white">
      <animate attributeName="opacity" values="1;0.4;1" dur="5s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Moon -->
  <circle cx="250" cy="50" r="20" fill="#f4f4f4" />
  <circle cx="240" cy="45" r="5" fill="#e0e0e0" />
  <circle cx="260" cy="60" r="7" fill="#e0e0e0" />
  
  <!-- Sand for the desert -->
  <path d="M0,200 L300,220 L300,300 L0,300 Z" fill="url(#sandGradient)" />
  
  <!-- Pixelated Oasis -->
  <g id="oasis">
    <!-- Pixelated water pool with glow effect -->
    <g id="waterPool" filter="url(#neonGlow)">
      <!-- Row 1 -->
      <rect x="100" y="220" width="10" height="10" fill="#00ffff" opacity="0.9" />
      <rect x="110" y="220" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="120" y="220" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="130" y="220" width="10" height="10" fill="#00ffff" opacity="0.9" />
      <rect x="140" y="220" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="150" y="220" width="10" height="10" fill="#0099ff" opacity="0.9" />
      
      <!-- Row 2 -->
      <rect x="90" y="230" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="100" y="230" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="110" y="230" width="10" height="10" fill="#ff00ff" opacity="0.7" />
      <rect x="120" y="230" width="10" height="10" fill="#00ffff" opacity="0.9" />
      <rect x="130" y="230" width="10" height="10" fill="#ff00ff" opacity="0.7" />
      <rect x="140" y="230" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="150" y="230" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="160" y="230" width="10" height="10" fill="#00ffff" opacity="0.9" />
      
      <!-- Row 3 -->
      <rect x="90" y="240" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="100" y="240" width="10" height="10" fill="#00ffff" opacity="0.9" />
      <rect x="110" y="240" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="120" y="240" width="10" height="10" fill="#ff00ff" opacity="0.7" />
      <rect x="130" y="240" width="10" height="10" fill="#00ffff" opacity="0.9" />
      <rect x="140" y="240" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="150" y="240" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="160" y="240" width="10" height="10" fill="#00ccff" opacity="0.9" />
      
      <!-- Row 4 -->
      <rect x="100" y="250" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="110" y="250" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="120" y="250" width="10" height="10" fill="#00ccff" opacity="0.9" />
      <rect x="130" y="250" width="10" height="10" fill="#0099ff" opacity="0.9" />
      <rect x="140" y="250" width="10" height="10" fill="#ff00ff" opacity="0.7" />
      <rect x="150" y="250" width="10" height="10" fill="#00ccff" opacity="0.9" />
      
      <!-- Water ripple effect -->
      <circle cx="125" cy="235" r="15" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.3">
        <animate attributeName="r" values="5;20;5" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0;0.6" dur="3s" repeatCount="indefinite" />
      </circle>
      <circle cx="125" cy="235" r="10" fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.3">
        <animate attributeName="r" values="0;15;0" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.6;0;0.6" dur="3s" repeatCount="indefinite" />
      </circle>
    </g>
    
    <!-- Pixelated palm tree -->
    <g id="palmTree">
      <!-- Tree trunk -->
      <rect x="170" y="180" width="10" height="40" fill="#8B4513" />
      <rect x="180" y="170" width="10" height="10" fill="#8B4513" />
      
      <!-- Leaves made of triangles -->
      <polygon points="170,180 160,170 170,170" fill="#32CD32" />
      <polygon points="170,170 160,160 170,160" fill="#32CD32" />
      <polygon points="170,160 160,150 170,150" fill="#32CD32" />
      <polygon points="180,170 190,160 180,160" fill="#32CD32" />
      <polygon points="180,160 190,150 180,150" fill="#32CD32" />
      <polygon points="180,150 190,140 180,140" fill="#32CD32" />
      <polygon points="170,150 180,140 170,140" fill="#32CD32" />
      <polygon points="170,140 180,130 170,130" fill="#32CD32" />
      <polygon points="180,140 190,130 180,130" fill="#32CD32" />
      <polygon points="170,130 160,120 170,120" fill="#32CD32" />
    </g>
  </g>
  
  <!-- Neon Water Stream -->
  <g id="neonWater" filter="url(#neonGlow)">
    <path d="M120,220 Q125,200 120,180" fill="none" stroke="url(#neonWaterGradient)" stroke-width="3" stroke-linecap="round" opacity="0.8">
      <animate attributeName="d" dur="3s" repeatCount="indefinite"
        values="M120,220 Q125,200 120,180;
                M120,220 Q118,200 120,180;
                M120,220 Q125,200 120,180" />
    </path>
    
    <!-- Glowing particles in the water -->
    <circle cx="120" cy="205" r="1.5" fill="#ff00ff">
      <animate attributeName="cy" dur="2s" values="220;180;220" repeatCount="indefinite" />
      <animate attributeName="opacity" dur="2s" values="0.8;0.4;0.8" repeatCount="indefinite" />
    </circle>
    <circle cx="118" cy="190" r="1" fill="#00ffff">
      <animate attributeName="cy" dur="1.7s" values="220;180;220" repeatCount="indefinite" />
      <animate attributeName="opacity" dur="1.7s" values="0.8;0.4;0.8" repeatCount="indefinite" />
    </circle>
    <circle cx="122" cy="210" r="1.2" fill="#0080ff">
      <animate attributeName="cy" dur="2.3s" values="220;180;220" repeatCount="indefinite" />
      <animate attributeName="opacity" dur="2.3s" values="0.8;0.4;0.8" repeatCount="indefinite" />
    </circle>
    <circle cx="121" cy="200" r="1.3" fill="#ff00ff">
      <animate attributeName="cy" dur="2.5s" values="220;180;220" repeatCount="indefinite" />
      <animate attributeName="opacity" dur="2.5s" values="0.8;0.4;0.8" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Enhanced Geometric Zebra made of triangles -->
  <g id="geometricZebra">
    <!-- Body - more triangles for geometric detail -->
    <polygon points="170,210 150,200 130,240" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="150,200 100,190 130,240" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="100,190 90,215 130,240" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="100,190 80,170 90,215" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="80,170 70,200 90,215" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="80,170 60,190 70,200" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="60,190 50,210 70,200" fill="white" stroke="black" stroke-width="0.5" />
    
    <!-- Legs - more geometric -->
    <!-- Front Leg -->
    <polygon points="150,210 135,210 145,240" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="145,240 135,210 130,250" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="145,240 130,250 145,260" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="130,250 125,260 145,260" fill="black" stroke="black" stroke-width="0.5" />
    
    <!-- Back Leg -->
    <polygon points="85,230 70,230 80,260" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="80,260 70,230 65,270" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="80,260 65,270 80,280" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="65,270 60,280 80,280" fill="black" stroke="black" stroke-width="0.5" />
    
    <!-- Neck (extended toward oasis) - more triangular detail -->
    <polygon points="170,210 160,190 150,210" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="170,210 170,180 160,190" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="170,180 160,190 150,170" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="170,180 170,160 150,170" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="170,160 150,170 140,160" fill="black" stroke="black" stroke-width="0.5" />
    
    <!-- Head (lowered to drink) -->
    <polygon points="170,160 140,160 140,180" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="170,160 170,180 140,180" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="140,160 120,170 140,180" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="120,170 120,180 140,180" fill="black" stroke="black" stroke-width="0.5" />
    
    <!-- Ears -->
    <polygon points="170,160 160,140 155,160" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="155,160 145,140 140,160" fill="white" stroke="black" stroke-width="0.5" />
    
    <!-- Tail -->
    <polygon points="60,190 50,180 60,200" fill="black" stroke="black" stroke-width="0.5" />
    <polygon points="50,180 40,190 60,200" fill="white" stroke="black" stroke-width="0.5" />
    <polygon points="40,190 30,195 60,200" fill="black" stroke="black" stroke-width="0.5" />
  </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 more effectively captures the prompt by clearly depicting a geometric zebra made of triangles, interacting with a pixelated oasis.

The image uses a variety of shapes and colors to create a visually appealing scene, integrating the elements cohesively.

Player 1's image, while creative, is more abstract and less clearly aligned with the prompt's specific elements.

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

Player 2

Rectangles

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

Player 1

Player 2

Circles

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

Player 1

—

Player 2

Ellipses

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

Player 1

—

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

Player 2

Groups

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

Player 1

Player 2

Visual Effects Metrics

Gradients

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

Player 1

Player 2

Patterns

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

Player 1

—

Player 2

—

Filters

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

Player 1

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

—

Player 2

Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1

—

Player 2

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1

Player 2

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

—

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

Max Group Nesting

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

Player 1

—

Player 2

Defs Elements

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

Player 1

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.