Back

SVG Drawing Match #728

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Floating library in a teacup sailing on a sea of honey under a moonlit sky"

SVG by GPT-3.5 turbo (0125)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!-- Moonlit sky background -->
  <rect width="300" height="300" fill="#0A043C" />
  
  <!-- Moon -->
  <circle cx="250" cy="50" r="30" fill="#F4E04D" />
  
  <!-- Stars -->
  <circle cx="30" cy="30" r="2" fill="#FFFFFF" />
  <circle cx="100" cy="20" r="2" fill="#FFFFFF" />
  <circle cx="200" cy="70" r="2" fill="#FFFFFF" />
  <circle cx="150" cy="120" r="2" fill="#FFFFFF" />
  <circle cx="270" cy="100" r="2" fill="#FFFFFF" />
  <circle cx="90" cy="150" r="2" fill="#FFFFFF" />
  
  <!-- Sea of honey -->
  <rect x="0" y="150" width="300" height="150" fill="#E6A533" />
  
  <!-- Waves in honey sea -->
  <path d="M0 200 q30 -30 60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t60 0 t30 0 v100 h-300z" fill="#E8B323" />
  
  <!-- Teacup -->
  <path d="M100 200 h100 v30 q0 30 -50 30 q-50 0 -50 -30 z" fill="#D1A07A" />
  
  <!-- Library in teacup -->
  <rect x="120" y="210" width="60" height="20" fill="#E0E0E0" />
  <rect x="130" y="210" width="10" height="20" fill="#A8A8A8" />
</svg>
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 reuse -->
  <defs>
    <!-- Sky gradient -->
    <linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="70%" stop-color="#1a1a4a" />
      <stop offset="100%" stop-color="#3a2a6a" />
    </linearGradient>
    
    <!-- Moon glow -->
    <radialGradient id="moonGlow" cx="70%" cy="30%" r="20%" fx="70%" fy="30%">
      <stop offset="0%" stop-color="#fffcea" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#fffcea" stop-opacity="0" />
    </radialGradient>
    
    <!-- Honey sea gradient -->
    <linearGradient id="honeyGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#d4a017" />
      <stop offset="50%" stop-color="#ffcc33" />
      <stop offset="100%" stop-color="#d4a017" />
    </linearGradient>
    
    <!-- Honey pattern -->
    <pattern id="honeyPattern" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M0,10 Q5,8 10,10 T20,10" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
      <path d="M0,15 Q5,13 10,15 T20,15" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
      <path d="M0,5 Q5,3 10,5 T20,5" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.3" />
    </pattern>
    
    <!-- Cup pattern -->
    <pattern id="cupPattern" width="10" height="10" patternUnits="userSpaceOnUse">
      <circle cx="5" cy="5" r="1" fill="#6b8e9f" opacity="0.2" />
    </pattern>
    
    <!-- Window glow -->
    <filter id="windowGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="1" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Moon beam -->
    <linearGradient id="moonBeam" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fffcea" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#fffcea" stop-opacity="0" />
    </linearGradient>
    
    <!-- Hexagonal honey pattern -->
    <pattern id="honeyHexPattern" width="30" height="30" patternUnits="userSpaceOnUse">
      <polygon points="10,5 20,5 25,15 20,25 10,25 5,15" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.2" />
      <polygon points="25,15 35,15 40,25 35,35 25,35 20,25" fill="none" stroke="#e6b422" stroke-width="0.5" opacity="0.2" />
    </pattern>
  </defs>

  <!-- Background - Sky -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Moon glow -->
  <circle cx="210" cy="60" r="70" fill="url(#moonGlow)" />
  
  <!-- Moonbeam -->
  <path d="M210,60 L150,150" stroke="url(#moonBeam)" stroke-width="50" opacity="0.3" />
  
  <!-- Moon -->
  <circle cx="210" cy="60" r="25" fill="#fffcea" />
  <circle cx="200" cy="50" r="5" fill="#e8e5d5" opacity="0.7" />
  <circle cx="220" cy="65" r="7" fill="#e8e5d5" opacity="0.7" />
  <circle cx="205" cy="70" r="4" fill="#e8e5d5" opacity="0.7" />
  
  <!-- Stars -->
  <g id="stars">
    <circle cx="20" cy="30" r="1" fill="white" />
    <circle cx="40" cy="20" r="0.8" fill="white" />
    <circle cx="60" cy="40" r="1.2" fill="white" />
    <circle cx="80" cy="25" r="0.7" fill="white" />
    <circle cx="100" cy="50" r="1" fill="white" />
    <circle cx="120" cy="30" r="0.9" fill="white" />
    <circle cx="140" cy="20" r="1.1" fill="white" />
    <circle cx="160" cy="40" r="0.8" fill="white" />
    <circle cx="180" cy="30" r="1" fill="white" />
    <circle cx="240" cy="40" r="1.2" fill="white" />
    <circle cx="260" cy="20" r="0.7" fill="white" />
    <circle cx="280" cy="50" r="1" fill="white" />
    <circle cx="30" cy="70" r="0.9" fill="white" />
    <circle cx="50" cy="60" r="1.1" fill="white" />
    <circle cx="70" cy="80" r="0.8" fill="white" />
    <circle cx="270" cy="90" r="1" fill="white" />
    <circle cx="290" cy="70" r="0.7" fill="white" />
    <circle cx="250" cy="80" r="1" fill="white" />
    <circle cx="110" cy="15" r="1.3" fill="white" />
    <circle cx="190" cy="25" r="0.6" fill="white" />
    <circle cx="230" cy="35" r="1.2" fill="white" />

    <!-- Special star sparkles -->
    <path d="M30,40 L32,42 M28,42 L32,38" stroke="white" stroke-width="0.5" />
    <path d="M170,20 L172,22 M168,22 L172,18" stroke="white" stroke-width="0.5" />
    <path d="M260,40 L262,42 M258,42 L262,38" stroke="white" stroke-width="0.5" />
  </g>
  
  <!-- Honey Sea -->
  <rect x="0" y="160" width="300" height="140" fill="url(#honeyGradient)" />
  <rect x="0" y="160" width="300" height="140" fill="url(#honeyPattern)" />
  <rect x="0" y="160" width="300" height="140" fill="url(#honeyHexPattern)" />
  
  <!-- Honey Waves -->
  <path d="M0,170 Q30,165 60,170 T120,170 T180,170 T240,170 T300,170" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
  <path d="M0,180 Q30,175 60,180 T120,180 T180,180 T240,180 T300,180" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
  <path d="M0,190 Q30,185 60,190 T120,190 T180,190 T240,190 T300,190" fill="none" stroke="#e6b422" stroke-width="1" opacity="0.5" />
  
  <!-- Honey Drips -->
  <path d="M80,160 C80,150 85,155 85,145" fill="none" stroke="#d4a017" stroke-width="2" />
  <path d="M220,160 C220,150 225,155 225,145" fill="none" stroke="#d4a017" stroke-width="2" />
  <circle cx="85" cy="145" r="2" fill="#d4a017" />
  <circle cx="225" cy="145" r="2" fill="#d4a017" />
  
  <!-- Teacup - Saucer -->
  <ellipse cx="150" cy="200" rx="70" ry="15" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="1" />
  <ellipse cx="150" cy="200" rx="60" ry="10" fill="#b5c8d9" stroke="#8ca8be" stroke-width="0.5" />
  
  <!-- Saucer decoration -->
  <path d="M90,200 A60,10 0 0 0 210,200" fill="none" stroke="#8ca8be" stroke-width="0.5" stroke-dasharray="2,2" />
  <path d="M95,200 A55,9 0 0 0 205,200" fill="none" stroke="#8ca8be" stroke-width="0.5" stroke-dasharray="2,2" />
  
  <!-- Teacup - Body -->
  <path d="M100,170 Q100,120 150,120 Q200,120 200,170" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="1" />
  <path d="M100,170 Q100,175 150,175 Q200,175 200,170" fill="#d9e6f2" stroke="#a5b8c9" stroke-width="0.5" />
  
  <!-- Cup rim decoration -->
  <path d="M100,122 Q110,120 120,122 T140,122 T160,122 T180,122 T200,122" fill="none" stroke="#8ca8be" stroke-width="1" />
  
  <!-- Teacup - Inside -->
  <ellipse cx="150" cy="170" rx="50" ry="10" fill="#c4d8e9" stroke="#a5b8c9" stroke-width="0.5" />
  
  <!-- Teacup - Handle -->
  <path d="M200,150 Q220,150 220,130 Q220,110 200,110" fill="none" stroke="#a5b8c9" stroke-width="3" stroke-linecap="round" />
  
  <!-- Cup Pattern -->
  <path d="M100,170 Q100,120 150,120 Q200,120 200,170" fill="url(#cupPattern)" opacity="0.8" />
  
  <!-- Cup decoration -->
  <path d="M120,150 Q135,130 150,150 Q165,130 180,150" fill="none" stroke="#8ca8be" stroke-width="0.5" opacity="0.7" />
  <path d="M110,135 Q130,125 150,135 Q170,125 190,135" fill="none" stroke="#8ca8be" stroke-width="0.5" opacity="0.7" />
  
  <!-- Floating Library Structure -->
  <g id="library" transform="translate(125, 115) scale(0.6)">
    <!-- Library Foundation/Platform -->
    <rect x="5" y="30" width="90" height="10" rx="2" fill="#8a5a3c" />
    <path d="M5,40 L5,35 L95,35 L95,40" fill="#7a4a2c" />
    
    <!-- Library Main Structure -->
    <rect x="20" y="0" width="60" height="30" fill="#b87f5c" stroke="#8a5a3c" stroke-width="1" />
    
    <!-- Wall texture -->
    <path d="M20,5 H80 M20,10 H80 M20,15 H80 M20,20 H80 M20,25 H80" stroke="#a57f6c" stroke-width="0.5" opacity="0.5" />
    <path d="M25,0 V30 M30,0 V30 M35,0 V30 M40,0 V30 M45,0 V30 M50,0 V30 M55,0 V30 M60,0 V30 M65,0 V30 M70,0 V30 M75,0 V30" stroke="#a57f6c" stroke-width="0.5" opacity="0.3" />
    
    <!-- Library Roof -->
    <path d="M15,-10 H85 L50,-30 Z" fill="#7a4a2c" stroke="#5a3a1c" stroke-width="1" />
    
    <!-- Roof tiles -->
    <path d="M20,-10 V-15 M30,-10 V-20 M40,-10 V-25 M50,-10 V-30 M60,-10 V-25 M70,-10 V-20 M80,-10 V-15" stroke="#5a3a1c" stroke-width="0.5" opacity="0.7" />
    <path d="M15,-10 H85" stroke="#5a3a1c" stroke-width="1" />
    <path d="M19,-12 H81 M23,-15 H77 M27,-17 H73 M31,-20 H69 M35,-22 H65 M39,-25 H61 M43,-27 H57 M47,-29 H53" stroke="#5a3a1c" stroke-width="0.5" />
    
    <!-- Library Columns -->
    <rect x="25" y="5" width="5" height="25" fill="#d9bba8" />
    <rect x="70" y="5" width="5" height="25" fill="#d9bba8" />
    <path d="M25,7 H30 M25,12 H30 M25,17 H30 M25,22 H30 M25,27 H30" stroke="#c9ab98" stroke-width="0.5" />
    <path d="M70,7 H75 M70,12 H75 M70,17 H75 M70,22 H75 M70,27 H75" stroke="#c9ab98" stroke-width="0.5" />
    
    <!-- Column capitals -->
    <rect x="23" y="5" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
    <rect x="68" y="5" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
    
    <!-- Column bases -->
    <rect x="23" y="28" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
    <rect x="68" y="28" width="9" height="2" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
    
    <!-- Library Entrance -->
    <rect x="45" y="15" width="10" height="15" fill="#5a3a1c" />
    <path d="M45,15 Q50,10 55,15" fill="none" stroke="#7a4a2c" stroke-width="1" />
    
    <!-- Entrance Steps -->
    <rect x="46" y="28" width="8" height="2" fill="#8a5a3c" />
    
    <!-- Library Windows -->
    <rect x="30" y="10" width="8" height="10" rx="1" fill="#ffeca1" filter="url(#windowGlow)" />
    <rect x="62" y="10" width="8" height="10" rx="1" fill="#ffeca1" filter="url(#windowGlow)" />
    <path d="M30,15 H38 M34,10 V20" stroke="#8a5a3c" stroke-width="0.5" />
    <path d="M62,15 H70 M66,10 V20" stroke="#8a5a3c" stroke-width="0.5" />
    
    <!-- Books visible through windows -->
    <rect x="31" y="12" width="2" height="6" fill="#8a3a5c" />
    <rect x="33" y="13" width="2" height="5" fill="#3a5a8c" />
    <rect x="35" y="11" width="2" height="7" fill="#5a8a3c" />
    
    <rect x="63" y="12" width="2" height="6" fill="#5a8a3c" />
    <rect x="65" y="13" width="2" height="5" fill="#8a3a5c" />
    <rect x="67" y="11" width="2" height="7" fill="#3a5a8c" />
    
    <!-- Little Flag -->
    <line x1="50" y1="-30" x2="50" y2="-40" stroke="#8a5a3c" stroke-width="1" />
    <path d="M50,-40 L60,-35 L50,-30" fill="#d55e00" />
    
    <!-- Library chimney -->
    <rect x="70" y="-20" width="5" height="10" fill="#7a4a2c" stroke="#5a3a1c" stroke-width="0.5" />
    <path d="M69,-22 H76" stroke="#5a3a1c" stroke-width="1" />
    
    <!-- Chimney smoke -->
    <path d="M72.5,-22 Q75,-25 77,-23 Q79,-26 78,-29" fill="none" stroke="#d9d9d9" stroke-width="1" opacity="0.7" />
  </g>
  
  <!-- Steam from cup -->
  <path d="M130,110 Q135,100 140,105 Q145,95 150,100 Q155,90 160,95 Q165,85 170,90" fill="none" stroke="white" stroke-width="1" opacity="0.5" />
  
  <!-- Floating books around the library -->
  <g id="floating-books">
    <rect x="90" y="150" width="15" height="7" fill="#3a5a8c" transform="rotate(10, 97, 153)" />
    <rect x="90" y="150" width="15" height="7" fill="none" stroke="#2a4a7c" stroke-width="0.5" transform="rotate(10, 97, 153)" />
    <path d="M95,150 L95,157" stroke="#2a4a7c" stroke-width="0.5" transform="rotate(10, 97, 153)" />
    
    <rect x="190" y="140" width="12" height="8" fill="#8a3a5c" transform="rotate(-5, 196, 144)" />
    <rect x="190" y="140" width="12" height="8" fill="none" stroke="#7a2a4c" stroke-width="0.5" transform="rotate(-5, 196, 144)" />
    <path d="M195,140 L195,148" stroke="#7a2a4c" stroke-width="0.5" transform="rotate(-5, 196, 144)" />
    
    <rect x="110" y="130" width="10" height="5" fill="#5a8a3c" transform="rotate(15, 115, 132)" />
    <rect x="110" y="130" width="10" height="5" fill="none" stroke="#4a7a2c" stroke-width="0.5" transform="rotate(15, 115, 132)" />
    
    <rect x="210" y="160" width="13" height="6" fill="#d55e00" transform="rotate(-15, 216, 163)" />
    <rect x="210" y="160" width="13" height="6" fill="none" stroke="#c54e00" stroke-width="0.5" transform="rotate(-15, 216, 163)" />
    <path d="M214,160 L214,166" stroke="#c54e00" stroke-width="0.5" transform="rotate(-15, 216, 163)" />
  </g>
  
  <!-- Open book with pages -->
  <g transform="translate(175, 140) rotate(-10)">
    <path d="M0,0 L-10,2 L-10,10 L0,8 Z" fill="#f5f5f5" stroke="#d0d0d0" stroke-width="0.5" />
    <path d="M0,0 L10,2 L10,10 L0,8 Z" fill="#f5f5f5" stroke="#d0d0d0" stroke-width="0.5" />
    <path d="M-9,3 L-3,2 M-9,5 L-3,4 M-9,7 L-3,6" stroke="#888" stroke-width="0.3" />
    <path d="M3,2 L9,3 M3,4 L9,5 M3,6 L9,7" stroke="#888" stroke-width="0.3" />
  </g>
  
  <!-- Honey ripples around the teacup -->
  <ellipse cx="150" cy="200" rx="80" ry="18" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.6" />
  <ellipse cx="150" cy="200" rx="90" ry="25" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.4" />
  <ellipse cx="150" cy="200" rx="100" ry="32" fill="none" stroke="#d4a017" stroke-width="1" opacity="0.2" />
  
  <!-- More subtle ripples -->
  <path d="M110,190 Q120,187 130,190" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
  <path d="M170,190 Q180,187 190,190" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
  <path d="M120,210 Q130,213 140,210" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
  <path d="M160,210 Q170,213 180,210" stroke="#e6b422" stroke-width="0.5" opacity="0.6" />
  
  <!-- Moon reflection in honey -->
  <ellipse cx="210" cy="220" rx="15" ry="5" fill="#fffcea" opacity="0.4" />
  
  <!-- Tiny boat with navigator -->
  <g transform="translate(80, 185) scale(0.7)">
    <path d="M0,0 L15,-5 L30,0 L15,5 Z" fill="#a57f6c" />
    <path d="M15,-5 V-15" stroke="#8a5a3c" stroke-width="1" />
    <path d="M15,-15 L25,-10 L15,-5" fill="#d9bba8" stroke="#8a5a3c" stroke-width="0.5" />
    <circle cx="10" cy="0" r="2" fill="#5a3a1c" />
    <path d="M10,-2 V-4 M8,0 H12" stroke="#5a3a1c" stroke-width="1" />
  </g>
  
  <!-- Starlight reflections on honey -->
  <circle cx="40" cy="230" r="0.7" fill="white" opacity="0.3" />
  <circle cx="90" cy="240" r="0.5" fill="white" opacity="0.3" />
  <circle cx="180" cy="225" r="0.8" fill="white" opacity="0.3" />
  <circle cx="250" cy="235" r="0.6" fill="white" opacity="0.3" />
  
  <!-- Touch of golden sparkles -->
  <path d="M145,160 L147,162 M143,162 L147,158" stroke="#fffcea" stroke-width="0.5" opacity="0.8" />
  <path d="M155,158 L157,160 M153,160 L157,156" stroke="#fffcea" stroke-width="0.5" opacity="0.8" />
  <path d="M148,145 L150,147 M146,147 L150,143" stroke="#fffcea" stroke-width="0.5" opacity="0.6" />
</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 exhibits greater creativity and adherence to the prompt with a detailed depiction of a floating library in a teacup, enhanced by the intricate design elements and a more dynamic moonlit sky.

    The technical quality and visual appeal are superior, showcasing depth and a thoughtful composition in contrast to Player 1's simpler design.

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
13
Player 2
130
Rectangles

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

Player 1
4
Player 2
31
Circles

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

Player 1
7
Player 2
34
Ellipses

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

Player 1
Player 2
7
Lines

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

Player 1
Player 2
1
Polygons

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

Player 1
Player 2
2
Paths

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

Player 1
2
Player 2
55
Groups

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

Player 1
Player 2
5

Visual Effects Metrics

Gradients

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

Player 1
Player 2
4
Patterns

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

Player 1
Player 2
3
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
Player 2
70

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
8
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
Player 2
14

Complexity Metrics

Path Commands

The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.

Player 1
20
Player 2
250
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
8
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