Back

SVG Drawing Match #1229

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A geometric ice cream cone with a melting galaxy scoop"

Claude 3.7 Sonnet (2025-02-19)
Player 1
ELO: 1,300.986 1,283.919 (-17.1)
SVG by Claude 3.7 Sonnet (2025-02-19) 
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Definitions for gradients and patterns -->
  <defs>
    <!-- Galaxy gradient -->
    <radialGradient id="galaxyGradient" cx="50%" cy="30%" r="70%" gradientUnits="userSpaceOnUse">
      <stop offset="0%" stop-color="#8A2BE2" />
      <stop offset="40%" stop-color="#4B0082" />
      <stop offset="70%" stop-color="#191970" />
      <stop offset="100%" stop-color="#000000" />
    </radialGradient>
    
    <!-- Cone gradient -->
    <linearGradient id="coneGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#D2B48C" />
      <stop offset="50%" stop-color="#CD853F" />
      <stop offset="100%" stop-color="#8B4513" />
    </linearGradient>
    
    <!-- Drip gradient -->
    <linearGradient id="dripGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#9400D3" />
      <stop offset="50%" stop-color="#4B0082" />
      <stop offset="100%" stop-color="#0000FF" />
    </linearGradient>
    
    <!-- Star pattern -->
    <pattern id="starPattern" patternUnits="userSpaceOnUse" width="50" height="50" patternTransform="rotate(45)">
      <circle cx="25" cy="25" r="1" fill="white" opacity="0.8" />
      <circle cx="10" cy="10" r="0.5" fill="white" opacity="0.6" />
      <circle cx="40" cy="20" r="0.7" fill="white" opacity="0.7" />
      <circle cx="15" cy="35" r="0.6" fill="white" opacity="0.7" />
      <circle cx="45" cy="45" r="0.4" fill="white" opacity="0.5" />
    </pattern>
  </defs>

  <!-- Background space effect -->
  <rect x="0" y="0" width="300" height="300" fill="#090320" opacity="0.2" />
  
  <!-- Geometric Cone -->
  <path d="M100,180 L150,300 L200,180 Z" fill="url(#coneGradient)" stroke="#5E3A17" stroke-width="2" />
  
  <!-- Waffle pattern on cone -->
  <path d="M110,190 L150,290 L190,190 Z" fill="none" stroke="#8B4513" stroke-width="1" />
  <path d="M120,200 L150,280 L180,200 Z" fill="none" stroke="#8B4513" stroke-width="1" />
  <path d="M130,210 L150,270 L170,210 Z" fill="none" stroke="#8B4513" stroke-width="1" />
  
  <!-- Horizontal waffle lines -->
  <line x1="110" y1="210" x2="190" y2="210" stroke="#8B4513" stroke-width="1" />
  <line x1="115" y1="230" x2="185" y2="230" stroke="#8B4513" stroke-width="1" />
  <line x1="120" y1="250" x2="180" y2="250" stroke="#8B4513" stroke-width="1" />
  <line x1="125" y1="270" x2="175" y2="270" stroke="#8B4513" stroke-width="1" />
  
  <!-- Galaxy Scoop - main shape -->
  <circle cx="150" cy="150" r="70" fill="url(#galaxyGradient)" />
  <circle cx="150" cy="150" r="70" fill="url(#starPattern)" opacity="0.8" />
  
  <!-- Galaxy swirls -->
  <path d="M150,150 C180,120 220,130 210,160 C200,190 160,180 150,150" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
  <path d="M150,150 C120,180 80,170 90,140 C100,110 140,120 150,150" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="2" />
  
  <!-- Bright stars -->
  <circle cx="130" cy="130" r="1.5" fill="white" />
  <circle cx="170" cy="140" r="1.8" fill="white" />
  <circle cx="145" cy="120" r="2" fill="white" />
  <circle cx="185" cy="165" r="1.7" fill="white" />
  <circle cx="120" cy="165" r="1.6" fill="white" />
  
  <!-- Star bursts -->
  <g opacity="0.7">
    <path d="M130,130 L127,127 M130,130 L133,127 M130,130 L133,133 M130,130 L127,133" stroke="white" stroke-width="0.6" />
    <path d="M170,140 L167,137 M170,140 L173,137 M170,140 L173,143 M170,140 L167,143" stroke="white" stroke-width="0.6" />
    <path d="M145,120 L142,117 M145,120 L148,117 M145,120 L148,123 M145,120 L142,123" stroke="white" stroke-width="0.8" />
  </g>
  
  <!-- Melting drips -->
  <path d="M180,180 C185,190 190,220 180,240" fill="none" stroke="url(#dripGradient)" stroke-width="8" stroke-linecap="round" />
  <path d="M160,185 C165,200 160,230 155,250" fill="none" stroke="url(#dripGradient)" stroke-width="7" stroke-linecap="round" />
  <path d="M120,180 C115,195 110,210 120,225" fill="none" stroke="url(#dripGradient)" stroke-width="9" stroke-linecap="round" />
  <path d="M140,185 C135,195 130,215 135,230" fill="none" stroke="url(#dripGradient)" stroke-width="6" stroke-linecap="round" />
  
  <!-- Drip drops -->
  <circle cx="180" cy="240" r="5" fill="url(#dripGradient)" />
  <circle cx="155" cy="250" r="4" fill="url(#dripGradient)" />
  <circle cx="120" cy="225" r="6" fill="url(#dripGradient)" />
  <circle cx="135" cy="230" r="3" fill="url(#dripGradient)" />
  
  <!-- Geometric elements floating in the galaxy -->
  <polygon points="150,120 155,130 145,130" fill="#FF00FF" opacity="0.6" transform="rotate(15,150,120)" />
  <rect x="170" y="150" width="10" height="10" fill="#00FFFF" opacity="0.6" transform="rotate(45,175,155)" />
  <circle cx="130" cy="150" r="5" fill="#FFFF00" opacity="0.6" />
  
  <!-- Low-opacity overlay for glow effect -->
  <circle cx="150" cy="150" r="80" fill="url(#galaxyGradient)" opacity="0.3" />
  
  <!-- Additional sparkles -->
  <g>
    <circle cx="190" cy="120" r="0.8" fill="white" />
    <circle cx="110" cy="140" r="0.6" fill="white" />
    <circle cx="160" cy="100" r="0.7" fill="white" />
    <circle cx="130" cy="180" r="0.5" fill="white" />
    <circle cx="180" cy="160" r="0.9" fill="white" />
  </g>
</svg>
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
ELO: 1,277.793 1,294.86 (+17.1)
SVG by Claude 3.7 Sonnet Thinking (2025-02-19) 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions for gradients, patterns, and filters -->
  <defs>
    <!-- Cone gradient -->
    <linearGradient id="coneGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#e6c88a" />
      <stop offset="40%" stop-color="#d4a76a" />
      <stop offset="100%" stop-color="#bb8c5e" />
    </linearGradient>
    
    <!-- Dark cone gradient for shadow -->
    <linearGradient id="coneShadowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#a98b63" />
      <stop offset="40%" stop-color="#97764d" />
      <stop offset="100%" stop-color="#866141" />
    </linearGradient>
    
    <!-- Galaxy gradient -->
    <radialGradient id="galaxyGradient" cx="50%" cy="50%" r="70%" fx="30%" fy="30%">
      <stop offset="0%" stop-color="#9933ff" />
      <stop offset="20%" stop-color="#6600cc" />
      <stop offset="40%" stop-color="#3333ff" />
      <stop offset="60%" stop-color="#ff33cc" />
      <stop offset="80%" stop-color="#330066" />
      <stop offset="100%" stop-color="#000033" />
    </radialGradient>
    
    <!-- Second galaxy gradient for variety -->
    <radialGradient id="galaxyGradient2" cx="60%" cy="40%" r="70%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#ff5500" />
      <stop offset="30%" stop-color="#ff33cc" />
      <stop offset="60%" stop-color="#3333ff" />
      <stop offset="100%" stop-color="#000066" />
    </radialGradient>
    
    <!-- Nebula gradient -->
    <radialGradient id="nebulaGradient" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#00ccff" stop-opacity="0.8" />
      <stop offset="40%" stop-color="#0066ff" stop-opacity="0.6" />
      <stop offset="70%" stop-color="#3300ff" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#000033" stop-opacity="0.1" />
    </radialGradient>
    
    <!-- Melting gradient 1 -->
    <linearGradient id="meltingGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#9933ff" stop-opacity="0.9" />
      <stop offset="50%" stop-color="#6600cc" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#3333ff" stop-opacity="0.5" />
    </linearGradient>
    
    <!-- Melting gradient 2 -->
    <linearGradient id="meltingGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#ff33cc" stop-opacity="0.9" />
      <stop offset="50%" stop-color="#ff5500" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#ff9900" stop-opacity="0.5" />
    </linearGradient>
    
    <!-- Melting gradient 3 -->
    <linearGradient id="meltingGradient3" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#00ccff" stop-opacity="0.9" />
      <stop offset="50%" stop-color="#0066ff" stop-opacity="0.7" />
      <stop offset="100%" stop-color="#0033cc" stop-opacity="0.5" />
    </linearGradient>
    
    <!-- Star glow filter -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Medium star glow filter -->
    <filter id="mediumStarGlow" x="-100%" y="-100%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Big star glow filter -->
    <filter id="bigStarGlow" x="-150%" y="-150%" width="400%" height="400%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>

    <!-- Sparkle pattern -->
    <pattern id="starPattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.5" fill="white" opacity="0.8" />
      <circle cx="25" cy="20" r="0.3" fill="white" opacity="0.6" />
      <circle cx="40" cy="15" r="0.4" fill="white" opacity="0.7" />
      <circle cx="15" cy="30" r="0.5" fill="white" opacity="0.7" />
      <circle cx="35" cy="40" r="0.3" fill="white" opacity="0.8" />
    </pattern>
  </defs>
  
  <!-- Background glow for cosmic effect -->
  <ellipse cx="150" cy="80" rx="120" ry="90" fill="url(#galaxyGradient)" opacity="0.1" />
  
  <!-- Ice cream cone - geometric triangles -->
  <g id="cone">
    <!-- Main cone structure with alternating colors for geometric effect -->
    <polygon points="150,250 85,120 105,120" fill="url(#coneShadowGradient)" />
    <polygon points="150,250 105,120 125,120" fill="url(#coneGradient)" />
    <polygon points="150,250 125,120 145,120" fill="url(#coneShadowGradient)" />
    <polygon points="150,250 145,120 165,120" fill="url(#coneGradient)" />
    <polygon points="150,250 165,120 185,120" fill="url(#coneShadowGradient)" />
    <polygon points="150,250 185,120 205,120" fill="url(#coneGradient)" />
    <polygon points="150,250 205,120 215,120" fill="url(#coneShadowGradient)" />
    
    <!-- Connecting triangles for the cone rim -->
    <polygon points="85,120 105,120 95,110" fill="#e6c88a" />
    <polygon points="105,120 125,120 115,110" fill="#d4a76a" />
    <polygon points="125,120 145,120 135,110" fill="#e6c88a" />
    <polygon points="145,120 165,120 155,110" fill="#d4a76a" />
    <polygon points="165,120 185,120 175,110" fill="#e6c88a" />
    <polygon points="185,120 205,120 195,110" fill="#d4a76a" />
    <polygon points="205,120 215,120 210,110" fill="#e6c88a" />
    
    <!-- Cone texture lines (waffle pattern) -->
    <line x1="90" y1="130" x2="210" y2="130" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    <line x1="95" y1="150" x2="205" y2="150" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    <line x1="100" y1="170" x2="200" y2="170" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    <line x1="105" y1="190" x2="195" y2="190" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    <line x1="110" y1="210" x2="190" y2="210" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    <line x1="120" y1="230" x2="180" y2="230" stroke="#bb8c5e" stroke-width="0.5" opacity="0.6" />
    
    <!-- Vertical waffle lines -->
    <line x1="100" y1="120" x2="120" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
    <line x1="120" y1="120" x2="130" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
    <line x1="140" y1="120" x2="145" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
    <line x1="160" y1="120" x2="155" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
    <line x1="180" y1="120" x2="170" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
    <line x1="200" y1="120" x2="180" y2="240" stroke="#bb8c5e" stroke-width="0.5" opacity="0.4" />
  </g>

  <!-- Main melting drips -->
  <path d="M110,80 C110,100 90,120 100,150 S95,180 90,210" fill="url(#meltingGradient1)" opacity="0.8" />
  <path d="M190,80 C190,110 200,120 195,150 S205,180 200,220" fill="url(#meltingGradient2)" opacity="0.7" />
  <path d="M160,75 C160,95 150,110 160,140 S155,170 165,200" fill="url(#meltingGradient3)" opacity="0.75" />
  <path d="M130,85 C130,105 120,125 130,145 S125,170 120,195" fill="url(#meltingGradient2)" opacity="0.65" />
  
  <!-- Small drips -->
  <path d="M120,90 C120,95 115,100 118,110" fill="url(#meltingGradient1)" opacity="0.9" />
  <path d="M180,85 C180,90 185,95 182,105" fill="url(#meltingGradient2)" opacity="0.8" />
  <path d="M150,90 C150,95 155,100 152,110" fill="url(#meltingGradient3)" opacity="0.85" />
  <path d="M140,85 C140,90 135,100 138,105" fill="url(#meltingGradient1)" opacity="0.75" />
  <path d="M170,95 C170,100 175,105 172,115" fill="url(#meltingGradient2)" opacity="0.8" />
  
  <!-- Galaxy scoop base -->
  <ellipse cx="150" cy="70" rx="70" ry="55" fill="url(#galaxyGradient)" />
  
  <!-- Galaxy overlay for texture -->
  <ellipse cx="160" cy="65" rx="45" ry="35" fill="url(#galaxyGradient2)" opacity="0.6" />
  <ellipse cx="135" cy="75" rx="30" ry="25" fill="url(#nebulaGradient)" opacity="0.5" />
  
  <!-- Cosmic dust -->
  <ellipse cx="150" cy="70" rx="70" ry="55" fill="url(#starPattern)" opacity="0.5" />
  
  <!-- Spiral arms in the galaxy -->
  <path d="M100,70 Q120,40 150,50 T190,70" stroke="rgba(255,255,255,0.7)" stroke-width="2" fill="none" />
  <path d="M110,80 Q140,100 170,70 T200,55" stroke="rgba(255,180,255,0.6)" stroke-width="1.8" fill="none" />
  <path d="M120,60 Q140,30 170,50 T190,80" stroke="rgba(180,180,255,0.6)" stroke-width="1.6" fill="none" />
  
  <!-- Nebula cloud effects -->
  <path d="M130,60 Q150,40 170,60 T190,50" stroke="rgba(0,204,255,0.4)" stroke-width="7" stroke-linecap="round" fill="none" filter="url(#starGlow)" />
  <path d="M120,80 Q135,60 150,75 T170,65" stroke="rgba(255,102,204,0.3)" stroke-width="5" stroke-linecap="round" fill="none" filter="url(#starGlow)" />
  
  <!-- Medium stars in the galaxy with glow -->
  <g filter="url(#mediumStarGlow)">
    <circle cx="130" cy="60" r="1.5" fill="white" />
    <circle cx="150" cy="50" r="1.3" fill="white" />
    <circle cx="170" cy="65" r="1.4" fill="white" />
    <circle cx="160" cy="80" r="1.2" fill="white" />
    <circle cx="120" cy="75" r="1.1" fill="white" />
    <circle cx="140" cy="70" r="1.3" fill="white" />
    <circle cx="165" cy="50" r="1.0" fill="white" />
    <circle cx="175" cy="75" r="1.2" fill="white" />
    <circle cx="125" cy="45" r="1.3" fill="white" />
  </g>
  
  <!-- Small stars in the galaxy -->
  <g filter="url(#starGlow)">
    <circle cx="135" cy="65" r="0.6" fill="white" opacity="0.9" />
    <circle cx="155" cy="55" r="0.5" fill="white" opacity="0.8" />
    <circle cx="175" cy="60" r="0.5" fill="white" opacity="0.9" />
    <circle cx="165" cy="75" r="0.4" fill="white" opacity="0.8" />
    <circle cx="125" cy="75" r="0.5" fill="white" opacity="0.8" />
    <circle cx="145" cy="75" r="0.6" fill="white" opacity="0.9" />
    <circle cx="160" cy="55" r="0.4" fill="white" opacity="0.8" />
    <circle cx="180" cy="70" r="0.5" fill="white" opacity="0.9" />
    <circle cx="130" cy="50" r="0.5" fill="white" opacity="0.8" />
    <circle cx="140" cy="60" r="0.4" fill="white" opacity="0.7" />
    <circle cx="165" cy="65" r="0.3" fill="white" opacity="0.8" />
    <circle cx="155" cy="80" r="0.5" fill="white" opacity="0.7" />
    <circle cx="170" cy="50" r="0.4" fill="white" opacity="0.8" />
    <circle cx="120" cy="60" r="0.3" fill="white" opacity="0.7" />
    <circle cx="185" cy="65" r="0.4" fill="white" opacity="0.8" />
  </g>
  
  <!-- Stars in the melting drips -->
  <g filter="url(#starGlow)">
    <circle cx="110" cy="110" r="0.8" fill="white" opacity="0.8" />
    <circle cx="95" cy="170" r="0.6" fill="white" opacity="0.7" />
    <circle cx="195" cy="130" r="0.7" fill="white" opacity="0.8" />
    <circle cx="205" cy="180" r="0.5" fill="white" opacity="0.6" />
    <circle cx="160" cy="130" r="0.6" fill="white" opacity="0.7" />
    <circle cx="155" cy="170" r="0.7" fill="white" opacity="0.6" />
    <circle cx="130" cy="140" r="0.5" fill="white" opacity="0.7" />
    <circle cx="125" cy="180" r="0.6" fill="white" opacity="0.5" />
    <circle cx="118" cy="105" r="0.4" fill="white" opacity="0.8" />
    <circle cx="182" cy="100" r="0.5" fill="white" opacity="0.7" />
    <circle cx="152" cy="105" r="0.4" fill="white" opacity="0.8" />
  </g>
  
  <!-- Bright stars with special glow -->
  <g filter="url(#bigStarGlow)">
    <circle cx="130" cy="55" r="1.8" fill="white" />
    <circle cx="170" cy="70" r="2.0" fill="white" />
    <circle cx="150" cy="45" r="1.5" fill="white" />
  </g>
  
  <!-- Mini planets -->
  <circle cx="115" cy="65" r="3" fill="#ff9900" opacity="0.8" />
  <circle cx="115" cy="65" r="3.5" stroke="rgba(255,255,255,0.5)" stroke-width="0.5" fill="none" />
  <ellipse cx="115" cy="65" rx="4" ry="1" fill="rgba(255,180,0,0.3)" transform="rotate(-20,115,65)" />
  
  <circle cx="185" cy="60" r="4" fill="#33ccff" opacity="0.7" />
  <circle cx="185" cy="60" r="4.5" stroke="rgba(255,255,255,0.4)" stroke-width="0.5" fill="none" />
  <ellipse cx="185" cy="60" rx="5" ry="1.5" fill="rgba(80,200,255,0.3)" transform="rotate(15,185,60)" />
  
  <circle cx="160" cy="90" r="2.5" fill="#ff33cc" opacity="0.6" />
  <circle cx="160" cy="90" r="3" stroke="rgba(255,255,255,0.3)" stroke-width="0.5" fill="none" />
  
  <!-- Cosmic sprinkles -->
  <g filter="url(#starGlow)">
    <circle cx="175" cy="95" r="1" fill="#ff3366" opacity="0.8" />
    <circle cx="130" cy="85" r="1" fill="#33ccff" opacity="0.8" />
    <circle cx="150" cy="100" r="1" fill="#ffcc00" opacity="0.8" />
    <circle cx="165" cy="85" r="0.8" fill="#99ff33" opacity="0.8" />
    <circle cx="140" cy="95" r="0.8" fill="#cc66ff" opacity="0.8" />
  </g>
  
  <!-- Comets -->
  <g filter="url(#starGlow)">
    <path d="M180,40 Q170,45 160,50" stroke="white" stroke-width="1" fill="none" />
    <circle cx="180" cy="40" r="1.5" fill="white" />
    
    <path d="M120,40 Q130,45 140,48" stroke="white" stroke-width="0.8" fill="none" />
    <circle cx="120" cy="40" r="1.2" fill="white" />
  </g>
  
  <!-- Subtle glow overlay for the galaxy -->
  <ellipse cx="150" cy="70" rx="70" ry="55" fill="white" opacity="0.05" filter="url(#bigStarGlow)" />
</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 excels in creativity and technical execution, with a dynamic and colorful representation of a galaxy melting over a geometric cone.

    The use of colors and shapes creates a more visually appealing and complex design.

    Player 1's image is simpler and less dynamic, with a straightforward approach that lacks the same level of visual interest and detail.

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
43
Player 2
106
Rectangles

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

Player 1
2
Player 2
—
Circles

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

Player 1
23
Player 2
56
Ellipses

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

Player 1
—
Player 2
8
Lines

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

Player 1
4
Player 2
12
Polygons

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

Player 1
1
Player 2
14
Paths

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

Player 1
13
Player 2
16
Groups

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

Player 1
2
Player 2
7

Visual Effects Metrics

Gradients

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

Player 1
3
Player 2
8
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
3
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
12
Player 2
65
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
17
Player 2
22

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
16
Player 2
35

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
2
Player 2
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
54
Player 2
41
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
4
Player 2
12
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 #1143 Mar 13, 2025

"Ballet-dancing flamingo on a tightrope, under a starry sky"

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.7 Sonnet (2025-02-19)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1074 Mar 13, 2025

"A clock shaped like a sunflower, with petals indicating hours"

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.7 Sonnet (2025-02-19)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #1073 Mar 13, 2025

"Surreal cityscape reflected in a giant cat's eye"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.7 Sonnet (2025-02-19)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.7 Sonnet (2025-02-19)
View
Match #995 Mar 13, 2025

"Dancing giraffes in tutus under a surrealist starry sky"

P1
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
P2
SVG by Claude 3.7 Sonnet (2025-02-19)
Claude 3.7 Sonnet Thinking (2025-02-19)
vs
Claude 3.7 Sonnet (2025-02-19)
View
Match #800 Mar 13, 2025

"A flamingo playing a saxophone on a floating iceberg"

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.7 Sonnet (2025-02-19)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View
Match #212 Mar 13, 2025

"Cosmic octopus juggling glowing planets in a starry nebula"

P1
SVG by Claude 3.7 Sonnet (2025-02-19)
P2
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
Claude 3.7 Sonnet (2025-02-19)
vs
Claude 3.7 Sonnet Thinking (2025-02-19)
View