Back

SVG Drawing Match #2554

May 09, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Alien juggling planets under a neon galaxy sky."

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>
    <!-- Cosmic background gradient -->
    <radialGradient id="galaxyBackground" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#0c0240" />
      <stop offset="50%" stop-color="#1e0060" />
      <stop offset="100%" stop-color="#000020" />
    </radialGradient>
    
    <!-- Neon glow filters -->
    <filter id="neonGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feFlood flood-color="#ff00ff" flood-opacity="0.7" result="glowColor" />
      <feComposite in="glowColor" in2="blur" operator="in" result="softGlow" />
      <feComposite in="softGlow" in2="SourceGraphic" operator="over" />
    </filter>
    
    <filter id="cyanGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feFlood flood-color="#00ffff" flood-opacity="0.7" result="glowColor" />
      <feComposite in="glowColor" in2="blur" operator="in" result="softGlow" />
      <feComposite in="softGlow" in2="SourceGraphic" operator="over" />
    </filter>

    <!-- Planet textures -->
    <radialGradient id="planet1Gradient" cx="30%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#ff7700" />
      <stop offset="90%" stop-color="#993300" />
    </radialGradient>
    
    <radialGradient id="planet2Gradient" cx="40%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#00ddff" />
      <stop offset="80%" stop-color="#0044aa" />
    </radialGradient>
    
    <radialGradient id="planet3Gradient" cx="50%" cy="30%" r="70%">
      <stop offset="0%" stop-color="#aaff00" />
      <stop offset="90%" stop-color="#449900" />
    </radialGradient>
    
    <!-- Alien skin gradient -->
    <linearGradient id="alienSkin" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#99ff66" />
      <stop offset="100%" stop-color="#33cc33" />
    </linearGradient>
    
    <!-- Star pattern -->
    <pattern id="starPattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="0.5" fill="white" />
      <circle cx="20" cy="30" r="0.7" fill="white" />
      <circle cx="30" cy="15" r="0.4" fill="white" />
      <circle cx="40" cy="40" r="0.6" fill="white" />
      <circle cx="25" cy="5" r="0.3" fill="white" />
      <circle cx="15" cy="25" r="0.8" fill="white" />
      <circle cx="5" cy="35" r="0.5" fill="white" />
      <circle cx="35" cy="45" r="0.4" fill="white" />
    </pattern>
    
    <!-- Nebula effect -->
    <filter id="nebulaEffect">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="3" seed="5" />
      <feColorMatrix type="matrix" values="0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 1 0 0 0 0.7 0" />
      <feGaussianBlur stdDeviation="5" />
    </filter>
    
    <!-- Planet rings gradient -->
    <linearGradient id="ringGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#ffcc00" stop-opacity="0.6" />
      <stop offset="50%" stop-color="#ff9900" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#ffcc00" stop-opacity="0.6" />
    </linearGradient>
    
    <!-- Alien eye glow -->
    <radialGradient id="eyeGlow" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#ffffff" />
      <stop offset="20%" stop-color="#ff00ff" />
      <stop offset="100%" stop-color="#aa00aa" />
    </radialGradient>
    
    <!-- UFO gradient -->
    <linearGradient id="ufoGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#cccccc" />
      <stop offset="100%" stop-color="#777777" />
    </linearGradient>
    
    <!-- Cosmic dust particles -->
    <filter id="cosmicDust">
      <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" seed="5" />
      <feDisplacementMap in="SourceGraphic" scale="5" />
    </filter>
    
    <!-- Twinkling star filter -->
    <filter id="twinkleFilter">
      <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" result="noise" seed="3" />
      <feDisplacementMap in="SourceGraphic" in2="noise" scale="1" />
    </filter>
  </defs>
  
  <!-- Galaxy background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#galaxyBackground)" />
  
  <!-- Stars in the background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#starPattern)" />
  
  <!-- Cosmic dust particles -->
  <rect x="0" y="0" width="300" height="300" fill="#ffffff" opacity="0.05" filter="url(#cosmicDust)" />
  
  <!-- Nebula clouds -->
  <ellipse cx="150" cy="80" rx="200" ry="70" fill="#5000aa" opacity="0.3" filter="url(#nebulaEffect)" />
  <ellipse cx="100" cy="200" rx="150" ry="50" fill="#aa0077" opacity="0.2" filter="url(#nebulaEffect)" />
  <ellipse cx="200" cy="150" rx="100" ry="60" fill="#0077aa" opacity="0.2" filter="url(#nebulaEffect)" />
  
  <!-- Distant planets -->
  <circle cx="40" cy="40" r="15" fill="#ffaa00" opacity="0.7" />
  <circle cx="260" cy="70" r="10" fill="#00ffcc" opacity="0.7" />
  <circle cx="280" cy="230" r="12" fill="#ff44aa" opacity="0.5" />
  
  <!-- Flying UFOs in background -->
  <g transform="translate(220,50) rotate(15)">
    <ellipse cx="0" cy="0" rx="10" ry="3" fill="url(#ufoGradient)" />
    <circle cx="0" cy="-1" r="4" fill="#aaccff" opacity="0.7" />
    <circle cx="0" cy="0" r="1" fill="#00ffff" filter="url(#cyanGlow)" />
  </g>
  
  <g transform="translate(60,170) rotate(-10)">
    <ellipse cx="0" cy="0" rx="7" ry="2" fill="url(#ufoGradient)" />
    <circle cx="0" cy="-1" r="3" fill="#aaccff" opacity="0.7" />
    <circle cx="0" cy="0" r="0.8" fill="#00ffff" filter="url(#cyanGlow)" />
  </g>
  
  <!-- Juggling planets -->
  <!-- Planet 1 (with ring) -->
  <g>
    <ellipse cx="80" cy="120" rx="30" ry="5" fill="url(#ringGradient)" transform="rotate(-20 80 120)" />
    <circle cx="80" cy="120" r="15" fill="url(#planet1Gradient)" />
    <path d="M72,112 Q80,105 88,112" stroke="#ffaa33" stroke-width="1" fill="none" />
    <circle cx="75" cy="115" r="3" fill="#ff5500" opacity="0.7" />
    <circle cx="85" cy="125" r="4" fill="#ff5500" opacity="0.6" />
    <!-- Volcano -->
    <circle cx="78" cy="112" r="2" fill="#ff3300" />
    <circle cx="78" cy="112" r="1" fill="#ffcc00" />
  </g>
  
  <!-- Planet 2 (ice/water planet) -->
  <g>
    <circle cx="150" cy="90" r="20" fill="url(#planet2Gradient)" />
    <!-- Ice caps -->
    <path d="M140,73 Q150,70 160,73 Q157,80 143,80 Z" fill="white" opacity="0.8" />
    <path d="M140,107 Q150,110 160,107 Q157,100 143,100 Z" fill="white" opacity="0.8" />
    <!-- Cloud patterns -->
    <path d="M135,85 Q145,88 155,85" stroke="white" stroke-width="1" opacity="0.6" fill="none" />
    <path d="M140,95 Q150,92 160,95" stroke="white" stroke-width="1" opacity="0.6" fill="none" />
    <!-- Water movement -->
    <path d="M145,90 Q150,93 155,90" stroke="#aaeeff" stroke-width="0.5" opacity="0.7" fill="none" />
    <path d="M148,85 Q150,82 152,85" stroke="#aaeeff" stroke-width="0.5" opacity="0.7" fill="none" />
  </g>
  
  <!-- Planet 3 (forest/green planet) -->
  <g>
    <circle cx="220" cy="120" r="18" fill="url(#planet3Gradient)" />
    <!-- Land masses -->
    <path d="M210,110 Q220,105 230,110 Q235,120 225,125 Q215,122 210,110 Z" fill="#77aa00" />
    <path d="M205,120 Q215,125 225,123 Q230,130 220,135 Q208,132 205,120 Z" fill="#77aa00" />
    <!-- Little forest dots -->
    <circle cx="215" cy="112" r="1" fill="#006600" />
    <circle cx="222" cy="109" r="1" fill="#006600" />
    <circle cx="229" cy="114" r="1" fill="#006600" />
    <circle cx="225" cy="127" r="1" fill="#006600" />
    <circle cx="211" cy="130" r="1" fill="#006600" />
    <circle cx="217" cy="120" r="1.2" fill="#006600" />
    <circle cx="228" cy="122" r="1" fill="#006600" />
    <!-- Rivers -->
    <path d="M214,118 Q218,122 216,128" stroke="#0099ff" stroke-width="0.5" opacity="0.8" fill="none" />
  </g>
  
  <!-- Motion lines to indicate juggling -->
  <path d="M100,150 Q130,120 160,150 Q190,180 220,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.6" />
  <path d="M220,150 Q190,120 160,150 Q130,180 100,150" stroke="#ffffff" stroke-width="1" stroke-dasharray="2,3" fill="none" opacity="0.6" />
  
  <!-- Neon stream trails behind planets -->
  <path d="M80,120 Q70,130 65,150" stroke="#ff9900" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#neonGlow)" />
  <path d="M150,90 Q155,110 160,140" stroke="#00ffff" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#cyanGlow)" />
  <path d="M220,120 Q225,130 230,150" stroke="#aaff00" stroke-width="1" stroke-dasharray="1,2" fill="none" opacity="0.6" filter="url(#neonGlow)" />
  
  <!-- Alien body -->
  <g id="alien">
    <!-- Alien head -->
    <ellipse cx="150" cy="200" rx="25" ry="30" fill="url(#alienSkin)" />
    
    <!-- Alien eyes -->
    <ellipse cx="140" cy="190" rx="7" ry="10" fill="black" />
    <ellipse cx="160" cy="190" rx="7" ry="10" fill="black" />
    <circle cx="140" cy="188" r="3" fill="url(#eyeGlow)" filter="url(#neonGlow)" />
    <circle cx="160" cy="188" r="3" fill="url(#eyeGlow)" filter="url(#neonGlow)" />
    
    <!-- Alien antennae -->
    <path d="M140,175 Q130,160 135,145" stroke="#33cc33" stroke-width="2" fill="none" />
    <path d="M160,175 Q170,160 165,145" stroke="#33cc33" stroke-width="2" fill="none" />
    <circle cx="135" cy="145" r="3" fill="#ff00ff" filter="url(#neonGlow)" />
    <circle cx="165" cy="145" r="3" fill="#ff00ff" filter="url(#neonGlow)" />
    
    <!-- Alien mouth -->
    <path d="M140,210 Q150,215 160,210" stroke="#196619" stroke-width="2" fill="none" />
    
    <!-- Alien freckles/spots -->
    <circle cx="135" cy="200" r="1" fill="#196619" />
    <circle cx="165" cy="200" r="1" fill="#196619" />
    <circle cx="145" cy="197" r="0.8" fill="#196619" />
    
    <!-- Alien body (just the top showing) -->
    <path d="M130,230 Q150,235 170,230 V240 H130 Z" fill="url(#alienSkin)" />
    
    <!-- Alien neck lines -->
    <path d="M140,230 V225" stroke="#196619" stroke-width="1" fill="none" />
    <path d="M150,232 V227" stroke="#196619" stroke-width="1" fill="none" />
    <path d="M160,230 V225" stroke="#196619" stroke-width="1" fill="none" />
    
    <!-- Alien arms juggling -->
    <path d="M130,235 Q110,220 100,200" stroke="#33cc33" stroke-width="3" fill="none" />
    <path d="M170,235 Q190,220 200,200" stroke="#33cc33" stroke-width="3" fill="none" />
    <path d="M100,200 Q90,180 110,170" stroke="#33cc33" stroke-width="3" fill="none" />
    <path d="M200,200 Q210,180 190,170" stroke="#33cc33" stroke-width="3" fill="none" />
    
    <!-- Alien hands -->
    <circle cx="110" cy="170" r="5" fill="#99ff66" />
    <circle cx="190" cy="170" r="5" fill="#99ff66" />
    
    <!-- Alien finger details -->
    <path d="M107,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
    <path d="M110,166 V161" stroke="#33cc33" stroke-width="1" fill="none" />
    <path d="M113,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
    
    <path d="M187,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
    <path d="M190,166 V161" stroke="#33cc33" stroke-width="1" fill="none" />
    <path d="M193,167 V162" stroke="#33cc33" stroke-width="1" fill="none" />
  </g>
  
  <!-- Additional stars and cosmic effects with twinkle filter on some -->
  <circle cx="50" cy="50" r="1" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="70" cy="60" r="0.5" fill="white" />
  <circle cx="200" cy="40" r="1" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="240" cy="60" r="0.7" fill="white" />
  <circle cx="260" cy="180" r="0.8" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="180" cy="230" r="0.6" fill="white" />
  <circle cx="90" cy="250" r="0.7" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="30" cy="200" r="0.9" fill="white" />
  
  <!-- Some brighter stars -->
  <circle cx="25" cy="75" r="1.2" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="270" cy="120" r="1.3" fill="white" filter="url(#twinkleFilter)" />
  <circle cx="120" cy="30" r="1.4" fill="white" filter="url(#twinkleFilter)" />
  
  <!-- Shooting stars -->
  <path d="M30,30 L40,40" stroke="white" stroke-width="1" />
  <path d="M260,240 L250,230" stroke="white" stroke-width="1" />
  <path d="M190,20 L200,35" stroke="white" stroke-width="1.5" opacity="0.8" />
  
  <!-- Neon glow effects around the scene -->
  <path d="M20,100 Q60,60 100,80 Q150,100 200,80 Q250,60 280,100" 
        stroke="#ff00ff" stroke-width="1" fill="none" filter="url(#neonGlow)" opacity="0.4" />
  <path d="M20,200 Q60,240 100,220 Q150,200 200,220 Q250,240 280,200" 
        stroke="#00ffff" stroke-width="1" fill="none" filter="url(#cyanGlow)" opacity="0.4" />
        
  <!-- Additional circular neon elements -->
  <circle cx="180" cy="40" r="15" stroke="#ff00ff" stroke-width="1" fill="none" filter="url(#neonGlow)" opacity="0.3" />
  <circle cx="70" cy="220" r="20" stroke="#00ffff" stroke-width="1" fill="none" filter="url(#cyanGlow)" opacity="0.3" />
  
  <!-- Extra cosmic ray -->
  <path d="M0,130 L300,200" stroke="#ffffff" stroke-width="0.5" opacity="0.3" />
</svg>
SVG by DeepSeek R1
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="galaxy" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#0b0b2a"/>
      <stop offset="100%" stop-color="#2a0845"/>
    </radialGradient>
    
    <linearGradient id="planet1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#ff6b6b"/>
      <stop offset="100%" stop-color="#ff0b76"/>
    </linearGradient>
    
    <linearGradient id="planet2" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#4ecdc4"/>
      <stop offset="100%" stop-color="#45b649"/>
    </linearGradient>
    
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="glow"/>
      <feMerge>
        <feMergeNode in="glow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <clipPath id="ringClip">
      <circle cx="0" cy="0" r="22" fill="none"/>
    </clipPath>
  </defs>

  <rect width="300" height="300" fill="url(#galaxy)"/>
  
  <!-- Stars -->
  <g opacity="0.8">
    <circle cx="50" cy="80" r="1.2" fill="#fff" filter="url(#glow)"/>
    <circle cx="250" cy="40" r="1.5" fill="#7fffd4"/>
    <circle cx="180" cy="150" r="1" fill="#ff69b4"/>
    <circle cx="90" cy="260" r="1.2" fill="#fff"/>
  </g>
  
  <!-- Alien -->
  <g transform="translate(150 190)">
    <path d="M0 0Q-20 30 0 60 20 30 0 0" fill="#7cfc94"/>
    <ellipse cx="0" cy="-40" rx="30" ry="40" fill="#7cfc94"/>
    <circle cx="-12" cy="-50" r="8" fill="#0b0b2a"/>
    <circle cx="12" cy="-50" r="8" fill="#0b0b2a"/>
    <path d="M-30 -20L-40 10 30 -20 40 10" stroke="#7cfc94" stroke-width="4" fill="none"/>
    
    <animateTransform 
      attributeName="transform"
      type="translate"
      values="150 190;150 185;150 190"
      dur="1.5s"
      repeatCount="indefinite"/>
  </g>
  
  <!-- Juggling Planets -->
  <g transform="translate(150 150)">
    <!-- Planet 1 -->
    <g transform="rotate(-20)">
      <circle cx="0" cy="-100" r="18" fill="url(#planet1)">
        <animateMotion path="M0 0a20 20 0 1 1 0 1z" dur="4s" repeatCount="indefinite"/>
      </circle>
      <path d="M-25 -100a18 18 0 0 1 50 0" stroke="#fff3" stroke-width="3" fill="none"/>
    </g>
    
    <!-- Planet 2 -->
    <g transform="rotate(40)">
      <circle cx="0" cy="-100" r="15" fill="url(#planet2)">
        <animateMotion path="M0 0a15 15 0 1 1 0 1z" dur="3.8s" repeatCount="indefinite"/>
      </circle>
      <rect x="-12" y="-115" width="24" height="5" rx="2" fill="#fff3" transform="rotate(30)"/>
    </g>
    
    <!-- Ringed Planet -->
    <g transform="rotate(100)">
      <circle cx="0" cy="-100" r="22" fill="#ffd700"/>
      <g transform="rotate(15)" clip-path="url(#ringClip)">
        <ellipse cx="0" cy="0" rx="30" ry="8" fill="#ffaa0077" transform="rotate(45)"/>
      </g>
      <animateMotion path="M0 0a25 25 0 1 1 0 1z" dur="4.2s" repeatCount="indefinite"/>
    </g>
  </g>
  
  <!-- Energy Trails -->
  <path d="M90 200q50-80 120 0" stroke="url(#planet1)" stroke-width="2" opacity="0.5" fill="none">
    <animate attributeName="opacity" values="0.5;0.2;0.5" dur="2s" repeatCount="indefinite"/>
  </path>
</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 submission is more detailed and adheres closely to the prompt with the inclusion of a vibrant alien, multiple planets, and a neon galaxy background.

    The composition is dynamic, with clear juggling motion and a cohesive galactic setting.

    Player 2's submission, while minimalistic and visually clean, lacks the complexity, context, and overall visual appeal needed to fully meet the prompt's requirements.

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
101
Player 2
18
Rectangles

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

Player 1
3
Player 2
2
Circles

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

Player 1
51
Player 2
10
Ellipses

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

Player 1
9
Player 2
2
Lines

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

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

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

Player 1
6
Player 2
7

Visual Effects Metrics

Gradients

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

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

The number of elements with opacity attributes in the SVG.

Player 1
29
Player 2
2
Elements with Stroke

The number of elements with stroke attributes in the SVG.

Player 1
35
Player 2
3

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
35
Player 2
11

Interactivity Metrics

Animations

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

Player 1
Player 2
5
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
3
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
95
Player 2
8
Max Group Nesting

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

Player 1
Player 2
2
Defs Elements

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

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