Back

SVG Drawing Match #1073

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

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

SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <defs>
    <!-- Eye iris gradient -->
    <radialGradient id="irisGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#F0C420" />
      <stop offset="50%" stop-color="#E0841C" />
      <stop offset="100%" stop-color="#91540F" />
    </radialGradient>
    
    <!-- Pupil gradient -->
    <radialGradient id="pupilGradient" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
      <stop offset="0%" stop-color="#000" />
      <stop offset="85%" stop-color="#000" />
      <stop offset="100%" stop-color="#222" />
    </radialGradient>
    
    <!-- Eye highlight gradient -->
    <radialGradient id="highlightGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </radialGradient>
    
    <!-- Sky gradient for the surreal city -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#3A1C71" />
      <stop offset="50%" stop-color="#D76D77" />
      <stop offset="100%" stop-color="#FFAF7B" />
    </linearGradient>
    
    <!-- Buildings gradient -->
    <linearGradient id="buildingGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#2C3E50" />
      <stop offset="100%" stop-color="#1A1C20" />
    </linearGradient>
    
    <!-- Clip path for the city reflection inside the pupil -->
    <clipPath id="pupilClip">
      <ellipse cx="150" cy="150" rx="40" ry="70" />
    </clipPath>
    
    <!-- Filter for glow effects -->
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="3" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Eye overall glow filter -->
    <filter id="eyeGlow" x="-10%" y="-10%" width="120%" height="120%">
      <feGaussianBlur stdDeviation="5" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Background texture -->
    <pattern id="furPattern" patternUnits="userSpaceOnUse" width="20" height="20">
      <rect width="20" height="20" fill="#222" />
      <path d="M0,0 L20,20 M20,0 L0,20" stroke="#333" stroke-width="1" />
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#furPattern)" />
  
  <!-- Eye outer glow -->
  <ellipse cx="150" cy="150" rx="135" ry="85" fill="#F0C420" opacity="0.2" filter="url(#eyeGlow)" />
  
  <!-- Eye white (sclera) -->
  <ellipse cx="150" cy="150" rx="130" ry="80" fill="white" />
  
  <!-- Iris -->
  <ellipse cx="150" cy="150" rx="80" ry="75" fill="url(#irisGradient)" />
  
  <!-- Iris texture lines (radial lines in cat's eye) -->
  <g opacity="0.3">
    <line x1="150" y1="150" x2="185" y2="100" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="200" y2="120" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="210" y2="150" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="200" y2="180" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="185" y2="200" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="150" y2="210" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="115" y2="200" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="100" y2="180" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="90" y2="150" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="100" y2="120" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="115" y2="100" stroke="#5E350F" stroke-width="1" />
    <line x1="150" y1="150" x2="150" y2="90" stroke="#5E350F" stroke-width="1" />
  </g>
  
  <!-- Additional iris texture for more cat-like appearance -->
  <path d="M150,90 C180,110 180,190 150,210 C120,190 120,110 150,90 Z" fill="none" stroke="#91540F" stroke-width="0.5" opacity="0.4" />
  <path d="M90,150 C110,120 190,120 210,150 C190,180 110,180 90,150 Z" fill="none" stroke="#91540F" stroke-width="0.5" opacity="0.4" />
  
  <!-- Pupil base - this will hold our reflection -->
  <ellipse cx="150" cy="150" rx="40" ry="70" fill="url(#pupilGradient)" />
  
  <!-- Enhanced surreal cityscape within the pupil -->
  <g clip-path="url(#pupilClip)">
    <!-- Sky background with surreal gradient -->
    <rect x="110" y="80" width="80" height="140" fill="url(#skyGradient)" />
    
    <!-- Surreal sun/moon system -->
    <circle cx="170" cy="100" r="12" fill="#FFD700" filter="url(#glow)" />
    <circle cx="130" cy="110" r="8" fill="#E0E0E0" opacity="0.7" />
    
    <!-- Flying/floating islands -->
    <path d="M125,130 C130,125 140,125 145,130 C150,135 150,140 145,145 C140,150 130,150 125,145 C120,140 120,135 125,130 Z" fill="#3A7D44" />
    <path d="M155,120 C158,117 164,117 167,120 C170,123 170,126 167,129 C164,132 158,132 155,129 C152,126 152,123 155,120 Z" fill="#2C5E3C" />
    
    <!-- Small floating house on the island -->
    <path d="M130,125 L135,120 L140,125 L140,130 L130,130 Z" fill="#8B4513" />
    <rect x="132" y="127" width="2" height="2" fill="#FFAF7B" />
    <rect x="136" y="127" width="2" height="2" fill="#FFAF7B" />
    
    <!-- Twisted, impossible buildings -->
    <path d="M110,220 L120,220 L120,170 L125,180 L130,165 L127,155 L132,150 L130,145 L135,140 L130,135 L125,140 L120,130 L115,140 L110,130 Z" fill="url(#buildingGradient)" />
    
    <path d="M125,220 L140,220 L140,160 L135,150 L140,140 L145,150 L150,140 L155,150 L160,140 L165,150 L160,160 L160,220 Z" fill="url(#buildingGradient)" opacity="0.9" />
    
    <path d="M145,220 C145,220 150,180 155,160 C160,140 165,160 170,180 C175,200 175,220 175,220 Z" fill="url(#buildingGradient)" filter="url(#glow)" />
    
    <!-- Impossible staircases -->
    <path d="M165,170 L170,170 L170,175 L175,175 L175,180 L180,180 L180,185 L165,185 Z" fill="#4A5568" />
    <path d="M180,190 L175,190 L175,195 L170,195 L170,200 L165,200 L165,205 L180,205 Z" fill="#4A5568" />
    
    <!-- Window lights and details -->
    <rect x="115" y="150" width="3" height="3" fill="#FFAF7B" />
    <rect x="115" y="160" width="3" height="3" fill="#FFAF7B" />
    <rect x="115" y="170" width="3" height="3" fill="#FFAF7B" />
    <rect x="115" y="180" width="3" height="3" fill="#FFAF7B" />
    <rect x="115" y="190" width="3" height="3" fill="#FFAF7B" />
    
    <rect x="130" y="175" width="2" height="2" fill="#FFAF7B" />
    <rect x="130" y="185" width="2" height="2" fill="#FFAF7B" />
    <rect x="130" y="195" width="2" height="2" fill="#FFAF7B" />
    <rect x="135" y="175" width="2" height="2" fill="#FFAF7B" />
    <rect x="135" y="185" width="2" height="2" fill="#FFAF7B" />
    <rect x="135" y="195" width="2" height="2" fill="#FFAF7B" />
    
    <rect x="150" y="170" width="2" height="2" fill="#FFAF7B" />
    <rect x="150" y="180" width="2" height="2" fill="#FFAF7B" />
    <rect x="150" y="190" width="2" height="2" fill="#FFAF7B" />
    <rect x="150" y="200" width="2" height="2" fill="#FFAF7B" />
    <rect x="155" y="170" width="2" height="2" fill="#FFAF7B" />
    <rect x="155" y="180" width="2" height="2" fill="#FFAF7B" />
    <rect x="155" y="190" width="2" height="2" fill="#FFAF7B" />
    <rect x="155" y="200" width="2" height="2" fill="#FFAF7B" />
    
    <!-- Surreal flying objects -->
    <path d="M175,130 L180,135 L185,130 L180,125 Z" fill="#D76D77" transform="rotate(30, 180, 130)" />
    <circle cx="130" cy="120" r="3" fill="#FFAF7B" />
    <circle cx="135" cy="125" r="2" fill="#FFAF7B" />
    <circle cx="140" cy="118" r="2" fill="#FFAF7B" />
    
    <!-- Clock tower with impossible time -->
    <rect x="165" y="145" width="10" height="20" fill="#2C3E50" />
    <circle cx="170" cy="150" r="4" fill="#FFFFFF" stroke="#000000" stroke-width="0.5" />
    <line x1="170" y1="150" x2="170" y2="147" stroke="#000000" stroke-width="0.5" />
    <line x1="170" y1="150" x2="173" y2="150" stroke="#000000" stroke-width="0.5" />
    
    <!-- Flying fish or bird-like creatures -->
    <path d="M145,115 Q150,110 155,115 Q160,120 155,125 Q150,130 145,125 Q140,120 145,115 Z" fill="#5D8AA8" opacity="0.8" />
    <path d="M165,125 Q170,120 175,125 Q180,130 175,135 Q170,140 165,135 Q160,130 165,125 Z" fill="#E6E6FA" opacity="0.6" />
    
    <!-- Bridges connecting buildings -->
    <path d="M130,170 L150,170" stroke="#4A5568" stroke-width="2" fill="none" />
    <path d="M155,185 L175,170" stroke="#4A5568" stroke-width="2" fill="none" />
    
    <!-- Reflections in water at the bottom -->
    <rect x="110" y="220" width="80" height="10" fill="#3A1C71" opacity="0.5" />
    <path d="M110,220 L125,220 L125,225 L110,225 Z" fill="#FFAF7B" opacity="0.3" />
    <path d="M135,220 L155,220 L155,225 L135,225 Z" fill="#FFAF7B" opacity="0.3" />
    <path d="M165,220 L190,220 L190,225 L165,225 Z" fill="#FFAF7B" opacity="0.3" />
  </g>
  
  <!-- Eye highlight reflections -->
  <ellipse cx="120" cy="120" rx="15" ry="10" fill="url(#highlightGradient)" opacity="0.7" />
  <ellipse cx="180" cy="130" rx="10" ry="5" fill="url(#highlightGradient)" opacity="0.5" />
  
  <!-- Small additional highlights -->
  <circle cx="135" cy="140" r="3" fill="white" opacity="0.4" />
  <circle cx="165" cy="145" r="2" fill="white" opacity="0.3" />
  
  <!-- Eyelids/edges -->
  <path d="M20,150 Q150,250 280,150" stroke="#555" fill="none" stroke-width="5" />
  <path d="M20,150 Q150,50 280,150" stroke="#555" fill="none" stroke-width="5" />
  
  <!-- Fur texture around the eye -->
  <g opacity="0.7">
    <path d="M15,140 Q10,150 15,160" stroke="#777" fill="none" stroke-width="1" />
    <path d="M10,135 Q5,150 10,165" stroke="#777" fill="none" stroke-width="1" />
    <path d="M5,130 Q0,150 5,170" stroke="#777" fill="none" stroke-width="1" />
    <path d="M0,125 Q-5,150 0,175" stroke="#777" fill="none" stroke-width="1" />
    
    <path d="M285,140 Q290,150 285,160" stroke="#777" fill="none" stroke-width="1" />
    <path d="M290,135 Q295,150 290,165" stroke="#777" fill="none" stroke-width="1" />
    <path d="M295,130 Q300,150 295,170" stroke="#777" fill="none" stroke-width="1" />
    <path d="M300,125 Q305,150 300,175" stroke="#777" fill="none" stroke-width="1" />
  </g>
  
  <!-- Whiskers suggestion to reinforce the cat theme -->
  <path d="M15,130 Q60,125 80,123" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
  <path d="M15,150 Q60,150 80,155" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
  <path d="M15,170 Q60,175 80,180" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
  
  <path d="M285,130 Q240,125 220,123" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
  <path d="M285,150 Q240,150 220,155" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
  <path d="M285,170 Q240,175 220,180" stroke="#999" fill="none" stroke-width="1" opacity="0.5" />
</svg>
SVG by Claude 3.7 Sonnet (2025-02-19)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Definitions -->
  <defs>
    <!-- City Reflection Gradient -->
    <linearGradient id="cityGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#8844ee" />
      <stop offset="50%" stop-color="#ff6677" />
      <stop offset="100%" stop-color="#2244aa" />
    </linearGradient>
    
    <!-- Eye Shine Gradient -->
    <radialGradient id="eyeShine" cx="30%" cy="30%" r="50%" fx="20%" fy="20%">
      <stop offset="0%" stop-color="#ffffff" stop-opacity="0.9" />
      <stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
    </radialGradient>
    
    <!-- Buildings Pattern -->
    <pattern id="buildingPattern" x="0" y="0" width="40" height="60" patternUnits="userSpaceOnUse">
      <rect x="0" y="0" width="40" height="60" fill="#130f30" />
      <rect x="5" y="10" width="6" height="8" fill="#ffdd44" />
      <rect x="18" y="15" width="6" height="8" fill="#ffdd44" />
      <rect x="28" y="5" width="6" height="8" fill="#ffdd44" />
      <rect x="5" y="30" width="6" height="8" fill="#ffdd44" />
      <rect x="18" y="35" width="6" height="8" fill="#ffdd44" />
      <rect x="28" y="25" width="6" height="8" fill="#ffdd44" />
      <rect x="5" y="50" width="6" height="8" fill="#ffdd44" />
      <rect x="18" y="45" width="6" height="8" fill="#ffdd44" />
      <rect x="28" y="48" width="6" height="8" fill="#ffdd44" />
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#111133" />
  
  <!-- Cat Eye Outer Shape -->
  <ellipse cx="150" cy="150" rx="140" ry="110" fill="#ddb06f" stroke="#000000" stroke-width="2" />
  
  <!-- Cat Eye Iris -->
  <ellipse cx="150" cy="150" rx="100" ry="100" fill="url(#cityGradient)" stroke="#000000" stroke-width="1.5" />
  
  <!-- Surreal Cityscape -->
  <g transform="translate(150,150) scale(0.85) translate(-150,-150)">
    <!-- Main Skyline -->
    <path d="M50,200 L70,160 L90,190 L110,150 L130,180 L150,130 L170,170 L190,120 L210,170 L230,140 L250,180 L250,200 Z" 
          fill="url(#buildingPattern)" />
    
    <!-- Floating Islands with Buildings -->
    <ellipse cx="95" cy="125" rx="25" ry="15" fill="#130f30" stroke="#6644aa" stroke-width="1" />
    <rect x="80" y="100" width="5" height="25" fill="#ffdd44" />
    <rect x="90" y="110" width="5" height="15" fill="#ffdd44" />
    <rect x="100" y="105" width="5" height="20" fill="#ffdd44" />
    
    <ellipse cx="205" cy="135" rx="30" ry="18" fill="#130f30" stroke="#6644aa" stroke-width="1" />
    <rect x="185" y="115" width="5" height="20" fill="#ffdd44" />
    <rect x="195" y="105" width="5" height="30" fill="#ffdd44" />
    <rect x="210" y="120" width="5" height="15" fill="#ffdd44" />
    <rect x="220" y="110" width="5" height="25" fill="#ffdd44" />
    
    <!-- Twisted Spires -->
    <path d="M150,200 C155,180 145,170 150,160 C155,150 145,140 150,130 C155,120 145,110 150,90 L155,90 C160,110 150,120 155,130 C160,140 150,150 155,160 C160,170 150,180 155,200 Z" 
          fill="#aa44dd" stroke="#ffffff" stroke-width="0.5" />
          
    <!-- Twisted Impossible Architecture -->
    <path d="M120,175 C140,160 110,150 130,135 L135,140 C115,155 145,165 125,180 Z" 
          fill="#ff6677" stroke="#ffffff" stroke-width="0.5" />
    <path d="M180,175 C160,160 190,150 170,135 L165,140 C185,155 155,165 175,180 Z" 
          fill="#ff6677" stroke="#ffffff" stroke-width="0.5" />
  </g>
  
  <!-- Cat Eye Pupil -->
  <ellipse cx="150" cy="150" rx="40" ry="80" fill="#000000" />
  
  <!-- Reflection Highlights -->
  <ellipse cx="120" cy="110" rx="25" ry="15" fill="url(#eyeShine)" />
  <ellipse cx="190" cy="180" rx="15" ry="8" fill="url(#eyeShine)" opacity="0.6" />
  
  <!-- Eyelid Shadow -->
  <path d="M50,150 Q150,50 250,150" fill="none" stroke="#000000" stroke-width="10" stroke-opacity="0.2" />
  
  <!-- Cat Fur Surrounding Eye -->
  <g opacity="0.9">
    <path d="M10,150 Q150,320 290,150 Q270,50 150,50 Q30,50 10,150 Z" fill="none" stroke="#ffbc80" stroke-width="20" stroke-linecap="round" />
    <path d="M20,150 Q150,300 280,150 Q260,60 150,60 Q40,60 20,150 Z" fill="none" stroke="#d49a6a" stroke-width="10" stroke-linecap="round" />
  </g>
  
  <!-- Floating Objects -->
  <g opacity="0.8">
    <circle cx="100" cy="170" r="5" fill="#ffffff" />
    <circle cx="220" cy="120" r="4" fill="#ffffff" />
    <circle cx="160" cy="90" r="3" fill="#ffffff" />
    <circle cx="80" cy="130" r="2" fill="#ffffff" />
    <circle cx="190" cy="160" r="3" fill="#ffffff" />
  </g>
  
  <!-- Dreamlike Elements -->
  <path d="M70,100 C100,90 130,110 160,100 S190,110 220,100" fill="none" stroke="#ffdd44" stroke-width="1.5" stroke-dasharray="2,2" />
  <path d="M80,200 C110,190 140,210 170,200 S200,210 230,200" fill="none" stroke="#ffdd44" stroke-width="1.5" stroke-dasharray="2,2" />
</svg>
GPT-4o
Judge & Evaluator
The winner of this SVG challenge is Claude 3.7 Sonnet (2025-02-19) Player 2

Judge's Analysis

    Player 2's submission captures the surreal cityscape with a more cohesive and visually appealing design.

    The eye's reflection is more pronounced and the use of colors adds to the dreamlike quality, aligning well with the prompt.

    The composition is technically stronger, with a clear focus and smooth integration of elements, enhancing the overall visual impact.

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
90
Player 2
39
Rectangles

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

Player 1
26
Player 2
18
Circles

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

Player 1
8
Player 2
5
Ellipses

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

Player 1
7
Player 2
7
Lines

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

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

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

Player 1
3
Player 2
3

Visual Effects Metrics

Gradients

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

Player 1
5
Player 2
2
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
2
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
1
Player 2
Elements with Opacity

The number of elements with opacity attributes in the SVG.

Player 1
23
Player 2
3
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
36
Player 2
12

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
25
Player 2
13

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
1
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
149
Player 2
50
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
9
Player 2
3
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