Creative Challenge
"A floating island with a single tree, a waterfall spilling into the clouds below."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- Sky Gradient -->
<radialGradient id="skyGradient" cx="50%" cy="30%" r="75%" fx="50%" fy="25%">
<stop offset="0%" style="stop-color:#87CEEB;"/> <!-- Light Sky Blue -->
<stop offset="50%" style="stop-color:#C5AEEF;"/> <!-- Soft Lilac/Lavender -->
<stop offset="100%" style="stop-color:#FFDAB9;"/> <!-- Peach Puff -->
</radialGradient>
<!-- Rock Gradient -->
<linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A1887F;" /> <!-- Lighter Brown/Grey -->
<stop offset="50%" style="stop-color:#6D4C41;" /> <!-- Medium Brown -->
<stop offset="100%" style="stop-color:#4E342E;" /> <!-- Very Dark Brown -->
</linearGradient>
<!-- Grass Gradient -->
<linearGradient id="grassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#A5D6A7;" /> <!-- Lighter Green -->
<stop offset="100%" style="stop-color:#4CAF50;" /> <!-- Medium Green -->
</linearGradient>
<!-- Waterfall Gradient -->
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFFFFF; stop-opacity:0.95;"/>
<stop offset="30%" style="stop-color:#E0F7FA; stop-opacity:0.85;"/>
<stop offset="70%" style="stop-color:#B2EBF2; stop-opacity:0.75;"/>
<stop offset="100%" style="stop-color:#81D4FA; stop-opacity:0.65;"/>
</linearGradient>
<!-- Tree Canopy Gradient -->
<radialGradient id="canopyGradient" cx="50%" cy="40%" r="60%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#9CCC65;" /> <!-- Light Green -->
<stop offset="50%" style="stop-color:#7CB342;" /> <!-- Medium Green -->
<stop offset="100%" style="stop-color:#558B2F;" /> <!-- Dark Green -->
</radialGradient>
<!-- Cloud Filter -->
<filter id="cloudBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
</filter>
<filter id="softBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<!-- Pattern for subtle grass texture -->
<pattern id="grassPattern" patternUnits="userSpaceOnUse" width="8" height="8" viewBox="0 0 10 10">
<path d="M0 5 Q2.5 2.5 5 5 T10 5 M0 8 Q2.5 5.5 5 8 T10 8" stroke="#689F38" stroke-width="0.6" fill="none" opacity="0.5"/>
</pattern>
<!-- Pattern for subtle rock texture -->
<pattern id="rockTexture" patternUnits="userSpaceOnUse" width="10" height="10" viewBox="0 0 10 10">
<path d="M0 2 L2 2 L2 0 M5 5 L5 7 L7 7 M1 8 Q3 7 5 8 T9 8" stroke="#6D4C41" stroke-width="0.4" fill="none" opacity="0.3"/>
<circle cx="7.5" cy="2.5" r="0.7" fill="#795548" opacity="0.25"/>
<rect x="1.5" y="5.5" width="2" height="1.5" fill="#A1887F" opacity="0.2" transform="rotate(10 2.5 6.25)"/>
</pattern>
<!-- Define actual shapes for island parts -->
<path id="actualRockShape" d="M40,120 C70,115 110,115 150,120 C190,125 230,125 260,120 C255,155 235,180 195,190 C155,200 115,190 80,170 C60,150 40,140 40,120 Z"/>
<path id="actualGrassShape" d="M40,120 C70,115 110,115 150,120 C190,125 230,125 260,120 L260,100 C230,90 190,88 150,93 C110,98 70,105 40,100 Z"/>
<!-- Define clipPaths using the shapes -->
<clipPath id="clipPathForRock">
<use href="#actualRockShape"/>
</clipPath>
<clipPath id="clipPathForGrass">
<use href="#actualGrassShape"/>
</clipPath>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Distant/Atmospheric elements (stars/sparkles) -->
<g id="sparkles">
<circle cx="60" cy="80" r="1.5" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.2;0.8" dur="3.5s" repeatCount="indefinite" begin="0s"/>
<animate attributeName="r" values="1.5;0.8;1.5" dur="3.5s" repeatCount="indefinite" begin="0s"/>
</circle>
<circle cx="240" cy="60" r="1" fill="white" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.1;0.7" dur="2.8s" repeatCount="indefinite" begin="0.8s"/>
</circle>
<circle cx="160" cy="40" r="1.2" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.3;0.9" dur="4s" repeatCount="indefinite" begin="0.3s"/>
<animate attributeName="r" values="1.2;0.7;1.2" dur="4s" repeatCount="indefinite" begin="0.3s"/>
</circle>
<circle cx="30" cy="150" r="1" fill="white" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.1;0.6" dur="3.2s" repeatCount="indefinite" begin="1.2s"/>
</circle>
<circle cx="270" cy="200" r="1.3" fill="white" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="4.5s" repeatCount="indefinite" begin="0.5s"/>
</circle>
<path d="M100 20 L102 22 L100 24 L98 22 Z" fill="white" opacity="0.7">
<animateTransform attributeName="transform" type="rotate" from="0 100 22" to="360 100 22" dur="10s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.7;0.3;0.7" dur="5s" repeatCount="indefinite" begin="1s"/>
</path>
<path d="M200 270 L202 272 L200 274 L198 272 Z" fill="white" opacity="0.6">
<animateTransform attributeName="transform" type="rotate" from="360 200 272" to="0 200 272" dur="12s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="4s" repeatCount="indefinite" begin="2s"/>
</path>
</g>
<!-- Clouds below island -->
<g id="lowerClouds" filter="url(#cloudBlur)">
<ellipse cx="150" cy="285" rx="110" ry="45" fill="#FFFFFF" opacity="0.8"/>
<ellipse cx="70" cy="275" rx="80" ry="35" fill="#F0F8FF" opacity="0.7"/>
<ellipse cx="230" cy="280" rx="90" ry="40" fill="#FFFFFF" opacity="0.75"/>
<ellipse cx="150" cy="255" rx="130" ry="50" fill="#F5F5F5" opacity="0.85"/> <!-- Top layer for waterfall interaction -->
</g>
<!-- Island Shadow on Clouds -->
<ellipse cx="150" cy="250" rx="95" ry="20" fill="#525C73" opacity="0.2" filter="url(#cloudBlur)"/>
<!-- Floating Island Group (for animation) -->
<g id="floatingIsland">
<animateTransform attributeName="transform" type="translate" values="0 0; 0 -3; 0 0" dur="6.5s" repeatCount="indefinite" calcMode="spline" keyTimes="0; 0.5; 1" keySplines="0.42 0 0.58 1; 0.42 0 0.58 1"/>
<!-- Roots hanging from the bottom -->
<g id="roots" fill="none" stroke="#5D4037" opacity="0.85" stroke-linecap="round">
<path d="M90,188 C85,200 95,210 90,222" stroke-width="2.5"/>
<path d="M120,192 C118,205 125,215 122,228" stroke-width="2"/>
<path d="M150,195 C148,210 155,223 152,235" stroke-width="2.5"/>
<path d="M180,190 C185,203 175,215 180,228" stroke-width="2"/>
<path d="M210,185 C215,197 205,208 210,220" stroke-width="1.5"/>
</g>
<!-- Rock Base -->
<use href="#actualRockShape" fill="url(#rockGradient)" />
<rect x="40" y="115" width="220" height="85" fill="url(#rockTexture)" clip-path="url(#clipPathForRock)"/>
<!-- Grass Top -->
<use href="#actualGrassShape" fill="url(#grassGradient)" />
<rect x="40" y="88" width="220" height="32" fill="url(#grassPattern)" clip-path="url(#clipPathForGrass)"/>
<!-- Waterfall -->
<g id="waterfall">
<path d="M225,120
C232,160 210,190 225,230
L232,250 Q225,260 218,250 L212,230
C195,190 212,160 215,120 Z"
fill="url(#waterGradient)" opacity="0.9"/>
<path d="M212,122
C219,160 198,190 212,230
L218,245 Q212,255 206,245 L200,230
C182,190 198,160 202,122 Z"
fill="url(#waterGradient)" opacity="0.55" filter="url(#softBlur)"/>
<path d="M238,118
C245,160 222,190 238,230
L244,245 Q238,255 232,245 L226,230
C208,190 225,160 228,118 Z"
fill="url(#waterGradient)" opacity="0.55" filter="url(#softBlur)"/>
<ellipse cx="222" cy="255" rx="30" ry="12" fill="white" opacity="0.65" filter="url(#cloudBlur)"/>
<ellipse cx="225" cy="252" rx="20" ry="8" fill="white" opacity="0.8"/>
</g>
<!-- Tree -->
<g id="tree">
<path d="M148,96
C142,83 145,68 150,56
L155,56
C160,68 163,83 157,96 Z"
fill="#795548" />
<path d="M152.5,96 C153,88 150,78 148,73 M152.5,96 C152,88 155,78 157,73" stroke="#5D4037" stroke-width="0.8" fill="none"/>
<ellipse cx="152" cy="48" rx="45" ry="35" fill="url(#canopyGradient)" />
<ellipse cx="130" cy="56" rx="30" ry="22" fill="url(#canopyGradient)" transform="rotate(-20 130 56)"/>
<ellipse cx="175" cy="53" rx="32" ry="25" fill="url(#canopyGradient)" transform="rotate(15 175 53)"/>
<circle cx="150" cy="28" r="10" fill="#B9E48C" opacity="0.55"/>
<circle cx="125" cy="42" r="7" fill="#B9E48C" opacity="0.45"/>
<circle cx="178" cy="45" r="8" fill="#B9E48C" opacity="0.5"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Clouds -->
<circle cx="50" cy="50" r="35" fill="#f0f0f0" />
<circle cx="80" cy="70" r="30" fill="#f0f0f0" />
<circle cx="110" cy="50" r="35" fill="#f0f0f0" />
<circle cx="140" cy="70" r="30" fill="#f0f0f0" />
<circle cx="170" cy="50" r="35" fill="#f0f0f0" />
<circle cx="200" cy="70" r="30" fill="#f0f0f0" />
<!-- Waterfall -->
<path d="M130,90 Q140,50 150,90 Q160,50 170,90 Q180,50 190,90 Q195,70 200,90" fill="skyblue" />
<path d="M140,90 Q145,65 150,90 Q155,65 160,90 Q165,65 170,90 Q172.5,75 175,90" fill="skyblue" />
<path d="M150,90 Q152.5,80 155,90 Q157.5,80 160,90 Q162.5,80 165,90 Q166.5,85 168,90" fill="skyblue" />
<!-- Island -->
<path d="M100,200 Q120,150 140,200 Q160,150 180,200 Q160,250 140,200 Q120,250 100,200" fill="#90c092" />
<!-- Tree -->
<rect x="143" y="160" width="14" height="40" fill="#7c5d3f" />
<circle cx="150" cy="150" r="20" fill="#3b6e2b" />
</svg>Judge's Analysis
Player 1's submission demonstrates a more detailed and visually appealing representation of the floating island concept, with a well-rendered tree, waterfall, and soft pastel background enhancing the overall composition.
Player 2's submission is simplistic and lacks the level of detail and creativity seen in Player 1's work, making it less engaging and less aligned with the floating island idea.
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.
Similar Challenges
"A cactus wearing sunglasses in the middle of a desert during a pink sunset."
"An octopus wearing a top hat juggling teacups underwater."
"An octopus juggling bowling pins underwater."
"Two flamingos fencing with baguettes under a disco ball at sunset."
