Back

SVG Drawing Match #224

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Origami crane made of folded galaxy sky, stars twinkling from its paper creases"

SVG by DeepSeek-R1-Distill-Llama-70B
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="galaxyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#1a0f3c;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#4a1010;stop-opacity:1" />
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="glow"/>
      <feMerge>
        <feMergeNode in="glow"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <filter id="ripple">
      <feDiffuseLighting in="SourceAlpha" surfaceScale="5" diffuseConstant="0.2">
        <feDistantLight azimuth="45" elevation="45"/>
      </feDiffuseLighting>
    </filter>
  </defs>
  <rect width="300" height="300" fill="url(#galaxyGradient)"/>
  
  <!-- Crane body -->
  <path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
      fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
  
  <!-- Wings -->
  <path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
      fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
  
  <!-- Tail feathers -->
  <path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
      fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
  
  <!-- Head and neck -->
  <path d="M150,100 L170,130 Q180,140 190,130 L190,170 Q200,180 210,170 L210,130 Q220,140 230,130 L230,100 L210,90 Q200,80 190,90 L190,60 Q180,50 170,60 L170,90 Q160,100 150,90 L150,60 Q140,50 130,60 L130,90 Q120,100 110,90 L110,60 Q100,50 90,60 L90,130 Q80,140 70,130 L70,170 Q60,180 50,170 L50,130 Q40,140 30,130 L30,100 L50,90 Q60,80 70,90 L70,60 Q80,50 90,60 L90,130 Q100,140 110,130 L110,170 Q120,180 130,170 L130,130 Q140,140 150,130 L150,100 Z"
      fill="url(#galaxyGradient)" opacity="0.8" filter="url(#ripple)"/>
  
  <!-- Stars -->
  <g filter="url(#glow)">
    <circle cx="50" cy="50" r="1" fill="white"/>
    <circle cx="250" cy="250" r="1" fill="white"/>
    <circle cx="150" cy="150" r="1" fill="white"/>
    <circle cx="100" cy="200" r="1" fill="white"/>
    <circle cx="200" cy="100" r="1" fill="white"/>
  </g>
</svg>
SVG by Claude 3.7 Sonnet Thinking (2025-02-19)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Galaxy gradients -->
    <linearGradient id="galaxyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0a0a2a" />
      <stop offset="20%" stop-color="#190a4d" />
      <stop offset="40%" stop-color="#3b0e6f" />
      <stop offset="60%" stop-color="#7b1e7c" />
      <stop offset="80%" stop-color="#c33764" />
      <stop offset="100%" stop-color="#1d2671" />
    </linearGradient>
    
    <linearGradient id="galaxyGradient2" x1="100%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#1d2671" />
      <stop offset="20%" stop-color="#c33764" />
      <stop offset="40%" stop-color="#7b1e7c" />
      <stop offset="60%" stop-color="#3b0e6f" />
      <stop offset="80%" stop-color="#190a4d" />
      <stop offset="100%" stop-color="#0a0a2a" />
    </linearGradient>
    
    <!-- Nebula pattern -->
    <radialGradient id="nebulaGlow" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#ff59c7" stop-opacity="0.7" />
      <stop offset="70%" stop-color="#614385" stop-opacity="0.3" />
      <stop offset="100%" stop-color="#190a4d" stop-opacity="0" />
    </radialGradient>
    
    <!-- Star glow filter -->
    <filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="glow" />
      <feBlend in="SourceGraphic" in2="glow" mode="screen" />
    </filter>
    
    <!-- Crane glow -->
    <filter id="craneGlow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0.2  0 1 0 0 0.0  0 0 1 0 0.5  0 0 0 5 -1" result="glow" />
      <feBlend in="SourceGraphic" in2="glow" mode="screen" />
    </filter>
  </defs>

  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="#0a0a1a" />

  <!-- Background stars -->
  <g id="backgroundStars" fill="white">
    <circle cx="20" cy="30" r="0.8" opacity="0.6" />
    <circle cx="40" cy="50" r="0.6" opacity="0.5" />
    <circle cx="60" cy="20" r="1" opacity="0.7" />
    <circle cx="80" cy="40" r="0.5" opacity="0.4" />
    <circle cx="100" cy="15" r="0.7" opacity="0.6" />
    <circle cx="120" cy="35" r="0.9" opacity="0.5" />
    <circle cx="140" cy="25" r="0.4" opacity="0.7" />
    <circle cx="160" cy="10" r="0.8" opacity="0.5" />
    <circle cx="180" cy="45" r="0.6" opacity="0.6" />
    <circle cx="200" cy="25" r="0.7" opacity="0.4" />
    <circle cx="220" cy="15" r="0.9" opacity="0.7" />
    <circle cx="240" cy="40" r="0.5" opacity="0.5" />
    <circle cx="260" cy="30" r="0.8" opacity="0.6" />
    <circle cx="280" cy="20" r="0.6" opacity="0.7" />
    <circle cx="15" cy="60" r="0.7" opacity="0.5" />
    <circle cx="25" cy="80" r="0.5" opacity="0.6" />
    <circle cx="10" cy="100" r="0.9" opacity="0.4" />
    <circle cx="30" cy="120" r="0.4" opacity="0.7" />
    <circle cx="15" cy="140" r="0.7" opacity="0.5" />
    <circle cx="25" cy="160" r="0.5" opacity="0.6" />
    <circle cx="10" cy="180" r="0.9" opacity="0.4" />
    <circle cx="30" cy="200" r="0.4" opacity="0.7" />
    <circle cx="15" cy="220" r="0.7" opacity="0.5" />
    <circle cx="25" cy="240" r="0.5" opacity="0.6" />
    <circle cx="10" cy="260" r="0.9" opacity="0.4" />
    <circle cx="30" cy="280" r="0.4" opacity="0.7" />
    <circle cx="270" cy="60" r="0.7" opacity="0.5" />
    <circle cx="285" cy="80" r="0.5" opacity="0.6" />
    <circle cx="270" cy="100" r="0.9" opacity="0.4" />
    <circle cx="285" cy="120" r="0.4" opacity="0.7" />
    <circle cx="270" cy="140" r="0.7" opacity="0.5" />
    <circle cx="285" cy="160" r="0.5" opacity="0.6" />
    <circle cx="270" cy="180" r="0.9" opacity="0.4" />
    <circle cx="285" cy="200" r="0.4" opacity="0.7" />
    <circle cx="270" cy="220" r="0.7" opacity="0.5" />
    <circle cx="285" cy="240" r="0.5" opacity="0.6" />
    <circle cx="270" cy="260" r="0.9" opacity="0.4" />
    <circle cx="285" cy="280" r="0.4" opacity="0.7" />
    <circle cx="60" cy="285" r="0.7" opacity="0.5" />
    <circle cx="80" cy="270" r="0.5" opacity="0.6" />
    <circle cx="100" cy="285" r="0.9" opacity="0.4" />
    <circle cx="120" cy="270" r="0.4" opacity="0.7" />
    <circle cx="140" cy="285" r="0.7" opacity="0.5" />
    <circle cx="160" cy="270" r="0.5" opacity="0.6" />
    <circle cx="180" cy="285" r="0.9" opacity="0.4" />
    <circle cx="200" cy="270" r="0.4" opacity="0.7" />
    <circle cx="220" cy="285" r="0.7" opacity="0.5" />
    <circle cx="240" cy="270" r="0.5" opacity="0.6" />
  </g>

  <!-- Crane with glow effect -->
  <g id="craneWithGlow" filter="url(#craneGlow)">
    <!-- Crane body - folded paper effect -->
    <g id="crane">
      <!-- Left wing -->
      <path d="M150,150 L50,120 L30,210 L120,170 Z" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
      
      <!-- Right wing -->
      <path d="M150,150 L250,120 L270,210 L180,170 Z" fill="url(#galaxyGradient2)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
      
      <!-- Body -->
      <path d="M120,170 L150,150 L180,170 L150,200 Z" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
      
      <!-- Head and neck -->
      <path d="M150,150 C150,140 145,130 150,120 L155,110 L150,105 L145,110 L150,120" fill="url(#galaxyGradient2)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
      
      <!-- Beak - enhanced definition -->
      <path d="M148,105 L150,100 L152,105 Z" fill="#ffffff" opacity="0.8" />
      
      <!-- Tail -->
      <path d="M150,200 L145,220 L150,230 L155,220 L150,200" fill="url(#galaxyGradient)" stroke="#ffffff" stroke-opacity="0.3" stroke-width="0.5" />
    </g>

    <!-- Nebula cloud overlays -->
    <g id="nebulaClouds" opacity="0.6">
      <ellipse cx="100" cy="140" rx="60" ry="40" fill="url(#nebulaGlow)" />
      <ellipse cx="200" cy="140" rx="60" ry="40" fill="url(#nebulaGlow)" />
      <ellipse cx="150" cy="190" rx="40" ry="30" fill="url(#nebulaGlow)" />
    </g>

    <!-- Paper fold lines -->
    <g id="foldLines" stroke="#ffffff" stroke-opacity="0.4" stroke-width="0.5" fill="none">
      <line x1="150" y1="150" x2="50" y2="120" />
      <line x1="150" y1="150" x2="250" y2="120" />
      <line x1="150" y1="150" x2="150" y2="200" />
      <line x1="30" y1="210" x2="120" y2="170" />
      <line x1="270" y1="210" x2="180" y2="170" />
      <path d="M120,170 C135,160 165,160 180,170" />
    </g>

    <!-- Additional fold lines -->
    <g id="additionalFolds" stroke="#ffffff" stroke-opacity="0.2" stroke-width="0.3" stroke-dasharray="2,2" fill="none">
      <path d="M50,120 C70,100 90,90 150,110" />
      <path d="M250,120 C230,100 210,90 150,110" />
      <path d="M30,210 C60,190 90,180 150,200" />
      <path d="M270,210 C240,190 210,180 150,200" />
      <path d="M150,150 C140,140 140,120 150,110" />
      <path d="M150,150 C160,140 160,120 150,110" />
      <path d="M150,150 C140,160 140,180 150,200" />
      <path d="M150,150 C160,160 160,180 150,200" />
    </g>
  </g>

  <!-- Stars along creases -->
  <g id="stars">
    <!-- Twinkling stars -->
    <circle cx="50" cy="120" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
      <animate attributeName="opacity" values="0.9;0.1;0.9" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="80" cy="135" r="0.8" fill="white" filter="url(#starGlow)" opacity="0.7">
      <animate attributeName="opacity" values="0.7;0.2;0.7" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="110" cy="160" r="1.2" fill="white" filter="url(#starGlow)" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="30" cy="210" r="1" fill="white" filter="url(#starGlow)" opacity="0.7">
      <animate attributeName="opacity" values="0.7;0.2;0.7" dur="3.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="250" cy="120" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
      <animate attributeName="opacity" values="0.9;0.1;0.9" dur="2.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="220" cy="135" r="0.8" fill="white" filter="url(#starGlow)" opacity="0.7">
      <animate attributeName="opacity" values="0.7;0.2;0.7" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="190" cy="160" r="1.2" fill="white" filter="url(#starGlow)" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="270" cy="210" r="1" fill="white" filter="url(#starGlow)" opacity="0.7">
      <animate attributeName="opacity" values="0.7;0.2;0.7" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="180" r="1.1" fill="white" filter="url(#starGlow)" opacity="0.9">
      <animate attributeName="opacity" values="0.9;0.4;0.9" dur="3s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="120" r="0.9" fill="white" filter="url(#starGlow)" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.3;0.8" dur="2.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="105" r="1" fill="white" filter="url(#starGlow)" opacity="0.9">
      <animate attributeName="opacity" values="0.9;0.3;0.9" dur="2s" repeatCount="indefinite" />
    </circle>
    <circle cx="150" cy="230" r="1" fill="white" filter="url(#starGlow)" opacity="0.8">
      <animate attributeName="opacity" values="0.8;0.2;0.8" dur="3s" repeatCount="indefinite" />
    </circle>
  </g>

  <!-- Scattered stars in the galaxy body -->
  <g id="moreStars" fill="white">
    <circle cx="90" cy="140" r="0.5" opacity="0.8" />
    <circle cx="110" cy="130" r="0.6" opacity="0.7" />
    <circle cx="130" cy="160" r="0.4" opacity="0.9" />
    <circle cx="70" cy="160" r="0.5" opacity="0.8" />
    <circle cx="60" cy="180" r="0.7" opacity="0.6" />
    <circle cx="210" cy="140" r="0.5" opacity="0.8" />
    <circle cx="190" cy="130" r="0.6" opacity="0.7" />
    <circle cx="170" cy="160" r="0.4" opacity="0.9" />
    <circle cx="230" cy="160" r="0.5" opacity="0.8" />
    <circle cx="240" cy="180" r="0.7" opacity="0.6" />
    <circle cx="150" cy="170" r="0.6" opacity="0.8" />
    <circle cx="140" cy="185" r="0.5" opacity="0.7" />
    <circle cx="160" cy="185" r="0.5" opacity="0.7" />
    <circle cx="150" cy="130" r="0.6" opacity="0.8" />
    <circle cx="145" cy="115" r="0.5" opacity="0.7" />
    <circle cx="155" cy="115" r="0.5" opacity="0.7" />
  </g>

  <!-- Cosmic dust particles -->
  <g id="cosmicDust" fill="white" opacity="0.5">
    <g id="dustParticles">
      <circle cx="100" cy="150" r="0.3" />
      <circle cx="120" cy="140" r="0.2" />
      <circle cx="140" cy="160" r="0.3" />
      <circle cx="160" cy="140" r="0.2" />
      <circle cx="180" cy="160" r="0.3" />
      <circle cx="200" cy="150" r="0.3" />
      <circle cx="80" cy="170" r="0.2" />
      <circle cx="220" cy="170" r="0.2" />
      <circle cx="120" cy="120" r="0.3" />
      <circle cx="180" cy="120" r="0.3" />
      <circle cx="150" cy="190" r="0.2" />
    </g>
    <animateTransform
      attributeName="transform"
      attributeType="XML"
      type="rotate"
      from="0 150 150"
      to="360 150 150"
      dur="180s"
      repeatCount="indefinite"
    />
  </g>

  <!-- Glowing star at the center of the crane -->
  <circle cx="150" cy="150" r="3" fill="url(#nebulaGlow)" filter="url(#starGlow)">
    <animate attributeName="r" values="3;3.5;3" dur="4s" repeatCount="indefinite" />
    <animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite" />
  </circle>
</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 captures the essence of an origami crane with a galaxy theme, using vibrant colors and a dynamic design that suggests folded paper.

    The use of stars within the design enhances the celestial theme, aligning well with the prompt.

    Player 1's image lacks clarity and does not effectively convey the concept of an origami crane made from a galaxy sky.

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
10
Player 2
112
Rectangles

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

Player 1
1
Player 2
1
Circles

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

Player 1
5
Player 2
88
Ellipses

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

Player 1
Player 2
3
Lines

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

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

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

Player 1
1
Player 2
10

Visual Effects Metrics

Gradients

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

Player 1
1
Player 2
3
Patterns

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

Player 1
Player 2
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
Player 2
7

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
1
Player 2
10

Interactivity Metrics

Animations

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

Player 1
Player 2
15
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
Player 2

Complexity Metrics

Path Commands

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

Player 1
156
Player 2
48
Max Group Nesting

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

Player 1
Player 2
1
Defs Elements

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

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