Creative Challenge
"Floating island with a single tree and cascading waterfalls into a starry void."
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300'>
<!-- Background: Starry Void -->
<rect x='0' y='0' width='300' height='300' fill='url(#starry-void)'/>
<!-- Gradient Definitions -->
<defs>
<linearGradient id='island-gradient' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stop-color='#8B9467'/>
<stop offset='100%' stop-color='#3E8E41'/>
</linearGradient>
<linearGradient id='waterfall-gradient' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stop-color='#56B3FA'/>
<stop offset='100%' stop-color='#4682B4'/>
</linearGradient>
<radialGradient id='starry-void' cx='50%' cy='50%' r='50%' fx='50%' fy='50%'>
<stop offset='0%' stop-color='#0B0B0F'/>
<stop offset='100%' stop-color='#04040B'/>
</radialGradient>
</defs>
<!-- Floating Island -->
<g transform='translate(100, 50)'>
<ellipse cx='50' cy='50' rx='50' ry='30' fill='url(#island-gradient)'/>
<!-- Tree -->
<g transform='translate(40, 15)'>
<rect x='0' y='0' width='10' height='50' fill='#228B22'/>
<ellipse cx='5' cy='5' rx='10' ry='10' fill='#228B22'/>
</g>
<!-- Cascading Waterfalls -->
<g transform='translate(20, 60)'>
<path d='M 0 0 L 10 10 L 20 20 L 30 30' stroke='url(#waterfall-gradient)' stroke-width='2' fill='none'/>
<path d='M 10 10 L 15 15 L 20 20 L 25 25' stroke='url(#waterfall-gradient)' stroke-width='2' fill='none'/>
<path d='M 20 20 L 25 25 L 30 30 L 35 35' stroke='url(#waterfall-gradient)' stroke-width='2' fill='none'/>
</g>
</g>
<!-- Stars in the Void -->
<g>
<circle cx='10' cy='10' r='2' fill='#FFF'/>
<circle cx='50' cy='50' r='2' fill='#FFF'/>
<circle cx='100' cy='100' r='2' fill='#FFF'/>
<circle cx='150' cy='150' r='2' fill='#FFF'/>
<circle cx='200' cy='200' r='2' fill='#FFF'/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Starry background radial gradient -->
<radialGradient id="voidGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#0a0a23"/>
<stop offset="70%" stop-color="#050517"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<!-- Star sparkle -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Waterfall gradient -->
<linearGradient id="waterGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a0d8f7" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#326ba8" stop-opacity="0.5"/>
</linearGradient>
<!-- Water splash gradient -->
<radialGradient id="splashGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#b3e5fc" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#155a8a" stop-opacity="0"/>
</radialGradient>
<!-- Tree gradient leaves -->
<radialGradient id="leafGradient" cx="40%" cy="30%" r="60%">
<stop offset="25%" stop-color="#67d34c" />
<stop offset="60%" stop-color="#296927" />
<stop offset="100%" stop-color="#143310" />
</radialGradient>
<!-- Bark gradient -->
<linearGradient id="barkGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#5a3a1b"/>
<stop offset="100%" stop-color="#3e1f0a"/>
</linearGradient>
<!-- Floating island earth -->
<radialGradient id="islandGradient" cx="50%" cy="30%" r="70%">
<stop offset="30%" stop-color="#7c532f" />
<stop offset="80%" stop-color="#3a1e0e" />
</radialGradient>
<!-- Moss texture pattern -->
<pattern id="mossPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1" fill="#3f6c25" />
<circle cx="7" cy="7" r="1.5" fill="#4a7b2f" />
<circle cx="5" cy="3" r="0.7" fill="#325618" />
</pattern>
<!-- Waterfall ripple filter -->
<filter id="ripples" x="-20%" y="-20%" width="140%" height="140%" >
<feTurbulence id="turbulence" baseFrequency="0.05" numOctaves="2" result="turb" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="turb" scale="6" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- Glow around island -->
<radialGradient id="islandGlow" cx="50%" cy="60%" r="70%">
<stop offset="20%" stop-color="#4e7b47" stop-opacity="0.7"/>
<stop offset="80%" stop-color="#1a3210" stop-opacity="0"/>
</radialGradient>
<!-- Water sparkle -->
<radialGradient id="waterSparkle" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#6bd1ff" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Background starry void -->
<rect width="300" height="300" fill="url(#voidGradient)" />
<!-- Small random stars group -->
<g>
<circle cx="15" cy="22" r="0.8" fill="white" opacity="0.7"/>
<circle cx="40" cy="180" r="1" fill="white" opacity="0.6"/>
<circle cx="275" cy="48" r="1.3" fill="white" opacity="0.9"/>
<circle cx="200" cy="250" r="0.9" fill="white" opacity="0.5"/>
<circle cx="230" cy="100" r="1.1" fill="white" opacity="0.7"/>
<circle cx="50" cy="100" r="0.8" fill="white" opacity="0.5"/>
<circle cx="90" cy="240" r="1" fill="white" opacity="0.6"/>
<circle cx="100" cy="40" r="0.6" fill="white" opacity="0.65"/>
<circle cx="270" cy="260" r="0.7" fill="white" opacity="0.4"/>
<circle cx="160" cy="30" r="0.9" fill="white" opacity="0.75"/>
</g>
<!-- Larger twinkling stars with glow -->
<g>
<circle cx="70" cy="70" r="2" fill="url(#starGlow)" />
<circle cx="220" cy="120" r="2.5" fill="url(#starGlow)" />
<circle cx="180" cy="180" r="1.8" fill="url(#starGlow)" />
</g>
<!-- Floating island group -->
<g filter="url(#ripples)" transform="translate(0,10)">
<!-- Island base rock form -->
<path
d="
M 105 190
C 85 190, 70 170, 70 140
C 60 120, 65 100, 90 95
C 130 90, 170 100, 180 120
C 185 145, 165 180, 150 185
C 145 188, 130 188, 105 190
Z"
fill="url(#islandGradient)" stroke="#3e1e0d" stroke-width="1.5"/>
<!-- Moss covering on upper island -->
<path
d="
M 80 135
Q 95 125 110 120
T 150 130
Q 140 140 110 145
T 80 135
Z"
fill="url(#mossPattern)" />
<!-- Soft island glow -->
<ellipse cx="125" cy="140" rx="50" ry="25" fill="url(#islandGlow)" />
</g>
<!-- Tree trunk -->
<g>
<path
d="
M 125 110
Q 120 140 125 165
C 127 170, 130 170, 132 165
Q 135 140 130 110
Z"
fill="url(#barkGradient)" stroke="#3b1e06" stroke-width="1" />
</g>
<!-- Tree roots gripping island edges -->
<g stroke="#3b1e06" stroke-width="0.8" fill="none">
<path d="M123 165 Q115 175 110 185" />
<path d="M129 165 Q138 180 145 185" />
</g>
<!-- Tree foliage - layered leaves circles for depth -->
<g>
<circle cx="125" cy="95" r="24" fill="url(#leafGradient)" filter="drop-shadow(0 0 3px #1a3f05)" />
<circle cx="143" cy="85" r="18" fill="url(#leafGradient)" opacity="0.85" />
<circle cx="110" cy="80" r="13" fill="url(#leafGradient)" opacity="0.9" />
<circle cx="130" cy="80" r="10" fill="url(#leafGradient)" opacity="0.95" />
</g>
<!-- Detailed leaf veins with light strokes -->
<g stroke="#4a7a1f" stroke-width="0.3">
<path d="M125 95 L135 75" />
<path d="M125 95 L115 75" />
<path d="M125 95 L145 90" />
<path d="M125 95 L110 105" />
<path d="M125 95 L140 105" />
</g>
<!-- Waterfalls cascading from island edges -->
<g filter="url(#ripples)" stroke-linecap="round" stroke-width="6" stroke="url(#waterGradient)" >
<path d="M 75 140 Q 70 175 73 205" />
<path d="M 145 140 Q 160 170 160 200" />
<path d="M 120 155 Q 110 180 108 210" opacity="0.8"/>
</g>
<!-- Additional water sparkle highlights -->
<g>
<circle cx="72" cy="175" r="3" fill="url(#waterSparkle)" />
<circle cx="157" cy="180" r="3" fill="url(#waterSparkle)" />
<circle cx="108" cy="180" r="2" fill="url(#waterSparkle)" />
</g>
<!-- Waterfall bottom mist splash puffs -->
<g opacity="0.7" fill="url(#splashGradient)">
<ellipse cx="70" cy="210" rx="8" ry="4" />
<ellipse cx="160" cy="205" rx="6" ry="3" />
<ellipse cx="105" cy="215" rx="5" ry="2" />
<ellipse cx="120" cy="210" rx="4" ry="2" />
</g>
<!-- Soft white mist above water splash -->
<g opacity="0.15" fill="white">
<ellipse cx="73" cy="200" rx="15" ry="5" />
<ellipse cx="155" cy="197" rx="12" ry="4" />
</g>
<!-- Floating island shadow under it -->
<ellipse cx="125" cy="220" rx="40" ry="12" fill="black" opacity="0.15" />
</svg>Judge's Analysis
Player 2's submission is more detailed and aligns better with the prompt.
The floating island, tree, cascading waterfalls, and starry void are all clearly represented with greater visual complexity and appeal.
Player 1's submission is simpler and lacks the intricate elements needed to fully convey the concept.
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
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
The number of rectangle elements (rect) in the SVG.
The number of circle elements (circle) in the SVG.
The number of ellipse elements (ellipse) in the SVG.
The number of line elements (line) in the SVG.
The number of polygon elements (polygon) in the SVG.
The number of path elements (path) in the SVG.
The number of group elements (g) in the SVG.
Visual Effects Metrics
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
The number of pattern definitions (pattern) in the SVG.
The number of filter definitions (filter) in the SVG.
The number of mask definitions (mask) in the SVG.
The number of clipping path definitions (clipPath) in the SVG.
The number of elements with opacity attributes in the SVG.
The number of elements with stroke attributes in the SVG.
Colors Metrics
The number of unique colors used in the SVG.
Interactivity Metrics
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
The number of elements with transform attributes in the SVG.
Complexity Metrics
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
The maximum nesting level of group elements (g) in the SVG.
The number of elements defined within the defs element in the SVG.
The number of use elements (use) in the SVG.
Text Metrics
The number of text elements (text) in the SVG.
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.
