Creative Challenge
"Floating cat island with fish-shaped clouds above"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background sky gradient -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#7FCDFF" />
<stop offset="100%" stop-color="#E0F7FF" />
</linearGradient>
<!-- Cat pattern for island -->
<pattern id="catPattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
<circle cx="30" cy="30" r="2" fill="#5D4037" />
<path d="M25,28 Q30,22 35,28" stroke="#5D4037" stroke-width="1" fill="none" />
</pattern>
<!-- Water pattern -->
<pattern id="waterPattern" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
<path d="M0,5 Q5,0 10,5 Q15,10 20,5" stroke="#84FFFF" stroke-width="1" fill="none" opacity="0.3" />
</pattern>
<!-- Island gradient -->
<radialGradient id="islandGradient" cx="50%" cy="50%" r="55%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#8D6E63" />
<stop offset="70%" stop-color="#6D4C41" />
<stop offset="100%" stop-color="#5D4037" />
</radialGradient>
<!-- Fish cloud filter -->
<filter id="cloudFilter" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Fish-shaped clouds -->
<g filter="url(#cloudFilter)">
<path d="M70,40 Q80,30 90,40 L110,40 Q120,30 130,40 L110,60 L90,60 Z" fill="white" opacity="0.9" />
<circle cx="90" cy="40" r="3" fill="#E0F7FF" />
<path d="M190,60 Q200,50 210,60 L230,60 Q240,50 250,60 L230,80 L210,80 Z" fill="white" opacity="0.9" />
<circle cx="210" cy="60" r="3" fill="#E0F7FF" />
<path d="M130,90 Q140,80 150,90 L170,90 Q180,80 190,90 L170,110 L150,110 Z" fill="white" opacity="0.85" />
<circle cx="150" cy="90" r="3" fill="#E0F7FF" />
</g>
<!-- Ocean -->
<rect x="0" y="220" width="300" height="80" fill="#29B6F6" />
<rect x="0" y="220" width="300" height="80" fill="url(#waterPattern)" />
<!-- Floating island base -->
<ellipse cx="150" cy="220" rx="100" ry="30" fill="url(#islandGradient)" />
<ellipse cx="150" cy="220" rx="100" ry="30" fill="url(#catPattern)" opacity="0.1" />
<!-- Island top -->
<path d="M150,180 C120,180 70,170 60,190 C50,210 100,220 150,220 C200,220 250,210 240,190 C230,170 180,180 150,180 Z" fill="#8D6E63" />
<!-- Cat ears -->
<path d="M120,170 L110,150 L130,160 Z" fill="#5D4037" />
<path d="M180,170 L190,150 L170,160 Z" fill="#5D4037" />
<!-- Cat face -->
<ellipse cx="150" cy="180" rx="40" ry="30" fill="#8D6E63" />
<!-- Cat features -->
<circle cx="135" cy="175" r="5" fill="white" />
<circle cx="165" cy="175" r="5" fill="white" />
<circle cx="135" cy="175" r="2" fill="black" />
<circle cx="165" cy="175" r="2" fill="black" />
<path d="M145,185 Q150,190 155,185" stroke="black" stroke-width="1" fill="none" />
<path d="M140,165 L130,155" stroke="black" stroke-width="1" fill="none" />
<path d="M160,165 L170,155" stroke="black" stroke-width="1" fill="none" />
<ellipse cx="150" cy="187" rx="3" ry="2" fill="#FF9E80" />
<!-- Whiskers -->
<path d="M140,185 L120,180" stroke="black" stroke-width="0.5" fill="none" />
<path d="M140,187 L120,187" stroke="black" stroke-width="0.5" fill="none" />
<path d="M140,189 L120,194" stroke="black" stroke-width="0.5" fill="none" />
<path d="M160,185 L180,180" stroke="black" stroke-width="0.5" fill="none" />
<path d="M160,187 L180,187" stroke="black" stroke-width="0.5" fill="none" />
<path d="M160,189 L180,194" stroke="black" stroke-width="0.5" fill="none" />
<!-- Trees/Vegetation -->
<path d="M90,170 Q100,150 110,170 Z" fill="#43A047" />
<path d="M85,180 Q95,160 105,180 Z" fill="#2E7D32" />
<path d="M95,180 Q105,160 115,180 Z" fill="#388E3C" />
<rect x="100" y="180" width="5" height="10" fill="#6D4C41" />
<path d="M190,170 Q200,150 210,170 Z" fill="#43A047" />
<path d="M185,180 Q195,160 205,180 Z" fill="#2E7D32" />
<path d="M195,180 Q205,160 215,180 Z" fill="#388E3C" />
<rect x="200" y="180" width="5" height="10" fill="#6D4C41" />
<!-- Fish jumping out of water -->
<path d="M60,230 C60,220 70,215 80,220 L90,225 L80,230 L90,235 C70,240 60,240 60,230 Z" fill="#E91E63" />
<circle cx="80" cy="225" r="2" fill="black" />
<path d="M90,225 L95,222 L95,228 Z" fill="#E91E63" />
<path d="M230,240 C230,230 240,225 250,230 L260,235 L250,240 L260,245 C240,250 230,250 230,240 Z" fill="#9C27B0" />
<circle cx="250" cy="235" r="2" fill="black" />
<path d="M260,235 L265,232 L265,238 Z" fill="#9C27B0" />
<!-- Small tail on the island -->
<path d="M230,210 Q240,190 250,210" stroke="#5D4037" stroke-width="6" fill="none" />
<!-- Hanging roots -->
<path d="M100,220 Q100,240 90,250" stroke="#8D6E63" stroke-width="2" fill="none" />
<path d="M120,220 Q120,245 115,255" stroke="#8D6E63" stroke-width="2" fill="none" />
<path d="M180,220 Q180,245 185,255" stroke="#8D6E63" stroke-width="2" fill="none" />
<path d="M200,220 Q200,240 210,250" stroke="#8D6E63" stroke-width="2" fill="none" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#6a3093"/>
<stop offset="100%" stop-color="#a044ff"/>
</linearGradient>
<radialGradient id="islandGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8BC34A"/>
<stop offset="100%" stop-color="#4CAF50"/>
</radialGradient>
<radialGradient id="fishGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFEB3B"/>
<stop offset="100%" stop-color="#FFC107"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<g filter="url(#glow)">
<g transform="translate(50,30)">
<ellipse cx="30" cy="20" rx="20" ry="10" fill="url(#fishGradient)"/>
<polygon points="50,20 60,10 60,30" fill="url(#fishGradient)"/>
</g>
<g transform="translate(180,50)">
<ellipse cx="30" cy="20" rx="20" ry="10" fill="url(#fishGradient)"/>
<polygon points="50,20 60,10 60,30" fill="url(#fishGradient)"/>
</g>
</g>
<ellipse cx="150" cy="225" rx="55" ry="8" fill="black" opacity="0.2"/>
<g id="catIsland">
<path d="
M150,210
C130,210, 110,210, 90,190
C80,170, 80,150, 100,140
L110,120
L100,90
L110,80
L125,90
L135,110
C140,100, 155,100, 160,110
L170,90
L180,80
L190,90
L180,120
C200,150, 200,170, 190,190
C170,210, 150,210, 150,210
Z" fill="url(#islandGradient)" stroke="#4CAF50" stroke-width="2"/>
<circle cx="125" cy="100" r="4" fill="white"/>
<circle cx="125" cy="100" r="2" fill="black"/>
<circle cx="175" cy="100" r="4" fill="white"/>
<circle cx="175" cy="100" r="2" fill="black"/>
<polygon points="148,107 152,107 150,112" fill="pink"/>
<line x1="140" y1="112" x2="110" y2="110" stroke="black" stroke-width="1"/>
<line x1="140" y1="114" x2="110" y2="114" stroke="black" stroke-width="1"/>
<line x1="140" y1="116" x2="110" y2="118" stroke="black" stroke-width="1"/>
<line x1="160" y1="112" x2="190" y2="110" stroke="black" stroke-width="1"/>
<line x1="160" y1="114" x2="190" y2="114" stroke="black" stroke-width="1"/>
<line x1="160" y1="116" x2="190" y2="118" stroke="black" stroke-width="1"/>
<path d="M190,190 C210,170 230,175 220,195" fill="none" stroke="#4CAF50" stroke-width="4" stroke-linecap="round"/>
</g>
</svg>Judge's Analysis
Player 1's image creatively depicts a floating cat island with clear cat features and additional elements like trees, enhancing the island concept.
The fish-shaped clouds are distinct and align well with the prompt.
Player 2's image is more abstract and lacks the island and multiple fish-shaped clouds, making it less adherent to the prompt.
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
"An astronaut grilling burgers on the moon under a disco ball."
"An octopus playing a grand piano at a coral reef concert"
"Neon cactus in a disco dance-off with a robot"
