Creative Challenge
"Floating city on a giant turtle's shell, geometric style"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Define gradients and patterns -->
<defs>
<linearGradient id="turtleShellGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#557a30"/>
<stop offset="100%" stop-color="#a2c523"/>
</linearGradient>
<linearGradient id="cityGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ffde7d"/>
<stop offset="100%" stop-color="#ffa500"/>
</linearGradient>
<pattern id="patternGeo" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="10" height="10" fill="transparent"/>
<path d="M0,0 L10,10 M10,0 L0,10" stroke="#ffffff" stroke-width="0.5"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#0c1445"/>
<!-- Draw the giant turtle's shell, a rounded polygon with geometric patterns -->
<g id="turtleShell">
<!-- Turtle shell base -->
<ellipse cx="150" cy="220" rx="110" ry="45" fill="url(#turtleShellGradient)" stroke="#3d5c0a" stroke-width="3"/>
<!-- Shell pattern: geometric division -->
<g stroke="#3d5c0a" stroke-width="1">
<path d="M40,220 Q150,130 260,220" fill="none"/>
<path d="M40,220 L260,220" />
<path d="M150,130 L150,265" />
<path d="M90,175 L210,175" />
<path d="M105,250 L195,250" />
</g>
<!-- Overlay subtle pattern -->
<ellipse cx="150" cy="220" rx="110" ry="45" fill="url(#patternGeo)" opacity="0.3"/>
</g>
<!-- Floating city above the shell -->
<g id="floatingCity" transform="translate(0,-50)">
<!-- Floating platform: an abstract platform with geometric strokes -->
<polygon points="40,120 260,120 240,140 60,140" fill="url(#cityGradient)" stroke="#aa5500" stroke-width="2"/>
<!-- City buildings with geometric shapes -->
<g fill="#243b55">
<!-- Building 1 -->
<rect x="60" y="80" width="20" height="40" fill="#243b55" stroke="#000" stroke-width="1"/>
<polygon points="60,80 70,70 80,80" fill="#556680" stroke="#000" stroke-width="0.5"/>
<!-- Building 2 -->
<rect x="90" y="70" width="25" height="50" fill="#34495e" stroke="#000" stroke-width="1"/>
<polygon points="90,70 102.5,55 115,70" fill="#5d6d7e" stroke="#000" stroke-width="0.5"/>
<!-- Building 3 -->
<rect x="130" y="60" width="20" height="60" fill="#2c3e50" stroke="#000" stroke-width="1"/>
<polygon points="130,60 140,45 150,60" fill="#4a6a80" stroke="#000" stroke-width="0.5"/>
<!-- Building 4 -->
<rect x="160" y="75" width="30" height="45" fill="#1f2e38" stroke="#000" stroke-width="1"/>
<polygon points="160,75 175,60 190,75" fill="#3f5a6b" stroke="#000" stroke-width="0.5"/>
<!-- Building 5 -->
<rect x="200" y="85" width="18" height="35" fill="#2d3e50" stroke="#000" stroke-width="1"/>
<polygon points="200,85 209,73 218,85" fill="#475a70" stroke="#000" stroke-width="0.5"/>
</g>
<!-- Decorative geometric details: lines to emphasize floating effect -->
<g stroke="#ffffff" stroke-dasharray="4,2" stroke-width="0.8">
<line x1="40" y1="120" x2="40" y2="80"/>
<line x1="260" y1="120" x2="260" y2="85"/>
</g>
</g>
<!-- Additional floating elements to enhance atmosphere -->
<g opacity="0.7">
<circle cx="75" cy="40" r="8" fill="#ffdd59" />
<circle cx="220" cy="35" r="6" fill="#ffdd59" />
<circle cx="140" cy="20" r="5" fill="#ffdd59" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a237e" />
<stop offset="100%" stop-color="#7986cb" />
</linearGradient>
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0277bd" />
<stop offset="100%" stop-color="#01579b" />
</linearGradient>
<pattern id="shellPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<polygon points="0,0 10,10 0,20" fill="#8d6e63" />
<polygon points="20,0 10,10 20,20" fill="#6d4c41" />
<polygon points="0,0 20,0 10,10" fill="#a1887f" />
<polygon points="0,20 20,20 10,10" fill="#5d4037" />
</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 x="0" y="0" width="300" height="220" fill="url(#skyGradient)" />
<rect x="0" y="220" width="300" height="80" fill="url(#waterGradient)" />
<!-- Stars -->
<g fill="#ffffff">
<circle cx="30" cy="30" r="1" />
<circle cx="60" cy="45" r="1.5" />
<circle cx="100" cy="20" r="1" />
<circle cx="150" cy="35" r="2" />
<circle cx="200" cy="25" r="1" />
<circle cx="250" cy="40" r="1.5" />
<circle cx="270" cy="15" r="1" />
<circle cx="120" cy="50" r="1" />
<circle cx="220" cy="60" r="1" />
</g>
<!-- Turtle Body -->
<ellipse cx="150" cy="250" rx="120" ry="40" fill="#3e2723" />
<!-- Turtle Shell -->
<ellipse cx="150" cy="190" rx="90" ry="60" fill="url(#shellPattern)" />
<ellipse cx="150" cy="190" rx="80" ry="50" fill="#4e342e" stroke="#3e2723" stroke-width="1" />
<!-- Turtle Head -->
<path d="M60,240 Q50,220 65,210 Q80,205 85,220 Z" fill="#5d4037" />
<circle cx="65" cy="215" r="2" fill="#000000" />
<!-- Turtle Legs -->
<path d="M80,250 Q60,280 40,270 Q30,260 45,245 Z" fill="#5d4037" />
<path d="M220,250 Q240,280 260,270 Q270,260 255,245 Z" fill="#5d4037" />
<path d="M100,255 Q90,285 70,280 Q60,270 75,250 Z" fill="#5d4037" />
<path d="M200,255 Q210,285 230,280 Q240,270 225,250 Z" fill="#5d4037" />
<!-- Turtle Tail -->
<path d="M240,240 Q270,230 280,240 Q275,250 260,245 Z" fill="#5d4037" />
<!-- City Base -->
<g transform="translate(150, 190)">
<!-- Geometric City Buildings -->
<g filter="url(#glow)">
<!-- Central Tower -->
<rect x="-8" y="-70" width="16" height="70" fill="#e1f5fe" stroke="#b3e5fc" stroke-width="1" />
<polygon points="-12,-70 12,-70 0,-90" fill="#81d4fa" stroke="#4fc3f7" stroke-width="1" />
<rect x="-4" y="-60" width="8" height="10" fill="#29b6f6" />
<rect x="-4" y="-45" width="8" height="10" fill="#29b6f6" />
<rect x="-4" y="-30" width="8" height="10" fill="#29b6f6" />
<rect x="-4" y="-15" width="8" height="10" fill="#29b6f6" />
<!-- Left Buildings -->
<g transform="translate(-30, -10)">
<rect x="-15" y="-40" width="30" height="40" fill="#e1f5fe" stroke="#b3e5fc" stroke-width="1" />
<rect x="-10" y="-35" width="5" height="5" fill="#29b6f6" />
<rect x="0" y="-35" width="5" height="5" fill="#29b6f6" />
<rect x="-10" y="-25" width="5" height="5" fill="#29b6f6" />
<rect x="0" y="-25" width="5" height="5" fill="#29b6f6" />
<rect x="-10" y="-15" width="5" height="5" fill="#29b6f6" />
<rect x="0" y="-15" width="5" height="5" fill="#29b6f6" />
</g>
<g transform="translate(-55, 0)">
<polygon points="0,-30 -20,-30 -15,-50 -5,-50" fill="#b3e5fc" stroke="#81d4fa" stroke-width="1" />
<rect x="-17" y="-30" width="14" height="30" fill="#e1f5fe" stroke="#b3e5fc" stroke-width="1" />
<rect x="-14" y="-25" width="4" height="4" fill="#29b6f6" />
<rect x="-7" y="-25" width="4" height="4" fill="#29b6f6" />
<rect x="-14" y="-15" width="4" height="4" fill="#29b6f6" />
<rect x="-7" y="-15" width="4" height="4" fill="#29b6f6" />
</g>
<!-- Right Buildings -->
<g transform="translate(30, -5)">
<rect x="-10" y="-45" width="20" height="45" fill="#e1f5fe" stroke="#b3e5fc" stroke-width="1" />
<polygon points="-10,-45 10,-45 0,-60" fill="#81d4fa" stroke="#4fc3f7" stroke-width="1" />
<rect x="-7" y="-40" width="4" height="4" fill="#29b6f6" />
<rect x="3" y="-40" width="4" height="4" fill="#29b6f6" />
<rect x="-7" y="-30" width="4" height="4" fill="#29b6f6" />
<rect x="3" y="-30" width="4" height="4" fill="#29b6f6" />
<rect x="-7" y="-20" width="4" height="4" fill="#29b6f6" />
<rect x="3" y="-20" width="4" height="4" fill="#29b6f6" />
<rect x="-7" y="-10" width="4" height="4" fill="#29b6f6" />
<rect x="3" y="-10" width="4" height="4" fill="#29b6f6" />
</g>
<g transform="translate(50, 0)">
<rect x="0" y="-25" width="15" height="25" fill="#e1f5fe" stroke="#b3e5fc" stroke-width="1" />
<rect x="3" y="-20" width="4" height="4" fill="#29b6f6" />
<rect x="3" y="-10" width="4" height="4" fill="#29b6f6" />
</g>
<!-- Connecting Bridges -->
<path d="M-20,-30 L20,-30" stroke="#b3e5fc" stroke-width="2" />
<path d="M-45,-20 L-30,-20" stroke="#b3e5fc" stroke-width="2" />
<path d="M15,-25 L30,-25" stroke="#b3e5fc" stroke-width="2" />
<!-- Geometric Ornaments -->
<circle cx="0" cy="-70" r="3" fill="#fdd835" />
<circle cx="-30" cy="-40" r="2" fill="#fdd835" />
<circle cx="30" cy="-45" r="2" fill="#fdd835" />
</g>
</g>
<!-- Water Ripples -->
<path d="M70,260 Q90,255 110,260 Q130,265 150,260 Q170,255 190,260 Q210,265 230,260" fill="none" stroke="#b3e5fc" stroke-width="1" opacity="0.6" />
<path d="M80,270 Q100,265 120,270 Q140,275 160,270 Q180,265 200,270 Q220,275 240,270" fill="none" stroke="#b3e5fc" stroke-width="1" opacity="0.4" />
<!-- Clouds -->
<g fill="#ffffff" opacity="0.7">
<ellipse cx="50" cy="80" rx="20" ry="10" />
<ellipse cx="70" cy="75" rx="15" ry="8" />
<ellipse cx="35" cy="75" rx="10" ry="6" />
<ellipse cx="200" cy="100" rx="25" ry="12" />
<ellipse cx="220" cy="95" rx="20" ry="10" />
<ellipse cx="180" cy="95" rx="15" ry="8" />
</g>
</svg>Judge's Analysis
Player 2's image better adheres to the prompt with a clear depiction of a city on a turtle's shell, incorporating a geometric style.
The use of color and shapes effectively conveys the theme, while the overall composition is more visually appealing and technically polished.
Player 1's image lacks clarity in linking the city to the turtle shell and appears more abstract and less cohesive.
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
"Rainbow-hued octopus playing chess with a cat on a cloud"
"Teapot-shaped spaceship orbiting a giant floating strawberry"
"Octopus in a top hat juggling flaming swords"
"A giraffe in a trench coat under a streetlight, noir style"
