Back

SVG Drawing Match #1086

Mar 13, 2025
GPT-4o
Challenge Creator

Creative Challenge

"Floating island with waterfall; a garden of glowing, musical mushrooms"

SVG by GPT-4o (2024-11-20)
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient id="skyGradient" cx="0.5" cy="0.2" r="0.8" fx="0.5" fy="0.3">
      <stop offset="0%" stop-color="#a2c8fc" />
      <stop offset="100%" stop-color="#1a4e8a" />
    </radialGradient>
    <linearGradient id="waterGradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#99e0ff" />
      <stop offset="100%" stop-color="#0066ff" />
    </linearGradient>
    <radialGradient id="mushroomGradient" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
      <stop offset="0%" stop-color="#ff90c1" />
      <stop offset="100%" stop-color="#ff007f" />
    </radialGradient>
    <filter id="glow" x="-150%" y="-150%" width="300%" height="300%">
      <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>
  <rect width="300" height="300" fill="url(#skyGradient)" />
  <g transform="translate(150, 120)">
    <polygon points="-60,0 60,0 80,40 -80,40" fill="#865e2f" />
    <polygon points="-40,0 40,0 50,20 -50,20" fill="#a6763f" />
  </g>
  <g transform="translate(150, 120)">
    <path d="M-80,40 C-70,20 -50,10 0,10 C50,10 70,20 80,40" fill="#006633" />
    <path d="M-70,30 C-60,15 -30,5 0,5 C30,5 60,15 70,30" fill="#00994d" />
  </g>
  <g transform="translate(150, 180)">
    <rect x="-20" y="0" width="40" height="80" fill="url(#waterGradient)" />
    <path d="M-15,80 C-5,90 5,90 15,80" fill="url(#waterGradient)" />
  </g>
  <g transform="translate(150, 100)">
    <ellipse rx="5" ry="8" cx="0" cy="0" fill="url(#mushroomGradient)" filter="url(#glow)" />
    <path d="M-2,0 C-2,10 -3,12 0,12 C3,12 2,10 2,0 Z" fill="#503c19" />
    <use href="#mushroom-shape" x="-50" y="20" />
    <use href="#mushroom-shape" x="50" y="15" />
    <use href="#mushroom-shape" x="-30" y="40" />
  </g>
  <g transform="translate(100, 180)">
    <ellipse rx="10" ry="16" fill="url(#mushroomGradient)" filter="url(#glow)" />
    <path d="M-4,0 C-4,12 -6,18 0,18 C6,18 4,12 4,0 Z" fill="#503c19" />
  </g>
  <g transform="translate(200, 190)">
    <ellipse rx="8" ry="13" fill="url(#mushroomGradient)" filter="url(#glow)" />
    <path d="M-3,0 C-3,10 -5,16 0,16 C5,16 3,10 3,0 Z" fill="#503c19" />
  </g>
</svg>
SVG by Claude 3.7 Sonnet (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="#1a0533" />
      <stop offset="50%" stop-color="#3a1466" />
      <stop offset="100%" stop-color="#6a287e" />
    </linearGradient>
    
    <!-- Waterfall gradient -->
    <linearGradient id="waterfallGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#c6f9ff" stop-opacity="0.8" />
      <stop offset="100%" stop-color="#4db6c8" stop-opacity="0.5" />
    </linearGradient>
    
    <!-- Earth gradient -->
    <radialGradient id="earthGradient" cx="50%" cy="50%" r="70%">
      <stop offset="0%" stop-color="#7c5e32" />
      <stop offset="70%" stop-color="#5a421e" />
      <stop offset="100%" stop-color="#3d2c11" />
    </radialGradient>
    
    <!-- Grass pattern -->
    <pattern id="grassPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M0,10 L2,7 L0,5 L3,6 L5,0 L7,6 L10,5 L8,7 L10,10" fill="#538d22" stroke="none" />
    </pattern>
    
    <!-- Glow filter for mushrooms -->
    <filter id="mushroomGlow" x="-30%" y="-30%" width="160%" height="160%">
      <feGaussianBlur stdDeviation="2" result="blur" />
      <feComposite in="SourceGraphic" in2="blur" operator="over" />
    </filter>
    
    <!-- Music note path -->
    <path id="musicNote" d="M0,0 Q1,-5 4,-3 Q6,-1 5,2 Q4,4 2,4 Q0,4 0,2 Q0,0 2,0 Q4,0 4,2 L4,-8" stroke="#fff" fill="none" stroke-width="0.8" />
  </defs>
  
  <!-- Background -->
  <rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
  
  <!-- Stars -->
  <g id="stars">
    <circle cx="30" cy="20" r="1" fill="white" opacity="0.8" />
    <circle cx="60" cy="40" r="0.8" fill="white" opacity="0.7" />
    <circle cx="90" cy="15" r="1.2" fill="white" opacity="0.9" />
    <circle cx="120" cy="35" r="0.7" fill="white" opacity="0.8" />
    <circle cx="150" cy="25" r="1" fill="white" opacity="0.7" />
    <circle cx="180" cy="15" r="0.9" fill="white" opacity="0.8" />
    <circle cx="210" cy="30" r="1.1" fill="white" opacity="0.9" />
    <circle cx="240" cy="20" r="0.8" fill="white" opacity="0.7" />
    <circle cx="270" cy="40" r="1" fill="white" opacity="0.8" />
    <circle cx="45" cy="60" r="0.7" fill="white" opacity="0.7" />
    <circle cx="75" cy="70" r="0.9" fill="white" opacity="0.8" />
    <circle cx="105" cy="50" r="0.8" fill="white" opacity="0.7" />
    <circle cx="135" cy="65" r="1" fill="white" opacity="0.9" />
    <circle cx="165" cy="55" r="0.7" fill="white" opacity="0.8" />
    <circle cx="195" cy="70" r="0.9" fill="white" opacity="0.7" />
    <circle cx="225" cy="50" r="1.1" fill="white" opacity="0.9" />
    <circle cx="255" cy="65" r="0.8" fill="white" opacity="0.8" />
    <circle cx="285" cy="60" r="1" fill="white" opacity="0.7" />
  </g>
  
  <!-- Main floating island -->
  <g id="floatingIsland">
    <!-- Island base shadow -->
    <ellipse cx="150" cy="170" rx="100" ry="40" fill="rgba(0,0,0,0.3)" />
    
    <!-- Island base -->
    <path d="M50,150 C70,130 120,100 150,100 C180,100 220,120 250,150 C260,160 260,170 250,180 C220,200 180,210 150,210 C120,210 80,200 50,180 C40,170 40,160 50,150 Z" fill="url(#earthGradient)" />
    
    <!-- Grass top -->
    <path d="M60,150 C80,135 120,110 150,110 C180,110 220,135 240,150 C230,155 220,160 200,165 C180,170 170,165 150,165 C130,165 120,170 100,165 C80,160 70,155 60,150 Z" fill="url(#grassPattern)" />
    
    <!-- Lake on island -->
    <ellipse cx="150" cy="130" rx="35" ry="15" fill="#3a86c7" />
    <ellipse cx="150" cy="130" rx="30" ry="12" fill="#5aabf5" />
    
    <!-- Rock formations -->
    <path d="M100,140 L95,125 L105,120 L110,130 L115,125 L120,140 Z" fill="#6d6875" />
    <path d="M190,145 L185,130 L195,115 L200,125 L205,120 L210,145 Z" fill="#6d6875" />
    
    <!-- Bottom stalactites -->
    <path d="M80,180 L85,195 L90,180 L95,190 L100,180 L105,185 L110,180" fill="#5a421e" stroke="#3d2c11" />
    <path d="M130,190 L135,205 L140,190 L145,200 L150,190 L155,195 L160,190" fill="#5a421e" stroke="#3d2c11" />
    <path d="M180,185 L185,200 L190,185 L195,195 L200,185 L205,190 L210,185" fill="#5a421e" stroke="#3d2c11" />
  </g>
  
  <!-- Waterfall -->
  <g id="waterfall">
    <path d="M150,130 L150,240 C150,240 145,245 140,240 C135,235 145,230 140,225 C135,220 145,215 140,210 C135,205 145,200 140,195 C135,190 145,185 140,180 C135,175 145,170 140,165 C135,160 150,130 150,130 Z" fill="url(#waterfallGradient)" />
    
    <!-- Water splash at bottom -->
    <ellipse cx="150" cy="245" rx="20" ry="5" fill="#76cad9" opacity="0.7" />
    <ellipse cx="150" cy="250" rx="25" ry="3" fill="#5aabf5" opacity="0.5" />
    
    <!-- Water droplets -->
    <circle cx="145" cy="180" r="1" fill="#c6f9ff" />
    <circle cx="155" cy="190" r="1.5" fill="#c6f9ff" />
    <circle cx="143" cy="200" r="1" fill="#c6f9ff" />
    <circle cx="157" cy="210" r="1.2" fill="#c6f9ff" />
    <circle cx="142" cy="220" r="1" fill="#c6f9ff" />
    <circle cx="154" cy="230" r="1.5" fill="#c6f9ff" />
  </g>
  
  <!-- Glowing musical mushrooms -->
  <g id="mushrooms">
    <!-- Large center mushroom -->
    <g transform="translate(150, 140)">
      <path d="M0,0 L0,15" stroke="#e7c9ff" stroke-width="3" />
      <ellipse cx="0" cy="0" rx="12" ry="7" fill="#ff66d4" filter="url(#mushroomGlow)" />
      <circle cx="0" cy="0" r="5" fill="#ffb3ec" opacity="0.5">
        <animate attributeName="r" values="5;7;5" dur="3s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite" />
      </circle>
      <use href="#musicNote" transform="translate(-2, -5) scale(1.5)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 1 -->
    <g transform="translate(120, 150)">
      <path d="M0,0 L0,10" stroke="#e7c9ff" stroke-width="2" />
      <ellipse cx="0" cy="0" rx="8" ry="5" fill="#7b42f5" filter="url(#mushroomGlow)" />
      <circle cx="0" cy="0" r="3" fill="#b794f6" opacity="0.5">
        <animate attributeName="r" values="3;4;3" dur="4s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0.7;0.5" dur="4s" repeatCount="indefinite" />
      </circle>
      <use href="#musicNote" transform="translate(-1, -3) scale(0.8)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 2 -->
    <g transform="translate(180, 155)">
      <path d="M0,0 L0,12" stroke="#e7c9ff" stroke-width="2.5" />
      <ellipse cx="0" cy="0" rx="10" ry="6" fill="#42f5a7" filter="url(#mushroomGlow)" />
      <circle cx="0" cy="0" r="4" fill="#94f6d1" opacity="0.5">
        <animate attributeName="r" values="4;5;4" dur="2.5s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0.8;0.5" dur="2.5s" repeatCount="indefinite" />
      </circle>
      <use href="#musicNote" transform="translate(-1, -4) scale(1)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 3 -->
    <g transform="translate(100, 140)">
      <path d="M0,0 L0,8" stroke="#e7c9ff" stroke-width="1.5" />
      <ellipse cx="0" cy="0" rx="6" ry="4" fill="#f542f5" filter="url(#mushroomGlow)" />
      <circle cx="0" cy="0" r="2" fill="#f5a2f5" opacity="0.5">
        <animate attributeName="r" values="2;3;2" dur="3.5s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0.7;0.5" dur="3.5s" repeatCount="indefinite" />
      </circle>
      <use href="#musicNote" transform="translate(-1, -2) scale(0.6)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 4 -->
    <g transform="translate(200, 145)">
      <path d="M0,0 L0,9" stroke="#e7c9ff" stroke-width="1.8" />
      <ellipse cx="0" cy="0" rx="7" ry="4" fill="#f5e642" filter="url(#mushroomGlow)" />
      <circle cx="0" cy="0" r="3" fill="#f5f294" opacity="0.5">
        <animate attributeName="r" values="3;4;3" dur="2.8s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="0.5;0.7;0.5" dur="2.8s" repeatCount="indefinite" />
      </circle>
      <use href="#musicNote" transform="translate(-1, -3) scale(0.7)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 5 - small cluster -->
    <g transform="translate(135, 160)">
      <!-- Small mushroom 1 -->
      <path d="M-3,0 L-3,5" stroke="#e7c9ff" stroke-width="1" />
      <ellipse cx="-3" cy="0" rx="3" ry="2" fill="#42c7f5" filter="url(#mushroomGlow)" />
      <!-- Small mushroom 2 -->
      <path d="M0,0 L0,6" stroke="#e7c9ff" stroke-width="1.2" />
      <ellipse cx="0" cy="0" rx="4" ry="2.5" fill="#f57542" filter="url(#mushroomGlow)" />
      <!-- Small mushroom 3 -->
      <path d="M4,0 L4,4" stroke="#e7c9ff" stroke-width="0.8" />
      <ellipse cx="4" cy="0" rx="2.5" ry="1.5" fill="#d2f542" filter="url(#mushroomGlow)" />
      <use href="#musicNote" transform="translate(0, -3) scale(0.5)" stroke="#fff" />
    </g>
    
    <!-- Mushroom group 6 - small cluster -->
    <g transform="translate(170, 135)">
      <!-- Small mushroom 1 -->
      <path d="M-4,0 L-4,5" stroke="#e7c9ff" stroke-width="1" />
      <ellipse cx="-4" cy="0" rx="3" ry="2" fill="#9842f5" filter="url(#mushroomGlow)" />
      <!-- Small mushroom 2 -->
      <path d="M0,0 L0,6" stroke="#e7c9ff" stroke-width="1.2" />
      <ellipse cx="0" cy="0" rx="4" ry="2.5" fill="#f54295" filter="url(#mushroomGlow)" />
      <!-- Small mushroom 3 -->
      <path d="M5,0 L5,4" stroke="#e7c9ff" stroke-width="0.8" />
      <ellipse cx="5" cy="0" rx="2.5" ry="1.5" fill="#42f5a7" filter="url(#mushroomGlow)" />
      <use href="#musicNote" transform="translate(0, -3) scale(0.5)" stroke="#fff" />
    </g>
  </g>
  
  <!-- Floating music notes -->
  <g id="floatingNotes">
    <use href="#musicNote" transform="translate(130, 110) scale(2)" stroke="#ffb3ec">
      <animate attributeName="y" values="0;-15;0" dur="5s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" transform="translate(170, 105) scale(1.5)" stroke="#94f6d1">
      <animate attributeName="y" values="0;-10;0" dur="4s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" transform="translate(110, 115) scale(1.8)" stroke="#f5a2f5">
      <animate attributeName="y" values="0;-12;0" dur="6s" repeatCount="indefinite" />
    </use>
    <use href="#musicNote" transform="translate(190, 120) scale(1.6)" stroke="#f5f294">
      <animate attributeName="y" values="0;-8;0" dur="3.5s" repeatCount="indefinite" />
    </use>
  </g>
  
  <!-- Floating particles -->
  <g id="particles">
    <circle cx="120" cy="130" r="1" fill="#ffb3ec">
      <animate attributeName="cy" values="130;120;130" dur="4s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0.5;1" dur="4s" repeatCount="indefinite" />
    </circle>
    <circle cx="140" cy="125" r="0.8" fill="#94f6d1">
      <animate attributeName="cy" values="125;115;125" dur="3.5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0.5;1" dur="3.5s" repeatCount="indefinite" />
    </circle>
    <circle cx="160" cy="128" r="1.2" fill="#f5a2f5">
      <animate attributeName="cy" values="128;118;128" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0.5;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle cx="180" cy="132" r="0.9" fill="#f5f294">
      <animate attributeName="cy" values="132;122;132" dur="4.5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;0.5;1" dur="4.5s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Small distant floating islands -->
  <g id="distantIslands">
    <path d="M30,100 C35,95 45,90 50,95 C55,100 55,105 50,110 C45,115 35,115 30,110 C25,105 25,105 30,100 Z" fill="#5a421e" opacity="0.7" />
    <path d="M32,100 C36,97 44,93 48,98 C50,100 50,103 48,105 C44,108 36,108 32,105 C30,103 30,102 32,100 Z" fill="#538d22" opacity="0.7" />
    
    <path d="M250,90 C255,85 265,80 270,85 C275,90 275,95 270,100 C265,105 255,105 250,100 C245,95 245,95 250,90 Z" fill="#5a421e" opacity="0.7" />
    <path d="M252,90 C256,87 264,83 268,88 C270,90 270,93 268,95 C264,98 256,98 252,95 C250,93 250,92 252,90 Z" fill="#538d22" opacity="0.7" />
    
    <path d="M65,80 C70,75 80,70 85,75 C90,80 90,85 85,90 C80,95 70,95 65,90 C60,85 60,85 65,80 Z" fill="#5a421e" opacity="0.6" />
    <path d="M67,80 C71,77 79,73 83,78 C85,80 85,83 83,85 C79,88 71,88 67,85 C65,83 65,82 67,80 Z" fill="#538d22" opacity="0.6" />
    
    <path d="M220,70 C225,65 235,60 240,65 C245,70 245,75 240,80 C235,85 225,85 220,80 C215,75 215,75 220,70 Z" fill="#5a421e" opacity="0.6" />
    <path d="M222,70 C226,67 234,63 238,68 C240,70 240,73 238,75 C234,78 226,78 222,75 C220,73 220,72 222,70 Z" fill="#538d22" opacity="0.6" />
  </g>
  
  <!-- Cloud wisps -->
  <g id="clouds" opacity="0.5">
    <path d="M60,120 C70,110 90,110 100,120 C110,130 100,140 90,140 C80,140 70,130 60,120 Z" fill="#fff" opacity="0.3" />
    <path d="M200,110 C210,100 230,100 240,110 C250,120 240,130 230,130 C220,130 210,120 200,110 Z" fill="#fff" opacity="0.3" />
    <path d="M120,80 C130,70 150,70 160,80 C170,90 160,100 150,100 C140,100 130,90 120,80 Z" fill="#fff" opacity="0.2" />
  </g>
</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 image is more detailed and creatively fulfills the prompt, featuring a vibrant garden of glowing mushrooms and musical notes within a well-defined floating island.

    The composition is rich and visually appealing, incorporating elements like stars and additional floating islands, enhancing the fantasy theme.

    Player 1's image, while clean and simple, lacks the complexity and imaginative elements present in Player 2's submission.

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
82
Rectangles

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

Player 1
2
Player 2
1
Circles

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

Player 1
Player 2
33
Ellipses

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

Player 1
3
Player 2
16
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
2
Player 2
Paths

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

Player 1
6
Player 2
32
Groups

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

Player 1
6
Player 2
15

Visual Effects Metrics

Gradients

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

Player 1
3
Player 2
3
Patterns

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

Player 1
Player 2
1
Filters

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

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

The number of elements with stroke attributes in the SVG.

Player 1
Player 2
27

Colors Metrics

Unique Colors

The number of unique colors used in the SVG.

Player 1
11
Player 2
33

Interactivity Metrics

Animations

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

Player 1
Player 2
22
Elements with Transform

The number of elements with transform attributes in the SVG.

Player 1
6
Player 2
18

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
163
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
4
Player 2
6
Use Elements

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

Player 1
3
Player 2
11

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