GPT-4o
Challenge Creator
Creative Challenge
"A snail racing a cheetah under a disco ball."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reusable elements -->
<defs>
<!-- Disco floor pattern -->
<pattern id="disco-floor" patternUnits="userSpaceOnUse" width="30" height="30" patternTransform="rotate(45)">
<rect width="30" height="30" fill="#111" />
<rect width="15" height="15" fill="#222" />
<rect x="15" y="15" width="15" height="15" fill="#222" />
</pattern>
<!-- Disco ball reflection gradient -->
<radialGradient id="disco-reflection" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.8" />
<stop offset="70%" stop-color="silver" stop-opacity="0.5" />
<stop offset="100%" stop-color="gray" stop-opacity="0.3" />
</radialGradient>
<!-- Disco ball mirror tiles pattern -->
<pattern id="disco-tiles" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="4" height="4" fill="white" rx="1" ry="1" />
<rect x="5" y="5" width="4" height="4" fill="white" rx="1" ry="1" />
</pattern>
<!-- Cheetah spots pattern -->
<pattern id="cheetah-spots" patternUnits="userSpaceOnUse" width="20" height="20">
<circle cx="5" cy="5" r="3" fill="black" />
<circle cx="15" cy="15" r="4" fill="black" />
<circle cx="5" cy="15" r="2" fill="black" />
<circle cx="15" cy="5" r="2.5" fill="black" />
</pattern>
<!-- Snail shell gradient -->
<linearGradient id="shell-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff9900" />
<stop offset="25%" stop-color="#ff6600" />
<stop offset="50%" stop-color="#ff3366" />
<stop offset="75%" stop-color="#9933ff" />
<stop offset="100%" stop-color="#3399ff" />
</linearGradient>
<!-- Turbo flame gradient -->
<linearGradient id="flame-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff3300" />
<stop offset="50%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#ff6600" />
</linearGradient>
<!-- Disco light effect -->
<filter id="disco-glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<!-- Finish line pattern -->
<pattern id="finish-line" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="5" height="10" fill="black" />
<rect x="5" width="5" height="10" fill="white" />
</pattern>
<!-- Racing track gradient -->
<linearGradient id="track-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#333" />
<stop offset="100%" stop-color="#666" />
</linearGradient>
<!-- Floor spotlight gradient -->
<radialGradient id="floor-spot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.2" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
</defs>
<!-- Background with disco floor -->
<rect width="300" height="300" fill="url(#disco-floor)" />
<!-- Floor spotlight effects -->
<circle cx="150" cy="220" r="100" fill="url(#floor-spot)" />
<circle cx="70" cy="240" r="40" fill="url(#floor-spot)" opacity="0.5" />
<circle cx="230" cy="240" r="40" fill="url(#floor-spot)" opacity="0.5" />
<!-- Race track -->
<rect x="20" y="200" width="260" height="40" rx="5" ry="5" fill="url(#track-gradient)" />
<rect x="20" y="210" width="260" height="2" fill="white" opacity="0.3" />
<rect x="20" y="230" width="260" height="2" fill="white" opacity="0.3" />
<!-- Lane markers -->
<path d="M40,220 L60,220 M80,220 L100,220 M120,220 L140,220 M160,220 L180,220 M200,220 L220,220"
stroke="white" stroke-width="2" stroke-dasharray="5,15" opacity="0.5" />
<!-- Finish line -->
<rect x="240" y="190" width="15" height="60" fill="url(#finish-line)" />
<!-- Disco ball and lights -->
<g transform="translate(150, 60)">
<!-- Disco ball string -->
<line x1="0" y1="-40" x2="0" y2="0" stroke="#999" stroke-width="2" />
<!-- Disco ball -->
<circle cx="0" cy="0" r="30" fill="url(#disco-tiles)" stroke="silver" stroke-width="2" />
<circle cx="0" cy="0" r="30" fill="url(#disco-reflection)" opacity="0.6" />
<!-- Disco light beams -->
<g opacity="0.7">
<path d="M-25,-25 L-60,-60" stroke="yellow" stroke-width="2" filter="url(#disco-glow)" />
<path d="M25,-25 L60,-60" stroke="pink" stroke-width="2" filter="url(#disco-glow)" />
<path d="M-25,25 L-60,60" stroke="cyan" stroke-width="2" filter="url(#disco-glow)" />
<path d="M25,25 L60,60" stroke="magenta" stroke-width="2" filter="url(#disco-glow)" />
<path d="M0,-30 L0,-70" stroke="lime" stroke-width="2" filter="url(#disco-glow)" />
<path d="M0,30 L0,90" stroke="orange" stroke-width="2" filter="url(#disco-glow)" />
<path d="M-30,0 L-70,0" stroke="purple" stroke-width="2" filter="url(#disco-glow)" />
<path d="M30,0 L70,0" stroke="red" stroke-width="2" filter="url(#disco-glow)" />
<!-- Additional angled light beams -->
<path d="M-15,-27 L-30,-80" stroke="#3399ff" stroke-width="2" filter="url(#disco-glow)" />
<path d="M15,-27 L30,-80" stroke="#ff99cc" stroke-width="2" filter="url(#disco-glow)" />
<path d="M-15,27 L-40,90" stroke="#33ff99" stroke-width="2" filter="url(#disco-glow)" />
<path d="M15,27 L40,90" stroke="#ff6633" stroke-width="2" filter="url(#disco-glow)" />
</g>
<!-- Disco ball shine effect -->
<circle cx="-10" cy="-10" r="5" fill="white" opacity="0.5" />
</g>
<!-- Cheetah -->
<g transform="translate(180, 210) scale(0.9)">
<!-- Cheetah body -->
<ellipse cx="0" cy="0" rx="40" ry="15" fill="#f5d76e" />
<ellipse cx="0" cy="0" rx="40" ry="15" fill="url(#cheetah-spots)" opacity="0.7" />
<!-- Cheetah head -->
<ellipse cx="-35" cy="-5" rx="12" ry="10" fill="#f5d76e" />
<ellipse cx="-35" cy="-5" rx="12" ry="10" fill="url(#cheetah-spots)" opacity="0.6" />
<!-- Cheetah face -->
<circle cx="-42" cy="-8" r="1.5" fill="black" /> <!-- Eye -->
<path d="M-41,-8 L-43,-7" stroke="black" stroke-width="0.5" /> <!-- Eyebrow for determination -->
<path d="M-38,-5 C-37,-4 -36,-4 -35,-5" stroke="black" stroke-width="0.5" fill="none" /> <!-- Mouth -->
<!-- Cheetah legs (running position) -->
<line x1="-20" y1="0" x2="-25" y2="15" stroke="#f5d76e" stroke-width="5" stroke-linecap="round" />
<line x1="-10" y1="0" x2="-5" y2="15" stroke="#f5d76e" stroke-width="5" stroke-linecap="round" />
<line x1="10" y1="0" x2="15" y2="15" stroke="#f5d76e" stroke-width="5" stroke-linecap="round" />
<line x1="20" y1="0" x2="25" y2="15" stroke="#f5d76e" stroke-width="5" stroke-linecap="round" />
<!-- Cheetah tail -->
<path d="M30,0 C40,-10 50,-5 55,5" stroke="#f5d76e" stroke-width="4" fill="none" stroke-linecap="round" />
<!-- Motion blur for speed effect -->
<path d="M30,-5 L55,-5 M30,0 L55,0 M30,5 L55,5" stroke="#f5d76e" stroke-width="1" stroke-dasharray="2,2" />
<!-- Racing bib/number -->
<rect x="-5" y="-10" width="10" height="10" fill="white" rx="1" ry="1" />
<text x="-2" y="-2" font-family="Arial" font-size="8" fill="black" font-weight="bold">2</text>
</g>
<!-- Snail -->
<g transform="translate(70, 220)">
<!-- Snail shell -->
<path d="M0,0 C-5,-5 -5,-15 0,-20 C5,-25 15,-25 20,-20 C25,-15 25,-5 20,0 C15,5 5,5 0,0 Z" fill="url(#shell-gradient)" />
<path d="M10,-10 C5,-15 5,-20 10,-22 C15,-24 20,-22 22,-17 C24,-12 22,-7 17,-5 C12,-3 7,-5 10,-10 Z" fill="none" stroke="white" stroke-width="0.5" opacity="0.7" />
<!-- Snail body -->
<path d="M0,0 C-5,0 -10,5 -15,5 C-20,5 -25,0 -25,-5 C-25,-10 -20,-10 -15,-10 C-10,-10 -5,-5 0,0 Z" fill="#88cc88" />
<!-- Snail face -->
<circle cx="-20" cy="-5" r="1" fill="black" /> <!-- Eye -->
<path d="M-22,-6 L-19,-6" stroke="black" stroke-width="0.5" /> <!-- Determined eyebrow -->
<path d="M-22,-2 C-21,-1 -19,-1 -18,-2" stroke="black" stroke-width="0.5" fill="none" /> <!-- Smile -->
<!-- Snail antennae -->
<line x1="-20" y1="-5" x2="-22" y2="-10" stroke="#88cc88" stroke-width="1" />
<line x1="-20" y1="-5" x2="-18" y2="-10" stroke="#88cc88" stroke-width="1" />
<circle cx="-22" cy="-10" r="0.7" fill="black" />
<circle cx="-18" cy="-10" r="0.7" fill="black" />
<!-- Slime trail -->
<path d="M-25,0 C-30,0 -35,0 -40,0" stroke="#aaddaa" stroke-width="2" opacity="0.6" />
<!-- Racing bib/number -->
<rect x="-5" y="-5" width="7" height="7" fill="white" rx="1" ry="1" />
<text x="-3" y="0" font-family="Arial" font-size="6" fill="black" font-weight="bold">1</text>
<!-- Turbo boost effect - humor element -->
<path d="M-30,0 C-35,-2 -45,0 -50,-5 C-45,-3 -40,-5 -35,-2 C-40,0 -45,-2 -50,0" fill="url(#flame-gradient)" opacity="0.8">
<animate attributeName="d"
values="M-30,0 C-35,-2 -45,0 -50,-5 C-45,-3 -40,-5 -35,-2 C-40,0 -45,-2 -50,0;
M-30,0 C-35,2 -45,0 -50,5 C-45,3 -40,5 -35,2 C-40,0 -45,2 -50,0;
M-30,0 C-35,-2 -45,0 -50,-5 C-45,-3 -40,-5 -35,-2 C-40,0 -45,-2 -50,0"
dur="0.3s"
repeatCount="indefinite" />
</path>
<!-- Racing goggle - another humor element -->
<path d="M-20,-7 C-21,-9 -19,-9 -20,-7" stroke="black" stroke-width="0.5" fill="none" />
<!-- Determination symbols -->
<path d="M-25,-8 L-27,-10 M-15,-8 L-13,-10" stroke="#88cc88" stroke-width="0.5" />
</g>
<!-- Spotlights on the race -->
<circle cx="70" cy="220" r="25" fill="yellow" opacity="0.1" filter="url(#disco-glow)" />
<circle cx="180" cy="220" r="25" fill="pink" opacity="0.1" filter="url(#disco-glow)" />
<!-- Starting line -->
<rect x="30" y="190" width="5" height="60" fill="url(#finish-line)" />
<!-- Text elements -->
<text x="150" y="30" font-family="Impact, sans-serif" font-size="16" fill="white" text-anchor="middle">DISCO SPEEDWAY</text>
<text x="150" y="185" font-family="Impact, sans-serif" font-size="12" fill="white" text-anchor="middle">UNLIKELY RIVALS</text>
<!-- Racing flag -->
<g transform="translate(270, 180) rotate(15)">
<rect x="0" y="0" width="15" height="10" fill="black" />
<rect x="0" y="0" width="15" height="10" fill="none" stroke="white" stroke-width="0.5" />
<rect x="0" y="0" width="5" height="5" fill="white" />
<rect x="5" y="5" width="5" height="5" fill="white" />
<line x1="0" y1="0" x2="0" y2="30" stroke="black" stroke-width="2" />
</g>
<!-- Crowd/audience silhouettes -->
<g opacity="0.6" transform="translate(0, 160)">
<ellipse cx="50" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="70" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="90" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="110" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="130" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="150" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="170" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="190" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="210" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="230" cy="0" rx="10" ry="5" fill="#555" />
<ellipse cx="250" cy="0" rx="10" ry="5" fill="#555" />
</g>
<!-- Small decorative disco balls -->
<g transform="translate(30, 100) scale(0.3)">
<circle cx="0" cy="0" r="20" fill="url(#disco-tiles)" stroke="silver" stroke-width="2" />
<circle cx="0" cy="0" r="20" fill="url(#disco-reflection)" opacity="0.6" />
</g>
<g transform="translate(260, 100) scale(0.3)">
<circle cx="0" cy="0" r="20" fill="url(#disco-tiles)" stroke="silver" stroke-width="2" />
<circle cx="0" cy="0" r="20" fill="url(#disco-reflection)" opacity="0.6" />
</g>
<!-- Small spotlights for atmosphere -->
<circle cx="50" cy="150" r="15" fill="cyan" opacity="0.1" filter="url(#disco-glow)" />
<circle cx="250" cy="150" r="15" fill="magenta" opacity="0.1" filter="url(#disco-glow)" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="A snail racing a cheetah under a disco ball">
<defs>
<!-- Gradients -->
<radialGradient id="disco-globe" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#fffcf8" stop-opacity="1"/>
<stop offset="40%" stop-color="#ffe5ff" stop-opacity="0.8"/>
<stop offset="90%" stop-color="#9648ff" stop-opacity="0.6"/>
<stop offset="100%" stop-color="#2c005d" stop-opacity="0.3"/>
</radialGradient>
<linearGradient id="disco-reflect" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#b79fff" stop-opacity="0.2"/>
</linearGradient>
<linearGradient id="grass-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#42a35a"/>
<stop offset="100%" stop-color="#1c3d1b"/>
</linearGradient>
<linearGradient id="shell-gradient" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff9e9e"/>
<stop offset="100%" stop-color="#ff495d"/>
</linearGradient>
<radialGradient id="snail-body" cx="0.4" cy="0.4" r="0.7">
<stop offset="0%" stop-color="#ffcba4"/>
<stop offset="100%" stop-color="#8b4a21"/>
</radialGradient>
<radialGradient id="cheetah-spot" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#2d1a0f"/>
<stop offset="100%" stop-color="#000000"/>
</radialGradient>
<linearGradient id="cheetah-fur" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#ffcc4d"/>
<stop offset="50%" stop-color="#ff9c1c"/>
<stop offset="100%" stop-color="#c16200"/>
</linearGradient>
<pattern id="disco-tile" width="10" height="10" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="5" height="5" fill="#e0e0ff" />
<rect x="5" y="5" width="5" height="5" fill="#e0e0ff" />
<rect x="0" y="5" width="5" height="5" fill="#a0a0ff" />
<rect x="5" y="0" width="5" height="5" fill="#a0a0ff" />
</pattern>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB" >
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#f0f" flood-opacity="0.7"/>
<feDropShadow dx="0" dy="0" stdDeviation="7" flood-color="#f0f" flood-opacity="0.4"/>
<feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="#f0f" flood-opacity="0.2"/>
</filter>
</defs>
<!-- Background sky with gradient dark purple/pink -->
<rect width="300" height="300" fill="url(#disco-globe)" />
<!-- Disco ball suspended at top center -->
<g transform="translate(150 50)">
<circle r="40" fill="url(#disco-globe)" stroke="#fff" stroke-width="2" filter="url(#glow)"/>
<!-- Disco ball tiles -->
<circle r="40" fill="url(#disco-tile)" opacity="0.7" />
<!-- Subtle shimmer lines -->
<g stroke="#fff" stroke-width="1" opacity="0.15" >
<line x1="-28" y1="-28" x2="28" y2="28"/>
<line x1="-20" y1="-35" x2="20" y2="35"/>
<line x1="0" y1="-40" x2="0" y2="40"/>
<line x1="-35" y1="0" x2="35" y2="0"/>
<line x1="-40" y1="20" x2="40" y2="20"/>
<line x1="-30" y1="30" x2="30" y2="30"/>
<line x1="-20" y1="35" x2="20" y2="35"/>
</g>
<!-- Hanging chain -->
<line x1="0" y1="-40" x2="0" y2="-80" stroke="#ccc" stroke-width="3" stroke-linecap="round" />
<circle cx="0" cy="-85" r="5" fill="#bbb" />
</g>
<!-- Ground with stylized grass & disco floor -->
<rect y="220" width="300" height="80" fill="url(#grass-gradient)" />
<rect y="230" width="300" height="60" fill="url(#disco-tile)" opacity="0.5" />
<!-- Ground reflections from disco ball -->
<g opacity="0.15">
<ellipse cx="90" cy="280" rx="35" ry="6" fill="url(#disco-reflect)" transform="rotate(-5 90 280)"/>
<ellipse cx="210" cy="280" rx="40" ry="8" fill="url(#disco-reflect)" transform="rotate(7 210 280)"/>
</g>
<!-- Snail character on left side, racing posture -->
<g transform="translate(70 250) scale(0.9 -0.9)">
<!-- Snail shell - spiral -->
<path fill="url(#shell-gradient)" stroke="#8a0000" stroke-width="1.2" d="
M 0 0
c 12 0 22 10 22 22
c 0 12 -10 22 -22 22
c -12 0 -22 -10 -22 -22
c 0 -12 10 -22 22 -22
z
" />
<circle cx="8" cy="14" r="3" fill="#fff" opacity="0.25" />
<!-- Spiral inside shell -->
<path fill="none" stroke="#fff0f0" stroke-width="1" d="
M 6 18
a 8 8 0 1 1 -10 -10
a 5 5 0 1 0 6 6
"/>
<!-- Snail body -->
<ellipse cx="25" cy="20" rx="22" ry="12" fill="url(#snail-body)" filter="url(#glow)" />
<!-- Head -->
<ellipse cx="44" cy="28" rx="10" ry="12" fill="url(#snail-body)" />
<!-- Eyes on stalks -->
<line x1="50" y1="35" x2="60" y2="55" stroke="#783e1d" stroke-width="2" stroke-linecap="round"/>
<line x1="44" y1="33" x2="38" y2="55" stroke="#783e1d" stroke-width="2" stroke-linecap="round"/>
<circle cx="60" cy="55" r="4" fill="#fefefe" />
<circle cx="38" cy="55" r="4" fill="#fefefe" />
<circle cx="60" cy="55" r="2" fill="#572b17" />
<circle cx="38" cy="55" r="2" fill="#572b17" />
<!-- Smiling mouth -->
<path d="M28,16 q7,7 14,0" stroke="#b3563f" stroke-width="2" fill="none" />
</g>
<!-- Cheetah character on right side, dynamic running pose -->
<g transform="translate(230 230) scale(0.85 0.85) rotate(-8)">
<!-- Body elongated and sleek -->
<ellipse cx="0" cy="0" rx="60" ry="30" fill="url(#cheetah-fur)" stroke="#793600" stroke-width="2" />
<!-- Legs in running dynamic style: front bent, back stretched -->
<path d="M-40 10 q-20 30 -10 40" stroke="#793600" stroke-width="8" stroke-linecap="round" fill="none" />
<path d="M30 15 q10 40 25 30" stroke="#793600" stroke-width="8" stroke-linecap="round" fill="none" />
<path d="M-30 -10 q-15 -40 -5 -45" stroke="#793600" stroke-width="7" stroke-linecap="round" fill="none" />
<path d="M40 -5 q20 -35 15 -40" stroke="#793600" stroke-width="7" stroke-linecap="round" fill="none" />
<!-- Tail flicking -->
<path d="M50 15 q40 15 30 40" stroke="#793600" stroke-width="6" stroke-linecap="round" fill="none" />
<!-- Head: triangle shape with strong eyes -->
<polygon points="55,-20 85,-15 58,5" fill="url(#cheetah-fur)" stroke="#793600" stroke-width="2" />
<circle cx="68" cy="-8" r="6" fill="#f7f1dc" />
<circle cx="68" cy="-8" r="3" fill="#592900" />
<!-- Mouth sharp -->
<path d="M60 2 q12 6 20 2" stroke="#4b2a0c" stroke-width="1" fill="none" />
<!-- Spots on body -->
<g fill="url(#cheetah-spot)" stroke="none" opacity="0.85">
<circle cx="-25" cy="-5" r="4"/>
<circle cx="-10" cy="10" r="3.5"/>
<circle cx="15" cy="8" r="5"/>
<circle cx="5" cy="-10" r="3.5"/>
<circle cx="20" cy="-5" r="3"/>
<circle cx="35" cy="10" r="4"/>
</g>
</g>
<!-- Racing track stripes below the characters -->
<g stroke="#fff" stroke-width="2" stroke-linecap="round" opacity="0.15">
<line x1="30" y1="275" x2="270" y2="275" />
<line x1="30" y1="285" x2="270" y2="285" />
<line x1="30" y1="295" x2="270" y2="295" />
</g>
<!-- Speed lines for snail -->
<g stroke="#ffa7a7" stroke-width="2" opacity="0.6" filter="url(#glow)">
<line x1="20" y1="250" x2="8" y2="245" />
<line x1="25" y1="260" x2="10" y2="255" />
<line x1="23" y1="235" x2="12" y2="230" />
</g>
<!-- Speed lines for cheetah -->
<g stroke="#ffcc33" stroke-width="3" opacity="0.8" filter="url(#glow)">
<line x1="230" y1="200" x2="250" y2="190" />
<line x1="240" y1="210" x2="260" y2="200" />
<line x1="220" y1="190" x2="235" y2="180" />
<line x1="250" y1="195" x2="270" y2="185" />
</g>
<!-- Ambient sparkles dancing around disco ball -->
<g fill="none" stroke="#f0e6ff" stroke-width="1" opacity="0.3">
<circle cx="150" cy="7" r="1.8" />
<circle cx="140" cy="10" r="1.2" />
<circle cx="160" cy="15" r="1.5" />
<circle cx="130" cy="20" r="1.3" />
<circle cx="180" cy="12" r="1.1" />
<circle cx="130" cy="5" r="1" />
<circle cx="170" cy="5" r="1.4" />
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's submission better represents the concept with a clear depiction of both the snail and cheetah in a race under a disco ball, complemented by a thematic background and creative text elements like 'Disco Speedway' and 'Unlikely Rivals.' The technical quality is strong, with vibrant colors and good composition.
Player 2's image is more abstract and less cohesive, with the cheetah in an unconvincing racing position and lacking the clarity of a race setting.
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
90
Player 2
65
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
19
Player 2
7
Circles
The number of circle elements (circle) in the SVG.
Player 1
22
Player 2
23
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
15
Player 2
5
Lines
The number of line elements (line) in the SVG.
Player 1
8
Player 2
20
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
1
Paths
The number of path elements (path) in the SVG.
Player 1
26
Player 2
9
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
10
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
7
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
4
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
1
Player 2
1
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
20
Player 2
10
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
35
Player 2
21
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
31
Player 2
35
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
1
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
7
Player 2
5
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
80
Player 2
23
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
10
Player 2
9
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
4
Player 2
—
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.
