GPT-4o
Challenge Creator
Creative Challenge
"A snail race with rockets strapped to their shells, mid-boost at the finish line."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Rocket Body Gradient -->
<linearGradient id="rocketBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff5151"/>
<stop offset="100%" stop-color="#ffb300"/>
</linearGradient>
<!-- Rocket Flames Gradient -->
<linearGradient id="flameGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fff681" />
<stop offset="60%" stop-color="#ff9900" />
<stop offset="100%" stop-color="#e13a00" />
</linearGradient>
<!-- Shell Spiral Gradient -->
<radialGradient id="shellGrad1" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#ffe6b3"/>
<stop offset="30%" stop-color="#ffcd80"/>
<stop offset="90%" stop-color="#c17418"/>
</radialGradient>
<radialGradient id="shellGrad2" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#d2b3ff"/>
<stop offset="30%" stop-color="#a580ee"/>
<stop offset="90%" stop-color="#532f71"/>
</radialGradient>
<radialGradient id="shellGrad3" cx="50%" cy="50%" r="65%">
<stop offset="0%" stop-color="#b3fff1"/>
<stop offset="30%" stop-color="#80eec6"/>
<stop offset="90%" stop-color="#1a705c"/>
</radialGradient>
<!-- Track Pattern -->
<pattern id="trackPattern" patternUnits="userSpaceOnUse" width="16" height="24">
<rect width="16" height="24" fill="#e0e0e0"/>
<rect x="0" y="14" width="16" height="4" fill="#bbb"/>
<rect x="0" y="3" width="16" height="4" fill="#bbb"/>
</pattern>
<!-- Finish Banner Gradient -->
<linearGradient id="finishGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ff006f"/>
<stop offset="100%" stop-color="#3e1fff"/>
</linearGradient>
<!-- Snail body gradients -->
<linearGradient id="snailBody1" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#fee444"/>
<stop offset="100%" stop-color="#cba800"/>
</linearGradient>
<linearGradient id="snailBody2" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#c1a8fc"/>
<stop offset="100%" stop-color="#6446b0"/>
</linearGradient>
<linearGradient id="snailBody3" x1="0" y1="0" x2="0.8" y2="1">
<stop offset="0%" stop-color="#7bfce3"/>
<stop offset="100%" stop-color="#2a8870"/>
</linearGradient>
</defs>
<!-- Track -->
<rect x="25" y="160" width="250" height="60" rx="18" fill="url(#trackPattern)" stroke="#999" stroke-width="2"/>
<!-- Center line -->
<rect x="150" y="160" width="2.5" height="60" rx="1.25" fill="#fff"/>
<!-- Finish Line Banner -->
<g>
<rect x="220" y="105" width="45" height="14" rx="4" fill="url(#finishGrad)" stroke="#6c3fcb" stroke-width="2"/>
<text x="242.5" y="116" text-anchor="middle" font-size="12" font-family="Montserrat, Arial, sans-serif" fill="#fff" font-weight="bold" letter-spacing="2">FINISH</text>
<rect x="220" y="119" width="2" height="41" fill="#444"/>
<rect x="263" y="119" width="2" height="41" fill="#444"/>
</g>
<!-- Finish line checker -->
<g>
<rect x="220" y="160" width="45" height="8" fill="#fff"/>
<g>
<rect x="220" y="160" width="7.5" height="8" fill="#111"/>
<rect x="235" y="160" width="7.5" height="8" fill="#111"/>
<rect x="250" y="160" width="7.5" height="8" fill="#111"/>
<rect x="263" y="160" width="2" height="8" fill="#111"/>
</g>
</g>
<!-- Snail 1: Golden -->
<g>
<!-- Body -->
<ellipse cx="70" cy="200" rx="26" ry="13" fill="url(#snailBody1)" filter="url(#shadow1)"/>
<!-- Neck -->
<rect x="48" y="193" width="16" height="14" rx="7" fill="url(#snailBody1)"/>
<!-- Tentacles -->
<g>
<rect x="57" y="185" width="4" height="17" rx="2" fill="#fefabf"/>
<circle cx="59" cy="185" r="3" fill="#e3b800" />
<rect x="65" y="186" width="3.3" height="10" rx="1.2" fill="#fffbe7"/>
<circle cx="67" cy="186" r="2.1" fill="#e3b800" />
</g>
<!-- Eyes -->
<circle cx="59" cy="191.2" r="1" fill="#684625"/>
<circle cx="67" cy="191.8" r="0.8" fill="#684625"/>
<!-- Shell -->
<ellipse cx="85" cy="194" rx="15" ry="15.7" fill="url(#shellGrad1)" stroke="#a57c36" stroke-width="2"/>
<!-- Shell Spiral -->
<path d="M85 190 Q80 202, 92 198 Q98 195, 91 193 Q85 191,88 197" fill="none" stroke="#bd8422" stroke-width="2" stroke-linecap="round"/>
<!-- Rocket -->
<g>
<!-- Rocket Body -->
<rect x="97" y="185" width="24" height="8" rx="3" fill="url(#rocketBody)" stroke="#cc2600" stroke-width="1.1"/>
<!-- Tip -->
<polygon points="121,189 128,189 121,193" fill="#b43700"/>
<!-- Fins -->
<polygon points="105,193 104,199 112,193" fill="#ffb651" opacity="0.8"/>
<polygon points="112,193 122,199 120,193" fill="#fffc81" opacity="0.7"/>
<!-- Flames -->
<g>
<ellipse cx="97" cy="189" rx="6" ry="2.3" fill="url(#flameGrad)" opacity="0.9"/>
<ellipse cx="95" cy="189" rx="2.6" ry="0.7" fill="#fff6a1" opacity="0.93"/>
<ellipse cx="93" cy="189" rx="1.4" ry="0.5" fill="#ffd820" />
</g>
<!-- Rocket Straps -->
<rect x="97" y="186.7" width="3" height="5.5" rx="1.2" fill="#56320c" opacity="0.47"/>
<rect x="118" y="186.7" width="3" height="5.5" rx="1.2" fill="#56320c" opacity="0.47"/>
<rect x="109" y="186.8" width="2.2" height="5.1" rx="1" fill="#56320c" opacity="0.34"/>
</g>
<!-- Motion lines -->
<path d="M87 194 l-22 4" stroke="#ffd600" stroke-width="2.2" opacity="0.2"/>
<path d="M109 189 l-13 2" stroke="#fffac1" stroke-width="1.1" opacity="0.22"/>
</g>
<!-- Snail 2: Violet Central -->
<g>
<!-- Body -->
<ellipse cx="150" cy="218" rx="23.5" ry="10.4" fill="url(#snailBody2)" filter="url(#shadow2)"/>
<!-- Neck -->
<rect x="132" y="212.4" width="13" height="11" rx="7" fill="url(#snailBody2)"/>
<!-- Tentacles -->
<g>
<rect x="142" y="207.5" width="2.7" height="13" rx="1.3" fill="#f8e7ff"/>
<circle cx="143.4" cy="207.4" r="2.1" fill="#b280ea"/>
<rect x="147.8" y="208" width="2.1" height="8" rx="0.8" fill="#f6ebff"/>
<circle cx="149" cy="208.1" r="1.45" fill="#b280ea"/>
<circle cx="143.9" cy="211.6" r="0.7" fill="#362a60"/>
<circle cx="149.3" cy="211.2" r="0.7" fill="#362a60"/>
</g>
<!-- Shell -->
<ellipse cx="163" cy="214" rx="12.8" ry="13.8" fill="url(#shellGrad2)" stroke="#54257a" stroke-width="2"/>
<!-- Spiral -->
<path d="M163 210 Q158 221, 167 218 Q171 215, 165 215 Q162 213,164 218" fill="none" stroke="#8059ab" stroke-width="2" stroke-linecap="round"/>
<!-- Rocket -->
<g>
<!-- Rocket Body -->
<rect x="173" y="208.5" width="24" height="7" rx="2.8" fill="url(#rocketBody)" stroke="#aa2a05" stroke-width="1"/>
<!-- Tip -->
<polygon points="197,212.8 203.6,212.8 197,216.5" fill="#9000a1"/>
<!-- Fins -->
<polygon points="181,215 179,219 186,214" fill="#e69cff" opacity="0.7"/>
<polygon points="192,214 201,219 199,214" fill="#fcbfff" opacity="0.6"/>
<!-- Flames -->
<g>
<ellipse cx="173" cy="212.5" rx="5.7" ry="2" fill="url(#flameGrad)" opacity="0.94"/>
<ellipse cx="171.2" cy="212.5" rx="2.1" ry="0.7" fill="#fff6f4" opacity="0.83"/>
<ellipse cx="170.2" cy="212.5" rx="0.9" ry="0.3" fill="#ffd2fd" />
</g>
<!-- Rocket Straps -->
<rect x="173" y="209.7" width="2.7" height="4.8" rx="1.2" fill="#4f287a" opacity="0.47"/>
<rect x="192" y="209.7" width="2.5" height="4.8" rx="1.2" fill="#4f287a" opacity="0.47"/>
<rect x="182.2" y="209.8" width="1.7" height="4.2" rx="0.8" fill="#4f287a" opacity="0.34"/>
</g>
<!-- Motion lines -->
<path d="M167 214 l-20 6" stroke="#a88bed" stroke-width="2" opacity="0.23"/>
<path d="M195 212 l-10 2" stroke="#fff8e2" stroke-width="1" opacity="0.19"/>
</g>
<!-- Snail 3: Teal, closest to finish -->
<g>
<!-- Body -->
<ellipse cx="220" cy="195" rx="19" ry="7.7" fill="url(#snailBody3)" filter="url(#shadow3)"/>
<!-- Neck -->
<rect x="206.5" y="191" width="11" height="8" rx="5" fill="url(#snailBody3)"/>
<!-- Tentacles -->
<g>
<rect x="214" y="187.9" width="2.1" height="9" rx="1" fill="#e8fff9"/>
<circle cx="215.1" cy="188" r="1.45" fill="#448c72"/>
<rect x="218.2" y="188.9" width="1.3" height="5.2" rx="0.6" fill="#c2f8e8"/>
<circle cx="218.8" cy="189" r="1.1" fill="#448c72"/>
<circle cx="215.4" cy="192.1" r="0.5" fill="#16492e"/>
<circle cx="219.1" cy="192.2" r="0.5" fill="#16492e"/>
</g>
<!-- Shell -->
<ellipse cx="230" cy="193" rx="10.2" ry="10.8" fill="url(#shellGrad3)" stroke="#18705f" stroke-width="2"/>
<!-- Spiral -->
<path d="M230 190 Q225 201, 234 199 Q238 196, 232 195 Q229 192.5,231 199" fill="none" stroke="#1b8d7e" stroke-width="2" stroke-linecap="round"/>
<!-- Rocket -->
<g>
<!-- Rocket Body -->
<rect x="238" y="188" width="22" height="6" rx="2.6" fill="url(#rocketBody)" stroke="#dd4000" stroke-width="1"/>
<!-- Tip -->
<polygon points="260,191.7 265,191.7 260,194.8" fill="#18705c"/>
<!-- Fins -->
<polygon points="244,194 242.5,197 248,193" fill="#8fffe3" opacity="0.7"/>
<polygon points="252,193 259,197 257,193" fill="#7fffdb" opacity="0.6"/>
<!-- Flames -->
<g>
<ellipse cx="238" cy="191" rx="4.9" ry="1.8" fill="url(#flameGrad)" opacity="0.94"/>
<ellipse cx="236.2" cy="191" rx="1.5" ry="0.5" fill="#eaffef" opacity="0.8"/>
<ellipse cx="235" cy="191" rx="0.7" ry="0.25" fill="#fff"/>
</g>
<!-- Rocket Straps -->
<rect x="238" y="189.2" width="2" height="3.2" rx="0.8" fill="#22463c" opacity="0.47"/>
<rect x="250" y="189.2" width="2" height="3.2" rx="0.8" fill="#22463c" opacity="0.47"/>
<rect x="244" y="189.3" width="1.2" height="2.8" rx="0.6" fill="#22463c" opacity="0.34"/>
</g>
<!-- Motion lines -->
<path d="M232 193 l-16 7" stroke="#7fffe7" stroke-width="1.2" opacity="0.24"/>
<path d="M256 192 l-8 2" stroke="#fffeef" stroke-width="1" opacity="0.22"/>
<!-- "1st Place" spark burst -->
<g>
<circle cx="266" cy="191" r="8" fill="none" stroke="gold" stroke-width="2" opacity="0.6"/>
<g stroke="gold" stroke-width="2" opacity="0.7">
<line x1="266" y1="183" x2="266" y2="176"/>
<line x1="266" y1="199" x2="266" y2="206"/>
<line x1="273" y1="191" x2="280" y2="191"/>
<line x1="259" y1="191" x2="252" y2="191"/>
<line x1="271" y1="186" x2="276" y2="182"/>
<line x1="261" y1="186" x2="256" y2="182"/>
<line x1="271" y1="196" x2="276" y2="200"/>
<line x1="261" y1="196" x2="256" y2="200"/>
</g>
<text x="266" y="195.2" fill="#fffbe1" font-size="7" font-family="manrope, Arial" text-anchor="middle" font-weight="bold" transform="rotate(-16 266 195.2)">1st</text>
</g>
</g>
<!-- Environmental Flairs: Speed trails and puffs -->
<g opacity="0.11">
<ellipse cx="87" cy="194" rx="12" ry="3" fill="#ffd84d"/>
<ellipse cx="167" cy="214" rx="9" ry="2.3" fill="#dab4ff"/>
<ellipse cx="232" cy="193" rx="8.3" ry="2" fill="#a3ffef"/>
</g>
<g opacity="0.2">
<ellipse cx="97" cy="189" rx="11" ry="2.2" fill="#fcd634"/>
<ellipse cx="173" cy="212.5" rx="9" ry="2" fill="#db8bfe"/>
<ellipse cx="238" cy="191" rx="7.2" ry="1.6" fill="#6bffd6"/>
</g>
<!-- Decorative clouds/speed puffs -->
<g>
<ellipse cx="60" cy="207" rx="7" ry="3.2" fill="#fff6d0" opacity="0.53"/>
<ellipse cx="95" cy="175" rx="4" ry="1.6" fill="#f5fde6" opacity="0.35"/>
<ellipse cx="203" cy="226" rx="6" ry="2.7" fill="#f5e8fd" opacity="0.37"/>
<ellipse cx="252" cy="170" rx="7" ry="3.1" fill="#e4fff7" opacity="0.46"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" >
<defs>
<!-- Gradients -->
<radialGradient id="rocketFlame1" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#fffbcc" stop-opacity="1"/>
<stop offset="30%" stop-color="#ffcc33" stop-opacity="1"/>
<stop offset="70%" stop-color="#ff6600" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#cc3300" stop-opacity="0"/>
</radialGradient>
<radialGradient id="rocketFlame2" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#fff0e1" stop-opacity="1"/>
<stop offset="50%" stop-color="#ff9933" stop-opacity="1"/>
<stop offset="90%" stop-color="#ff3300" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#990000" stop-opacity="0"/>
</radialGradient>
<radialGradient id="snailShellGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#ffcc99" />
<stop offset="100%" stop-color="#663300" />
</radialGradient>
<radialGradient id="shellSpiralGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ffe6cc" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#663300" stop-opacity="0"/>
</radialGradient>
<linearGradient id="groundGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#356634" />
<stop offset="1" stop-color="#142009" />
</linearGradient>
<!-- Pattern for finish line flag -->
<pattern id="checker" width="6" height="6" patternUnits="userSpaceOnUse">
<rect width="3" height="3" fill="#000"/>
<rect x="3" y="3" width="3" height="3" fill="#000"/>
</pattern>
<!-- Snail Body Shadow -->
<radialGradient id="bodyShadow" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#333" stop-opacity="0.4"/>
<stop offset="100%" stop-color="#000" stop-opacity="0"/>
</radialGradient>
<!-- Rocket Metal Body Gradient -->
<linearGradient id="metalRocket" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#bbb" />
<stop offset="50%" stop-color="#888" />
<stop offset="100%" stop-color="#444" />
</linearGradient>
<!-- Smoke circle -->
<radialGradient id="smokeGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ddd" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#666" stop-opacity="0"/>
</radialGradient>
<!-- Lens flare for rocket flame -->
<radialGradient id="lensFlare" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#fff9aa" stop-opacity="0.7" />
<stop offset="100%" stop-color="#d95d00" stop-opacity="0"/>
</radialGradient>
<!-- Snail spiral path for referencing -->
<path id="spiralPath" d="
M 0,0
m 10,0
a10,10 0 1,1 -20,0
a20,20 0 1,0 40,0
a30,30 0 1,1 -60,0
a40,40 0 1,0 80,0
" fill="none" />
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#groundGradient)" />
<!-- Sky -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4682b4" />
<stop offset="100%" stop-color="#87cefa" />
</linearGradient>
<rect y="0" width="300" height="200" fill="url(#skyGradient)" />
<!-- Finish line post -->
<g transform="translate(260,90)">
<rect x="-3" y="0" width="6" height="120" fill="#444" />
<rect x="-15" y="0" width="30" height="18" fill="url(#checker)" stroke="#000" stroke-width="1" rx="3" ry="3"/>
</g>
<!-- Finish line checkered stripe -->
<rect x="240" y="150" width="20" height="20" fill="url(#checker)" stroke="#000" stroke-width="0.5" rx="3" ry="3" />
<!-- Track lines - subtle effect -->
<g stroke="#222" stroke-width="1" stroke-linecap="round" opacity="0.4">
<line x1="0" y1="150" x2="240" y2="150" />
<line x1="0" y1="160" x2="240" y2="160" />
<line x1="0" y1="140" x2="240" y2="140" />
</g>
<!-- Trail Smoke and Sparks behind snails -->
<g id="smokeTrail" filter="url(#blur)">
<!-- abstract smoke for rocket engine -->
<circle cx="60" cy="162" r="10" fill="url(#smokeGlow)" />
<circle cx="85" cy="162" r="6" fill="url(#smokeGlow)" />
<circle cx="115" cy="172" r="14" fill="url(#smokeGlow)" />
<circle cx="135" cy="172" r="8" fill="url(#smokeGlow)" />
</g>
<!-- Snail 1 - Left, Blue shell with spiral -->
<g transform="translate(70,150)">
<!-- Body -->
<ellipse cx="0" cy="15" rx="30" ry="12" fill="#6b4c3b" />
<ellipse cx="0" cy="15" rx="30" ry="12" fill="url(#bodyShadow)" />
<!-- Head & eye stalks -->
<path d="M 20 10 q 18 -20 10 10" stroke="#6b4c3b" stroke-width="5" fill="none" />
<circle cx="36" cy="-11" r="4" fill="#fff"/>
<circle cx="36" cy="-11" r="2" fill="#000" />
<circle cx="32" cy="-15" r="3" fill="#6b4c3b" />
<!-- Shell -->
<ellipse cx="-10" cy="0" rx="28" ry="25" fill="url(#snailShellGradient)" stroke="#4d2e00" stroke-width="2" />
<!-- Shell spiral -->
<path fill="none" stroke="#c49151" stroke-width="3" d="
M -10 0
c 12 0 12 -20 0 -20
c -12 0 -12 16 0 16
c 8 0 8 -10 0 -10
" />
<ellipse cx="-10" cy="0" rx="28" ry="25" fill="url(#shellSpiralGlow)" />
<!-- Rocket strapped -->
<g transform="translate(-40,10)">
<!-- Rocket body -->
<ellipse cx="0" cy="0" rx="10" ry="22" fill="url(#metalRocket)" stroke="#333" stroke-width="0.7" />
<!-- Nose cone -->
<polygon points="0,-22 7,0 -7,0" fill="#b23b3b" stroke="#700000" stroke-width="0.8" />
<!-- Fins -->
<polygon points="-7,3 -15,10 -7,10" fill="#8b0000" />
<polygon points="7,3 15,10 7,10" fill="#8b0000" />
<!-- Straps -->
<rect x="-12" y="-8" width="24" height="4" fill="#4c3a22" />
<rect x="-12" y="4" width="24" height="4" fill="#4c3a22" />
<!-- Flame -->
<ellipse cx="0" cy="24" rx="11" ry="18" fill="url(#rocketFlame1)" />
<circle cx="0" cy="28" r="10" fill="url(#lensFlare)" />
</g>
</g>
<!-- Snail 2 - Right, Red shell with shiny spiral -->
<g transform="translate(130,160)">
<!-- Body -->
<ellipse cx="0" cy="15" rx="32" ry="11" fill="#4a3a2a" />
<ellipse cx="0" cy="15" rx="32" ry="11" fill="url(#bodyShadow)" />
<!-- Head & eye stalks -->
<path d="M 24 15 q 20 -25 12 12" stroke="#4a3a2a" stroke-width="5" fill="none" />
<circle cx="44" cy="-10" r="5" fill="#fff"/>
<circle cx="44" cy="-10" r="2.5" fill="#000" />
<circle cx="40" cy="-13" r="3.2" fill="#4a3a2a" />
<!-- Shell -->
<ellipse cx="-10" cy="0" rx="30" ry="26" fill="url(#snailShellGradient)" stroke="#552200" stroke-width="2" />
<!-- Shell Spiral - red glossy -->
<path fill="none" stroke="#ff4d4d" stroke-width="3" d="
M -10 0
c 13 0 13 -21 0 -21
c -13 0 -13 18 0 18
c 8 0 8 -11 0 -11
" />
<ellipse cx="-10" cy="0" rx="30" ry="26" fill="url(#shellSpiralGlow)" />
<!-- Rocket strapped -->
<g transform="translate(-40,15)">
<!-- Rocket body -->
<ellipse cx="0" cy="0" rx="12" ry="20" fill="url(#metalRocket)" stroke="#4a0000" stroke-width="0.9" />
<!-- Nose cone -->
<polygon points="0,-20 8,0 -8,0" fill="#991111" stroke="#550000" stroke-width="1" />
<!-- Fins -->
<polygon points="-8,4 -17,11 -8,11" fill="#aa2222" />
<polygon points="8,4 17,11 8,11" fill="#aa2222" />
<!-- Straps -->
<rect x="-15" y="-7" width="30" height="4" fill="#5c3922" />
<rect x="-15" y="5" width="30" height="4" fill="#5c3922" />
<!-- Flame -->
<ellipse cx="0" cy="22" rx="13" ry="20" fill="url(#rocketFlame2)" />
<circle cx="0" cy="25" r="11" fill="url(#lensFlare)" />
</g>
</g>
<!-- Snail 3 - Farther right, Green shell with turquoise spiral -->
<g transform="translate(180,145)">
<!-- Body -->
<ellipse cx="0" cy="15" rx="28" ry="10" fill="#3e5432" />
<ellipse cx="0" cy="15" rx="28" ry="10" fill="url(#bodyShadow)" />
<!-- Head & eye stalks -->
<path d="M 16 12 q 16 -18 9 9" stroke="#3e5432" stroke-width="4" fill="none" />
<circle cx="32" cy="-8" r="4" fill="#e0fff1"/>
<circle cx="32" cy="-8" r="1.8" fill="#004422" />
<circle cx="29" cy="-10" r="3" fill="#3e5432" />
<!-- Shell -->
<ellipse cx="-10" cy="0" rx="25" ry="22" fill="url(#snailShellGradient)" stroke="#264d22" stroke-width="2" />
<!-- Shell Spiral - turquoise shiny -->
<path fill="none" stroke="#33ccb5" stroke-width="3" d="
M -10 0
c 12 0 12 -19 0 -19
c -12 0 -12 16 0 16
c 7 0 7 -10 0 -10
" />
<ellipse cx="-10" cy="0" rx="25" ry="22" fill="url(#shellSpiralGlow)" />
<!-- Rocket strapped -->
<g transform="translate(-35,12)">
<!-- Rocket body -->
<ellipse cx="0" cy="0" rx="10" ry="19" fill="url(#metalRocket)" stroke="#005533" stroke-width="0.8" />
<!-- Nose cone -->
<polygon points="0,-19 6,0 -6,0" fill="#007755" stroke="#003311" stroke-width="0.7" />
<!-- Fins -->
<polygon points="-6,3 -13,9 -6,9" fill="#009988" />
<polygon points="6,3 13,9 6,9" fill="#009988" />
<!-- Straps -->
<rect x="-13" y="-7" width="26" height="3.8" fill="#245a3b" />
<rect x="-13" y="4" width="26" height="3.8" fill="#245a3b" />
<!-- Flame -->
<ellipse cx="0" cy="21" rx="10" ry="18" fill="url(#rocketFlame1)" />
<circle cx="0" cy="24" r="10" fill="url(#lensFlare)" />
</g>
</g>
<!-- Speed lines behind snails (to convey velocity) -->
<g stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.5">
<!-- For Snail1 -->
<line x1="0" y1="160" x2="50" y2="160" />
<line x1="10" y1="150" x2="50" y2="150" />
<line x1="0" y1="170" x2="45" y2="170" />
<!-- For Snail2 -->
<line x1="60" y1="170" x2="125" y2="170" />
<line x1="75" y1="160" x2="125" y2="160" />
<line x1="80" y1="180" x2="130" y2="180" />
<!-- For Snail3 -->
<line x1="130" y1="160" x2="175" y2="160" />
<line x1="130" y1="170" x2="175" y2="170" />
<line x1="135" y1="150" x2="180" y2="150" />
</g>
<!-- Finish Line Label -->
<text x="245" y="220" font-family="Arial Black" font-size="25" fill="#fff" stroke="#444" stroke-width="0.7" transform="rotate(-5 245 220)">
FINISH
</text>
<!-- Flames flicker animation (optional with CSS) -->
<style>
ellipse[fill^="url(#rocketFlame"] {
transform-origin: center bottom;
animation: flicker 0.6s infinite alternate ease-in-out;
}
@keyframes flicker {
0% { transform: scaleY(1); opacity: 0.9; }
100% { transform: scaleY(1.2); opacity: 1; }
}
circle[fill^="url(#lensFlare)"] {
animation: glow 1.5s ease-in-out infinite alternate;
}
@keyframes glow {
0% { opacity: 0.5; }
100% { opacity: 1; }
}
</style>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 mini (2025-04-14)
Player 2
Judge's Analysis
Player 2's submission excels in visual appeal and creativity, showcasing dynamic rocket boosts and a more engaging finish line scene.
The use of perspective and flame effects on the rockets adds energy and excitement to the composition, while Player 1's design, though adhering to the prompt, is comparatively static and less visually impactful.
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
Total Shapes
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
Player 1
98
Player 2
75
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
34
Player 2
13
Circles
The number of circle elements (circle) in the SVG.
Player 1
13
Player 2
16
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
25
Player 2
18
Lines
The number of line elements (line) in the SVG.
Player 1
8
Player 2
12
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
9
Player 2
9
Paths
The number of path elements (path) in the SVG.
Player 1
9
Player 2
7
Groups
The number of group elements (g) in the SVG.
Player 1
20
Player 2
10
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
9
Player 2
10
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
—
Player 2
—
Masks
The number of mask definitions (mask) in the SVG.
Player 1
—
Player 2
—
Clip Paths
The number of clipping path definitions (clipPath) in the SVG.
Player 1
—
Player 2
—
Elements with Opacity
The number of elements with opacity attributes in the SVG.
Player 1
35
Player 2
2
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
19
Player 2
20
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
85
Player 2
51
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
1
Player 2
8
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
24
Player 2
24
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
10
Player 2
11
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
—
Text Metrics
Text Elements
The number of text elements (text) in the SVG.
Player 1
2
Player 2
1
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.
