GPT-4o
Challenge Creator
Creative Challenge
"Two astronauts sword-fighting with giant pencils on the moon."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Moon Surface -->
<defs>
<radialGradient id="moonSurface" cx="50%" cy="50%" r="70%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#e0e0e0" />
<stop offset="70%" stop-color="#b0b0b0" />
<stop offset="100%" stop-color="#909090" />
</radialGradient>
<pattern id="craters" patternUnits="userSpaceOnUse" width="50" height="50">
<circle cx="10" cy="10" r="5" fill="#a0a0a0" />
<circle cx="30" cy="25" r="7" fill="#a0a0a0" />
<circle cx="40" cy="40" r="4" fill="#a0a0a0" />
</pattern>
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="2" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
<linearGradient id="pencilGrad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF4500" />
<stop offset="100%" stop-color="#FFA500" />
</linearGradient>
<linearGradient id="pencilGrad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#4169E1" />
<stop offset="100%" stop-color="#00BFFF" />
</linearGradient>
<radialGradient id="earthGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#64B5F6" />
<stop offset="70%" stop-color="#1976D2" />
<stop offset="100%" stop-color="#0D47A1" />
</radialGradient>
<linearGradient id="visorGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9" />
<stop offset="100%" stop-color="#A0A0FF" stop-opacity="0.6" />
</linearGradient>
</defs>
<!-- Background with stars -->
<rect width="300" height="300" fill="#000520" />
<!-- Stars -->
<g id="stars">
<circle cx="30" cy="20" r="1" fill="white" />
<circle cx="50" cy="40" r="0.8" fill="white" />
<circle cx="70" cy="15" r="1.2" fill="white" />
<circle cx="120" cy="30" r="0.7" fill="white" />
<circle cx="150" cy="20" r="1" fill="white" />
<circle cx="200" cy="10" r="0.9" fill="white" />
<circle cx="230" cy="40" r="1.1" fill="white" />
<circle cx="260" cy="25" r="0.8" fill="white" />
<circle cx="280" cy="35" r="1" fill="white" />
<circle cx="190" cy="45" r="0.7" fill="white" />
</g>
<use href="#stars" transform="translate(0, 40)" />
<use href="#stars" transform="translate(20, 80)" />
<use href="#stars" transform="translate(-30, 120)" />
<!-- Earth in background -->
<circle cx="270" cy="50" r="30" fill="url(#earthGlow)" filter="url(#glow)" />
<path d="M255 40 Q270 55, 285 40 Q275 65, 290 55" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-opacity="0.7" />
<!-- Moon surface -->
<ellipse cx="150" cy="260" rx="150" ry="40" fill="url(#moonSurface)" />
<ellipse cx="150" cy="260" rx="130" ry="35" fill="url(#craters)" fill-opacity="0.3" />
<!-- Astronaut 1 (left) -->
<g transform="translate(80, 180) rotate(-15)">
<!-- Spacesuit -->
<rect x="-15" y="-5" width="30" height="45" rx="10" fill="#FFFFFF" />
<circle cx="0" cy="-20" r="15" fill="#FFFFFF" />
<!-- Visor -->
<path d="M-8,-25 Q0,-30 8,-25 Q10,-15 0,-15 Q-10,-15 -8,-25" fill="url(#visorGrad)" />
<!-- Backpack -->
<rect x="-12" y="0" width="24" height="20" rx="5" fill="#DDDDDD" />
<!-- Arms -->
<rect x="-25" y="-5" width="15" height="10" rx="5" fill="#FFFFFF" transform="rotate(-30)" />
<rect x="10" y="-15" width="25" height="10" rx="5" fill="#FFFFFF" transform="rotate(30)" />
<!-- Legs -->
<rect x="-12" y="35" width="10" height="20" rx="5" fill="#FFFFFF" transform="rotate(-10)" />
<rect x="2" y="35" width="10" height="20" rx="5" fill="#FFFFFF" transform="rotate(10)" />
<!-- Pencil/Sword -->
<g transform="translate(25, -25) rotate(45)">
<rect x="0" y="0" width="60" height="8" rx="2" fill="url(#pencilGrad1)" />
<polygon points="60,0 60,8 75,4" fill="#4D4D4D" />
<polygon points="75,4 60,0 60,8" fill="#4D4D4D" />
<rect x="-15" y="2" width="15" height="4" fill="#FFD700" />
</g>
</g>
<!-- Astronaut 2 (right) -->
<g transform="translate(220, 170) rotate(20)">
<!-- Spacesuit -->
<rect x="-15" y="-5" width="30" height="45" rx="10" fill="#F0F0F0" />
<circle cx="0" cy="-20" r="15" fill="#F0F0F0" />
<!-- Visor -->
<path d="M-8,-25 Q0,-30 8,-25 Q10,-15 0,-15 Q-10,-15 -8,-25" fill="url(#visorGrad)" />
<!-- Backpack -->
<rect x="-12" y="0" width="24" height="20" rx="5" fill="#DDDDDD" />
<!-- Arms -->
<rect x="-25" y="-5" width="15" height="10" rx="5" fill="#F0F0F0" transform="rotate(-30)" />
<rect x="10" y="-15" width="25" height="10" rx="5" fill="#F0F0F0" transform="rotate(30)" />
<!-- Legs -->
<rect x="-12" y="35" width="10" height="20" rx="5" fill="#F0F0F0" transform="rotate(-10)" />
<rect x="2" y="35" width="10" height="20" rx="5" fill="#F0F0F0" transform="rotate(10)" />
<!-- Pencil/Sword -->
<g transform="translate(-25, -25) rotate(-225)">
<rect x="0" y="0" width="60" height="8" rx="2" fill="url(#pencilGrad2)" />
<polygon points="60,0 60,8 75,4" fill="#4D4D4D" />
<polygon points="75,4 60,0 60,8" fill="#4D4D4D" />
<rect x="-15" y="2" width="15" height="4" fill="#90EE90" />
</g>
</g>
<!-- Clash effect where pencils meet -->
<g transform="translate(150, 150)">
<polygon points="0,0 5,-10 10,-5 15,-15 5,-5 10,0 5,10" fill="#FFFFFF" filter="url(#glow)" opacity="0.9" />
<circle cx="0" cy="0" r="5" fill="#FFFF00" filter="url(#glow)" opacity="0.7" />
</g>
<!-- Footprints on moon surface -->
<g fill="#888888">
<ellipse cx="50" cy="255" rx="3" ry="5" transform="rotate(-15 50 255)" />
<ellipse cx="60" cy="250" rx="3" ry="5" transform="rotate(-15 60 250)" />
<ellipse cx="70" cy="245" rx="3" ry="5" transform="rotate(-15 70 245)" />
<ellipse cx="240" cy="255" rx="3" ry="5" transform="rotate(15 240 255)" />
<ellipse cx="230" cy="250" rx="3" ry="5" transform="rotate(15 230 250)" />
<ellipse cx="220" cy="245" rx="3" ry="5" transform="rotate(15 220 245)" />
</g>
<!-- Small craters -->
<circle cx="110" cy="240" r="8" fill="#909090" />
<circle cx="200" cy="250" r="12" fill="#909090" />
<circle cx="150" cy="255" r="5" fill="#909090" />
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision">
<defs>
<!-- Gradients -->
<radialGradient id="moonSurface" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#e0deda"/>
<stop offset="70%" stop-color="#a29c9f"/>
<stop offset="100%" stop-color="#6e6a70"/>
</radialGradient>
<radialGradient id="earthGlow" cx="0.5" cy="0.5" r="0.5">
<stop offset="0%" stop-color="#4db8ff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#00396b" stop-opacity="0"/>
</radialGradient>
<linearGradient id="pencilBodyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffcd4a"/>
<stop offset="100%" stop-color="#bf9b29"/>
</linearGradient>
<linearGradient id="pencilTipGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#331f1f"/>
<stop offset="100%" stop-color="#7a4d4d"/>
</linearGradient>
<linearGradient id="steelBlade" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#d9e4f5"/>
<stop offset="50%" stop-color="#a0bde9"/>
<stop offset="100%" stop-color="#9cb0df"/>
</linearGradient>
<radialGradient id="helmetGlass" cx="0.5" cy="0.4" r="0.6" fx="0.3" fy="0.3">
<stop offset="0%" stop-color="#a6d8ff" stop-opacity="0.9"/>
<stop offset="100%" stop-color="#004a9f" stop-opacity="0.1"/>
</radialGradient>
<pattern id="craterPattern" patternUnits="userSpaceOnUse" width="15" height="15">
<circle cx="7.5" cy="7.5" r="4" fill="#8a8688" />
<circle cx="11" cy="4" r="2" fill="#a39fa2" />
<circle cx="4" cy="11" r="3" fill="#7a7679" />
</pattern>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feDropShadow dx="1.5" dy="1.5" stdDeviation="1" flood-color="#222" flood-opacity="0.6"/>
</filter>
<filter id="glow" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#fef9e7" flood-opacity="0.7"/>
</filter>
</defs>
<!-- Background: Deep Space -->
<rect width="300" height="300" fill="url(#earthGlow)"/>
<rect width="300" height="300" fill="black" fill-opacity="0.9"/>
<!-- Stars clusters -->
<g stroke-width="0" fill="white" opacity="0.6">
<circle cx="25" cy="40" r="1.6"/>
<circle cx="50" cy="90" r="1.2"/>
<circle cx="70" cy="55" r="1.4"/>
<circle cx="120" cy="25" r="1"/>
<circle cx="175" cy="60" r="1.7"/>
<circle cx="210" cy="35" r="1.2"/>
<circle cx="260" cy="90" r="1.5"/>
<circle cx="280" cy="45" r="1.3"/>
<circle cx="230" cy="100" r="1.4"/>
<circle cx="60" cy="150" r="1.3"/>
<circle cx="85" cy="140" r="1.0"/>
<circle cx="110" cy="160" r="1.2"/>
<circle cx="250" cy="140" r="1.6"/>
</g>
<!-- Earth in background -->
<g filter="url(#glow)">
<circle cx="245" cy="58" r="40" fill="url(#earthGlow)" />
<circle cx="245" cy="58" r="38" fill="url(#earthGlow)" />
<circle cx="245" cy="58" r="36" fill="url(#earthGlow)" />
<circle cx="245" cy="58" r="33" fill="url(#earthGlow)" />
</g>
<circle cx="245" cy="58" r="35" fill="url(#earthGlow)" />
<!-- Earth details (land & water stylized) -->
<path fill="#3d88c9" opacity="0.7" d="M215 58q10 -18 28 -19 13 9 15 22 -5 9 -43 13z"/>
<path fill="#68a6e4" opacity="0.5" d="M245 90q-33 -15-16 -44 17 26 37 31 -2 8 -21 13z"/>
<path fill="#357f3d" opacity="0.6" d="M222 56q18 -6 29 7 -13 6-28 5z"/>
<path fill="#4aa053" opacity="0.4" d="M235 48q16 16 3 26 -11 -16 -3 -26z"/>
<!-- Moon surface with craters -->
<rect y="220" width="300" height="80" fill="url(#moonSurface)" />
<rect y="220" width="300" height="80" fill="url(#craterPattern)" opacity="0.35"/>
<!-- Soft shading on moon surface -->
<ellipse cx="150" cy="240" rx="120" ry="25" fill="#6d6b6d" opacity="0.2" />
<ellipse cx="180" cy="265" rx="90" ry="12" fill="#7f7b7e" opacity="0.15" />
<!-- Small craters -->
<circle cx="110" cy="235" r="12" fill="#8d8a8d" filter="url(#shadow)"/>
<circle cx="80" cy="260" r="8" fill="#7d7a7d" filter="url(#shadow)"/>
<circle cx="190" cy="240" r="14" fill="#7f7c7f" filter="url(#shadow)"/>
<circle cx="230" cy="270" r="10" fill="#8b888b" filter="url(#shadow)"/>
<circle cx="130" cy="280" r="7" fill="#8b888b" filter="url(#shadow)"/>
<!-- Astronaut 1 - Left -->
<g filter="url(#shadow)" transform="translate(80, 180)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="18" ry="26" fill="#f0f0f8" stroke="#bcc3cc" stroke-width="1.2"/>
<ellipse cx="0" cy="-5" rx="14" ry="20" fill="#e1e6ed" />
<!-- Suit details: paneling -->
<path d="M-12 10 L12 10 M-10 0 L10 0 M-8 -10 L8 -10" stroke="#9097a7" stroke-width="0.5"/>
<!-- Left arm bent holding pencil -->
<path stroke="#b5bac4" stroke-width="3" d="M-12 2 Q-22 -15 -6 -25" fill="none" />
<!-- Right arm forward -->
<path stroke="#b5bac4" stroke-width="3" d="M12 0 Q25 -5 25 -18" fill="none" />
<!-- Legs -->
<ellipse cx="-7" cy="24" rx="6" ry="12" fill="#dadde5"/>
<ellipse cx="7" cy="24" rx="6" ry="12" fill="#dadde5"/>
<path stroke="#afb7c1" stroke-width="1" d="M-7 12 L-7 36" />
<path stroke="#afb7c1" stroke-width="1" d="M7 12 L7 36" />
<!-- Backpack -->
<rect x="-13" y="-20" width="10" height="15" rx="2" ry="3" fill="#dce0e8" stroke="#bec5d3" stroke-width="0.8"/>
<rect x="-10" y="-19" width="5" height="11" fill="url(#pencilBodyGradient)" opacity="0.25"/>
<circle cx="-9" cy="-18" r="3" fill="#a6a9b6" />
<!-- Helmet -->
<ellipse cx="0" cy="-30" rx="18" ry="16" fill="#cad3df" />
<ellipse cx="0" cy="-30" rx="16" ry="14" fill="url(#helmetGlass)" stroke="#7691b8" stroke-width="1"/>
<!-- Helmet reflections -->
<path d="M-12 -40 Q-5 -38 0 -34 Q3 -35 6 -38" fill="none" stroke="#d7e5fc" stroke-width="1" opacity="0.5"/>
<!-- Face visor glow -->
<circle cx="-5" cy="-34" r="3" fill="white" opacity="0.3" />
</g>
<!-- Astronaut 2 - Right -->
<g filter="url(#shadow)" transform="translate(190, 190) scale(-1,1)">
<!-- Body -->
<ellipse cx="0" cy="0" rx="17" ry="25" fill="#f4f4fa" stroke="#babec8" stroke-width="1.2"/>
<ellipse cx="0" cy="-5" rx="13" ry="19" fill="#e9edf5" />
<!-- Suit panel lines -->
<path d="M-11 10 L11 10 M-9 0 L9 0 M-7 -10 L7 -10" stroke="#979baf" stroke-width="0.5"/>
<!-- Right arm bent holding pencil -->
<path stroke="#c1c5d5" stroke-width="3" d="M-12 2 Q-20 -15 -5 -25" fill="none" />
<!-- Left arm forward -->
<path stroke="#c1c5d5" stroke-width="3" d="M12 0 Q25 -5 25 -18" fill="none" />
<!-- Legs -->
<ellipse cx="-7" cy="24" rx="6" ry="11" fill="#dee0eb"/>
<ellipse cx="7" cy="24" rx="6" ry="11" fill="#dee0eb"/>
<path stroke="#b9bdca" stroke-width="1" d="M-7 12 L-7 35" />
<path stroke="#b9bdca" stroke-width="1" d="M7 12 L7 35" />
<!-- Backpack -->
<rect x="-12" y="-20" width="11" height="14" rx="2" ry="3" fill="#e0e3eb" stroke="#c1c6d7" stroke-width="0.8"/>
<rect x="-9" y="-19" width="5" height="12" fill="url(#pencilBodyGradient)" opacity="0.18"/>
<circle cx="-8" cy="-18" r="3" fill="#b7b9c6" />
<!-- Helmet -->
<ellipse cx="0" cy="-30" rx="17" ry="15" fill="#c8d1de" />
<ellipse cx="0" cy="-30" rx="15" ry="13" fill="url(#helmetGlass)" stroke="#7084b6" stroke-width="1"/>
<!-- Helmet reflections -->
<path d="M-11 -40 Q-6 -37 0 -33 Q4 -34 7 -37" fill="none" stroke="#dde6fa" stroke-width="1" opacity="0.4"/>
<!-- Face visor glow -->
<circle cx="-4" cy="-34" r="3" fill="white" opacity="0.3" />
</g>
<!-- Pencil 1 (held by astronaut 1) -->
<g transform="translate(80, 160) rotate(-20)" filter="url(#shadow)">
<rect x="0" y="0" width="12" height="90" rx="6" ry="6" fill="url(#pencilBodyGradient)" />
<!-- Pencil stripes for body pattern -->
<path stroke="#c49a20" stroke-width="1" d="M2 5 L10 5 M2 15 L10 15 M2 25 L10 25 M2 35 L10 35 M2 45 L10 45 M2 55 L10 55 M2 65 L10 65 M2 75 L10 75 M2 85 L10 85" opacity="0.3"/>
<!-- Eraser -->
<rect x="-1" y="-6" width="14" height="8" rx="3" ry="3" fill="#e27d7d" />
<path d="M0 -6 L12 -6" stroke="#c75a5a" stroke-width="1" />
<path d="M1 -4 L11 -4" stroke="#f9b0b0" stroke-width="0.8" opacity="0.7"/>
<!-- Metal ferrule -->
<rect x="0" y="82" width="12" height="8" fill="#9ca3af" />
<path d="M0 82 L12 82" stroke="#6b6f7a" stroke-width="0.8" />
<path d="M0 90 L12 90" stroke="#6b6f7a" stroke-width="0.8" />
<!-- Pencil tip wood -->
<polygon points="6,90 0,100 12,100" fill="#dbb487" />
<!-- Pencil graphite tip -->
<polygon points="6,92 3,100 9,100" fill="url(#pencilTipGradient)" />
</g>
<!-- Pencil 2 (held by astronaut 2) -->
<g transform="translate(190, 168) rotate(25)">
<rect x="0" y="0" width="11" height="95" rx="5" ry="5" fill="url(#pencilBodyGradient)" filter="url(#shadow)"/>
<!-- Pencil body stripes -->
<path stroke="#bd9723" stroke-width="1" d="M2 7 L9 7 M2 18 L9 18 M2 28 L9 28 M2 38 L9 38 M2 48 L9 48 M2 58 L9 58 M2 68 L9 68 M2 78 L9 78 M2 88 L9 88" opacity="0.25"/>
<!-- Eraser -->
<rect x="-1" y="-7" width="13" height="7" rx="2.5" ry="2.5" fill="#de8585" />
<path d="M0 -7 L11 -7" stroke="#b54e4e" stroke-width="1" />
<path d="M1 -5 L10 -5" stroke="#f9afaf" stroke-width="0.8" opacity="0.7"/>
<!-- Metal ferrule -->
<rect x="0" y="87" width="11" height="8" fill="#a2a5b2" />
<path d="M0 87 L11 87" stroke="#696b79" stroke-width="0.9" />
<path d="M0 95 L11 95" stroke="#696b79" stroke-width="0.9" />
<!-- Pencil tip wood -->
<polygon points="5.5,95 0,105 11,105" fill="#d8ae7e" />
<!-- Pencil graphite tip -->
<polygon points="5.5,97 2.5,105 8.5,105" fill="url(#pencilTipGradient)" />
</g>
<!-- Sword fight motion sparks -->
<g filter="url(#glow)" stroke="#fff7ab" stroke-width="1.6" stroke-linecap="round">
<line x1="127" y1="155" x2="135" y2="148" opacity="0.85" />
<line x1="130" y1="150" x2="138" y2="145" opacity="0.75" />
<line x1="132" y1="160" x2="142" y2="153" opacity="0.8" />
<line x1="165" y1="160" x2="157" y2="152" opacity="0.7" />
<line x1="170" y1="157" x2="160" y2="149" opacity="0.6" />
<line x1="168" y1="163" x2="159" y2="152" opacity="0.7" />
</g>
<!-- Shadows cast by astronauts and pencils on moon -->
<ellipse cx="80" cy="250" rx="20" ry="7" fill="rgba(0,0,0,0.33)" />
<ellipse cx="190" cy="250" rx="18" ry="6" fill="rgba(0,0,0,0.38)" />
<ellipse cx="155" cy="238" rx="6" ry="2.7" fill="rgba(0,0,0,0.28)" />
<!-- Small moon dust cloud from footsteps -->
<circle cx="70" cy="272" r="4" fill="#a8a8a8" opacity="0.55" />
<circle cx="90" cy="275" r="3" fill="#9b9b9b" opacity="0.55" />
<circle cx="200" cy="270" r="4" fill="#a8a8a8" opacity="0.45" />
<circle cx="180" cy="275" r="2.8" fill="#969696" opacity="0.55" />
<!-- Moon craters details near astronauts -->
<circle cx="75" cy="220" r="8" fill="#7f7c7f" opacity="0.38" />
<circle cx="95" cy="230" r="5" fill="#717070" opacity="0.45" />
<circle cx="195" cy="230" r="10" fill="#7a767a" opacity="0.4" />
<circle cx="175" cy="220" r="6" fill="#797779" opacity="0.42" />
</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 submission is more dynamic and visually engaging, with a sense of action conveyed through the poses of the astronauts and the glowing clash of the pencils.
The composition is clearer and the background is more polished, adding to the overall appeal.
While Player 2's submission adheres to the prompt, it feels static and less visually refined in comparison.
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
53
Player 2
105
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
17
Player 2
14
Circles
The number of circle elements (circle) in the SVG.
Player 1
20
Player 2
38
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
8
Player 2
17
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
6
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
5
Player 2
4
Paths
The number of path elements (path) in the SVG.
Player 1
3
Player 2
26
Groups
The number of group elements (g) in the SVG.
Player 1
7
Player 2
7
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
5
Player 2
6
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
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
32
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
1
Player 2
29
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
21
Player 2
79
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
22
Player 2
4
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
11
Player 2
98
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
Player 2
9
Use Elements
The number of use elements (use) in the SVG.
Player 1
3
Player 2
—
Text Metrics
Text Elements
The number of text elements (text) in the SVG.
Player 1
—
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.
