Back

SVG Drawing Match #262

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"A chameleon playing a tiny grand piano with its tail"

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Chameleon gradients -->
    <linearGradient id="chameleonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#5ee577" />
      <stop offset="25%" stop-color="#47ba8f" />
      <stop offset="50%" stop-color="#3a8fa3" />
      <stop offset="75%" stop-color="#2e64b8" />
      <stop offset="100%" stop-color="#5a3cc0" />
    </linearGradient>
    
    <linearGradient id="chameleonAlt" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#47ba8f" />
      <stop offset="50%" stop-color="#3a8fa3" />
      <stop offset="100%" stop-color="#2e64b8" />
    </linearGradient>
    
    <!-- Chameleon skin texture -->
    <pattern id="chameleonTexture" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="scale(0.5)">
      <circle cx="5" cy="5" r="3" fill="url(#chameleonAlt)" opacity="0.3" />
    </pattern>
    
    <!-- Piano gradients -->
    <linearGradient id="pianoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#444" />
      <stop offset="70%" stop-color="#111" />
      <stop offset="100%" stop-color="#222" />
    </linearGradient>
    
    <linearGradient id="pianoInterior" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#8a6e3d" />
      <stop offset="50%" stop-color="#c4a45c" />
      <stop offset="100%" stop-color="#8a6e3d" />
    </linearGradient>
    
    <!-- Leaf gradient -->
    <radialGradient id="leafGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#8fdb5e" />
      <stop offset="100%" stop-color="#3a8d1e" />
    </radialGradient>
    
    <!-- Sparkle effect -->
    <filter id="sparkle" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="0.5" result="blur" />
      <feComponentTransfer in="blur" result="glow">
        <feFuncA type="linear" slope="5" intercept="0" />
      </feComponentTransfer>
      <feBlend in="SourceGraphic" in2="glow" mode="screen" />
    </filter>
    
    <!-- Musical note symbol -->
    <symbol id="musicNote" viewBox="0 0 20 40">
      <path d="M0,10 C0,6 3,3 6,3 C9,3 12,6 12,10 C12,14 9,17 6,17 C3,17 0,14 0,10 Z M6,17 L6,35 M0,35 L12,35" stroke="none" />
    </symbol>
  </defs>
  
  <!-- Background with subtle gradient -->
  <rect width="300" height="300" fill="#f7faf2" />
  <rect width="300" height="300" fill="url(#leafGradient)" opacity="0.07" />
  
  <!-- Leafy background elements -->
  <g opacity="0.7">
    <ellipse cx="70" cy="70" rx="40" ry="25" fill="url(#leafGradient)" transform="rotate(-20, 70, 70)" opacity="0.3" />
    <ellipse cx="170" cy="50" rx="35" ry="20" fill="url(#leafGradient)" transform="rotate(15, 170, 50)" opacity="0.2" />
    <ellipse cx="230" cy="90" rx="30" ry="18" fill="url(#leafGradient)" transform="rotate(-10, 230, 90)" opacity="0.2" />
  </g>
  
  <!-- Branch the chameleon is sitting on -->
  <path d="M10,180 C50,160 100,190 160,185 C220,180 260,150 290,170" 
        stroke="#8B4513" stroke-width="12" fill="none" />
  <path d="M10,180 C50,160 100,190 160,185 C220,180 260,150 290,170" 
        stroke="#A35A1A" stroke-width="10" fill="none" />
  
  <!-- Branch texture -->
  <path d="M20,177 C30,175 40,176 50,173" stroke="#8B4513" stroke-width="1" fill="none" />
  <path d="M70,168 C80,166 90,167 100,169" stroke="#8B4513" stroke-width="1" fill="none" />
  <path d="M120,182 C130,184 140,185 150,183" stroke="#8B4513" stroke-width="1" fill="none" />
  <path d="M180,180 C190,178 200,175 210,176" stroke="#8B4513" stroke-width="1" fill="none" />
  <path d="M230,172 C240,170 250,168 260,166" stroke="#8B4513" stroke-width="1" fill="none" />
  
  <!-- Leaves on the branch -->
  <ellipse cx="70" cy="170" rx="25" ry="15" fill="url(#leafGradient)" transform="rotate(-20, 70, 170)" />
  <ellipse cx="120" cy="180" rx="20" ry="12" fill="url(#leafGradient)" transform="rotate(15, 120, 180)" />
  <ellipse cx="220" cy="165" rx="22" ry="14" fill="url(#leafGradient)" transform="rotate(-10, 220, 165)" />
  <ellipse cx="265" cy="170" rx="18" ry="10" fill="url(#leafGradient)" transform="rotate(5, 265, 170)" />
  
  <!-- Leaf veins -->
  <path d="M70,170 C75,168 80,166 85,167" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  <path d="M70,170 C65,175 60,178 55,176" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  <path d="M120,180 C125,178 130,176 135,177" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  <path d="M120,180 C115,185 110,188 105,186" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  <path d="M220,165 C225,163 230,161 235,162" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  <path d="M220,165 C215,170 210,173 205,171" stroke="#3a8d1e" stroke-width="0.5" fill="none" opacity="0.6" />
  
  <!-- Grand Piano -->
  <g transform="translate(210, 138) scale(0.55)">
    <!-- Piano body -->
    <path d="M0,0 L80,0 C110,0 130,20 130,40 L130,60 Q130,65 125,65 L5,65 Q0,65 0,60 Z" fill="url(#pianoGradient)" />
    
    <!-- Piano edge highlight -->
    <path d="M0,0 L80,0 C110,0 130,20 130,40 L130,60 Q130,65 125,65 L5,65 Q0,65 0,60 Z" 
          fill="none" stroke="#555" stroke-width="1" />
    
    <!-- Piano lid (open) -->
    <path d="M5,5 L80,5 C105,5 120,15 120,35" 
          fill="none" stroke="#444" stroke-width="2" transform="rotate(-40, 5, 5)" />
    
    <!-- Piano interior visible with lid open -->
    <path d="M5,5 L80,5 C105,5 120,15 120,35" 
          fill="url(#pianoInterior)" stroke="none" transform="rotate(-40, 5, 5)" opacity="0.5" />
    
    <!-- Piano lid support -->
    <line x1="90" y1="5" x2="90" y2="30" stroke="#444" stroke-width="1" />
    
    <!-- Piano legs -->
    <rect x="15" y="65" width="10" height="25" rx="2" fill="#222" />
    <rect x="105" y="65" width="10" height="25" rx="2" fill="#222" />
    
    <!-- Piano keyboard area -->
    <rect x="10" y="10" width="110" height="20" fill="#8a7b58" />
    
    <!-- Piano keys -->
    <g>
      <!-- White keys -->
      <rect x="15" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="26" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="37" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="48" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="59" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="70" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="81" y="13" width="10" height="15" fill="white" rx="1" />
      <rect x="92" y="13" width="10" height="15" fill="white" rx="1" />
      
      <!-- Black keys -->
      <rect x="22" y="13" width="7" height="10" fill="black" rx="1" />
      <rect x="33" y="13" width="7" height="10" fill="black" rx="1" />
      <rect x="55" y="13" width="7" height="10" fill="black" rx="1" />
      <rect x="66" y="13" width="7" height="10" fill="black" rx="1" />
      <rect x="77" y="13" width="7" height="10" fill="black" rx="1" />
      
      <!-- Key that chameleon is pressing -->
      <rect id="playingKey" x="48" y="13" width="10" height="15" fill="#eee" rx="1">
        <animate attributeName="y" values="13;15;13" dur="2s" repeatCount="indefinite" />
      </rect>
    </g>
  </g>
  
  <!-- Chameleon -->
  <g transform="translate(95, 160)">
    <!-- Body -->
    <path d="M0,0 C-10,-10 -30,-15 -55,-5 C-75,5 -85,20 -75,40 C-65,60 -45,65 -20,55 C-5,50 5,40 0,20 Z" 
          fill="url(#chameleonGradient)" />
    <!-- Body texture -->
    <path d="M0,0 C-10,-10 -30,-15 -55,-5 C-75,5 -85,20 -75,40 C-65,60 -45,65 -20,55 C-5,50 5,40 0,20 Z" 
          fill="url(#chameleonTexture)" />
    
    <!-- Ridge on back -->
    <path d="M-70,20 C-60,15 -50,10 -40,12 C-30,14 -20,16 -10,20 C0,24 5,22 0,18" 
          stroke="url(#chameleonAlt)" stroke-width="2" fill="none" />
    
    <!-- Back leg patterns -->
    <path d="M-62,15 C-65,10 -67,8 -72,6" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" />
    <path d="M-42,10 C-45,5 -47,0 -52,-5" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" />
    
    <!-- Head -->
    <path d="M5,-5 C15,-10 25,-10 35,-5 C45,0 50,10 45,20 C40,30 30,35 20,30 C10,25 0,15 5,5 C8,-2 15,-5 25,0" 
          fill="url(#chameleonGradient)" />
    <!-- Head texture -->
    <path d="M5,-5 C15,-10 25,-10 35,-5 C45,0 50,10 45,20 C40,30 30,35 20,30 C10,25 0,15 5,5 C8,-2 15,-5 25,0" 
          fill="url(#chameleonTexture)" />
    
    <!-- Crest on head -->
    <path d="M25,-5 C28,-12 31,-18 28,-22" stroke="url(#chameleonGradient)" stroke-width="3" fill="none" />
    <path d="M30,-4 C33,-10 36,-15 35,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    <path d="M35,-3 C38,-8 41,-12 42,-16" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    
    <!-- Eyes -->
    <g transform="rotate(-10, 25, 12)">
      <circle cx="25" cy="12" r="8" fill="white" />
      <circle cx="25" cy="12" r="5" fill="black" />
      <circle cx="23" cy="10" r="2" fill="white" />
      <!-- Eyelid blinking animation -->
      <path d="M17,12 C21,5 29,5 33,12" fill="none" stroke="url(#chameleonGradient)" stroke-width="1.5">
        <animate attributeName="d" values="M17,12 C21,5 29,5 33,12;M17,12 C21,12 29,12 33,12;M17,12 C21,5 29,5 33,12" 
                 dur="4s" repeatCount="indefinite" />
      </path>
    </g>
    
    <!-- Mouth -->
    <path d="M35,18 C38,22 42,23 45,22" stroke="#333" stroke-width="0.7" fill="none" />
    
    <!-- Front legs -->
    <path d="M-20,40 C-25,50 -30,65 -25,75" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
    <path d="M-25,75 C-27,77 -30,77 -32,75" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    <path d="M-25,75 C-23,77 -20,77 -18,75" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    
    <path d="M0,35 C5,45 10,60 5,70" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
    <path d="M5,70 C3,72 0,72 -2,70" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    <path d="M5,70 C7,72 10,72 12,70" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    
    <!-- Back legs -->
    <path d="M-60,20 C-65,10 -70,0 -75,-5" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
    <path d="M-75,-5 C-77,-7 -80,-7 -82,-5" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    <path d="M-75,-5 C-73,-7 -70,-7 -68,-5" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    
    <path d="M-40,5 C-45,-5 -50,-15 -55,-20" stroke="url(#chameleonGradient)" stroke-width="5" fill="none" />
    <path d="M-55,-20 C-57,-22 -60,-22 -62,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    <path d="M-55,-20 C-53,-22 -50,-22 -48,-20" stroke="url(#chameleonGradient)" stroke-width="2" fill="none" />
    
    <!-- Tail curling toward piano -->
    <path d="M10,20 C30,30 60,20 90,30 C120,40 140,30 150,35 C160,40 168,45 175,30" 
          stroke="url(#chameleonGradient)" stroke-width="7" fill="none" stroke-linecap="round" />
    
    <!-- Tail texture -->
    <path d="M30,25 C40,24 50,22 60,25" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
    <path d="M70,25 C80,24 90,22 100,25" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
    <path d="M110,30 C120,29 130,28 140,31" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
    <path d="M150,35 C155,34 160,32 165,32" stroke="url(#chameleonAlt)" stroke-width="1.5" fill="none" opacity="0.8" />
    
    <!-- Tail tip on piano key -->
    <path d="M175,30 C178,28 181,26 184,29" 
          stroke="url(#chameleonGradient)" stroke-width="5" fill="none" stroke-linecap="round">
      <animate attributeName="d" values="M175,30 C178,28 181,26 184,29;M175,30 C178,30 181,30 184,31;M175,30 C178,28 181,26 184,29" 
               dur="2s" repeatCount="indefinite" />
    </path>
  </g>
  
  <!-- Musical notes floating around -->
  <g>
    <use href="#musicNote" x="150" y="60" width="15" height="30" fill="#333" opacity="0.7">
      <animate attributeName="y" values="60;55;60" dur="3s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" x="180" y="40" width="15" height="30" fill="#333" opacity="0.7">
      <animate attributeName="y" values="40;35;40" dur="4s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" x="215" y="70" width="15" height="30" fill="#333" opacity="0.7">
      <animate attributeName="y" values="70;65;70" dur="3.5s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" x="240" y="50" width="12" height="24" fill="#333" opacity="0.6">
      <animate attributeName="y" values="50;45;50" dur="2.5s" repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Sound wave effect from the piano key being played -->
  <g opacity="0.3">
    <circle cx="236" cy="143" r="5" fill="none" stroke="#5a3cc0" stroke-width="0.5">
      <animate attributeName="r" values="5;15;5" dur="2s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.7;0;0.7" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="236" cy="143" r="10" fill="none" stroke="#5a3cc0" stroke-width="0.5">
      <animate attributeName="r" values="10;20;10" dur="2s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.5;0;0.5" dur="2s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Sparkle effects -->
  <g filter="url(#sparkle)">
    <circle cx="175" cy="100" r="1" fill="white" />
    <circle cx="210" cy="80" r="1" fill="white" />
    <circle cx="230" cy="120" r="1" fill="white" />
    <circle cx="225" cy="95" r="1" fill="white" />
    <circle cx="190" cy="120" r="1" fill="white" />
    <circle cx="236" cy="143" r="1" fill="white">
      <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
    </circle>
  </g>
</svg>
SVG by GPT-4o (2024-11-20)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Gradient definition -->
  <defs>
    <linearGradient id="chameleonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#76c7c0;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#34a853;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="tailGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#34a853;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#4285f4;stop-opacity:1" />
    </linearGradient>
    <radialGradient id="pianoGradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#fff;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#000;stop-opacity:1" />
    </radialGradient>
  </defs>
  <!-- Draw chameleon's body -->
  <ellipse cx="150" cy="150" rx="60" ry="40" fill="url(#chameleonGradient)" />
  <!-- Draw eyes -->
  <circle cx="130" cy="140" r="8" fill="#ffffff" />
  <circle cx="130" cy="140" r="3" fill="#000000" />
  <circle cx="170" cy="140" r="8" fill="#ffffff" />
  <circle cx="170" cy="140" r="3" fill="#000000" />
  <!-- Draw chameleon tail -->
  <path d="M 150 190 Q 160 220 130 240 T 100 280 Q 170 220 190 250 T 230 260" fill="none" stroke="url(#tailGradient)" stroke-width="8" />
  <!-- Draw piano -->
  <path d="M 120 220 L 180 220 Q 190 210 180 200 L 120 200 Q 110 210 120 220 Z" fill="url(#pianoGradient)" />
  <!-- Draw piano keys -->
  <rect x="124" y="206" width="10" height="14" fill="#fff" />
  <rect x="138" y="206" width="10" height="14" fill="#fff" />
  <rect x="152" y="206" width="10" height="14" fill="#fff" />
  <rect x="166" y="206" width="10" height="14" fill="#fff" />
  <!-- Piano legs -->
  <rect x="120" y="220" width="5" height="15" fill="#000" />
  <rect x="175" y="220" width="5" height="15" fill="#000" />
  <!-- Draw ambient effects -->
  <ellipse cx="150" cy="50" rx="15" ry="35" fill="rgba(255, 215, 0, 0.5)" transform="rotate(-30 150 50)" />
  <circle cx="50" cy="250" r="20" fill="rgba(255, 69, 0, 0.6)" />
  <circle cx="250" cy="30" r="25" fill="rgba(65, 105, 225, 0.7)" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet Thinking (2025-02-19) Player 1

Judge's Analysis

    Player 1's image displays a more identifiable chameleon with a clearly depicted grand piano, effectively adhering to the prompt.

    The technical quality is higher, with a more detailed depiction and creative use of color and form.

    Player 2’s image, while abstract, lacks a clear representation of the prompt elements, reducing its adherence and visual appeal.

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
87
Player 2
16
Rectangles

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

Player 1
19
Player 2
6
Circles

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

Player 1
12
Player 2
6
Ellipses

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

Player 1
7
Player 2
2
Lines

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

Player 1
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
48
Player 2
2
Groups

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

Player 1
8
Player 2

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
3
Patterns

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

Player 1
1
Player 2
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
46
Player 2
1

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
22
Player 2
7

Interactivity Metrics

Animations

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

Player 1
12
Player 2
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
12
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
140
Player 2
11
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
8
Player 2
3
Use Elements

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

Player 1
4
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