Creative Challenge
"A snail with a city skyline shell, in geometric style"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f5f7fa" />
<stop offset="100%" stop-color="#c3cfe2" />
</linearGradient>
<linearGradient id="snailBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#64b3f4" />
<stop offset="100%" stop-color="#7a5fff" />
</linearGradient>
<linearGradient id="skylineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4a00e0" />
<stop offset="100%" stop-color="#8e2de2" />
</linearGradient>
<pattern id="windowPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<rect x="1" y="1" width="3" height="3" fill="#ffd700" opacity="0.8" />
</pattern>
<pattern id="starPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="0.5" fill="white" />
<circle cx="15" cy="15" r="0.7" fill="white" />
<circle cx="10" cy="2" r="0.3" fill="white" />
</pattern>
<pattern id="groundPattern" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<polygon points="0,15 15,0 30,15 15,30" fill="#2a5a46" />
</pattern>
</defs>
<!-- Background with geometric shapes -->
<rect x="0" y="0" width="300" height="300" fill="url(#bgGradient)" />
<polygon points="0,0 50,0 0,50" fill="#e0e6ed" opacity="0.5" />
<polygon points="300,0 300,50 250,0" fill="#e0e6ed" opacity="0.5" />
<polygon points="0,300 0,250 50,300" fill="#e0e6ed" opacity="0.5" />
<polygon points="300,300 250,300 300,250" fill="#e0e6ed" opacity="0.5" />
<!-- Geometric sun/moon -->
<circle cx="50" cy="50" r="20" fill="#ffd700" />
<circle cx="50" cy="50" r="17" fill="#ffeb3b" />
<polygon points="50,25 55,35 65,35 57,42 60,52 50,47 40,52 43,42 35,35 45,35" fill="#fff5cc" opacity="0.6" />
<!-- Clouds in geometric style -->
<g id="clouds">
<rect x="80" y="40" width="30" height="10" rx="5" ry="5" fill="white" opacity="0.8" />
<rect x="75" y="45" width="20" height="8" rx="4" ry="4" fill="white" opacity="0.8" />
<rect x="95" y="43" width="25" height="9" rx="4.5" ry="4.5" fill="white" opacity="0.8" />
<rect x="180" y="60" width="40" height="12" rx="6" ry="6" fill="white" opacity="0.6" />
<rect x="175" y="65" width="25" height="10" rx="5" ry="5" fill="white" opacity="0.6" />
<rect x="195" y="63" width="35" height="11" rx="5.5" ry="5.5" fill="white" opacity="0.6" />
</g>
<!-- Ground with geometric patterns -->
<rect x="0" y="220" width="300" height="80" fill="#3a7563" />
<path d="M 0,220 C 50,235 100,225 150,230 C 200,235 250,225 300,230 L 300,300 L 0,300 Z"
fill="#2d6a4f" />
<rect x="0" y="240" width="300" height="60" fill="url(#groundPattern)" opacity="0.3" />
<!-- Geometric grass elements -->
<g id="grass">
<polygon points="20,220 30,200 40,220" fill="#4ade80" />
<polygon points="50,220 55,205 60,220" fill="#4ade80" />
<polygon points="70,220 85,195 100,220" fill="#4ade80" />
<polygon points="250,220 260,200 270,220" fill="#4ade80" />
<polygon points="280,220 290,205 300,220" fill="#4ade80" />
</g>
<!-- Slime trail with geometric elements -->
<path d="M 100,220 C 140,230 180,230 240,220 L 240,225 C 180,235 140,235 100,225 Z"
fill="#64b3f4" opacity="0.5" />
<g fill="#a0d2f7" opacity="0.7">
<circle cx="120" cy="222" r="2" />
<circle cx="140" cy="224" r="2" />
<circle cx="160" cy="223" r="2" />
<circle cx="180" cy="222" r="2" />
<circle cx="200" cy="221" r="2" />
<circle cx="220" cy="222" r="2" />
</g>
<!-- Snail Shell (City Skyline) -->
<g id="cityShell">
<!-- Base spiral shape for the shell -->
<path d="M 170,140
C 200,130 230,140 240,170
C 250,200 240,230 210,240
C 180,250 150,240 140,210
C 135,195 140,180 150,170
C 155,165 160,162 170,160
C 185,155 195,160 200,170
C 205,180 200,190 190,195
C 180,200 170,195 165,185
C 162,180 165,175 170,172
C 175,170 180,172 182,175
C 184,178 182,182 178,183"
fill="url(#skylineGradient)" stroke="#333" stroke-width="1" />
<!-- City buildings on the shell in geometric style -->
<!-- Building 1 (Tall skyscraper) -->
<rect x="185" y="125" width="15" height="40" fill="#2c3e50" />
<rect x="187" y="115" width="11" height="10" fill="#2c3e50" />
<rect x="190" y="105" width="5" height="10" fill="#2c3e50" />
<polygon points="190,105 195,105 192.5,95" fill="#2c3e50" />
<!-- Building 2 -->
<rect x="205" y="140" width="18" height="30" fill="#34495e" />
<polygon points="205,140 223,140 220,130 208,130" fill="#34495e" />
<!-- Building 3 -->
<rect x="228" y="150" width="12" height="25" fill="#2c3e50" />
<rect x="231" y="140" width="6" height="10" fill="#2c3e50" />
<!-- Building 4 -->
<rect x="220" y="175" width="20" height="35" fill="#34495e" />
<polygon points="220,175 240,175 230,165" fill="#34495e" />
<!-- Building 5 -->
<rect x="190" y="185" width="15" height="30" fill="#2c3e50" />
<rect x="193" y="175" width="9" height="10" fill="#2c3e50" />
<!-- Building 6 -->
<rect x="165" y="175" width="20" height="25" fill="#34495e" />
<rect x="170" y="165" width="10" height="10" fill="#34495e" />
<!-- Building 7 -->
<rect x="150" y="160" width="10" height="20" fill="#2c3e50" />
<!-- Windows for the buildings (using pattern) -->
<rect x="187" y="125" width="11" height="38" fill="url(#windowPattern)" opacity="0.7" />
<rect x="207" y="142" width="14" height="26" fill="url(#windowPattern)" opacity="0.7" />
<rect x="230" y="152" width="8" height="21" fill="url(#windowPattern)" opacity="0.7" />
<rect x="223" y="180" width="14" height="28" fill="url(#windowPattern)" opacity="0.7" />
<rect x="192" y="190" width="11" height="23" fill="url(#windowPattern)" opacity="0.7" />
<rect x="168" y="180" width="14" height="18" fill="url(#windowPattern)" opacity="0.7" />
<rect x="152" y="165" width="6" height="13" fill="url(#windowPattern)" opacity="0.7" />
<!-- Sky backdrop for the city with stars -->
<path d="M 170,140
C 200,130 230,140 240,170
C 250,200 240,230 210,240
C 180,250 150,240 140,210
C 135,195 140,180 150,170
C 155,165 160,162 170,160"
fill="url(#starPattern)" fill-opacity="0.3" />
<!-- Geometric details on shell -->
<circle cx="210" cy="200" r="5" fill="#6c5ce7" opacity="0.7" />
<circle cx="175" cy="225" r="4" fill="#6c5ce7" opacity="0.7" />
<polygon points="155,210 165,215 155,220" fill="#6c5ce7" opacity="0.7" />
<polygon points="200,150 210,155 200,160" fill="#6c5ce7" opacity="0.7" />
</g>
<!-- Snail body -->
<g id="snailBody">
<!-- Main body in geometric style -->
<path d="M 100,200 C 70,200 50,180 50,150 C 50,120 70,100 110,100 C 140,100 170,110 170,140 C 170,170 150,200 100,200 Z"
fill="url(#snailBodyGradient)" />
<!-- Geometric pattern on body -->
<g fill="#ffffff" opacity="0.2">
<polygon points="80,130 90,120 100,130 90,140" />
<polygon points="110,120 120,110 130,120 120,130" />
<polygon points="140,130 150,120 160,130 150,140" />
<polygon points="70,160 80,150 90,160 80,170" />
<polygon points="100,170 110,160 120,170 110,180" />
<polygon points="130,160 140,150 150,160 140,170" />
</g>
<!-- Head and antennas in geometric style -->
<path d="M 50,150 L 35,140 L 25,130 L 20,120 L 20,110 L 25,105 L 35,105 L 40,110 L 42,112"
fill="none" stroke="#7a5fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M 50,150 L 45,135 L 40,120 L 40,110 L 45,100 L 55,95 L 65,100 L 67,102"
fill="none" stroke="#7a5fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
<!-- Eyes with geometric design -->
<circle cx="25" cy="115" r="5" fill="#333" />
<circle cx="25" cy="115" r="2" fill="#ffffff" />
<circle cx="45" cy="105" r="5" fill="#333" />
<circle cx="45" cy="105" r="2" fill="#ffffff" />
<!-- Base/foot with geometric elements -->
<path d="M 100,200 C 120,210 150,210 170,200 L 180,200 C 200,210 220,210 240,200 L 240,220 L 100,220 Z"
fill="#5a3dff" />
<!-- Geometric texture for foot -->
<g fill="#ffffff" opacity="0.2">
<rect x="120" y="205" width="10" height="10" />
<rect x="150" y="205" width="10" height="10" />
<rect x="180" y="205" width="10" height="10" />
<rect x="210" y="205" width="10" height="10" />
</g>
</g>
<!-- Abstract geometric elements to enhance the composition -->
<g id="abstract-elements">
<polygon points="10,280 30,260 50,280" fill="#2c3e50" opacity="0.5" />
<polygon points="260,280 280,260 300,280" fill="#2c3e50" opacity="0.5" />
<rect x="150" y="270" width="30" height="30" rx="5" ry="5" fill="#34495e" opacity="0.3" />
</g>
</svg>
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skylineGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff6347"/>
<stop offset="100%" stop-color="#ffa500"/>
</linearGradient>
<linearGradient id="bodyGradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#00bfff"/>
<stop offset="100%" stop-color="#1e90ff"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="#8fbc8f" />
<g transform="translate(150, 150)">
<path d="M-60 0 a60 60 0 0 1 120 0" fill="url(#skylineGradient)" />
<path d="M-50 0 a50 50 0 0 1 100 0" fill="#ffffff" />
<polygon points="-40,0 40,0 30,50 -30,50" fill="url(#skylineGradient)" />
<polygon points="-30,50 30,50 20,100 -20,100" fill="url(#skylineGradient)" />
<polygon points="-20,100 20,100 10,150 -10,150" fill="url(#skylineGradient)" />
<polygon points="-10,150 10,150 0,200 0,200" fill="url(#skylineGradient)" />
<circle cx="0" cy="0" r="40" fill="url(#bodyGradient)" />
<circle cx="0" cy="0" r="35" fill="#ffffff" />
<circle cx="0" cy="0" r="30" fill="url(#bodyGradient)" />
<circle cx="0" cy="0" r="25" fill="#ffffff" />
<circle cx="0" cy="0" r="20" fill="url(#bodyGradient)" />
<circle cx="0" cy="0" r="15" fill="#ffffff" />
<circle cx="0" cy="0" r="10" fill="url(#bodyGradient)" />
<circle cx="0" cy="0" r="5" fill="#ffffff" />
<path d="M-20 -30 Q -10 -20 0 -10 T 20 10" stroke="black" stroke-width="2" fill="none" />
<path d="M20 -30 Q 10 -20 0 -10 T -20 10" stroke="black" stroke-width="2" fill="none" />
</g>
</svg>Judge's Analysis
Player 1's image creatively combines a snail and a city skyline on its shell using a geometric style, adhering closely to the prompt.
The use of shapes and colors provides a whimsical yet clear interpretation.
Player 2's submission does not effectively represent the concept of a snail with a city skyline shell, making it less aligned with 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
"Floating city above a surreal ocean of clouds"
"A clockwork octopus juggling planets in a starry void"
"A cat riding a surfboard on a rainbow wave"
"Rainbow jellyfish in a cyberpunk cityscape"
"Surreal clock melting over a giant lily pad under a purple sky"
"Moonlit owl wearing a crown of stars"
