Back

SVG Drawing Match #361

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Robot octopus juggling planets underwater"

SVG by GPT-4o (2024-11-20)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <defs>
    <radialGradient id="underwaterGradient" cx="50%" cy="50%">
      <stop offset="0%" stop-color="#001f33" />
      <stop offset="100%" stop-color="#004466" />
    </radialGradient>
  </defs>
  <rect width="300" height="300" fill="url(#underwaterGradient)" />

  <!-- Robot Octopus -->
  <g id="robotOctopus" transform="translate(150, 150)">
    <circle cx="0" cy="0" r="30" fill="#999999" stroke="#666666" stroke-width="3" />
    <rect x="-8" y="-35" width="16" height="5" fill="#cccccc" />
    <circle cx="-12" cy="-5" r="4" fill="#ffffff" />
    <circle cx="12" cy="-5" r="4" fill="#ffffff" />
    <circle cx="-12" cy="-5" r="2" fill="#000000" />
    <circle cx="12" cy="-5" r="2" fill="#000000" />
    <!-- Antennae -->
    <line x1="-6" y1="-33" x2="-18" y2="-45" stroke="#ffcc00" stroke-width="2" />
    <circle cx="-18" cy="-45" r="2" fill="#ffcc00" />
    <line x1="6" y1="-33" x2="18" y2="-45" stroke="#ffcc00" stroke-width="2" />
    <circle cx="18" cy="-45" r="2" fill="#ffcc00" />
    
    <!-- Tentacles -->
    <g fill="#cccccc" stroke="#666666" stroke-width="2">
      <path d="M-20,30 Q-40,70 -20,110 Q0,90 -5,50" />
      <path d="M20,30 Q40,70 20,110 Q0,90 5,50" />
      <path d="M0,30 Q-30,70 0,110 Q30,70 5,50" />
      <path d="M0,30 Q30,70 0,110 Q-30,70 -5,50" />
    </g>
  </g>

  <!-- Planets -->
  <g id="planets" transform="translate(150, 150)">
    <circle cx="-90" cy="-60" r="10" fill="#ff6666" />
    <circle cx="90" cy="-60" r="10" fill="#66b3ff" />
    <circle cx="-100" cy="70" r="10" fill="#ffff99" />
    <circle cx="100" cy="70" r="10" fill="#99cc99" />
    <circle cx="0" cy="-100" r="10" fill="#ffcc66" />
    <circle cx="0" cy="110" r="10" fill="#ff99cc" />
  </g>
</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 reusable elements -->
  <defs>
    <!-- Underwater background gradient -->
    <linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#0a4d68" />
      <stop offset="100%" stop-color="#051e2a" />
    </linearGradient>
    
    <!-- Metallic gradient for robot parts -->
    <linearGradient id="metalGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#d1d1d1" />
      <stop offset="50%" stop-color="#a0a0a0" />
      <stop offset="100%" stop-color="#707070" />
    </linearGradient>
    
    <!-- Planet gradients -->
    <radialGradient id="planet1Gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#ff6b6b" />
      <stop offset="100%" stop-color="#7d3030" />
    </radialGradient>
    
    <radialGradient id="planet2Gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#4ecdc4" />
      <stop offset="100%" stop-color="#1a535c" />
    </radialGradient>
    
    <radialGradient id="planet3Gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#ffd166" />
      <stop offset="100%" stop-color="#bc6c25" />
    </radialGradient>
    
    <radialGradient id="planet4Gradient" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
      <stop offset="0%" stop-color="#a5b4fc" />
      <stop offset="100%" stop-color="#4338ca" />
    </radialGradient>
    
    <!-- Light ray filter -->
    <filter id="lightRays" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
      <feComponentTransfer in="blur">
        <feFuncA type="linear" slope="0.3" />
      </feComponentTransfer>
    </filter>
    
    <!-- Bubble pattern -->
    <pattern id="bubblePattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="3" fill="rgba(255,255,255,0.5)" />
      <circle cx="30" cy="20" r="2" fill="rgba(255,255,255,0.4)" />
      <circle cx="20" cy="40" r="4" fill="rgba(255,255,255,0.3)" />
      <circle cx="40" cy="35" r="1.5" fill="rgba(255,255,255,0.4)" />
    </pattern>
    
    <!-- Robot texture -->
    <pattern id="robotTexture" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#a0a0a0"/>
      <circle cx="5" cy="5" r="2" fill="#888888"/>
    </pattern>
  </defs>
  
  <!-- Background -->
  <rect width="300" height="300" fill="url(#waterGradient)" />
  
  <!-- Light rays from top -->
  <g filter="url(#lightRays)">
    <path d="M50,0 L70,300 Z" stroke="rgba(255,255,255,0.4)" stroke-width="20" />
    <path d="M150,0 L140,300 Z" stroke="rgba(255,255,255,0.4)" stroke-width="30" />
    <path d="M250,0 L200,300 Z" stroke="rgba(255,255,255,0.4)" stroke-width="25" />
  </g>
  
  <!-- Underwater plants and coral -->
  <g id="underwaterPlants">
    <!-- Coral structures -->
    <path d="M10,300 C20,280 15,260 30,250 C35,245 40,260 45,250 C50,240 45,230 55,220 C65,210 60,200 70,210" 
          fill="none" stroke="#ff6f59" stroke-width="5" />
    
    <path d="M30,300 C40,270 35,260 50,250 C55,245 60,260 75,250" 
          fill="none" stroke="#ff9e7a" stroke-width="4" />
    
    <!-- Seaweed -->
    <path d="M80,300 C85,280 75,260 85,240 C95,220 85,200 90,180 C95,160 85,140 90,120" 
          fill="none" stroke="#57CC99" stroke-width="2" />
    
    <path d="M100,300 C105,270 95,250 105,230 C115,210 105,190 110,170" 
          fill="none" stroke="#80ED99" stroke-width="3" />
    
    <path d="M250,300 C245,280 255,260 245,240 C235,220 245,200 240,180" 
          fill="none" stroke="#57CC99" stroke-width="2" />
    
    <path d="M270,300 C275,270 265,250 275,230 C285,210 275,190 280,170" 
          fill="none" stroke="#80ED99" stroke-width="2.5" />
    
    <!-- Some small fish in background -->
    <path d="M220,80 L230,75 L230,85 Z" fill="#ff9e7a" />
    <path d="M240,100 L250,95 L250,105 Z" fill="#80ED99" />
    <path d="M200,120 L210,115 L210,125 Z" fill="#a5b4fc" />
    
    <!-- Additional fish -->
    <g transform="translate(185,85)">
      <path d="M0,0 C2,-3 5,-4 8,-3 C11,-4 14,-3 16,0 C14,3 11,4 8,3 C5,4 2,3 0,0 Z" fill="#f4a261"/>
      <circle cx="13" cy="-1" r="1" fill="#222"/>
    </g>
  </g>
  
  <!-- Robot Octopus -->
  <g id="robotOctopus">
    <!-- Tentacles/arms -->
    <!-- Tentacle 1 - top left -->
    <path d="M130,140 C110,130 100,110 85,100" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="85" cy="100" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="85" cy="100" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 2 - top right -->
    <path d="M170,140 C190,130 200,110 215,100" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="215" cy="100" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="215" cy="100" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 3 - mid left -->
    <path d="M125,160 C105,165 85,150 65,165" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="65" cy="165" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="65" cy="165" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 4 - mid right -->
    <path d="M175,160 C195,165 215,150 235,165" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="235" cy="165" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="235" cy="165" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 5 - bottom left front -->
    <path d="M135,190 C130,210 115,220 120,240" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="120" cy="240" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="120" cy="240" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 6 - bottom right front -->
    <path d="M165,190 C170,210 185,220 180,240" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="180" cy="240" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="180" cy="240" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 7 - bottom left back (shorter) -->
    <path d="M130,185 C120,200 105,195 95,205" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="95" cy="205" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="95" cy="205" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Tentacle 8 - bottom right back (shorter) -->
    <path d="M170,185 C180,200 195,195 205,205" fill="none" stroke="url(#metalGradient)" stroke-width="6" stroke-linecap="round" />
    <circle cx="205" cy="205" r="5" fill="#a0a0a0" stroke="#707070" />
    <circle cx="205" cy="205" r="3" fill="#00f7ff" opacity="0.6"/>
    
    <!-- Mechanical joints on tentacles -->
    <circle cx="110" cy="130" r="3" fill="#555" />
    <circle cx="190" cy="130" r="3" fill="#555" />
    <circle cx="105" cy="165" r="3" fill="#555" />
    <circle cx="195" cy="165" r="3" fill="#555" />
    <circle cx="130" cy="210" r="3" fill="#555" />
    <circle cx="170" cy="210" r="3" fill="#555" />
    <circle cx="120" cy="195" r="3" fill="#555" />
    <circle cx="180" cy="195" r="3" fill="#555" />
    
    <!-- Body - metallic dome -->
    <ellipse cx="150" cy="160" rx="30" ry="35" fill="url(#metalGradient)" />
    <ellipse cx="150" cy="160" rx="25" ry="30" fill="url(#robotTexture)" opacity="0.3" />
    
    <!-- Mechanical details on body -->
    <circle cx="150" cy="145" r="25" fill="none" stroke="#444" stroke-width="1" stroke-dasharray="2 3" />
    <circle cx="150" cy="175" r="12" fill="none" stroke="#444" stroke-width="1" />
    <rect x="144" y="182" width="12" height="4" fill="#333" rx="1" />
    
    <!-- Control panel -->
    <rect x="133" y="155" width="34" height="15" rx="2" fill="#333"/>
    <circle cx="140" cy="162" r="2" fill="#f00"/>
    <circle cx="150" cy="162" r="2" fill="#0f0"/>
    <circle cx="160" cy="162" r="2" fill="#00f"/>
    
    <!-- Robot face/head details -->
    <circle cx="143" cy="150" r="5" fill="#222" stroke="#444" stroke-width="1" /> <!-- Left eye -->
    <circle cx="157" cy="150" r="5" fill="#222" stroke="#444" stroke-width="1" /> <!-- Right eye -->
    <circle cx="143" cy="150" r="2" fill="#00f7ff" /> <!-- Left eye glow -->
    <circle cx="157" cy="150" r="2" fill="#00f7ff" /> <!-- Right eye glow -->
    
    <!-- Mouth/speaker -->
    <rect x="140" y="165" width="20" height="3" fill="#333" rx="1" />
    <rect x="142" y="162" width="16" height="2" fill="#333" rx="1" />
    <rect x="145" y="168" width="10" height="2" fill="#333" rx="1" />
    
    <!-- Antennas -->
    <line x1="140" y1="130" x2="135" y2="120" stroke="#888" stroke-width="2" />
    <circle cx="135" cy="120" r="3" fill="#ff0055" />
    
    <line x1="160" y1="130" x2="165" y2="120" stroke="#888" stroke-width="2" />
    <circle cx="165" cy="120" r="3" fill="#ff0055" />
  </g>
  
  <!-- Juggling Planets -->
  <g id="planets">
    <!-- Planet 1 - Red/Orange planet (Mars-like) -->
    <g transform="translate(85, 100)">
      <circle cx="0" cy="0" r="15" fill="url(#planet1Gradient)" />
      <!-- Surface details -->
      <path d="M-5,-5 A15,15 0 0,1 5,10" fill="none" stroke="#ff8080" stroke-width="1" />
      <circle cx="-5" cy="5" r="3" fill="#7d3030" />
      <circle cx="7" cy="-3" r="2" fill="#7d3030" />
      <!-- Action lines showing movement -->
      <path d="M10,-15 L15,-20" stroke="white" stroke-width="0.5" />
      <path d="M15,-5 L20,-7" stroke="white" stroke-width="0.5" />
      <path d="M10,15 L15,20" stroke="white" stroke-width="0.5" />
    </g>
    
    <!-- Planet 2 - Blue/Teal planet (Water world) -->
    <g transform="translate(215, 100)">
      <circle cx="0" cy="0" r="18" fill="url(#planet2Gradient)" />
      <!-- Ring system -->
      <ellipse cx="0" cy="0" rx="22" ry="6" fill="none" stroke="#4ecdc4" stroke-width="1" />
      <ellipse cx="0" cy="0" rx="24" ry="8" fill="none" stroke="#1a535c" stroke-opacity="0.6" stroke-width="0.5" />
      <!-- Surface details (wavy water patterns) -->
      <path d="M-10,3 Q-5,1 0,3 T10,3" fill="none" stroke="#a3e4db" stroke-width="1" />
      <path d="M-10,7 Q-5,5 0,7 T10,7" fill="none" stroke="#a3e4db" stroke-width="1" />
      <!-- Action lines showing movement -->
      <path d="M-15,-10 L-20,-15" stroke="white" stroke-width="0.5" />
      <path d="M-15,10 L-20,15" stroke="white" stroke-width="0.5" />
      <path d="M-5,-15 L-7,-20" stroke="white" stroke-width="0.5" />
    </g>
    
    <!-- Planet 3 - Yellow/Gold gas giant -->
    <g transform="translate(65, 165)">
      <circle cx="0" cy="0" r="16" fill="url(#planet3Gradient)" />
      <!-- Gas bands -->
      <ellipse cx="0" cy="-5" rx="15" ry="3" fill="none" stroke="#ffd166" stroke-opacity="0.5" stroke-width="1.5" />
      <ellipse cx="0" cy="0" rx="15" ry="3" fill="none" stroke="#bc6c25" stroke-opacity="0.5" stroke-width="1" />
      <ellipse cx="0" cy="5" rx="15" ry="3" fill="none" stroke="#ffd166" stroke-opacity="0.5" stroke-width="1.5" />
      <!-- Great spot detail -->
      <ellipse cx="5" cy="-2" rx="4" ry="2" fill="#e09f3e" />
      <!-- Action lines showing movement -->
      <path d="M15,-5 L20,-7" stroke="white" stroke-width="0.5" />
      <path d="M15,5 L20,7" stroke="white" stroke-width="0.5" />
    </g>
    
    <!-- Planet 4 - Purple/Blue ringed planet -->
    <g transform="translate(235, 165)">
      <circle cx="0" cy="0" r="14" fill="url(#planet4Gradient)" />
      <!-- Ring system -->
      <ellipse cx="0" cy="0" rx="20" ry="5" fill="none" stroke="#a5b4fc" stroke-width="1.5" transform="rotate(20)" />
      <ellipse cx="0" cy="0" rx="23" ry="6" fill="none" stroke="#4338ca" stroke-opacity="0.6" stroke-width="0.7" transform="rotate(20)" />
      <!-- Surface details -->
      <path d="M-7,-7 C-5,-10 5,-10 7,-7" fill="none" stroke="#c7d2fe" stroke-width="1" />
      <circle cx="0" cy="3" r="5" fill="#4338ca" fill-opacity="0.5" />
      <!-- Action lines showing movement -->
      <path d="M-15,-5 L-20,-7" stroke="white" stroke-width="0.5" />
      <path d="M-15,5 L-20,7" stroke="white" stroke-width="0.5" />
    </g>
    
    <!-- Planet 5 - Green/Blue planet in top center (being caught/tossed) -->
    <g transform="translate(150, 70)">
      <circle cx="0" cy="0" r="20" fill="#3caea3" />
      <circle cx="0" cy="0" r="20" fill="url(#planet2Gradient)" opacity="0.8" />
      <!-- Continent-like details -->
      <path d="M-5,-10 C-2,-5 5,-8 7,-2 C10,3 5,8 0,10 C-5,12 -10,5 -8,0 C-6,-5 -10,-15 -5,-10 Z" fill="#20639b" />
      <path d="M2,-5 C5,-3 10,-5 12,0 C15,5 10,10 5,8 C0,5 -2,0 2,-5 Z" fill="#20639b" fill-opacity="0.7" />
      <!-- Action lines showing movement -->
      <path d="M0,-20 L0,-25" stroke="white" stroke-width="1" />
      <path d="M-5,-19 L-7,-24" stroke="white" stroke-width="0.7" />
      <path d="M5,-19 L7,-24" stroke="white" stroke-width="0.7" />
    </g>
  </g>
  
  <!-- Individual bubbles rising from octopus -->
  <g id="bubbles">
    <circle cx="140" cy="130" r="3" fill="rgba(255,255,255,0.5)" />
    <circle cx="155" cy="135" r="2" fill="rgba(255,255,255,0.5)" />
    <circle cx="145" cy="120" r="4" fill="rgba(255,255,255,0.5)" />
    <circle cx="160" cy="115" r="2.5" fill="rgba(255,255,255,0.5)" />
    <circle cx="130" cy="125" r="1.5" fill="rgba(255,255,255,0.5)" />
    <circle cx="150" cy="110" r="3.5" fill="rgba(255,255,255,0.5)" />
    <circle cx="165" cy="105" r="2" fill="rgba(255,255,255,0.5)" />
    <circle cx="135" cy="100" r="2" fill="rgba(255,255,255,0.5)" />
    
    <!-- Bubbles coming from planets as they move -->
    <circle cx="90" cy="85" r="2" fill="rgba(255,255,255,0.5)" />
    <circle cx="210" cy="85" r="3" fill="rgba(255,255,255,0.5)" />
    <circle cx="70" cy="150" r="2.5" fill="rgba(255,255,255,0.5)" />
    <circle cx="225" cy="150" r="2" fill="rgba(255,255,255,0.5)" />
    <circle cx="155" cy="55" r="3" fill="rgba(255,255,255,0.5)" />
    
    <!-- Additional smaller bubbles -->
    <circle cx="143" cy="115" r="1" fill="rgba(255,255,255,0.5)" />
    <circle cx="158" cy="105" r="1.5" fill="rgba(255,255,255,0.5)" />
    <circle cx="147" cy="95" r="1.2" fill="rgba(255,255,255,0.5)" />
    <circle cx="162" cy="90" r="0.8" fill="rgba(255,255,255,0.5)" />
    <circle cx="95" cy="70" r="1.3" fill="rgba(255,255,255,0.5)" />
    <circle cx="200" cy="75" r="1.7" fill="rgba(255,255,255,0.5)" />
  </g>
  
  <!-- Bubbles overlay -->
  <rect width="300" height="300" fill="url(#bubblePattern)" opacity="0.7" />
</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 image better captures the idea of a 'robot octopus juggling planets underwater' with a detailed depiction of a robotic octopus actively juggling planets amidst an underwater scene.

    The technical quality is high, with attention to detail in both the robot design and the underwater elements, enhancing the overall visual appeal.

    Player 1's submission, while creative, is less detailed and doesn't fully realize the concept as effectively.

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
21
Player 2
129
Rectangles

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

Player 1
2
Player 2
8
Circles

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

Player 1
13
Player 2
69
Ellipses

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

Player 1
Player 2
10
Lines

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

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

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

Player 1
3
Player 2
11

Visual Effects Metrics

Gradients

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

Player 1
1
Player 2
6
Patterns

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

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

The number of elements with stroke attributes in the SVG.

Player 1
4
Player 2
55

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
14
Player 2
39

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
8

Complexity Metrics

Path Commands

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

Player 1
12
Player 2
111
Max Group Nesting

The maximum nesting level of group elements (g) in the SVG.

Player 1
1
Player 2
1
Defs Elements

The number of elements defined within the defs element in the SVG.

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