Creative Challenge
"Floating city atop a giant jellyfish, geometric style"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background: Ocean -->
<rect x="0" y="0" width="300" height="300" fill="#2196f3" />
<!-- Jellyfish Body -->
<circle cx="150" cy="150" r="100" fill="#f06292" />
<!-- Jellyfish Tentacles -->
<path d="M90,200 C70,240 110,250 110,300 Q150,280 190,300 Q190,250 110,200" fill="#ffb74d" />
<path d="M95,170 C110,190 140,160 110,130 Q120,170 160,150 Q150,180 140,150 Q160,170 140,130 L95,170" fill="#ffb74d" />
<path d="M210,200 C230,240 190,250 190,300 Q150,280 110,300 Q110,250 190,200" fill="#ffb74d" />
<path d="M205,170 C190,190 160,160 190,130 Q180,170 140,150 Q150,180 160,150 Q140,170 160,130 L205,170" fill="#ffb74d" />
<!-- City Buildings -->
<rect x="50" y="50" width="60" height="120" fill="#90a4ae" />
<rect x="120" y="80" width="40" height="90" fill="#90a4ae" />
<rect x="180" y="60" width="70" height="110" fill="#90a4ae" />
<!-- Windows on Buildings -->
<circle cx="65" cy="70" r="5" fill="#ffeb3b" />
<circle cx="85" cy="100" r="5" fill="#ffeb3b" />
<circle cx="145" cy="90" r="5" fill="#ffeb3b" />
<circle cx="165" cy="120" r="5" fill="#ffeb3b" />
<circle cx="210" cy="80" r="5" fill="#ffeb3b" />
<circle cx="240" cy="110" r="5" fill="#ffeb3b" />
<!-- Geometric Design on City -->
<path d="M55,35 L40,70 H70 Z" fill="#f06292" />
<path d="M125,55 L110,90 H140 Z" fill="#f06292" />
<path d="M155,35 L140,70 H170 Z" fill="#f06292" />
<path d="M220,45 L205,80 H235 Z" fill="#f06292" />
</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="100%">
<stop offset="0%" stop-color="#1a2980" />
<stop offset="100%" stop-color="#26d0ce" />
</linearGradient>
<linearGradient id="jellyfishGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff6bcb" />
<stop offset="100%" stop-color="#c53dd0" />
</linearGradient>
<linearGradient id="tentacleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff6bcb" />
<stop offset="100%" stop-color="#ffb6e7" />
</linearGradient>
<linearGradient id="buildingGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f1f1f1" />
<stop offset="100%" stop-color="#d0d0d0" />
</linearGradient>
<linearGradient id="buildingGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#90ddff" />
<stop offset="100%" stop-color="#44a7d6" />
</linearGradient>
<linearGradient id="buildingGradient3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f0cc40" />
<stop offset="100%" stop-color="#e6a600" />
</linearGradient>
<pattern id="windows" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="4" height="4" x="1" y="1" fill="#303952" />
<rect width="4" height="4" x="6" y="6" fill="#303952" />
</pattern>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="4" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Bubbles -->
<circle cx="50" cy="150" r="3" fill="white" opacity="0.6" />
<circle cx="80" cy="200" r="2" fill="white" opacity="0.6" />
<circle cx="150" cy="220" r="4" fill="white" opacity="0.6" />
<circle cx="220" cy="180" r="2.5" fill="white" opacity="0.6" />
<circle cx="260" cy="130" r="3.5" fill="white" opacity="0.6" />
<!-- Jellyfish Body -->
<path d="M150,170 C190,170 220,150 220,110 C220,70 190,50 150,50 C110,50 80,70 80,110 C80,150 110,170 150,170 Z" fill="url(#jellyfishGradient)" opacity="0.9" />
<!-- Jellyfish Glow -->
<path d="M150,170 C190,170 220,150 220,110 C220,70 190,50 150,50 C110,50 80,70 80,110 C80,150 110,170 150,170 Z" fill="white" opacity="0.4" filter="url(#glow)" />
<!-- Tentacles -->
<path d="M100,160 Q90,200 95,240 Q100,245 105,240 Q100,200 110,160" fill="url(#tentacleGradient)" opacity="0.8" />
<path d="M120,165 Q115,210 120,250 Q125,255 130,250 Q125,210 130,165" fill="url(#tentacleGradient)" opacity="0.8" />
<path d="M140,170 Q140,215 145,260 Q150,265 155,260 Q150,215 150,170" fill="url(#tentacleGradient)" opacity="0.8" />
<path d="M160,170 Q165,215 160,260 Q165,265 170,260 Q165,215 170,170" fill="url(#tentacleGradient)" opacity="0.8" />
<path d="M180,165 Q190,210 185,250 Q190,255 195,250 Q190,210 190,165" fill="url(#tentacleGradient)" opacity="0.8" />
<path d="M200,160 Q210,200 205,240 Q210,245 215,240 Q210,200 210,160" fill="url(#tentacleGradient)" opacity="0.8" />
<!-- Floating Platform -->
<path d="M100,110 L200,110 L220,130 L80,130 Z" fill="#d0d0d0" />
<path d="M80,130 L220,130 L200,150 L100,150 Z" fill="#b0b0b0" />
<!-- City Buildings -->
<!-- Central Tower -->
<path d="M145,60 L155,60 L155,110 L145,110 Z" fill="url(#buildingGradient1)" />
<path d="M140,70 L160,70 L160,110 L140,110 Z" fill="url(#buildingGradient1)" />
<rect x="143" y="65" width="14" height="20" fill="url(#windows)" />
<rect x="143" y="90" width="14" height="15" fill="url(#windows)" />
<!-- Left Buildings -->
<path d="M110,85 L125,85 L125,110 L110,110 Z" fill="url(#buildingGradient2)" />
<rect x="112" y="90" width="11" height="15" fill="url(#windows)" />
<path d="M130,75 L140,75 L140,110 L130,110 Z" fill="url(#buildingGradient3)" />
<rect x="132" y="80" width="6" height="25" fill="url(#windows)" />
<!-- Right Buildings -->
<path d="M160,80 L170,80 L170,110 L160,110 Z" fill="url(#buildingGradient3)" />
<rect x="162" y="85" width="6" height="20" fill="url(#windows)" />
<path d="M175,90 L190,90 L190,110 L175,110 Z" fill="url(#buildingGradient2)" />
<rect x="177" y="95" width="11" height="10" fill="url(#windows)" />
<!-- Geometric Decorative Elements -->
<circle cx="150" cy="55" r="5" fill="#f5f5f5" />
<polygon points="150,82 145,90 155,90" fill="#f0cc40" />
<rect x="120" y="80" width="5" height="5" fill="#90ddff" />
<rect x="175" y="85" width="5" height="5" fill="#90ddff" />
<!-- Additional Geometric City Elements -->
<rect x="105" y="115" width="90" height="5" fill="#303952" />
<rect x="115" y="120" width="70" height="3" fill="#303952" />
<circle cx="150" cy="125" r="3" fill="#f0cc40" />
<!-- Glowing Spots on Jellyfish -->
<circle cx="120" cy="100" r="2" fill="white" opacity="0.8" />
<circle cx="180" cy="110" r="2" fill="white" opacity="0.8" />
<circle cx="140" cy="130" r="2" fill="white" opacity="0.8" />
<circle cx="170" cy="140" r="2" fill="white" opacity="0.8" />
<circle cx="110" cy="120" r="2" fill="white" opacity="0.8" />
<circle cx="190" cy="125" r="2" fill="white" opacity="0.8" />
</svg>Judge's Analysis
Player 2's submission adheres more closely to the prompt with a clear depiction of a city atop a jellyfish.
The use of geometric shapes is evident, and the color gradient background adds depth and visual appeal.
Player 1's image lacks clarity in representing the floating city concept and doesn't utilize geometric style as effectively.
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
"Floating umbrella cityscape"
"A giraffe in a spacesuit floating through a vibrant nebula"
"Iridescent squid playing chess on a floating lily pad"
"Juggling octopus balancing on a unicycle"
"Rainbow-eating cat beneath a swirling starry sky"
"Melting clock face dripping off a cactus"
