Creative Challenge
"A snail with a cityscape shell, skyscrapers and streets spiraling upwards"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Background with gradient sky -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1a3f7e;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4a6b9e;stop-opacity:1" />
</linearGradient>
<path id="citySpiral" d="M150 150 L151 149 L152 148 L153 147 L154 146 L155 145 L156 144 L157 143 L158 142 L159 141 L160 140 L161 139 L162 138 L163 137 L164 136 L165 135 L166 134 L167 133 L168 132 L169 131 L170 130 L171 129 L172 128 L173 127 L174 126 L175 125 L176 124 L177 123 L178 122 L179 121 L180 120 L181 119 L182 118 L183 117 L184 116 L185 115 L186 114 L187 113 L188 112 L189 111 L190 110 L191 109 L192 108 L193 107 L194 106 L195 105 L196 104 L197 103 L198 102 L199 101 L200 100 L201 99 L202 98 L203 97 L204 96 L205 95 L206 94 L207 93 L208 92 L209 91 L210 90 L211 89 L212 88 L213 87 L214 86 L215 85 L216 84 L217 83 L218 82 L219 81 L220 80 L221 79 L222 78 L223 77 L224 76 L225 75 L226 74 L227 73 L228 72 L229 71 L230 70 L231 69 L232 68 L233 67 L234 66 L235 65 L236 64 L237 63 L238 62 L239 61 L240 60 L241 59 L242 58 L243 57 L244 56 L245 55 L246 54 L247 53 L248 52 L249 51 L250 50 L251 49 L252 48 L253 47 L254 46 L255 45 L256 44 L257 43 L258 42 L259 41 L260 40 L261 39 L262 38 L263 37 L264 36 L265 35 L266 34 L267 33 L268 32 L269 31 L270 30 L271 29 L272 28 L273 27 L274 26 L275 25 L276 24 L277 23 L278 22 L279 21 L280 20 L281 19 L282 18 L283 17 L284 16 L285 15 L286 14 L287 13 L288 12 L289 11 L290 10 L291 9 L292 8 L293 7 L294 6 L295 5 L296 4 L297 3 L298 2 L299 1 L300 0 L300 1 L299 2 L298 3 L297 4 L296 5 L295 6 L294 7 L293 8 L292 9 L291 10 L290 11 L289 12 L288 13 L287 14 L286 15 L285 16 L284 17 L283 18 L282 19 L281 20 L280 21 L279 22 L278 23 L277 24 L276 25 L275 26 L274 27 L273 28 L272 29 L271 30 L270 31 L269 32 L268 33 L267 34 L266 35 L265 36 L264 37 L263 38 L262 39 L261 40 L260 41 L259 42 L258 43 L257 44 L256 45 L255 46 L254 47 L253 48 L252 49 L251 50 L250 51 L249 52 L248 53 L247 54 L246 55 L245 56 L244 57 L243 58 L242 59 L241 60 L240 61 L239 62 L238 63 L237 64 L236 65 L235 66 L234 67 L233 68 L232 69 L231 70 L230 71 L229 72 L228 73 L227 74 L226 75 L225 76 L224 77 L223 78 L222 79 L221 80 L220 81 L219 82 L218 83 L217 84 L216 85 L215 86 L214 87 L213 88 L212 89 L211 90 L210 91 L209 92 L208 93 L207 94 L206 95 L205 96 L204 97 L203 98 L202 99 L201 100 L200 101 L199 102 L198 103 L197 104 L196 105 L195 106 L194 107 L193 108 L192 109 L191 110 L190 111 L189 112 L188 113 L187 114 L186 115 L185 116 L184 117 L183 118 L182 119 L181 120 L180 121 L179 122 L178 123 L177 124 L176 125 L175 126 L174 127 L173 128 L172 129 L171 130 L170 131 L169 132 L168 133 L167 134 L166 135 L165 136 L164 137 L163 138 L162 139 L161 140 L160 141 L159 142 L158 143 L157 144 L156 145 L155 146 L154 147 L153 148 L152 149 L151 150 L150 150 Z"/>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Snail body -->
<ellipse cx="150" cy="220" rx="40" ry="30" fill="#a5d6a7" opacity="0.8"/>
<path d="M150 220 L160 210 L140 210 L150 220" fill="#a5d6a7" opacity="0.8"/>
<!-- Shell with cityscape spiral -->
<g transform="translate(150,150)">
<use xlink:href="#citySpiral" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<path d="M0 0 L30 0 L30 10 L25 15 L20 20 L15 25 L10 30 L5 35 L0 40 L-5 35 L-10 30 L-15 25 L-20 20 L-25 15 L-30 10 L-30 0 Z" fill="#4a6b9e" opacity="0.7"/>
<path d="M50 0 L80 0 L80 10 L75 15 L70 20 L65 25 L60 30 L55 35 L50 40 L45 35 L40 30 L35 25 L30 20 L25 15 L20 10 L15 5 L10 0 L5 5 L0 10 L-5 15 L-10 20 L-15 25 L-20 30 L-25 35 L-30 40 L-35 35 L-40 30 L-45 25 L-50 20 L-55 15 L-60 10 L-65 5 L-70 0 L-75 5 L-80 10 L-85 15 L-90 20 L-95 25 L-100 30 L-105 35 L-110 40 L-115 35 L-120 30 L-125 25 L-130 20 L-135 15 L-140 10 L-145 5 L-150 0 L-155 5 L-160 10 L-165 15 L-170 20 L-175 25 L-180 30 L-185 35 L-190 40 L-195 35 L-200 30 L-205 25 L-210 20 L-215 15 L-220 10 L-225 5 L-230 0 L-235 5 L-240 10 L-245 15 L-250 20 L-255 25 L-260 30 L-265 35 L-270 40 L-275 35 L-280 30 L-285 25 L-290 20 L-295 15 L-300 10 L-305 5 L-300 0 Z" fill="#4a6b9e" opacity="0.7"/>
</g>
<!-- Antennae -->
<path d="M140 180 Q140 160 145 150" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<path d="M160 180 Q160 160 155 150" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<circle cx="145" cy="150" r="2" fill="#4a6b9e"/>
<circle cx="155" cy="150" r="2" fill="#4a6b9e"/>
<!-- Face -->
<circle cx="150" cy="200" r="8" fill="#f0f0f0"/>
<circle cx="150" cy="200" r="4" fill="#333"/>
<path d="M140 205 Q150 212 160 205" fill="#f0f0f0"/>
<!-- Legs -->
<path d="M140 220 C140 230 135 235 130 235" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<path d="M160 220 C160 230 165 235 170 235" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<path d="M130 235 Q140 240 150 240" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<path d="M170 235 Q160 240 150 240" stroke="#4a6b9e" stroke-width="2" fill="none"/>
<!-- Shell details -->
<g transform="translate(150,150) scale(0.8) rotate(-45)">
<rect x="-50" y="-50" width="100" height="100" fill="url(#citySpiral)" opacity="0.5"/>
<circle cx="0" cy="0" r="40" fill="none" stroke="#fff" stroke-width="2" opacity="0.3"/>
</g>
<!-- Stars in background -->
<g opacity="0.5">
<circle cx="50" cy="50" r="1" fill="#fff"/>
<circle cx="250" cy="50" r="1" fill="#fff"/>
<circle cx="150" cy="80" r="1" fill="#fff"/>
<circle cx="100" cy="100" r="1" fill="#fff"/>
<circle cx="200" cy="100" r="1" fill="#fff"/>
<circle cx="75" cy="200" r="1" fill="#fff"/>
<circle cx="225" cy="200" r="1" fill="#fff"/>
<circle cx="150" cy="250" r="1" fill="#fff"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:#87ceeb;stop-opacity:1" />
<stop offset="100%" style="stop-color:#1e90ff;stop-opacity:1" />
</linearGradient>
<radialGradient id="shellGradient" cx="50%" cy="50%" r="50%">
<stop offset="30%" style="stop-color:#ffdab9;stop-opacity:1" />
<stop offset="90%" style="stop-color:#ff4500;stop-opacity:1" />
</radialGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Snail Body -->
<ellipse cx="100" cy="200" rx="65" ry="35" fill="#8b4513" />
<circle cx="128" cy="185" r="10" fill="#8b4513" />
<circle cx="72" cy="185" r="10" fill="#8b4513" />
<rect x="110" y="170" width="4" height="18" fill="#2f4f4f" />
<rect x="108" y="164" width="8" height="6" fill="#8b4513" />
<circle cx="112" cy="160" r="2" fill="#000" />
<!-- Snail Shell -->
<path d="M90,200c10,-60,70,-90,130,-55c0,0,-20,30,-30,40c-75,5,-55,45,-100,75Z" fill="url(#shellGradient)" />
<!-- Cityscape on Shell -->
<g transform="translate(110 140) rotate(-10)">
<rect x="15" y="-10" width="6" height="20" fill="#dcdcdc" />
<rect x="25" y="-15" width="6" height="25" fill="#2f4f4f" />
<rect x="35" y="-5" width="5" height="15" fill="#696969" />
<rect x="5" y="5" width="6" height="10" fill="#8b0000" />
<rect x="45" y="0" width="8" height="20" fill="#2e8b57" />
<rect x="0" y="15" width="10" height="12" fill="#4682b4" />
<!-- Windows -->
<rect x="16" y="-8" width="1.5" height="1.5" fill="#fff" />
<rect x="27" y="-13" width="1.5" height="1.5" fill="#fff" />
<rect x="27" y="-8" width="1.5" height="1.5" fill="#fff" />
<rect x="36" y="-3" width="1.5" height="1.5" fill="#fff" />
<rect x="6" y="7" width="1.5" height="1.5" fill="#fff" />
<rect x="6" y="10" width="1.5" height="1.5" fill="#fff" />
<rect x="46" y="2" width="1.5" height="1.5" fill="#fff" />
<rect x="46" y="5" width="1.5" height="1.5" fill="#fff" />
<rect x="1" y="17" width="1.5" height="1.5" fill="#fff" />
<rect x="1" y="20" width="1.5" height="1.5" fill="#fff" />
</g>
</svg>Judge's Analysis
Player 1's submission displays a clearer depiction of a snail with a cityscape shell.
The spiraling effect is well-executed, with buildings and streets on the shell, adhering closely to the prompt.
Player 2's image lacks clarity and does not effectively convey the idea of a cityscape on a snail's shell.
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
"Two-headed owl with neon wings under a cosmic night sky"
"Upside-down city skyline mirrored in a tranquil lake"
"A jellyfish cityscape floating above a mirrored ocean"
"Moonlit jellyfish dance in a night sky"
"Surreal clock melting over a tree branch at sunset"
"Jellyfish in a Teacup Floating Through Space"
