GPT-4o
Challenge Creator
Creative Challenge
"Two giraffes neck-wrestling under a disco ball."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradients for giraffe bodies -->
<linearGradient id="giraffeOrange" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFD580"/>
<stop offset="100%" stop-color="#FFB347"/>
</linearGradient>
<linearGradient id="giraffeYellow" x1="1" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FFFACD"/>
<stop offset="100%" stop-color="#FED85D"/>
</linearGradient>
<!-- Spot pattern -->
<pattern id="spots1" patternUnits="userSpaceOnUse" width="18" height="18">
<circle cx="5" cy="5" r="4" fill="#D9761A"/>
<circle cx="15" cy="12" r="3" fill="#B26513"/>
<circle cx="9" cy="13" r="2" fill="#C48822"/>
</pattern>
<pattern id="spots2" patternUnits="userSpaceOnUse" width="18" height="18">
<ellipse cx="7" cy="7" rx="3.5" ry="2.5" fill="#E09D1E"/>
<ellipse cx="13" cy="13" rx="2" ry="3" fill="#B48813"/>
<ellipse cx="12" cy="5" rx="1.5" ry="2" fill="#A87B23"/>
</pattern>
<!-- Disco ball gradient and mirror cells pattern -->
<radialGradient id="discoBallRadial" cx="0.5" cy="0.45" r="0.5">
<stop offset="0%" stop-color="#fff"/>
<stop offset="65%" stop-color="#C1EDFC"/>
<stop offset="100%" stop-color="#3A92B2"/>
</radialGradient>
<pattern id="mirrorCells" width="8" height="8" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="6.5" height="6.5" fill="#c2e4ed" stroke="#fff" stroke-width="1"/>
<rect x="4" y="4" width="4" height="4" fill="#7ad0ea" stroke="#fff" stroke-width="1"/>
</pattern>
<radialGradient id="lightFlash" cx="0.5" cy="0.1" r="1">
<stop offset="0%" stop-color="#fff" stop-opacity="0.65"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</radialGradient>
<!-- Colored disco lighting rays -->
<linearGradient id="rayPink" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fd36b1" stop-opacity="0.85"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="rayBlue" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#45ecff" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
<linearGradient id="rayYellow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#feffb3" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#fff" stop-opacity="0"/>
</linearGradient>
</defs>
<rect width="300" height="300" fill="#2B1D3A"/>
<!-- Disco rays -->
<g>
<polygon points="150,55 95,120 120,130" fill="url(#rayPink)" opacity="0.7"/>
<polygon points="150,55 205,120 176,129" fill="url(#rayBlue)" opacity="0.7"/>
<polygon points="150,55 90,170 120,175" fill="url(#rayYellow)" opacity="0.6"/>
<polygon points="150,55 210,170 180,176" fill="url(#rayPink)" opacity="0.5"/>
<polygon points="150,55 150,230 160,230" fill="url(#rayBlue)" opacity="0.55"/>
<polygon points="150,55 128,228 138,228" fill="url(#rayPink)" opacity="0.4"/>
<polygon points="150,55 175,229 185,229" fill="url(#rayYellow)" opacity="0.45"/>
</g>
<!-- Hanging string for disco ball -->
<rect x="147" y="20" width="6" height="28" rx="2" fill="#b3d8f6"/>
<!-- Disco ball -->
<g>
<circle cx="150" cy="55" r="28" fill="url(#discoBallRadial)" stroke="#4ED6FA" stroke-width="2"/>
<circle cx="150" cy="55" r="26" fill="url(#mirrorCells)" opacity="0.82"/>
<!-- Flares on disco ball -->
<ellipse cx="160" cy="48" rx="3.2" ry="1.2" fill="#fff" opacity="0.45"/>
<ellipse cx="140" cy="63" rx="3.2" ry="1.1" fill="#fff" opacity="0.27"/>
<ellipse cx="148" cy="50" rx="1.3" ry="0.6" fill="#fff" opacity="0.8"/>
<ellipse cx="153" cy="67" rx="1.6" ry="0.7" fill="#fff" opacity="0.9"/>
<!-- Sparkles -->
<g>
<polygon points="150,29 151,33 155,34 151,35 150,39 149,35 145,34 149,33" fill="#fff" opacity="0.72"/>
<polygon points="170,46 172,48 174,47 172,49 172,51 170,50 168,51 170,49" fill="#fff" opacity="0.54"/>
<polygon points="132,60 134,61 135,59 134,62 133,64 132,62 130,64 132,62" fill="#fff" opacity="0.54"/>
<polygon points="149,81 151,83 153,82 151,84 151,87 149,85 147,87 149,84" fill="#fff" opacity="0.35"/>
<polygon points="166,76 167,78 169,77 168,79 167,81 166,79 164,81 166,79" fill="#fff" opacity="0.23"/>
</g>
</g>
<!-- Light reflect on dancefloor -->
<ellipse cx="150" cy="266" rx="70" ry="14" fill="url(#lightFlash)" opacity="0.5"/>
<!-- Giraffe 1 (Left, bent neck to right) -->
<g>
<!-- Body -->
<ellipse cx="92" cy="236" rx="34" ry="23" fill="url(#giraffeOrange)"/>
<!-- Leg Left-Front -->
<rect x="74" y="259" width="7" height="27" rx="4" fill="#F3BA75"/>
<rect x="112" y="259" width="7" height="27" rx="4" fill="#E8AB48"/>
<!-- Leg Rear -->
<rect x="87" y="262" width="8" height="24" rx="4" fill="#FBCB62"/>
<rect x="105" y="262" width="8" height="24" rx="4" fill="#FFD580"/>
<!-- Spots on body -->
<ellipse cx="88" cy="240" rx="6" ry="4.8" fill="#d49219" opacity="0.73"/>
<ellipse cx="105" cy="230" rx="5" ry="3.2" fill="#e5b03e" opacity="0.59"/>
<ellipse cx="112" cy="246" rx="3.2" ry="2.5" fill="#c48822" opacity="0.7"/>
<!-- Tail -->
<path d="M66,250 C57,267 77,265 76,252" stroke="#D4961C" stroke-width="2.2" fill="none"/>
<ellipse cx="63" cy="266" rx="2" ry="1" fill="#4B2B13"/>
<!-- Neck -->
<path id="giraffe1Neck" d="M97,220
C99,170 110,115 148,115
C166,115 175,157 165,173
C152,195 113,195 124,170
C125,144 147,134 148,115"
stroke="#B35C15" stroke-width="9" fill="none"/>
<path d="M103,190
C110,165 145,140 163,170
Q171,182 158,190
Q130,201 119,184
" stroke="none" fill="url(#giraffeOrange)" opacity="0.92"/>
<!-- Neck pattern (spots) -->
<path d="M114,170 C123,160 132,150 142,152" stroke="#B26513" stroke-width="2.7" fill="none" opacity="0.7"/>
<ellipse cx="121" cy="134" rx="2.1" ry="1.5" fill="#dba631" opacity="0.6"/>
<ellipse cx="130" cy="154" rx="1.5" ry="1.1" fill="#b26513" opacity="0.7"/>
<ellipse cx="126" cy="162" rx="1.7" ry="0.9" fill="#dba631" opacity="0.7"/>
<ellipse cx="146" cy="153" rx="1.2" ry="1" fill="#dba631" opacity="0.68"/>
<!-- Head -->
<g>
<ellipse cx="165" cy="116" rx="13" ry="9" fill="url(#giraffeOrange)" stroke="#fbc17d" stroke-width="2"/>
<!-- Muzzle -->
<ellipse cx="172" cy="120.5" rx="6" ry="4" fill="#fddea0" stroke="#e6b372" stroke-width="0.5"/>
<!-- Ear -->
<ellipse cx="153" cy="112" rx="2.2" ry="4.2" fill="#ffe7be" stroke="#fbc17d" stroke-width="0.5" transform="rotate(-15 153 112)"/>
<!-- Ossicones -->
<rect x="162" y="103" width="1.4" height="6" rx="1" fill="#b26513"/>
<ellipse cx="163" cy="102" rx="1.1" ry="1.4" fill="#e5b03e"/>
<rect x="169" y="104" width="1.4" height="6" rx="1" fill="#b26513"/>
<ellipse cx="170" cy="104" rx="1" ry="1.3" fill="#e5b03e"/>
<!-- Eye -->
<ellipse cx="169" cy="115" rx="0.7" ry="1.1" fill="#3b2e25"/>
<ellipse cx="167.2" cy="117" rx="0.3" ry="0.25" fill="#fff"/>
<!-- Cheek Spot -->
<ellipse cx="174" cy="118" rx="0.8" ry="0.6" fill="#d09221" opacity="0.58"/>
<ellipse cx="163" cy="121" rx="1" ry="0.6" fill="#e5b03e" opacity="0.4"/>
</g>
</g>
<!-- Giraffe 2 (Right, neck swings leftward) -->
<g>
<!-- Body -->
<ellipse cx="210" cy="236" rx="34" ry="23" fill="url(#giraffeYellow)"/>
<!-- Leg Front -->
<rect x="227" y="259" width="8" height="27" rx="4" fill="#f7e188"/>
<rect x="195" y="259" width="8" height="27" rx="4" fill="#ffffc0"/>
<!-- Leg Rear -->
<rect x="204" y="262" width="8" height="24" rx="4" fill="#fbeab6"/>
<rect x="222" y="262" width="8" height="24" rx="4" fill="#d5b640"/>
<!-- Spots on body -->
<ellipse cx="217" cy="241" rx="5" ry="4.2" fill="#E09D1E" opacity="0.67"/>
<ellipse cx="204" cy="230" rx="4.4" ry="2.9" fill="#B48813" opacity="0.57"/>
<ellipse cx="220" cy="250" rx="2.6" ry="1.8" fill="#A87B23" opacity="0.7"/>
<!-- Tail -->
<path d="M236,250 C245,267 226,265 227,252" stroke="#B48813" stroke-width="2.2" fill="none"/>
<ellipse cx="240" cy="266" rx="2" ry="1" fill="#4B2B13"/>
<!-- Neck -->
<path id="giraffe2Neck" d="M206,216
C207,170 210,120 145,124
C132,125 125,145 143,148
C149,149 161,144 157,164
C149,190 192,189 185,155
C180,140 152,135 145,124
" stroke="#a07c19" stroke-width="9" fill="none"/>
<path d="M203,165
C204,148 162,134 151,161
Q145,176 172,182
Q198,185 200,172
Q201,158 180,150"
stroke="none" fill="url(#giraffeYellow)" opacity="0.95"/>
<!-- Neck pattern (spots) -->
<ellipse cx="172" cy="140" rx="2.7" ry="1.5" fill="#B48813" opacity="0.63"/>
<ellipse cx="147" cy="124" rx="1.8" ry="1.1" fill="#E09D1E" opacity="0.71"/>
<ellipse cx="142" cy="133" rx="1.2" ry="0.8" fill="#E09D1E" opacity="0.41"/>
<ellipse cx="159" cy="155" rx="1.3" ry="1.4" fill="#B48813" opacity="0.57"/>
<!-- Head -->
<g>
<ellipse cx="140" cy="122" rx="13" ry="9" fill="url(#giraffeYellow)" stroke="#FFF7C0" stroke-width="2"/>
<!-- Muzzle -->
<ellipse cx="132" cy="127" rx="6.1" ry="3.7" fill="#fff5c8" stroke="#fbeab6" stroke-width="0.5"/>
<!-- Ear -->
<ellipse cx="150" cy="118" rx="2.2" ry="5" fill="#fbeab6" stroke="#fffde7" stroke-width="0.6" transform="rotate(20 150 118)"/>
<!-- Ossicones -->
<rect x="135" y="111" width="1.2" height="6" rx="1" fill="#B48813"/>
<ellipse cx="135.5" cy="110" rx="1.1" ry="1.4" fill="#E09D1E"/>
<rect x="142" y="113" width="1.2" height="6" rx="1" fill="#B48813"/>
<ellipse cx="143" cy="113" rx="1" ry="1.3" fill="#E09D1E"/>
<!-- Eye -->
<ellipse cx="135" cy="123" rx="0.7" ry="1.1" fill="#473822"/>
<ellipse cx="136.6" cy="122" rx="0.3" ry="0.26" fill="#fff"/>
<!-- Cheek Spot -->
<ellipse cx="133.7" cy="127" rx="0.7" ry="0.5" fill="#B48813" opacity="0.47"/>
<ellipse cx="144.5" cy="127" rx="1" ry="0.5" fill="#E09D1E" opacity="0.4"/>
</g>
</g>
<!-- Floor and lights reflection highlights -->
<g>
<ellipse cx="150" cy="275" rx="95" ry="18" fill="url(#lightFlash)" opacity="0.12"/>
<ellipse cx="85" cy="275" rx="13" ry="3.5" fill="#fff" opacity="0.12"/>
<ellipse cx="215" cy="275" rx="13" ry="3.5" fill="#fff" opacity="0.14"/>
<ellipse cx="150" cy="290" rx="29" ry="3.4" fill="#fff" opacity="0.07"/>
</g>
<!-- They nuzzle: a heart shape where giraffe faces meet -->
<path d="M146 122
Q148 127 151.5 125
Q156 127 153 122
Q151.5 121 149 124
Q147.5 121 146 122
Z" fill="#fd36b1" opacity="0.72"/>
<!-- Music notes for disco effect -->
<g>
<g transform="rotate(-13 90 82)">
<ellipse cx="90" cy="82" rx="1.5" ry="2.5" fill="#fd36b1"/>
<rect x="89.7" y="78" width="0.6" height="3.6" fill="#fd36b1"/>
<path d="M90.1 78.2 Q91.5 77 92 78.2" stroke="#fd36b1" stroke-width="0.5" fill="none"/>
</g>
<g transform="rotate(8 210 75)">
<ellipse cx="210" cy="75" rx="1.6" ry="2.2" fill="#a7f1de"/>
<rect x="209.8" y="71.4" width="0.5" height="3.6" fill="#45ecff"/>
<path d="M210.1 71.6 Q211.2 70.4 212.1 71.6" stroke="#45ecff" stroke-width="0.5" fill="none"/>
</g>
<g transform="rotate(2 140 45)">
<ellipse cx="137" cy="43" rx="0.9" ry="1.7" fill="#feffb3"/>
<rect x="136.7" y="41.5" width="0.3" height="2" fill="#feffb3"/>
<path d="M136.9 41.5 Q138.5 40.8 137.3 41.8" stroke="#feffb3" stroke-width="0.4" fill="none"/>
</g>
<g transform="rotate(-7 168 27)">
<ellipse cx="168" cy="27" rx="1.2" ry="2.2" fill="#C1EDFC"/>
<rect x="167.7" y="23.5" width="0.4" height="3.0" fill="#4ED6FA"/>
<path d="M167.9 23.7 Q168.7 22.3 169.4 23.6" stroke="#4ED6FA" stroke-width="0.3" fill="none"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="discoGrad">
<stop offset="0%" style="stop-color:#ff00ff"/>
<stop offset="25%" style="stop-color:#00ffff"/>
<stop offset="50%" style="stop-color:#ffff00"/>
<stop offset="75%" style="stop-color:#ff00ff"/>
<stop offset="100%" style="stop-color:#00ff00"/>
</radialGradient>
<linearGradient id="giraffeGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f4a460"/>
<stop offset="100%" style="stop-color:#d2691e"/>
</linearGradient>
<linearGradient id="giraffeGrad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#daa520"/>
<stop offset="100%" style="stop-color:#b8860b"/>
</linearGradient>
<pattern id="spots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="6" fill="#8b4513" opacity="0.7"/>
</pattern>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="#1a0033"/>
<!-- Disco lights -->
<circle cx="50" cy="250" r="40" fill="#ff00ff" opacity="0.3" filter="url(#glow)"/>
<circle cx="250" cy="250" r="40" fill="#00ffff" opacity="0.3" filter="url(#glow)"/>
<circle cx="150" cy="280" r="30" fill="#ffff00" opacity="0.3" filter="url(#glow)"/>
<!-- Disco ball -->
<circle cx="150" cy="40" r="25" fill="url(#discoGrad)" stroke="#silver" stroke-width="1"/>
<rect x="148" y="0" width="4" height="40" fill="#666"/>
<!-- Disco ball mirrors -->
<g transform="translate(150,40)">
<rect x="-20" y="-20" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(0)"/>
<rect x="-10" y="-22" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(30)"/>
<rect x="0" y="-20" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(60)"/>
<rect x="10" y="-15" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(90)"/>
<rect x="15" y="-5" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(120)"/>
<rect x="10" y="5" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(150)"/>
<rect x="0" y="10" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(180)"/>
<rect x="-10" y="10" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(210)"/>
<rect x="-20" y="5" width="8" height="8" fill="#fff" opacity="0.9" transform="rotate(240)"/>
</g>
<!-- Giraffe 1 -->
<g transform="translate(80,200)">
<ellipse cx="0" cy="50" rx="40" ry="30" fill="url(#giraffeGrad1)"/>
<rect x="-15" y="50" width="10" height="40" fill="url(#giraffeGrad1)"/>
<rect x="5" y="50" width="10" height="40" fill="url(#giraffeGrad1)"/>
<path d="M -20 30 Q -30 -50 -10 -80 L 5 -75 Q 15 -45 0 20" fill="url(#giraffeGrad1)" stroke="none"/>
<ellipse cx="-5" cy="-80" rx="15" ry="20" fill="url(#giraffeGrad1)"/>
<circle cx="-10" cy="-85" r="3" fill="#000"/>
<circle cx="0" cy="-85" r="3" fill="#000"/>
<ellipse cx="-15" cy="-95" rx="3" ry="8" fill="url(#giraffeGrad1)"/>
<ellipse cx="5" cy="-95" rx="3" ry="8" fill="url(#giraffeGrad1)"/>
<g fill="url(#spots)">
<ellipse cx="0" cy="50" rx="40" ry="30"/>
<path d="M -20 30 Q -30 -50 -10 -80 L 5 -75 Q 15 -45 0 20"/>
</g>
</g>
<!-- Giraffe 2 -->
<g transform="translate(220,200)">
<ellipse cx="0" cy="50" rx="40" ry="30" fill="url(#giraffeGrad2)"/>
<rect x="-15" y="50" width="10" height="40" fill="url(#giraffeGrad2)"/>
<rect x="5" y="50" width="10" height="40" fill="url(#giraffeGrad2)"/>
<path d="M 20 30 Q 30 -50 10 -80 L -5 -75 Q -15 -45 0 20" fill="url(#giraffeGrad2)" stroke="none"/>
<ellipse cx="5" cy="-80" rx="15" ry="20" fill="url(#giraffeGrad2)"/>
<circle cx="10" cy="-85" r="3" fill="#000"/>
<circle cx="0" cy="-85" r="3" fill="#000"/>
<ellipse cx="15" cy="-95" rx="3" ry="8" fill="url(#giraffeGrad2)"/>
<ellipse cx="-5" cy="-95" rx="3" ry="8" fill="url(#giraffeGrad2)"/>
<g fill="url(#spots)">
<ellipse cx="0" cy="50" rx="40" ry="30"/>
<path d="M 20 30 Q 30 -50 10 -80 L -5 -75 Q -15 -45 0 20"/>
</g>
</g>
<!-- Motion lines -->
<path d="M 100 100 Q 150 90 200 100" stroke="#fff" stroke-width="2" fill="none" opacity="0.5" stroke-dasharray="5,5">
<animate attributeName="opacity" values="0.5;0.8;0.5" dur="2s" repeatCount="indefinite"/>
</path>
<!-- Sparkles -->
<g fill="#fff" opacity="0.8">
<circle cx="120" cy="80" r="2">
<animate attributeName="opacity" values="0;1;0" dur="1.5s" repeatCount="indefinite"/>
</circle>
<circle cx="180" cy="90" r="2">
<animate attributeName="opacity" values="0;1;0" dur="1.5s" begin="0.5s" repeatCount="indefinite"/>
</circle>
<circle cx="150" cy="100" r="2">
<animate attributeName="opacity" values="0;1;0" dur="1.5s" begin="1s" repeatCount="indefinite"/>
</circle>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
GPT-4.1 (2025-04-14)
Player 1
Judge's Analysis
Player 1's submission is more creative and adheres better to the prompt by depicting the giraffes actively neck-wrestling under a disco ball, with dynamic poses and lighting effects.
The composition is visually appealing with attention to detail, such as the disco lighting and playful expressions.
Player 2's submission, while colorful, lacks the interaction and movement central to the prompt, making it less engaging overall.
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
101
Player 2
42
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
20
Player 2
15
Circles
The number of circle elements (circle) in the SVG.
Player 1
5
Player 2
12
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
52
Player 2
10
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
12
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
12
Player 2
5
Groups
The number of group elements (g) in the SVG.
Player 1
13
Player 2
6
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
7
Player 2
3
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
3
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 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
44
Player 2
15
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
20
Player 2
4
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
47
Player 2
9
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
—
Player 2
4
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
6
Player 2
12
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
40
Player 2
18
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
5
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
—
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.