GPT-4o
Challenge Creator
Creative Challenge
"A cat made of clock gears, sitting atop a ticking pocket watch"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0 0 0 0 0.5 0" />
</filter>
<radialGradient id="watchFace" cx="50%" cy="50%" r="50%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#f9f3e3" />
<stop offset="85%" stop-color="#e8d8b8" />
<stop offset="100%" stop-color="#d2b48c" />
</radialGradient>
<linearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffd700" />
<stop offset="50%" stop-color="#b8860b" />
<stop offset="100%" stop-color="#daa520" />
</linearGradient>
<linearGradient id="copperGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#e6b87d" />
<stop offset="50%" stop-color="#cd7f32" />
<stop offset="100%" stop-color="#b87333" />
</linearGradient>
<linearGradient id="silverGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f5f5f5" />
<stop offset="50%" stop-color="#c0c0c0" />
<stop offset="100%" stop-color="#a9a9a9" />
</linearGradient>
<pattern id="timePatternSmall" width="6" height="6" patternUnits="userSpaceOnUse">
<circle cx="3" cy="3" r="0.6" fill="#333" />
</pattern>
</defs>
<!-- Pocket Watch -->
<g id="pocketWatch" transform="translate(150, 200)">
<!-- Watch Case -->
<circle cx="0" cy="0" r="80" fill="url(#goldGradient)" stroke="#b8860b" stroke-width="2" filter="url(#shadow)"/>
<!-- Watch Face -->
<circle cx="0" cy="0" r="70" fill="url(#watchFace)" stroke="#b8860b" stroke-width="1.5"/>
<!-- Hour Markers -->
<g id="hourMarkers">
<line x1="0" y1="-60" x2="0" y2="-67" stroke="#333" stroke-width="2" />
<line x1="30" y1="-52" x2="34" y2="-58" stroke="#333" stroke-width="2" />
<line x1="52" y1="-30" x2="58" y2="-34" stroke="#333" stroke-width="2" />
<line x1="60" y1="0" x2="67" y2="0" stroke="#333" stroke-width="2" />
<line x1="52" y1="30" x2="58" y2="34" stroke="#333" stroke-width="2" />
<line x1="30" y1="52" x2="34" y2="58" stroke="#333" stroke-width="2" />
<line x1="0" y1="60" x2="0" y2="67" stroke="#333" stroke-width="2" />
<line x1="-30" y1="52" x2="-34" y2="58" stroke="#333" stroke-width="2" />
<line x1="-52" y1="30" x2="-58" y2="34" stroke="#333" stroke-width="2" />
<line x1="-60" y1="0" x2="-67" y2="0" stroke="#333" stroke-width="2" />
<line x1="-52" y1="-30" x2="-58" y2="-34" stroke="#333" stroke-width="2" />
<line x1="-30" y1="-52" x2="-34" y2="-58" stroke="#333" stroke-width="2" />
</g>
<!-- Watch Numbers -->
<g id="numbers" font-family="serif" font-weight="bold" text-anchor="middle" dominant-baseline="middle">
<text x="0" y="-50" font-size="10" fill="#333">12</text>
<text x="25" y="-43" font-size="10" fill="#333">1</text>
<text x="43" y="-25" font-size="10" fill="#333">2</text>
<text x="50" y="0" font-size="10" fill="#333">3</text>
<text x="43" y="25" font-size="10" fill="#333">4</text>
<text x="25" y="43" font-size="10" fill="#333">5</text>
<text x="0" y="50" font-size="10" fill="#333">6</text>
<text x="-25" y="43" font-size="10" fill="#333">7</text>
<text x="-43" y="25" font-size="10" fill="#333">8</text>
<text x="-50" y="0" font-size="10" fill="#333">9</text>
<text x="-43" y="-25" font-size="10" fill="#333">10</text>
<text x="-25" y="-43" font-size="10" fill="#333">11</text>
</g>
<!-- Clock Hands -->
<g id="hands">
<line x1="0" y1="0" x2="0" y2="-40" stroke="#333" stroke-width="2" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="43200s" repeatCount="indefinite" />
</line>
<line x1="0" y1="0" x2="0" y2="-55" stroke="#333" stroke-width="1.5" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="3600s" repeatCount="indefinite" />
</line>
<line x1="0" y1="10" x2="0" y2="-60" stroke="#b30000" stroke-width="1" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite" />
</line>
<circle cx="0" cy="0" r="3" fill="#333" />
</g>
<!-- Watch Crown -->
<circle cx="75" cy="0" r="8" fill="url(#goldGradient)" stroke="#996515" stroke-width="1" />
<path d="M75,0 L75,-2 M75,0 L75,2" stroke="#333" stroke-width="1" />
</g>
<!-- Mechanical Cat -->
<g id="mechanicalCat" transform="translate(150, 100)">
<!-- Cat Body - Made of Gears -->
<g id="catBody">
<!-- Main Body Gear -->
<circle cx="0" cy="20" r="35" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<circle cx="0" cy="20" r="30" fill="none" stroke="#996515" stroke-width="1" />
<circle cx="0" cy="20" r="25" fill="none" stroke="#996515" stroke-width="1" />
<!-- Gear Teeth on Body -->
<g id="bodyTeeth">
<path d="M-35,20 L-39,16 L-35,12" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M-30,50 L-34,54 L-38,50" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M-12,54 L-8,58 L-4,54" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M15,54 L19,58 L23,54" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M32,40 L36,44 L40,40" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M35,20 L39,16 L35,12" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M30,-10 L34,-14 L38,-10" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M12,-15 L8,-19 L4,-15" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M-15,-15 L-19,-19 L-23,-15" fill="none" stroke="#996515" stroke-width="1.5" />
<path d="M-30,-10 L-34,-14 L-38,-10" fill="none" stroke="#996515" stroke-width="1.5" />
</g>
<!-- Gears inside Body -->
<g id="innerGears">
<circle cx="-15" cy="10" r="10" fill="url(#silverGradient)" stroke="#666" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="20s" repeatCount="indefinite" />
</circle>
<circle cx="-15" cy="10" r="8" fill="none" stroke="#666" stroke-width="0.5" />
<circle cx="-15" cy="10" r="3" fill="#666" />
<path d="M-15,0 L-12,0 L-13,4 Z" fill="#666">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 -15 10" to="-360 -15 10" dur="20s" repeatCount="indefinite" />
</path>
<path d="M-15,0 L-18,0 L-17,4 Z" fill="#666" transform="rotate(180 -15 10)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 -15 10" to="-180 -15 10" dur="20s" repeatCount="indefinite" />
</path>
<path d="M-5,10 L-5,13 L-9,12 Z" fill="#666" transform="rotate(90 -15 10)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="90 -15 10" to="-270 -15 10" dur="20s" repeatCount="indefinite" />
</path>
<path d="M-5,10 L-5,7 L-9,8 Z" fill="#666" transform="rotate(270 -15 10)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="270 -15 10" to="-90 -15 10" dur="20s" repeatCount="indefinite" />
</path>
<circle cx="15" cy="15" r="12" fill="url(#goldGradient)" stroke="#996515" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="25s" repeatCount="indefinite" />
</circle>
<circle cx="15" cy="15" r="9" fill="none" stroke="#996515" stroke-width="0.5" />
<circle cx="15" cy="15" r="3" fill="#996515" />
<path d="M15,3 L18,3 L16.5,7 Z" fill="#996515">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 15 15" to="360 15 15" dur="25s" repeatCount="indefinite" />
</path>
<path d="M15,3 L12,3 L13.5,7 Z" fill="#996515" transform="rotate(180 15 15)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 15 15" to="540 15 15" dur="25s" repeatCount="indefinite" />
</path>
<path d="M27,15 L27,18 L23,16.5 Z" fill="#996515" transform="rotate(90 15 15)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="90 15 15" to="450 15 15" dur="25s" repeatCount="indefinite" />
</path>
<path d="M27,15 L27,12 L23,13.5 Z" fill="#996515" transform="rotate(270 15 15)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="270 15 15" to="630 15 15" dur="25s" repeatCount="indefinite" />
</path>
<circle cx="0" cy="35" r="8" fill="url(#copperGradient)" stroke="#996515" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="15s" repeatCount="indefinite" />
</circle>
<circle cx="0" cy="35" r="6" fill="none" stroke="#996515" stroke-width="0.5" />
<circle cx="0" cy="35" r="2" fill="#996515" />
<line x1="-6" y1="35" x2="-2" y2="35" stroke="#996515" stroke-width="1.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 35" to="-360 0 35" dur="15s" repeatCount="indefinite" />
</line>
<line x1="0" y1="29" x2="0" y2="33" stroke="#996515" stroke-width="1.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="90 0 35" to="-270 0 35" dur="15s" repeatCount="indefinite" />
</line>
<line x1="6" y1="35" x2="2" y2="35" stroke="#996515" stroke-width="1.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="180 0 35" to="-180 0 35" dur="15s" repeatCount="indefinite" />
</line>
<line x1="0" y1="41" x2="0" y2="37" stroke="#996515" stroke-width="1.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="270 0 35" to="-90 0 35" dur="15s" repeatCount="indefinite" />
</line>
</g>
</g>
<!-- Cat Head -->
<g id="catHead">
<circle cx="0" cy="-25" r="25" fill="url(#goldGradient)" stroke="#996515" stroke-width="1.5" />
<circle cx="0" cy="-25" r="20" fill="none" stroke="#996515" stroke-width="1" />
<!-- Ears -->
<path d="M-18,-40 L-25,-55 L-10,-45 Z" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<path d="M18,-40 L25,-55 L10,-45 Z" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<!-- Small Gears for Eyes -->
<g id="leftEye">
<circle cx="-12" cy="-30" r="6" fill="url(#silverGradient)" stroke="#666" stroke-width="0.5" />
<circle cx="-12" cy="-30" r="4" fill="#333" />
<circle cx="-12" cy="-30" r="1.5" fill="#66f">
<animate attributeName="r" values="1.5;2.5;1.5" dur="5s" repeatCount="indefinite" />
</circle>
<path d="M-12,-36 L-14,-36 L-13,-32 Z M-12,-24 L-10,-24 L-11,-28 Z M-18,-30 L-18,-28 L-14,-29 Z M-6,-30 L-6,-32 L-10,-31 Z" fill="#666">
<animateTransform attributeName="transform" type="rotate" from="0 -12 -30" to="360 -12 -30" dur="10s" repeatCount="indefinite" />
</path>
</g>
<g id="rightEye">
<circle cx="12" cy="-30" r="6" fill="url(#silverGradient)" stroke="#666" stroke-width="0.5" />
<circle cx="12" cy="-30" r="4" fill="#333" />
<circle cx="12" cy="-30" r="1.5" fill="#66f">
<animate attributeName="r" values="1.5;2.5;1.5" dur="5s" repeatCount="indefinite" />
</circle>
<path d="M12,-36 L10,-36 L11,-32 Z M12,-24 L14,-24 L13,-28 Z M6,-30 L6,-28 L10,-29 Z M18,-30 L18,-32 L14,-31 Z" fill="#666">
<animateTransform attributeName="transform" type="rotate" from="0 12 -30" to="360 12 -30" dur="10s" repeatCount="indefinite" />
</path>
</g>
<!-- Nose -->
<path d="M0,-20 L4,-15 L-4,-15 Z" fill="#996515" />
<!-- Whiskers -->
<line x1="-4" y1="-15" x2="-25" y2="-18" stroke="#996515" stroke-width="0.7" />
<line x1="-4" y1="-15" x2="-25" y2="-15" stroke="#996515" stroke-width="0.7" />
<line x1="-4" y1="-15" x2="-25" y2="-12" stroke="#996515" stroke-width="0.7" />
<line x1="4" y1="-15" x2="25" y2="-18" stroke="#996515" stroke-width="0.7" />
<line x1="4" y1="-15" x2="25" y2="-15" stroke="#996515" stroke-width="0.7" />
<line x1="4" y1="-15" x2="25" y2="-12" stroke="#996515" stroke-width="0.7" />
<!-- Decorative Gears in Head -->
<circle cx="0" cy="-15" r="4" fill="url(#copperGradient)" stroke="#996515" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="8s" repeatCount="indefinite" />
</circle>
<path d="M0,-19 L2,-19 L1,-15 Z M0,-11 L-2,-11 L-1,-15 Z M-4,-15 L-4,-13 L0,-14 Z M4,-15 L4,-17 L0,-16 Z" fill="#996515">
<animateTransform attributeName="transform" type="rotate" from="0 0 -15" to="360 0 -15" dur="8s" repeatCount="indefinite" />
</path>
</g>
<!-- Paws/Legs -->
<g id="paws">
<!-- Front Left -->
<g id="frontLeftPaw">
<line x1="-25" y1="20" x2="-40" y2="55" stroke="#996515" stroke-width="3" stroke-linecap="round" />
<circle cx="-40" cy="55" r="8" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<circle cx="-40" cy="55" r="5" fill="none" stroke="#996515" stroke-width="0.5" />
<path d="M-40,55 L-48,58 M-40,55 L-45,50 M-40,55 L-35,50 M-40,55 L-32,58" stroke="#996515" stroke-width="1" />
</g>
<!-- Front Right -->
<g id="frontRightPaw">
<line x1="25" y1="20" x2="40" y2="55" stroke="#996515" stroke-width="3" stroke-linecap="round" />
<circle cx="40" cy="55" r="8" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<circle cx="40" cy="55" r="5" fill="none" stroke="#996515" stroke-width="0.5" />
<path d="M40,55 L48,58 M40,55 L45,50 M40,55 L35,50 M40,55 L32,58" stroke="#996515" stroke-width="1" />
</g>
<!-- Back Left -->
<g id="backLeftPaw">
<path d="M-20,40 C-25,50 -30,60 -25,75" fill="none" stroke="#996515" stroke-width="3" stroke-linecap="round" />
<circle cx="-25" cy="75" r="8" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<circle cx="-25" cy="75" r="5" fill="none" stroke="#996515" stroke-width="0.5" />
<path d="M-25,75 L-33,78 M-25,75 L-30,70 M-25,75 L-20,70 M-25,75 L-17,78" stroke="#996515" stroke-width="1" />
</g>
<!-- Back Right -->
<g id="backRightPaw">
<path d="M20,40 C25,50 30,60 25,75" fill="none" stroke="#996515" stroke-width="3" stroke-linecap="round" />
<circle cx="25" cy="75" r="8" fill="url(#copperGradient)" stroke="#996515" stroke-width="1" />
<circle cx="25" cy="75" r="5" fill="none" stroke="#996515" stroke-width="0.5" />
<path d="M25,75 L33,78 M25,75 L30,70 M25,75 L20,70 M25,75 L17,78" stroke="#996515" stroke-width="1" />
</g>
</g>
<!-- Tail -->
<g id="tail">
<path d="M0,55 C20,60 35,50 45,75" fill="none" stroke="#996515" stroke-width="3" stroke-linecap="round" />
<circle cx="45" cy="75" r="6" fill="url(#goldGradient)" stroke="#996515" stroke-width="1" />
<circle cx="45" cy="75" r="4" fill="none" stroke="#996515" stroke-width="0.5" />
<path d="M45,75 L50,78 M45,75 L49,71 M45,75 L40,71 M45,75 L41,79" stroke="#996515" stroke-width="1" />
</g>
<!-- Small Decorative Gears -->
<circle cx="-35" cy="0" r="5" fill="url(#silverGradient)" stroke="#666" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="12s" repeatCount="indefinite" />
</circle>
<path d="M-35,-5 L-33,-5 L-34,-1 Z M-35,5 L-37,5 L-36,1 Z M-40,0 L-40,2 L-36,1 Z M-30,0 L-30,-2 L-34,-1 Z" fill="#666">
<animateTransform attributeName="transform" type="rotate" from="0 -35 0" to="-360 -35 0" dur="12s" repeatCount="indefinite" />
</path>
<circle cx="35" cy="0" r="5" fill="url(#silverGradient)" stroke="#666" stroke-width="0.5">
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="12s" repeatCount="indefinite" />
</circle>
<path d="M35,-5 L37,-5 L36,-1 Z M35,5 L33,5 L34,1 Z M30,0 L30,2 L34,1 Z M40,0 L40,-2 L36,-1 Z" fill="#666">
<animateTransform attributeName="transform" type="rotate" from="0 35 0" to="360 35 0" dur="12s" repeatCount="indefinite" />
</path>
</g>
<!-- Clock/Time-related Decorative Elements -->
<g id="timeDecoration">
<path d="M70,90 Q90,110 110,90" fill="none" stroke="url(#goldGradient)" stroke-width="2" stroke-dasharray="2,2" />
<path d="M190,90 Q210,110 230,90" fill="none" stroke="url(#goldGradient)" stroke-width="2" stroke-dasharray="2,2" />
<circle cx="70" cy="40" r="15" fill="url(#silverGradient)" stroke="#666" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.2;0.6" dur="8s" repeatCount="indefinite" />
</circle>
<circle cx="230" cy="40" r="12" fill="url(#copperGradient)" stroke="#996515" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.3;0.6" dur="6s" repeatCount="indefinite" />
</circle>
<text x="150" y="280" font-family="serif" font-size="7" fill="#333" text-anchor="middle">ETERNUS TEMPORIS</text>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="gearGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#8B4513;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4B3621;stop-opacity:1" />
</radialGradient>
<linearGradient id="catGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B8860B;stop-opacity:1" />
</linearGradient>
<pattern id="clockPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill="#FFFFFF" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#clockPattern)" />
<path d="M150,250 C100,200 100,100 150,50 C200,100 200,200 150,250 Z" fill="url(#gearGradient)" />
<circle cx="150" cy="150" r="60" fill="url(#catGradient)" />
<path d="M150,90 Q180,120 150,150 Q120,120 150,90 Z" fill="#8B4513" />
<circle cx="130" cy="130" r="10" fill="#000000" />
<circle cx="170" cy="130" r="10" fill="#000000" />
<path d="M140,170 Q150,180 160,170" stroke="#000000" stroke-width="2" fill="none" />
<path d="M150,250 C200,250 250,200 250,150 C250,100 200,50 150,50 C100,50 50,100 50,150 C50,200 100,250 150,250 Z" fill="none" stroke="#8B4513" stroke-width="10" />
<path d="M150,150 L150,100 M150,150 L200,150" stroke="#000000" stroke-width="4" />
<path d="M150,150 L130,170" stroke="#000000" stroke-width="4" />
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet (2025-02-19)
Player 1
Judge's Analysis
Player 1's image creatively integrates clock gears to form a cat, clearly sitting atop a pocket watch, which adheres closely to the prompt.
The use of various gear elements adds complexity and technical quality, making it visually appealing.
In contrast, Player 2's submission lacks clear representation of a cat made of gears and does not effectively convey the concept of a pocket watch, resulting in less adherence 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
Total Shapes
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
Player 1
104
Player 2
11
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
—
Player 2
1
Circles
The number of circle elements (circle) in the SVG.
Player 1
40
Player 2
4
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
—
Player 2
—
Lines
The number of line elements (line) in the SVG.
Player 1
27
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
37
Player 2
6
Groups
The number of group elements (g) in the SVG.
Player 1
18
Player 2
—
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
2
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
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
2
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
81
Player 2
4
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
17
Player 2
3
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
30
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
8
Player 2
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
208
Player 2
22
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
2
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
6
Player 2
3
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
13
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.
Similar Challenges
Match #2198
Mar 14, 2025
"Flying cat with fish wings over a city skyline"
P1
P2
Match #2156
Mar 14, 2025
"Dreaming octopus juggling clocks under a starry sky"
P1
P2
Match #2119
Mar 14, 2025
"Floating city above a waterfall, with fish swimming upwards"
P1
P2
Match #1752
Mar 14, 2025
"Surreal clock with dreams pouring out"
P1
P2
Match #1744
Mar 14, 2025
"A cat DJing a party on a giant floating slice of pizza"
P1
P2
Match #919
Mar 13, 2025
"Surrealist penguin in a floating teacup, under a melting clock sky"
P1
P2
