Creative Challenge
"A floating island shaped like a sleeping cat, with a single tree growing on its back."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Cat body fur gradient -->
<radialGradient id="catFur" cx="60%" cy="60%" r="80%">
<stop offset="0%" stop-color="#ffe0b3"/>
<stop offset="40%" stop-color="#ffbb81"/>
<stop offset="100%" stop-color="#e88736"/>
</radialGradient>
<!-- Fur shading -->
<radialGradient id="catShadow" cx="50%" cy="75%" r="75%">
<stop offset="80%" stop-color="rgba(0,0,0,0)" />
<stop offset="100%" stop-color="rgba(80,40,0,0.26)" />
</radialGradient>
<!-- Grass on the back -->
<linearGradient id="grass" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stop-color="#bbe953"/>
<stop offset="75%" stop-color="#5fb741"/>
</linearGradient>
<!-- Island underside (floating rocks/roots) -->
<linearGradient id="islandUnderside" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#b98d4a"/>
<stop offset="80%" stop-color="#39261a"/>
</linearGradient>
<!-- Tree trunk -->
<linearGradient id="treeTrunk" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#7e5419" />
<stop offset="100%" stop-color="#402609" />
</linearGradient>
<!-- Tree foliage -->
<radialGradient id="treeLeaves" cx="70%" cy="30%" r="80%">
<stop offset="0%" stop-color="#eaffb7"/>
<stop offset="70%" stop-color="#6fc14b"/>
<stop offset="100%" stop-color="#297e29"/>
</radialGradient>
<!-- Sunlight glint on fur -->
<radialGradient id="furGlint" cx="40%" cy="25%" r="25%">
<stop offset="0%" stop-color="#fff" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<!-- Whisker color -->
<linearGradient id="whiskerGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#fff"/>
<stop offset="90%" stop-color="#eeb670"/>
</linearGradient>
<!-- Sky backdrop -->
<linearGradient id="sky" x1="0" y1="1" x2="0" y2="0">
<stop offset="0%" stop-color="#a3cef1"/>
<stop offset="80%" stop-color="#f2ecff"/>
</linearGradient>
<!-- Cloud gradient -->
<radialGradient id="cloud" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#fff" stop-opacity="1"/>
<stop offset="100%" stop-color="#c2e5fc" stop-opacity="0.7"/>
</radialGradient>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#sky)" />
<!-- Subtle floating clouds -->
<ellipse cx="70" cy="45" rx="32" ry="10" fill="url(#cloud)" opacity="0.5"/>
<ellipse cx="200" cy="70" rx="26" ry="8" fill="url(#cloud)" opacity="0.4"/>
<ellipse cx="250" cy="35" rx="18" ry="6" fill="url(#cloud)" opacity="0.55"/>
<ellipse cx="140" cy="110" rx="24" ry="10" fill="url(#cloud)" opacity="0.3"/>
<!-- Island underside (roots and stones) -->
<g>
<path d="M70,210
Q90,250 150,270
Q210,250 230,210
Q210,222 180,230
Q150,240 120,230
Q90,222 70,210
Z"
fill="url(#islandUnderside)" opacity="0.95"/>
<!-- Roots -->
<path d="M110,236 Q112,248 116,261" stroke="#ad7c3a" stroke-width="3" fill="none" opacity="0.8"/>
<path d="M185,235 Q180,252 177,267" stroke="#683c06" stroke-width="2.5" fill="none" opacity="0.65"/>
<ellipse cx="190" cy="255" rx="6" ry="3" fill="#412612" opacity="0.5"/>
<ellipse cx="130" cy="260" rx="7" ry="4" fill="#654225" opacity="0.35"/>
</g>
<!-- Cat-shaped island body -->
<g>
<!-- Cat's back and base (main silhouette) -->
<path id="catBody"
d="M70,210
Q40,160 75,110
Q100,87 140,90
Q190,40 230,95
Q272,105 235,170
Q220,200 230,210
Q210,222 180,230
Q150,240 120,230
Q90,222 70,210
Z"
fill="url(#catFur)" stroke="#b8782c" stroke-width="2" filter="url(#shadow1)"/>
<!-- Fur shading shadow -->
<ellipse cx="160" cy="200" rx="78" ry="37" fill="url(#catShadow)" />
<!-- Sun glint highlight on back -->
<ellipse cx="120" cy="125" rx="36" ry="16" fill="url(#furGlint)" />
</g>
<!-- Cat face (sleeping, facing downward left) -->
<g>
<!-- Cheek fluff and muzzle -->
<ellipse cx="92" cy="168" rx="22" ry="13" fill="#ffeccd" opacity="0.92"/>
<!-- Nose -->
<ellipse cx="100" cy="165" rx="5.5" ry="2.5" fill="#fa8670"/>
<!-- Closed eye -->
<path d="M92,162 Q96,166 105,161" stroke="#bb6012" stroke-width="2" fill="none" stroke-linecap="round"/>
<!-- Whiskers (left) -->
<path d="M82,166 Q65,163 52,171" stroke="url(#whiskerGrad)" stroke-width="1.3" fill="none"/>
<path d="M83,171 Q65,173 53,182" stroke="url(#whiskerGrad)" stroke-width="1.3" fill="none"/>
<!-- Whiskers (right, subtle) -->
<path d="M110,170 Q125,169 140,172" stroke="#ffdca4" stroke-width="1" fill="none" opacity="0.7"/>
<path d="M110,165 Q124,162 139,162" stroke="#ffdca4" stroke-width="1" fill="none" opacity="0.7"/>
<!-- Pinkish inner ear -->
<path d="M84,117 Q80,104 90,100 Q100,107 92,127" fill="#fdbeab" opacity="0.65"/>
<!-- Left ear -->
<path d="M76,115
Q70,97 88,92
Q95,110 89,128
Q83,127 84,117 Z"
fill="url(#catFur)" stroke="#b8782c" stroke-width="1.2"/>
<!-- Right ear -->
<path d="M220,93
Q224,81 237,90
Q230,116 230,117
Q225,113 220,93 Z"
fill="url(#catFur)" stroke="#b8782c" stroke-width="1.2"/>
<!-- Inner right ear -->
<path d="M226,92 Q232,98 230,113 Q224,108 225,99 Z" fill="#fdbeab" opacity="0.45"/>
</g>
<!-- Cat tail (curved underneath island) -->
<g>
<path
d="M220,225
Q255,234 250,260
Q247,278 232,265
Q224,256 220,235"
fill="none" stroke="url(#catFur)" stroke-width="14" stroke-linecap="round"/>
<!-- Fluffy tip -->
<ellipse cx="244" cy="262" rx="10" ry="5" fill="#ffeccd" opacity="0.8"/>
<ellipse cx="238" cy="257" rx="8" ry="4" fill="#ffd59c" opacity="0.4"/>
</g>
<!-- Lush grass patch (on cat's back, supporting the tree) -->
<ellipse cx="156" cy="90" rx="50" ry="18" fill="url(#grass)" />
<!-- Some tufts of grass for detail -->
<path d="M132,93 Q131,87 135,92 Q136,88 139,93" stroke="#619a34" stroke-width="2" fill="none"/>
<path d="M170,94 Q169,88 172,92 Q173,89 176,93" stroke="#558d28" stroke-width="2" fill="none"/>
<!-- The Single Tree (on cat's back) -->
<g>
<!-- Tree trunk -->
<rect x="155" y="63" width="9" height="26" rx="3" fill="url(#treeTrunk)" />
<path d="M161,73 Q164,69 164,61" stroke="#9c6f2c" stroke-width="2" fill="none"/>
<path d="M160,80 Q157,74 152,72" stroke="#9c6f2c" stroke-width="2" fill="none"/>
<!-- Tree foliage (big round cloud-like) -->
<ellipse cx="160" cy="54" rx="22" ry="17"
fill="url(#treeLeaves)"/>
<!-- Sun highlight on foliage -->
<ellipse cx="170" cy="48" rx="8" ry="4"
fill="#fff" opacity="0.15"/>
<!-- Accent leaves -->
<ellipse cx="146" cy="60" rx="6" ry="3" fill="#c1e871" opacity="0.5"/>
<ellipse cx="173" cy="57" rx="5" ry="2.5" fill="#ebffa2" opacity="0.53"/>
</g>
<!-- Tiny flowers on grass -->
<circle cx="146" cy="88" r="2.2" fill="#ffe6fa" opacity="0.8"/>
<circle cx="165" cy="95" r="1.6" fill="#fffce2" opacity="0.9"/>
<circle cx="174" cy="88" r="1.5" fill="#f7cfff" opacity="0.7"/>
<circle cx="154" cy="97" r="1.3" fill="#ffffff"/>
<!-- Floating sparkles around island for magic atmosphere -->
<circle cx="95" cy="115" r="1.2" fill="#fffde8" opacity="0.75"/>
<circle cx="183" cy="70" r="1.6" fill="#e4f6ff" opacity="0.7"/>
<circle cx="248" cy="100" r="1.3" fill="#fff" opacity="0.5"/>
<circle cx="110" cy="195" r="1.1" fill="#fff" opacity="0.7"/>
<circle cx="207" cy="190" r="1.2" fill="#fff" opacity="0.6"/>
<circle cx="170" cy="140" r="0.9" fill="#ffe3d8" opacity="0.57"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="catGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFC107;stop-opacity:1" />
<stop offset="100%" style="stop-color:#FF9800;stop-opacity:1" />
</linearGradient>
<linearGradient id="treeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4CAF50;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8BC34A;stop-opacity:1" />
</linearGradient>
<radialGradient id="shadowGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgba(0,0,0,0.2);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgba(0,0,0,0);stop-opacity:0" />
</radialGradient>
</defs>
<g>
<path d="M150 200 Q120 170 90 190 Q60 210 100 230 Q70 250 150 250 Q230 250 200 230 Q240 210 210 190 Q180 170 150 200 Z" fill="url(#catGradient)" />
<ellipse cx="150" cy="220" rx="80" ry="20" fill="url(#shadowGradient)" />
<path d="M120 180 Q110 160 130 160 Q150 160 140 180 Q130 190 120 180 Z" fill="#FFF" opacity="0.8"/>
<circle cx="138" cy="165" r="5" fill="#000" />
<circle cx="162" cy="165" r="5" fill="#000" />
<path d="M134 185 Q150 193 166 185" stroke="#000" stroke-width="2" fill="none" />
<path d="M155 110 Q170 80 190 100 Q180 120 165 120 Q160 130 155 110 Z" fill="url(#treeGradient)" />
<circle cx="175" cy="100" r="10" fill="#8BC34A" />
<rect x="172" y="110" width="6" height="10" fill="#8B5A2B" />
</g>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt by incorporating a floating island that is distinctly shaped like a sleeping cat with visible ears, a tail, and a tree on its back.
The composition is creative, detailed, and visually appealing.
Player 2's submission is simpler and lacks the clear cat-shaped island required by the prompt, making it less effective in execution.
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.
