Creative Challenge
"A snail racing a rocket on a winding track under a starry sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for sky -->
<linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#292c71"/>
<stop offset="50%" stop-color="#5b519f"/>
<stop offset="100%" stop-color="#1b2549"/>
</linearGradient>
<!-- Gradient for track -->
<linearGradient id="trackGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e9e1d2"/>
<stop offset="100%" stop-color="#8b7b63"/>
</linearGradient>
<!-- Gradient for snail shell -->
<radialGradient id="shellGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#ecb300"/>
<stop offset="60%" stop-color="#f28e19"/>
<stop offset="100%" stop-color="#bd730c"/>
</radialGradient>
<!-- Gradient for snail body -->
<linearGradient id="snailBodyGrad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#89cfa7"/>
<stop offset="100%" stop-color="#346b51"/>
</linearGradient>
<!-- Gradient for rocket body -->
<linearGradient id="rocketBodyGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#e53a40"/>
<stop offset="100%" stop-color="#8e1d23"/>
</linearGradient>
<!-- Gradient for rocket window -->
<radialGradient id="windowGrad" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#d0eaff"/>
<stop offset="100%" stop-color="#3880b9"/>
</radialGradient>
<!-- Gradient for rocket flame -->
<radialGradient id="flameGrad" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#fff799"/>
<stop offset="50%" stop-color="#f28e19"/>
<stop offset="100%" stop-color="#ed3733"/>
</radialGradient>
<!-- Pattern for track stripes -->
<pattern id="stripes" patternUnits="userSpaceOnUse" width="20" height="20">
<rect x="0" y="0" width="10" height="20" fill="#fff" opacity="0.45"/>
<rect x="10" y="0" width="10" height="20" fill="none"/>
</pattern>
<!-- Snail shadow -->
<radialGradient id="shadowGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#444" stop-opacity="0.2"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<!-- Glow for stars -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffbe6" stop-opacity="0.95"/>
<stop offset="70%" stop-color="#fffbe6" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#fffbe6" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGrad)" />
<!-- Stars & comets -->
<g>
<circle cx="24" cy="32" r="1.3" fill="white" />
<circle cx="56" cy="110" r="1" fill="white" />
<circle cx="276" cy="44" r="1.5" fill="white"/>
<circle cx="220" cy="32" r="1" fill="white"/>
<circle cx="154" cy="28" r="1.2" fill="white"/>
<circle cx="192" cy="70" r="0.7" fill="white"/>
<circle cx="36" cy="202" r="0.85" fill="white"/>
<g>
<!-- Star with glow -->
<circle cx="280" cy="24" r="6" fill="url(#starGlow)" />
<circle cx="280" cy="24" r="1.7" fill="#fff"/>
</g>
<!-- Comet -->
<g opacity="0.72">
<ellipse cx="214" cy="56" rx="2.1" ry="1.1" fill="white">
<animate attributeName="rx" values="2.1;4.6;2.1" dur="1.8s" repeatCount="indefinite" />
</ellipse>
<path d="M210 56 Q217 50, 220 54" stroke="white" stroke-width="1.1" fill="none" opacity="0.5"/>
</g>
</g>
<!-- Winding racing track (3 loops) -->
<g>
<path id="raceTrack"
d="M40 260
Q90 230, 60 180
Q30 135, 105 155
Q180 175, 140 106
Q100 62, 190 71
Q280 80, 200 150
Q160 205, 235 210"
fill="none"
stroke="url(#trackGrad)"
stroke-width="19"
stroke-linecap="round" />
<!-- Track stripes to suggest movement -->
<path
d="M46 255
Q86 227, 64 184
Q38 145, 106 161
Q173 180, 144 109
Q107 71, 191 75
Q274 85, 202 149
Q167 203, 234 207"
fill="none"
stroke="url(#stripes)"
stroke-width="6"
stroke-dasharray="18 15"
stroke-linecap="butt"
opacity="0.5"/>
<!-- Outer glow of the track -->
<path
d="M40 260
Q90 230, 60 180
Q30 135, 105 155
Q180 175, 140 106
Q100 62, 190 71
Q280 80, 200 150
Q160 205, 235 210"
fill="none"
stroke="#fffbe631"
stroke-width="27"/>
</g>
<!-- Snail SHADOW -->
<ellipse cx="65" cy="210" rx="18" ry="7" fill="url(#shadowGrad)" transform="rotate(-16 65 210)" />
<!-- Rocket SHADOW -->
<ellipse cx="125" cy="170" rx="13" ry="5.2" fill="url(#shadowGrad)" transform="rotate(15 125 170)" opacity="0.5"/>
<!-- Rocket (on track, ahead of snail) -->
<g>
<!-- Rocket flame -->
<ellipse cx="114" cy="170" rx="6" ry="12" fill="url(#flameGrad)" transform="rotate(-16 114 170)">
<animate attributeName="ry" values="12;7;12" dur="0.6s" repeatCount="indefinite"/>
</ellipse>
<!-- Rocket body -->
<rect x="120" y="151" width="30" height="38" rx="11" fill="url(#rocketBodyGrad)" transform="rotate(-17 135 170)" />
<!-- Rocket nose -->
<polygon points="134,151 151,157 138,167" fill="#f8db86" stroke="#c8820b" stroke-width="1.3"/>
<!-- Rocket window -->
<ellipse cx="139.5" cy="164" rx="6.2" ry="6.2" fill="url(#windowGrad)" stroke="#74bff6" stroke-width="2"/>
<!-- Fins -->
<polygon points="125,180 117,186 129,185" fill="#2969c7" opacity="0.8"/>
<polygon points="149,181 155,187 141,184" fill="#2969c7" opacity="0.8"/>
<!-- Sweeping speed lines behind rocket -->
<g>
<path d="M106 170 Q110 168, 114 170" stroke="#fff" stroke-width="1.2" fill="none" opacity="0.8"/>
<path d="M102 173 Q108 165, 114 170" stroke="#eaf8fa" stroke-width="2" fill="none" opacity="0.6"/>
</g>
</g>
<!-- Snail (on track a bit behind rocket) -->
<g>
<!-- Shell spiral -->
<ellipse cx="61" cy="205" rx="17" ry="15" fill="url(#shellGrad)" stroke="#e28c20" stroke-width="3"/>
<path d="M63 205
q3 -4, -2 -7
q-5 -2, -7 3
q-1 8, 6 8
q4 -1, 3 -4"
fill="none" stroke="#fff7c3" stroke-width="2"/>
<path d="M64 207
q5 6, -5 7
q-6 -3, 0 -8"
fill="none" stroke="#ab5f17" stroke-width="1.2"/>
<!-- Body -->
<ellipse cx="75" cy="215" rx="18" ry="9" fill="url(#snailBodyGrad)" stroke="#31503d" stroke-width="2.2"/>
<!-- Head -->
<ellipse cx="92" cy="210" rx="7.5" ry="6" fill="#d1fff1" stroke="#31503d" stroke-width="1.3"/>
<!-- Tentacles -->
<g>
<path d="M97 201 Q104 199, 98 210" stroke="#235845" stroke-width="2" fill="none"/>
<circle cx="104" cy="198" r="1.4" fill="#fff9e5" stroke="#235845" stroke-width="0.7"/>
<circle cx="104" cy="198" r="0.32" fill="#25221c"/>
<path d="M92 201 Q88 194, 92 209" stroke="#235845" stroke-width="2" fill="none"/>
<circle cx="87" cy="193" r="1.4" fill="#fff9e5" stroke="#235845" stroke-width="0.7"/>
<circle cx="87" cy="193" r="0.32" fill="#25221c"/>
</g>
<!-- Eye highlight -->
<ellipse cx="104.3" cy="197.7" rx="0.3" ry="0.6" fill="#fff"/>
<!-- Big smile -->
<path d="M93 217
Q97 221, 101 214"
stroke="#399267" stroke-width="1.5" fill="none"/>
<!-- Cheek blush -->
<ellipse cx="96.2" cy="214.5" rx="1.3" ry="0.7" fill="#febada"/>
<!-- Waving a little racing flag from snail shell -->
<g>
<path d="M60.5 191 Q62 189, 64 193" stroke="#1f1f1f" stroke-width="1.2" fill="none"/>
<rect x="62" y="186" width="7" height="5.5" fill="#fff" stroke="#000" stroke-width="0.6" transform="rotate(-12 65.5 189.75)"/>
<!-- Checkered pattern -->
<g>
<rect x="62" y="186" width="3.5" height="2.75" fill="#222"/>
<rect x="65.5" y="188.75" width="3.5" height="2.75" fill="#222"/>
</g>
</g>
<!-- Speed lines behind snail -->
<g>
<path d="M50 222 Q55 210, 62 215" stroke="#bfe8a8" stroke-width="2" fill="none" opacity="0.5"/>
<path d="M46 217 Q52 207, 64 209" stroke="#dde7f6" stroke-width="1.5" fill="none" opacity="0.45"/>
</g>
</g>
<!-- "Finish line" in the far background on the track -->
<g>
<rect x="224" y="203" width="18" height="5" fill="#222" rx="1.2"/>
<g>
<rect x="224" y="203" width="3" height="5" fill="#fff"/>
<rect x="230" y="203" width="3" height="5" fill="#fff"/>
<rect x="236" y="203" width="3" height="5" fill="#fff"/>
<rect x="242" y="203" width="3" height="5" fill="#fff"/>
</g>
<text x="233" y="214" font-size="6" fill="#fff" font-family="monospace" letter-spacing="0.1em">FINISH</text>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Starry Sky -->
<rect x="0" y="0" width="300" height="300" fill="#1A1D23"/>
<g>
<circle cx="50" cy="50" r="2" fill="#F7DC6F"/>
<circle cx="100" cy="150" r="3" fill="#F7DC6F"/>
<circle cx="200" cy="50" r="2" fill="#F7DC6F"/>
<circle cx="250" cy="200" r="3" fill="#F7DC6F"/>
<circle cx="150" cy="250" r="2" fill="#F7DC6F"/>
</g>
<!-- Winding Track -->
<path d="M 50,200 C 100,150 150,100 200,150 C 250,200 200,250 150,250" stroke="#FFFFFF" stroke-width="5" fill="none"/>
<!-- Rocket -->
<g transform="translate(220, 150)">
<rect x="0" y="0" width="20" height="50" fill="#FF69B4"/>
<polygon points="20,0 30,20 20,40" fill="#FF69B4"/>
<circle cx="10" cy="25" r="5" fill="#FFFFFF"/>
<path d="M 0,50 L 20,60 L 0,70" stroke="#FFFFFF" stroke-width="2" fill="none"/>
</g>
<!-- Snail -->
<g transform="translate(80, 200)">
<circle cx="0" cy="0" r="15" fill="#8BC34A"/>
<path d="M -15,0 C -10,-10 10,-10 15,0" fill="#8BC34A"/>
<circle cx="0" cy="0" r="5" fill="#FFFFFF"/>
<path d="M 0,-15 L -5,-20 L 5,-20" stroke="#FFFFFF" stroke-width="2" fill="none"/>
</g>
<!-- Speed Lines -->
<g>
<path d="M 200,150 L 220,150" stroke="#FF69B4" stroke-width="2" fill="none"/>
<path d="M 220,150 L 240,150" stroke="#FF69B4" stroke-width="2" fill="none"/>
<path d="M 240,150 L 260,150" stroke="#FF69B4" stroke-width="2" fill="none"/>
</g>
<g>
<path d="M 80,200 L 100,200" stroke="#8BC34A" stroke-width="2" fill="none"/>
<path d="M 100,200 L 120,200" stroke="#8BC34A" stroke-width="2" fill="none"/>
<path d="M 120,200 L 140,200" stroke="#8BC34A" stroke-width="2" fill="none"/>
</g>
<!-- Checkered Flag -->
<g transform="translate(280, 150)">
<rect x="0" y="0" width="10" height="20" fill="#FFFFFF"/>
<rect x="10" y="0" width="10" height="20" fill="#000000"/>
<rect x="0" y="20" width="10" height="20" fill="#000000"/>
<rect x="10" y="20" width="10" height="20" fill="#FFFFFF"/>
</g>
</svg>Judge's Analysis
Player 1's submission is more detailed and adheres closely to the prompt, with a clear depiction of a snail and a rocket racing on a winding track under a starry sky.
The composition is visually engaging and technically well-executed.
Player 2's submission, while creative and minimalist, lacks clarity in defining the snail and rocket, making it less effective in adhering 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.
