Back

SVG Drawing Match #2389

May 09, 2025

GPT-4o

Challenge Creator

Creative Challenge

"Two giraffes tangled in a cosmic jump rope under a starry sky."

GPT-4.1 (2025-04-14)

Player 1

ELO: 1,189.691 1,191.583 (+1.9)

Winner

<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Gradient for sky -->
    <radialGradient id="skyGrad" cx="50%" cy="30%" r="80%">
      <stop offset="0%" stop-color="#251c61"/>
      <stop offset="50%" stop-color="#392a8d"/>
      <stop offset="100%" stop-color="#170a3a"/>
    </radialGradient>
    <!-- Giraffe body gradient -->
    <linearGradient id="giraffeBodyGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFE066"/>
      <stop offset="100%" stop-color="#F7C948"/>
    </linearGradient>
    <linearGradient id="giraffeBodyGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFD329"/>
      <stop offset="100%" stop-color="#FFE5B4"/>
    </linearGradient>
    <!-- Cosmic rope gradient -->
    <linearGradient id="ropeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#bb73ff"/>
      <stop offset="25%" stop-color="#1ae3f5"/>
      <stop offset="50%" stop-color="#ffe366"/>
      <stop offset="75%" stop-color="#ff50b2"/>
      <stop offset="100%" stop-color="#bb73ff"/>
    </linearGradient>
    <!-- Giraffe spots -->
    <pattern id="giraffeSpots1" patternUnits="userSpaceOnUse" width="10" height="15">
      <circle cx="2" cy="3" r="2.1" fill="#B18B41"/>
      <ellipse cx="7" cy="10" rx="2.5" ry="1.3" fill="#E7A426"/>
    </pattern>
    <pattern id="giraffeSpots2" patternUnits="userSpaceOnUse" width="11" height="13">
      <ellipse cx="5" cy="5" rx="2.4" ry="1.7" fill="#C5913E"/>
      <circle cx="9" cy="11" r="1.8" fill="#BA954A"/>
    </pattern>
    <radialGradient id="starshine" cx="50%" cy="50%" r="100%">
      <stop offset="0%" stop-color="#fff" stop-opacity="1"/>
      <stop offset="70%" stop-color="#fff" stop-opacity="0.6"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </radialGradient>
    <!-- Shadow gradient -->
    <radialGradient id="shadowGrad" cx="50%" cy="50%" r="60%">
      <stop offset="0%" stop-color="#000" stop-opacity="0.5"/>
      <stop offset="100%" stop-color="#000" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <!-- Background Night Sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)"/>
  
  <!-- Stars & Cosmic Dust -->
  <g>
    <!-- Large glowing stars -->
    <circle cx="80" cy="45" r="8" fill="url(#starshine)" opacity="0.9"/>
    <circle cx="210" cy="90" r="5.5" fill="url(#starshine)" opacity="0.72"/>
    <circle cx="250" cy="40" r="6.2" fill="url(#starshine)" opacity="0.74"/>
    <circle cx="45" cy="120" r="4.5" fill="url(#starshine)" opacity="0.66"/>
    <!-- Smaller stars -->
    <circle cx="32" cy="64" r="1.2" fill="#fff"/>
    <circle cx="56" cy="26" r="0.9" fill="#fff"/>
    <circle cx="117" cy="38" r="1.7" fill="#fff"/>
    <circle cx="223" cy="37" r="1.2" fill="#fff"/>
    <circle cx="188" cy="57" r="1.2" fill="#fff"/>
    <circle cx="265" cy="12" r="1.1" fill="#fff"/>
    <circle cx="280" cy="80" r="1.5" fill="#fff"/>
    <circle cx="150" cy="20" r="1.4" fill="#fff"/>
    <circle cx="198" cy="13" r="0.8" fill="#fff"/>
    <!-- Cosmic swirls -->
    <path d="M140 62 Q145 59 166 68 Q160 52 187 62 Q170 58 198 80" fill="none" stroke="#7fe0ff" stroke-width="1.1" opacity="0.51"/>
    <path d="M54 90 Q64 80 101 98 Q85 78 130 96 Q105 84 144 120" fill="none" stroke="#f7e784" stroke-width="1.1" opacity="0.34"/>
  </g>
  
  <!-- Tangled Cosmic Jump Rope -->
  <path id="cosmic-rope"
      d="M30 185
         C50 160, 80 155, 105 200
         Q117 227, 150 205
         Q183 183, 195 225
         C210 250, 260 240, 270 165"
      fill="none" stroke="url(#ropeGrad)" stroke-width="7" stroke-linecap="round"/>
  <!-- Rope "aurora" glow overlay -->
  <path
      d="M30 185
         C50 160, 80 155, 105 200
         Q117 227, 150 205
         Q183 183, 195 225
         C210 250, 260 240, 270 165"
      fill="none" stroke="#fff4" stroke-width="10" stroke-linecap="round" filter="url(#glow1)"/>

  <filter id="glow1" x="-10%" y="-10%" width="120%" height="120%">
    <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
    <feMerge>
      <feMergeNode in="coloredBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

  <!-- Shadows from giraffe feet -->
  <ellipse cx="54" cy="214" rx="18" ry="6" fill="url(#shadowGrad)" opacity="0.6"/>
  <ellipse cx="244" cy="223" rx="18" ry="6" fill="url(#shadowGrad)" opacity="0.5"/>
  
  <!-- Left Giraffe, entangled, jumping -->
  <g>
    <!-- Body and neck -->
    <ellipse cx="60" cy="172" rx="22" ry="42" fill="url(#giraffeBodyGrad1)" stroke="#cfb13f" stroke-width="1.7"/>
    <rect x="45" y="101" width="14" height="62" rx="8" fill="url(#giraffeBodyGrad1)" stroke="#cfb13f" stroke-width="1.7"/>
    <!-- Spots overlay -->
    <ellipse cx="60" cy="172" rx="22" ry="42" fill="url(#giraffeSpots1)" opacity="0.26"/>
    <rect x="45" y="101" width="14" height="62" rx="8" fill="url(#giraffeSpots1)" opacity="0.26"/>
    <!-- Head -->
    <ellipse cx="52" cy="95" rx="12" ry="14" fill="url(#giraffeBodyGrad2)" stroke="#dfba39" stroke-width="1.3"/>
    <!-- Face patterns -->
    <ellipse cx="55" cy="102" rx="5.7" ry="2.2" fill="#ddbb63" opacity="0.49"/>
    <!-- Eyes -->
    <ellipse cx="48.5" cy="99" rx="1.2" ry="2.1" fill="#45280f"/>
    <ellipse cx="57.5" cy="101.5" rx="1.1" ry="1.6" fill="#45280f"/>
    <!-- Nostril and smile -->
    <ellipse cx="48" cy="107" rx="1" ry="0.5" fill="#ad7510"/>
    <path d="M49 110 Q53 112 57 108" stroke="#b07e11" stroke-width="0.9" fill="none"/>
    <!-- Ossicones -->
    <rect x="44.5" y="83" width="2.3" height="8" rx="1.1" fill="#8d6b2f"/>
    <rect x="59.5" y="79" width="2" height="9" rx="1" fill="#8d6b2f"/>
    <circle cx="45.7" cy="83" r="1.4" fill="#ebbc61"/>
    <circle cx="60.5" cy="79" r="1.25" fill="#ebbc61"/>
    <!-- Ears -->
    <ellipse cx="41" cy="90" rx="2" ry="4" fill="#ffe9a3" transform="rotate(-8,41,90)"/>
    <ellipse cx="64" cy="93" rx="2" ry="4.2" fill="#fee39c" transform="rotate(16,64,93)"/>
    <!-- Legs (twisted/tangled in rope) -->
    <rect x="50" y="205" width="6.5" height="30" rx="2.2" fill="url(#giraffeBodyGrad1)" stroke="#cfb13f" stroke-width="1"/>
    <ellipse cx="59" cy="238" rx="5" ry="2.5" fill="#fde79b"/>
    <rect x="68" y="202" width="5" height="26" rx="2" fill="url(#giraffeBodyGrad1)" stroke="#cfb13f" stroke-width="1"/>
    <ellipse cx="73" cy="228" rx="4.4" ry="2.1" fill="#fde79b"/>
    <rect x="53" y="180" width="7" height="32" rx="2.2" fill="url(#giraffeBodyGrad1)" stroke="#cfb13f" stroke-width="1" transform="rotate(14,56,196)"/>
    <ellipse cx="66" cy="211" rx="4.2" ry="2" fill="#fde79b"/>
    <!-- Tail -->
    <path d="M37 192 Q28 205 45 210 Q38 213 40 216" stroke="#60440d" stroke-width="2.1" fill="none"/>
    <ellipse cx="39" cy="217" rx="1.3" ry="4" fill="#68470a"/>  
  </g>
  
  <!-- Right Giraffe, entangled, leaping -->
  <g>
    <!-- Body and neck -->
    <ellipse cx="240" cy="185" rx="22" ry="40" fill="url(#giraffeBodyGrad2)" stroke="#b89b31" stroke-width="1.7"/>
    <rect x="230" y="110" width="16" height="65" rx="8" fill="url(#giraffeBodyGrad2)" stroke="#b89b31" stroke-width="1.7" transform="rotate(8,238,150)"/>
    <!-- Spots overlay -->
    <ellipse cx="240" cy="185" rx="22" ry="40" fill="url(#giraffeSpots2)" opacity="0.26"/>
    <rect x="230" y="110" width="16" height="65" rx="8" fill="url(#giraffeSpots2)" opacity="0.22" transform="rotate(8,238,150)"/>
    <!-- Head -->
    <ellipse cx="253" cy="104" rx="12" ry="14" fill="url(#giraffeBodyGrad1)" stroke="#e2c454" stroke-width="1.2"/>
    <!-- Face patterns -->
    <ellipse cx="257" cy="110" rx="5" ry="2" fill="#ffe189" opacity="0.45"/>
    <!-- Eyes -->
    <ellipse cx="259.5" cy="111" rx="1.1" ry="1.6" fill="#4d330e"/>
    <ellipse cx="247.5" cy="108" rx="1.25" ry="1.9" fill="#4d330e"/>
    <!-- Nostril and smile -->
    <ellipse cx="256" cy="119" rx="0.8" ry="0.35" fill="#b48c15"/>
    <path d="M253 120 Q257 124 263 119" stroke="#b19429" stroke-width="0.8" fill="none"/>
    <!-- Ossicones -->
    <rect x="244.5" y="92" width="2.2" height="8" rx="1.1" fill="#836325"/>
    <rect x="259.5" y="89.2" width="2.2" height="9" rx="1.1" fill="#836325"/>
    <circle cx="245.8" cy="92" r="1.3" fill="#eec666"/>
    <circle cx="260.7" cy="89.2" r="1.15" fill="#f6cb70"/>
    <!-- Ears -->
    <ellipse cx="242" cy="104" rx="2.1" ry="3.2" fill="#fee8b6" transform="rotate(-8,242,104)"/>
    <ellipse cx="266.5" cy="110" rx="1.7" ry="4.3" fill="#fee39c" transform="rotate(16,266.5,110)"/>
    <!-- Legs (twisted/tangled in rope) -->
    <rect x="234" y="215" width="7" height="28" rx="2.7" fill="url(#giraffeBodyGrad2)" stroke="#b89b31" stroke-width="1"/>
    <ellipse cx="242" cy="242" rx="5.2" ry="2.4" fill="#ffe9a3"/>
    <rect x="248.5" y="205" width="6" height="27" rx="2.2" fill="url(#giraffeBodyGrad2)" stroke="#b89b31" stroke-width="1"/>
    <ellipse cx="253" cy="232" rx="4.8" ry="2.2" fill="#ffe8a9"/>
    <rect x="237" y="192" width="9" height="32" rx="2.4" fill="url(#giraffeBodyGrad2)" stroke="#b89b31" stroke-width="1" transform="rotate(-18,241,208)"/>
    <ellipse cx="252" cy="224" rx="4.3" ry="1.9" fill="#ffe8a9"/>
    <!-- Tail -->
    <path d="M258 209 Q268 224 250 233 Q257 235 254 241" stroke="#7a520e" stroke-width="1.8" fill="none"/>
    <ellipse cx="253" cy="242" rx="1.2" ry="3.7" fill="#ad8817"/>  
  </g>

  <!-- Cosmic particles from rope -->
  <g opacity="0.7">
    <circle cx="105" cy="200" r="3.5" fill="#fff" fill-opacity="0.33"/>
    <circle cx="150" cy="205" r="2.3" fill="#7fe6f4" fill-opacity="0.52"/>
    <circle cx="195" cy="225" r="2.6" fill="#FFD6F8" fill-opacity="0.59"/>
    <circle cx="181" cy="210" r="1.7" fill="#ffe243" fill-opacity="0.41"/>
    <circle cx="110" cy="222" r="1.9" fill="#ccd7fc" fill-opacity="0.37"/>
    <circle cx="145" cy="224" r="1.7" fill="#f6e3b1" fill-opacity="0.31"/>
  </g>

  <!-- "Jump" stardust arcs above giraffes -->
  <path d="M67 82 Q110 50 153 78 Q190 96 245 94" fill="none" stroke="#abbffd" stroke-width="3.4" opacity="0.21"/>
  <path d="M85 73 Q150 25 212 60" fill="none" stroke="#f7ec8c" stroke-width="2.6" opacity="0.18"/>
  
  <!-- Giraffe heart in rope loop metaphor -->
  <ellipse cx="150" cy="205" rx="12" ry="8" fill="#f6d04e" stroke="#fff" stroke-width="1.4" opacity="0.5" transform="rotate(-9,150,205)"/>
  <path d="M143 207 Q150 216 157 207" fill="none" stroke="#ef81cf" stroke-width="2.1" opacity="0.58"/>
  <path d="M150 207 Q150 212 151 205" fill="none" stroke="#ef81cf" stroke-width="1.7" opacity="0.31"/>
</svg>

DeepSeek-R1-Distill-Llama-70B

Player 2

ELO: 709.003 707.11 (-1.9)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Background with starry gradient -->
  <defs>
    <radialGradient id="nightSky" cx="150" cy="150" r="150" fx="150" fy="150">
      <stop offset="0" style="stop-color:#0B0B2D;stop-opacity:1"/>
      <stop offset="1" style="stop-color:#000000;stop-opacity:1"/>
    </radialGradient>
    
    <path id="star" d="M2 0l2 2-2 2 0-4 4 4 2 2-4 0z"/>
    
    <linearGradient id="glow" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1"/>
      <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
    </linearGradient>
    
    <filter id="glowFilter">
      <feGaussianBlur stdDeviation="2" result="glow"/>
      <feMerge>
        <feMergeNode in="glow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Starry background -->
  <rect width="300" height="300" fill="url(#nightSky)"/>
  
  <!-- Stars -->
  <use href="#star" x="50" y="50" fill="white" opacity="0.6"/>
  <use href="#star" x="100" y="80" fill="white" opacity="0.8"/>
  <use href="#star" x="200" y="30" fill="white" opacity="0.7"/>
  <use href="#star" x="250" y="120" fill="white" opacity="0.9"/>
  
  <!-- Shooting star -->
  <path d="M20 100 Q 100 50 180 100" stroke="white" stroke-width="2" fill="none" opacity="0.7">
    <animate attributeName="opacity" from="1" to="0" dur="2s" repeatCount="indefinite"/>
  </path>

  <!-- Cosmic jump rope -->
  <path d="M50 140 C 100 160, 200 160, 250 140" stroke="url(#glow)" stroke-width="8" fill="none" filter="url(#glowFilter)"/>
  <path d="M50 140 C 100 160, 200 160, 250 140" stroke="#4CAF50" stroke-width="4" fill="none"/>
  
  <!-- Giraffes -->
  <path d="M100 180 L 90 170 Q 80 160 70 160 L 60 170 L 50 180" fill="#FFC67D" stroke="#8B4513" stroke-width="2"/>
  <path d="M200 180 L 210 170 Q 220 160 230 160 L 240 170 L 250 180" fill="#FFC67D" stroke="#8B4513" stroke-width="2"/>
  
  <!-- Giraffe spots -->
  <circle cx="85" cy="165" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  <circle cx="95" cy="175" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  <circle cx="115" cy="185" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  
  <circle cx="215" cy="165" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  <circle cx="225" cy="175" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  <circle cx="235" cy="185" r="3" fill="#8B4513" filter="url(#glowFilter)"/>
  
  <!-- Giraffe faces -->
  <circle cx="80" cy="170" r="2" fill="black"/>
  <circle cx="220" cy="170" r="2" fill="black"/>
  
  <!-- Jump rope beads -->
  <circle cx="100" cy="160" r="4" fill="url(#glow)"/>
  <circle cx="200" cy="160" r="4" fill="url(#glow)"/>
  
  <!-- Ground -->
  <rect x="0" y="200" width="300" height="100" fill="url(#nightSky)" opacity="0.3"/>
  <path d="M0 200 Q 150 220 300 200" fill="#1A1A2D" opacity="0.4"/>
  
  <!-- Cosmic arc -->
  <path d="M50 140 C 150 100, 150 100, 250 140" fill="none" stroke="#4CAF50" stroke-width="4" opacity="0.5"/>
</svg>

GPT-4o

Judge & Evaluator

The winner of this SVG challenge is GPT-4.1 (2025-04-14) Player 1

Judge's Analysis

Player 1's image adheres more closely to the prompt, with two recognizable giraffes tangled in a glowing cosmic jump rope under a starry sky.

The composition is creative, visually appealing, and technically well-executed.

Player 2's image is more abstract and lacks clear representation of giraffes or a cosmic jump rope, making it less aligned with 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

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.