Creative Challenge
"A floating island with a single glowing tree under a starry sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for the starry night sky -->
<radialGradient id="skyGrad" cx="50%" cy="35%" r="85%">
<stop offset="0%" stop-color="#222548"/>
<stop offset="50%" stop-color="#36457b"/>
<stop offset="100%" stop-color="#0c1236"/>
</radialGradient>
<!-- Shadow gradient for the island -->
<radialGradient id="islandShadow" cx="50%" cy="85%" r="60%">
<stop offset="0%" stop-color="#3a2e1d" stop-opacity="0.7"/>
<stop offset="80%" stop-color="#241a0e" stop-opacity="0.1"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<!-- Ground gradient for island top -->
<linearGradient id="grassGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#95dc77"/>
<stop offset="100%" stop-color="#378a36"/>
</linearGradient>
<!-- Earth gradient for island body -->
<linearGradient id="dirtGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8c5b38"/>
<stop offset="100%" stop-color="#53351b"/>
</linearGradient>
<!-- Roots gradient -->
<linearGradient id="rootGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#b78b5f"/>
<stop offset="100%" stop-color="#533c24"/>
</linearGradient>
<!-- Glow for tree -->
<radialGradient id="treeGlow" cx="50%" cy="50%" r="68%">
<stop offset="0%" stop-color="#f9fdc0" stop-opacity="0.75"/>
<stop offset="80%" stop-color="#f7f0b2" stop-opacity="0.25"/>
<stop offset="100%" stop-color="#fafbe6" stop-opacity="0"/>
</radialGradient>
<!-- Leaves gradient -->
<radialGradient id="leafGrad" cx="55%" cy="35%" r="70%">
<stop offset="0%" stop-color="#fffde1"/>
<stop offset="45%" stop-color="#e3ffad"/>
<stop offset="85%" stop-color="#a1ff70"/>
<stop offset="100%" stop-color="#3ee183"/>
</radialGradient>
<!-- Star shimmer -->
<radialGradient id="starGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="80%" stop-color="#fff" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)"/>
<!-- Subtle nebula clouds -->
<ellipse cx="190" cy="65" rx="38" ry="16" fill="#5c9fd8" fill-opacity="0.15"/>
<ellipse cx="80" cy="45" rx="28" ry="11" fill="#fff2eb" fill-opacity="0.09"/>
<ellipse cx="220" cy="120" rx="20" ry="8" fill="#e3eee5" fill-opacity="0.045"/>
<ellipse cx="150" cy="92" rx="46" ry="17" fill="#ffe0ea" fill-opacity="0.04"/>
<!-- Stars group -->
<g>
<!-- Large glowing stars -->
<circle cx="54" cy="64" r="2.6" fill="url(#starGrad)"/>
<circle cx="238" cy="56" r="2.9" fill="url(#starGrad)"/>
<circle cx="120" cy="41" r="2.3" fill="url(#starGrad)"/>
<circle cx="279" cy="93" r="2.1" fill="url(#starGrad)"/>
<circle cx="182" cy="28" r="2.0" fill="url(#starGrad)"/>
<!-- Medium stars -->
<circle cx="76" cy="35" r="1.3" fill="#fff" fill-opacity="0.9"/>
<circle cx="39" cy="130" r="1.1" fill="#ffd" fill-opacity="0.7"/>
<circle cx="214" cy="70" r="1.4" fill="#fff" fill-opacity="0.85"/>
<circle cx="163" cy="80" r="1" fill="#fff"/>
<circle cx="109" cy="70" r="1.2" fill="#ffffee" fill-opacity="0.7"/>
<circle cx="280" cy="120" r="0.6" fill="#fff"/>
<!-- Tiny random stars -->
<circle cx="50" cy="120" r="0.55" fill="#fff" fill-opacity="0.6"/>
<circle cx="64" cy="105" r="0.6" fill="#fff" fill-opacity="0.6"/>
<circle cx="87" cy="86" r="0.48" fill="#e1fcff" fill-opacity="0.5"/>
<circle cx="212" cy="94" r="0.65" fill="#fff"/>
<circle cx="260" cy="80" r="0.52" fill="#fff"/>
<circle cx="190" cy="115" r="0.5" fill="#ffe"/>
<circle cx="170" cy="60" r="0.7" fill="#fff"/>
<circle cx="130" cy="20" r="0.65" fill="#fff"/>
<circle cx="38" cy="70" r="0.59" fill="#fff"/>
<circle cx="60" cy="18" r="0.7" fill="#fff"/>
<circle cx="275" cy="55" r="0.47" fill="#fff"/>
</g>
<!-- Island shadow on air (below island) -->
<ellipse cx="150" cy="255" rx="44" ry="12" fill="url(#islandShadow)" />
<!-- Floating island body -->
<g>
<ellipse cx="150" cy="210" rx="64" ry="35" fill="url(#dirtGrad)" filter="url(#shadow1)"/>
<!-- Cliffs -->
<path d="M94 210 Q105 247 150 247 Q195 246 206 210 Q191 226 150 228 Q109 227 94 210z"
fill="#6a3b18" opacity="0.62"/>
<!-- Under-island texture spikes and cracks -->
<path d="M109 230 Q106 243 122 237 Q111 247 129 238 Q124 249 140 241 Q135 255 150 243
Q165 255 160 241 Q176 249 171 238 Q189 247 178 237 Q194 243 191 229"
stroke="#3b2616" stroke-width="1" fill="none" opacity="0.27"/>
<!-- Roots dangling below -->
<g>
<path d="M139 230 Q135 243 140 248 Q145 249 147 241" stroke="url(#rootGrad)" stroke-width="3.2" fill="none"/>
<path d="M160 230 Q170 247 157 247 Q153 241 159 237" stroke="url(#rootGrad)" stroke-width="2.5" fill="none"/>
<path d="M152 232 Q155 245 150 250 Q146 245 148 235" stroke="url(#rootGrad)" stroke-width="2.8" fill="none"/>
</g>
<!-- Top grass -->
<ellipse cx="150" cy="196" rx="54" ry="16" fill="url(#grassGrad)" />
<ellipse cx="140" cy="206" rx="9" ry="4" fill="#aee88c" fill-opacity="0.18"/>
<ellipse cx="171" cy="200" rx="11" ry="3" fill="#cfffca" fill-opacity="0.18"/>
<!-- Pebbles -->
<ellipse cx="185" cy="220" rx="3" ry="1.1" fill="#b2a980" fill-opacity="0.23"/>
<ellipse cx="119" cy="217" rx="1.7" ry="0.6" fill="#a8c297" fill-opacity="0.19"/>
<ellipse cx="163" cy="224" rx="2.3" ry="1" fill="#b7b890" fill-opacity="0.23"/>
</g>
<!-- Tree Glow Aura -->
<ellipse cx="150" cy="140" rx="65" ry="40" fill="url(#treeGlow)" filter="url(#glow1)"/>
<!-- Glowing Tree -->
<g>
<!-- Trunk with slight curve -->
<path d="M148 197 Q146 180 151 145 Q154 180 152 197 Q151 200 148 197z"
fill="#f9e3b2" stroke="#eed18a" stroke-width="2"/>
<!-- Smaller roots on grass -->
<path d="M148 196 Q145 200 150 202 Q155 200 152 196" stroke="#be976f" stroke-width="2" fill="none"/>
<!-- Branches (glowing veins) -->
<path d="M150 159 Q143 148 131 137" stroke="#fcf6de" stroke-width="2.4" fill="none"/>
<path d="M150 165 Q160 150 169 141" stroke="#faf7d1" stroke-width="2.1" fill="none"/>
<path d="M150 156 Q151 142 149 134" stroke="#fff3bc" stroke-width="2.2" fill="none"/>
<path d="M152 168 Q156 160 160 152" stroke="#fff9df" stroke-width="1.6" fill="none"/>
<path d="M150 170 Q139 160 134 151" stroke="#fff4b0" stroke-width="1.3" fill="none"/>
<!-- Main glowing leaf cluster -->
<ellipse cx="150" cy="130" rx="39" ry="41" fill="url(#leafGrad)" filter="url(#blurGlow)"/>
<!-- Highlight smaller leaf clusters -->
<ellipse cx="127" cy="120" rx="11" ry="10" fill="#fffffa" fill-opacity="0.10"/>
<ellipse cx="170" cy="123" rx="10.7" ry="9" fill="#f3ffe9" fill-opacity="0.13"/>
<ellipse cx="145" cy="108" rx="7" ry="5" fill="#ffffd2" fill-opacity="0.10"/>
<ellipse cx="165" cy="108" rx="8" ry="5" fill="#fafdff" fill-opacity="0.07"/>
<!-- Twinkling leaves (points of light) -->
<circle cx="138" cy="125" r="1.8" fill="#f5fecd" filter="url(#innerLeafGlow)" />
<circle cx="150" cy="137" r="1.3" fill="#ffffff" filter="url(#innerLeafGlow)" />
<circle cx="163" cy="118" r="1.2" fill="#eaffb8" filter="url(#innerLeafGlow)" />
<circle cx="157" cy="141" r="0.9" fill="#fffcc1"/>
<circle cx="145" cy="119" r="0.8" fill="#fff"/>
<circle cx="167" cy="131" r="0.7" fill="#feffd1"/>
<circle cx="158" cy="125" r="0.6" fill="#ffffff"/>
<circle cx="144" cy="130" r="0.7" fill="#fff"/>
<circle cx="159" cy="127" r="0.5" fill="#fff" fill-opacity="0.8"/>
</g>
<!-- Small floating rocks around the island for magic effect -->
<g>
<ellipse cx="95" cy="227" rx="7" ry="3" fill="#7d5a32" fill-opacity="0.74"/>
<ellipse cx="90" cy="220" rx="3" ry="1.7" fill="#9bb786" fill-opacity="0.75"/>
<ellipse cx="215" cy="236" rx="4.5" ry="1.8" fill="#645946" fill-opacity="0.54"/>
<ellipse cx="210" cy="225" rx="2.5" ry="1.1" fill="#cac788" fill-opacity="0.47"/>
<!-- A few rocks floating further out -->
<ellipse cx="67" cy="244" rx="3" ry="1.2" fill="#78633e" fill-opacity="0.5"/>
<ellipse cx="235" cy="242" rx="2.6" ry="1.0" fill="#a89777" fill-opacity="0.31"/>
</g>
<!-- Foreground grass blades on island edge -->
<g>
<path d="M110 193 Q111 189 112 197" stroke="#88e02d" stroke-width="1.4" fill="none"/>
<path d="M195 198 Q193 193 197 201" stroke="#a6ea42" stroke-width="1.6" fill="none"/>
<path d="M130 190 Q129 185 133 198" stroke="#9bec6c" stroke-width="1.1" fill="none"/>
<path d="M168 192 Q169 188 170 200" stroke="#b8ef81" stroke-width="1.2" fill="none"/>
</g>
<!-- SVG Filters for soft glows -->
<filter id="blurGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2.2"/>
</filter>
<filter id="glow1" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur stdDeviation="14"/>
</filter>
<filter id="innerLeafGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1"/>
</filter>
<!-- Drop shadow for the island body-->
<filter id="shadow1" x="-15%" y="-15%" width="130%" height="130%">
<feDropShadow dx="0" dy="6" stdDeviation="5" flood-color="#6a461c" flood-opacity="0.25"/>
</filter>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Starry Sky -->
<rect x="0" y="0" width="300" height="300" fill="#2E4053" />
<g>
<circle cx="50" cy="50" r="2" fill="#F7DC6F" />
<circle cx="120" cy="80" r="3" fill="#F7DC6F" />
<circle cx="180" cy="120" r="2" fill="#F7DC6F" />
<circle cx="250" cy="50" r="3" fill="#F7DC6F" />
<circle cx="80" cy="220" r="2" fill="#F7DC6F" />
<circle cx="150" cy="250" r="3" fill="#F7DC6F" />
<circle cx="220" cy="200" r="2" fill="#F7DC6F" />
</g>
<!-- Floating Island -->
<g transform="translate(100, 100)">
<ellipse cx="0" cy="0" rx="80" ry="40" fill="#8B9467" />
<path d="M -80 0 C -80 -20 80 -20 80 0 Z" fill="#8B9467" />
</g>
<!-- Glowing Tree -->
<g transform="translate(150, 120)">
<circle cx="0" cy="0" r="20" fill="#F2C464" />
<path d="M 0 -20 L 0 50 L -30 30 Z" fill="#F2C464" />
<path d="M 0 -20 L 0 50 L 30 30 Z" fill="#F2C464" />
<circle cx="0" cy="50" r="10" fill="#F7DC6F" />
</g>
<!-- Tree Glow -->
<radialGradient id="glow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#F7DC6F" stop-opacity="1" />
<stop offset="100%" stop-color="#F7DC6F" stop-opacity="0" />
</radialGradient>
<circle cx="150" cy="170" r="30" fill="url(#glow)" />
<!-- Island Shadow -->
<ellipse cx="150" cy="250" rx="80" ry="20" fill="#2E4053" opacity="0.5" />
</svg>Judge's Analysis
Player 1's image adheres more closely to the prompt with a clear depiction of a floating island and a glowing tree, set against a starry sky.
The composition is visually appealing and cohesive, with good technical execution.
Player 2's submission is more abstract and lacks the clarity and detail necessary to fully convey the concept of a floating island with a glowing tree under a starry 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
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.
