GPT-4o
Challenge Creator
Creative Challenge
"An octopus wearing a crown, holding a scepter, and sitting on a coral throne."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4682B4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#191970;stop-opacity:1" />
</linearGradient>
<radialGradient id="goldGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />
<stop offset="100%" style="stop-color:#B8860B;stop-opacity:1" />
</radialGradient>
<linearGradient id="scepterGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#C0C0C0;stop-opacity:1" />
<stop offset="50%" style="stop-color:#FFFFFF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#A9A9A9;stop-opacity:1" />
</linearGradient>
<linearGradient id="throneGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6347;stop-opacity:1" />
<stop offset="50%" style="stop-color:#CD5C5C;stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B0000;stop-opacity:1" />
</linearGradient>
<pattern id="bubblePattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="2" fill="rgba(255, 255, 255, 0.3)"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#oceanGradient)" />
<rect width="300" height="300" fill="url(#bubblePattern)" opacity="0.5"/>
<!-- Coral Throne -->
<path d="M50 280 Q 70 240 100 250 T 150 260 Q 200 250 230 240 T 250 280 L 250 290 L 50 290 Z" fill="url(#throneGradient)"/>
<path d="M60 275 Q 80 235 110 245 T 160 255 Q 210 245 240 235 T 240 275 L 240 285 L 60 285 Z" fill="#D2691E"/>
<circle cx="150" cy="250" r="15" fill="#FF7F50"/>
<circle cx="100" cy="260" r="10" fill="#FF7F50"/>
<circle cx="200" cy="260" r="10" fill="#FF7F50"/>
<!-- Octopus Body -->
<ellipse cx="150" cy="180" rx="60" ry="40" fill="#8A2BE2"/>
<ellipse cx="150" cy="180" rx="55" ry="35" fill="#9370DB"/>
<!-- Octopus Eyes -->
<circle cx="130" cy="170" r="8" fill="#000000"/>
<circle cx="170" cy="170" r="8" fill="#000000"/>
<circle cx="130" cy="170" r="3" fill="#FFFFFF"/>
<circle cx="170" cy="170" r="3" fill="#FFFFFF"/>
<!-- Octopus Tentacles -->
<path d="M150 220 Q 120 240 100 270 Q 90 280 100 290" stroke="#9370DB" stroke-width="8" fill="none"/>
<path d="M150 220 Q 180 240 200 270 Q 210 280 200 290" stroke="#9370DB" stroke-width="8" fill="none"/>
<path d="M150 220 Q 140 250 120 280 Q 110 290 120 295" stroke="#9370DB" stroke-width="8" fill="none"/>
<path d="M150 220 Q 160 250 180 280 Q 190 290 180 295" stroke="#9370DB" stroke-width="8" fill="none"/>
<path d="M150 220 Q 150 260 150 290" stroke="#9370DB" stroke-width="8" fill="none"/>
<!-- Crown -->
<path d="M130 140 L 140 130 L 150 140 L 160 130 L 170 140 L 170 150 L 130 150 Z" fill="url(#goldGradient)"/>
<circle cx="135" cy="135" r="3" fill="#DC143C"/>
<circle cx="150" cy="132" r="3" fill="#DC143C"/>
<circle cx="165" cy="135" r="3" fill="#DC143C"/>
<!-- Scepter -->
<rect x="210" y="180" width="10" height="50" fill="url(#scepterGradient)"/>
<circle cx="215" cy="175" r="8" fill="#FF4500"/>
<circle cx="215" cy="175" r="4" fill="#FFD700"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'>
<defs>
<!-- Background Gradient -->
<linearGradient id="seaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#187bcd; stop-opacity:1" />
<stop offset="30%" style="stop-color:#1E90FF; stop-opacity:1" />
<stop offset="100%" style="stop-color:#001f3f; stop-opacity:1" />
</linearGradient>
<!-- Octopus Gradients & Patterns -->
<radialGradient id="octopusBodyGradientDef" cx="50%" cy="40%" r="60%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#FF69B4;" /> <!-- Lighter top, Pinkish -->
<stop offset="40%" style="stop-color:#C71585;" /> <!-- MediumVioletRed -->
<stop offset="100%" style="stop-color:#8A2BE2;" /> <!-- BlueViolet -->
</radialGradient>
<linearGradient id="octopusTentacleGradientDef" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#8A2BE2;" />
<stop offset="50%" style="stop-color:#C71585;" />
<stop offset="100%" style="stop-color:#DA70D6;" /> <!-- Lighter end, Orchid -->
</linearGradient>
<pattern id="octopusSkinPatternDef" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<circle cx="2" cy="2" r="1.2" fill="rgba(255,255,255,0.12)"/>
<circle cx="6" cy="6" r="0.9" fill="rgba(255,255,255,0.08)"/>
</pattern>
<!-- Gold Gradient -->
<linearGradient id="goldGradientDef" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFEE70; stop-opacity:1" /> <!-- Lighter Gold -->
<stop offset="50%" style="stop-color:#FFD700; stop-opacity:1" /> <!-- Gold -->
<stop offset="100%" style="stop-color:#DAA520; stop-opacity:1" /> <!-- Goldenrod -->
</linearGradient>
<!-- Gem Gradients -->
<radialGradient id="rubyGradientDef" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
<stop offset="0%" style="stop-color:#FFB6C1; stop-opacity:1" />
<stop offset="40%" style="stop-color:#DC143C; stop-opacity:1" />
<stop offset="100%" style="stop-color:#8B0000; stop-opacity:1" />
</radialGradient>
<radialGradient id="sapphireGradientDef" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
<stop offset="0%" style="stop-color:#ADD8E6; stop-opacity:1" />
<stop offset="40%" style="stop-color:#4169E1; stop-opacity:1" />
<stop offset="100%" style="stop-color:#00008B; stop-opacity:1" />
</radialGradient>
<!-- Coral Gradients -->
<linearGradient id="coralPinkGradientDef" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FFC0CB; stop-opacity:1" /> <!-- Pink -->
<stop offset="100%" style="stop-color:#FF69B4; stop-opacity:1" /> <!-- HotPink -->
</linearGradient>
<linearGradient id="coralOrangeGradientDef" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FFA07A; stop-opacity:1" /> <!-- LightSalmon -->
<stop offset="100%" style="stop-color:#FF4500; stop-opacity:1" /> <!-- OrangeRed -->
</linearGradient>
<linearGradient id="coralPurpleGradientDef" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#D8BFD8; stop-opacity:1" /> <!-- Thistle -->
<stop offset="100%" style="stop-color:#9370DB; stop-opacity:1" /> <!-- MediumPurple -->
</linearGradient>
<!-- Scepter Orb Gradient -->
<radialGradient id="orbGradientDef" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" style="stop-color:#FFFFFF; stop-opacity:0.95;" />
<stop offset="50%" style="stop-color:#AFEEEE; stop-opacity:0.8;" />
<stop offset="100%" style="stop-color:#40E0D0; stop-opacity:0.6;" />
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#seaGradient)" />
<g opacity="0.12" fill="white">
<path d="M70,-10 L90,-10 L30,310 L10,310 Z" transform="skewX(-15)"/>
<path d="M140,-10 L160,-10 L100,310 L80,310 Z" transform="skewX(-15)"/>
<path d="M210,-10 L230,-10 L170,310 L150,310 Z" transform="skewX(-15)"/>
<path d="M280,-10 L300,-10 L240,310 L220,310 Z" transform="skewX(-15)"/>
</g>
<!-- Coral Throne -->
<g id="coralThrone">
<!-- Base/Seat - Brain Coral like -->
<path d="M70,260 Q150,190 230,260 Q150,340 70,260 Z" fill="url(#coralPinkGradientDef)" stroke="#D147A3" stroke-width="2"/>
<path d="M85,255 Q150,200 215,255 Q150,315 85,255 Z" fill="url(#coralOrangeGradientDef)" stroke="#D94D1A" stroke-width="1.5" opacity="0.85"/>
<path d="M100,250 C120,240 130,260 150,255 C170,250 180,260 200,250" fill="none" stroke="#FF1493" stroke-width="1.5" opacity="0.6"/>
<path d="M110,260 C130,250 140,270 150,265 C160,260 170,270 190,260" fill="none" stroke="#FF1493" stroke-width="1.5" opacity="0.6"/>
<!-- Backrest - Staghorn/Branching -->
<g transform="translate(0, -15)">
<path d="M150,190 L140,160 C125,120 90,135 80,170 L95,195 Z" fill="url(#coralPurpleGradientDef)" stroke="#7A5DA8" stroke-width="1.5"/>
<path d="M150,190 L160,160 C175,120 210,135 220,170 L205,195 Z" fill="url(#coralPurpleGradientDef)" stroke="#7A5DA8" stroke-width="1.5"/>
<path d="M125,200 C90,180 100,145 120,135 C135,125 130,160 140,180 Z" fill="url(#coralOrangeGradientDef)" stroke="#D2691E" stroke-width="1.5"/>
<path d="M175,200 C210,180 200,145 180,135 C165,125 170,160 160,180 Z" fill="url(#coralOrangeGradientDef)" stroke="#D2691E" stroke-width="1.5"/>
<ellipse cx="150" cy="155" rx="45" ry="30" fill="url(#coralPinkGradientDef)" opacity="0.6" transform="rotate(-5, 150, 155)"/>
<path d="M150,155 C130,145 130,165 150,155 M150,155 C170,145 170,165 150,155 M150,155 C140,140 160,140 150,155 M150,155 C140,170 160,170 150,155"
stroke="#FF1493" stroke-width="0.7" fill="none" opacity="0.7" transform="rotate(-5, 150, 155)"/>
</g>
<!-- Armrests -->
<path d="M65,230 C30,210 40,170 75,180 C100,190 90,245 65,230 Z" fill="url(#coralOrangeGradientDef)" stroke="#D2691E" stroke-width="1.5"/>
<path d="M235,230 C270,210 260,170 225,180 C200,190 210,245 235,230 Z" fill="url(#coralOrangeGradientDef)" stroke="#D2691E" stroke-width="1.5"/>
</g>
<!-- Octopus King -->
<g id="octopusKing">
<g id="tentacles" stroke="#4B0082" stroke-width="2" fill="url(#octopusTentacleGradientDef)">
<!-- Back Tentacles -->
<path d="M140,200 C100,210 50,240 60,270 C70,300 110,280 130,250">
<animate attributeName="d" values="M140,200 C100,210 50,240 60,270 C70,300 110,280 130,250; M140,200 C95,215 45,245 55,275 C65,305 115,285 135,255; M140,200 C100,210 50,240 60,270 C70,300 110,280 130,250" dur="6s" repeatCount="indefinite"/>
</path>
<path d="M160,200 C200,210 250,240 240,270 C230,300 190,280 170,250">
<animate attributeName="d" values="M160,200 C200,210 250,240 240,270 C230,300 190,280 170,250; M160,200 C205,215 255,245 245,275 C235,305 185,285 165,255; M160,200 C200,210 250,240 240,270 C230,300 190,280 170,250" dur="6.2s" repeatCount="indefinite"/>
</path>
<!-- Mid Back/Side Tentacles -->
<path d="M125,195 C90,190 65,210 70,235 C75,260 105,260 125,240">
<animate attributeName="d" values="M125,195 C90,190 65,210 70,235 C75,260 105,260 125,240; M125,195 C85,195 60,215 65,240 C70,265 110,265 130,245; M125,195 C90,190 65,210 70,235 C75,260 105,260 125,240" dur="5.8s" repeatCount="indefinite"/>
</path>
<path d="M175,195 C210,190 235,210 230,235 C225,260 195,260 175,240">
<animate attributeName="d" values="M175,195 C210,190 235,210 230,235 C225,260 195,260 175,240; M175,195 C215,195 240,215 235,240 C230,265 190,265 170,245; M175,195 C210,190 235,210 230,235 C225,260 195,260 175,240" dur="6.1s" repeatCount="indefinite"/>
</path>
</g>
<!-- Octopus Body -->
<ellipse cx="150" cy="180" rx="55" ry="50" fill="url(#octopusBodyGradientDef)" stroke="#4B0082" stroke-width="2"/>
<ellipse cx="150" cy="180" rx="55" ry="50" fill="url(#octopusSkinPatternDef)" />
<!-- Octopus Eyes -->
<g id="octopusEyes">
<g transform="translate(-22, -10)">
<ellipse cx="130" cy="170" rx="13" ry="16" fill="#FFF8DC" />
<ellipse cx="130" cy="170" rx="9" ry="11" fill="#FFBF00" /> <!-- Amber iris -->
<ellipse cx="132.5" cy="172.5" rx="4.5" ry="5.5" fill="black" />
<circle cx="128" cy="167" r="2.5" fill="white" fill-opacity="0.9"/>
</g>
<g transform="translate(22, -10)">
<ellipse cx="170" cy="170" rx="13" ry="16" fill="#FFF8DC" />
<ellipse cx="170" cy="170" rx="9" ry="11" fill="#FFBF00" />
<ellipse cx="172.5" cy="172.5" rx="4.5" ry="5.5" fill="black" />
<circle cx="168" cy="167" r="2.5" fill="white" fill-opacity="0.9"/>
</g>
</g>
<!-- Front Tentacles -->
<g id="frontTentacles" stroke="#4B0082" stroke-width="2" fill="url(#octopusTentacleGradientDef)">
<path d="M125,205 C90,220 75,250 95,280 C115,310 135,280 135,260">
<animate attributeName="d" values="M125,205 C90,220 75,250 95,280 C115,310 135,280 135,260; M125,205 C85,225 70,255 90,285 C110,315 140,285 140,265; M125,205 C90,220 75,250 95,280 C115,310 135,280 135,260" dur="5.9s" repeatCount="indefinite"/>
</path>
<path d="M175,205 C210,220 225,250 205,280 C185,310 165,280 165,260">
<animate attributeName="d" values="M175,205 C210,220 225,250 205,280 C185,310 165,280 165,260; M175,205 C215,225 230,255 210,285 C190,315 160,285 160,265; M175,205 C210,220 225,250 205,280 C185,310 165,280 165,260" dur="6.3s" repeatCount="indefinite"/>
</path>
<path d="M115,190 C80,180 55,200 65,230 C75,260 110,240 125,220">
<animate attributeName="d" values="M115,190 C80,180 55,200 65,230 C75,260 110,240 125,220; M115,190 C75,175 50,195 60,225 C70,255 115,235 130,215; M115,190 C80,180 55,200 65,230 C75,260 110,240 125,220" dur="6s" repeatCount="indefinite"/>
</path>
<!-- Tentacle holding scepter (scepter will be visually in front/on top of this) -->
<path id="scepterHoldingTentacle" d="M185,190 C220,180 245,200 235,230 C225,260 190,240 175,220">
<animate attributeName="d" values="M185,190 C220,180 245,200 235,230 C225,260 190,240 175,220; M185,190 C225,175 250,195 240,225 C230,255 185,235 170,215; M185,190 C220,180 245,200 235,230 C225,260 190,240 175,220" dur="6.2s" repeatCount="indefinite"/>
</path>
</g>
<!-- Representative Suckers -->
<g fill="#E6E6FA" opacity="0.6"> <!-- Lavender suckers -->
<circle cx="220" cy="210" r="3.5"/> <circle cx="225" cy="219" r="4"/> <circle cx="228" cy="228" r="3.5"/> <!-- Tentacle near scepter -->
<circle cx="80" cy="250" r="3.5"/> <circle cx="85" cy="260" r="4"/> <circle cx="90" cy="270" r="3.5"/> <!-- Front left tentacle -->
</g>
</g>
<!-- Scepter -->
<g id="scepter" transform="translate(230, 150) rotate(15)">
<rect x="-4.5" y="0" width="9" height="70" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1.5"/>
<rect x="-5.5" y="8" width="11" height="3.5" fill="#800000" stroke="#4d0000" stroke-width="0.5"/> <!-- Dark red band -->
<rect x="-5.5" y="60" width="11" height="3.5" fill="#800000" stroke="#4d0000" stroke-width="0.5"/>
<circle cx="0" cy="-14" r="14" fill="url(#orbGradientDef)" />
<circle cx="0" cy="-14" r="14" fill="none" stroke="#20B2AA" stroke-width="1.5" stroke-opacity="0.9"/>
<path d="M0,-23 L2,-20 L5,-18 L2,-16 L0,-13 L-2,-16 L-5,-18 L-2,-20 Z" fill="white" opacity="0.8"/>
</g>
<!-- Crown -->
<g id="crown" transform="translate(150, 130)"> <!-- Octopus head cy=180, ry=50. Top at 130. -->
<path d="M -35,0 C -35,-18 35,-18 35,0 C 30,8 -30,8 -35,0 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1.5"/>
<path d="M 0,-8 L -6,-30 L 0,-24 L 6,-30 L 0,-8 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1"/>
<path d="M -23,-5 L -29,-27 L -23,-21 L -17,-27 L -23,-5 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1" transform="rotate(-10, -23, -5)"/>
<path d="M 23,-5 L 29,-27 L 23,-21 L 17,-27 L 23,-5 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1" transform="rotate(10, 23, -5)"/>
<path d="M -12,-2 L -15,-20 L -12,-16 L -9,-20 L -12,-2 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1"/>
<path d="M 12,-2 L 15,-20 L 12,-16 L 9,-20 L 12,-2 Z" fill="url(#goldGradientDef)" stroke="#B8860B" stroke-width="1"/>
<circle cx="0" cy="-22" r="6" fill="url(#rubyGradientDef)" stroke="#610000" stroke-width="1"/>
<circle cx="-23" cy="-19" r="5" fill="url(#sapphireGradientDef)" stroke="#000050" stroke-width="1" transform="rotate(-10, -23, -5)"/>
<circle cx="23" cy="-19" r="5" fill="url(#sapphireGradientDef)" stroke="#000050" stroke-width="1" transform="rotate(10, 23, -5)"/>
<circle cx="0" cy="-3" r="4" fill="url(#rubyGradientDef)" stroke="#610000" stroke-width="1"/>
</g>
<!-- Bubbles -->
<g id="bubbles" fill="white" fill-opacity="0.4" stroke="lightblue" stroke-width="0.5">
<circle cx="40" cy="280" r="4"> <animate attributeName="cy" from="280" to="20" dur="7s" repeatCount="indefinite"/> <animate attributeName="cx" from="40" to="60" dur="7s" repeatCount="indefinite" values="40; 50; 40; 30; 40" additive="sum"/> </circle>
<circle cx="45" cy="300" r="2.5"> <animate attributeName="cy" from="300" to="30" dur="6s" delay="0.8s" repeatCount="indefinite"/> <animate attributeName="cx" from="45" to="55" dur="6s" repeatCount="indefinite" values="45;55;45" additive="sum"/> </circle>
<circle cx="260" cy="290" r="5"> <animate attributeName="cy" from="290" to="10" dur="8s" repeatCount="indefinite"/> <animate attributeName="cx" from="260" to="240" dur="8s" repeatCount="indefinite" values="260;250;260;270;260" additive="sum"/> </circle>
<circle cx="265" cy="310" r="3"> <animate attributeName="cy" from="310" to="40" dur="7s" delay="1.2s" repeatCount="indefinite"/> <animate attributeName="cx" from="265" to="255" dur="7s" repeatCount="indefinite" values="265;255;265" additive="sum"/> </circle>
<circle cx="150" cy="100" r="2"><animate attributeName="cy" from="100" to="5" dur="5s" repeatCount="indefinite"/></circle>
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 2
Judge's Analysis
Player 2's submission excels in creativity and visual appeal, featuring a more detailed and expressive octopus with vibrant colors and intricate shading.
The crown and scepter are more elaborate, and the underwater backdrop adds depth to the composition.
While Player 1's submission is simple and adheres to the prompt, it lacks the same level of technical detail and polish as Player 2's work.
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
26
Player 2
—
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
3
Player 2
—
Circles
The number of circle elements (circle) in the SVG.
Player 1
13
Player 2
—
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
2
Player 2
—
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
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
8
Player 2
—
Groups
The number of group elements (g) in the SVG.
Player 1
—
Player 2
—
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
—
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
—
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
1
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
5
Player 2
—
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
10
Player 2
—
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
—
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
38
Player 2
—
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
5
Player 2
—
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.