GPT-4o
Challenge Creator
Creative Challenge
"A cat balancing on a unicycle while juggling fish."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="bgGradient" cx="0.5" cy="0.4" r="0.8" fx="0.5" fy="0.2">
<stop offset="0%" stop-color="#B3E5FC" /> <!-- Lighter Sky Blue -->
<stop offset="40%" stop-color="#4FC3F7" /> <!-- Sky Blue -->
<stop offset="100%" stop-color="#0277BD" /> <!-- Deeper Blue -->
</radialGradient>
<linearGradient id="catFurGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFB74D" /> <!-- Lighter Orange -->
<stop offset="100%" stop-color="#FB8C00" /> <!-- Orange -->
</linearGradient>
<linearGradient id="catAccentGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FFF3E0" /> <!-- Cream -->
<stop offset="100%" stop-color="#FFE0B2" /> <!-- Light Peach -->
</linearGradient>
<linearGradient id="fish1Gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#64B5F6" /> <!-- Light Blue -->
<stop offset="100%" stop-color="#1976D2" /> <!-- Darker Blue -->
</linearGradient>
<linearGradient id="fish2Gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FFF176" /> <!-- Light Yellow -->
<stop offset="100%" stop-color="#FBC02D" /> <!-- Yellow -->
</linearGradient>
<linearGradient id="fish3Gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#81C784" /> <!-- Light Green -->
<stop offset="100%" stop-color="#388E3C" /> <!-- Darker Green -->
</linearGradient>
<filter id="dropShadow" x="-30%" y="-30%" width="160%" height="160%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>
<feOffset dx="2" dy="3" in="blur" result="offsetBlur"/>
<feFlood flood-color="#000000" flood-opacity="0.25" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="coloredShadow"/>
<feMerge>
<feMergeNode in="coloredShadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<g id="spoke">
<line x1="0" y1="0" x2="0" y2="-28" stroke="#AEB6BF" stroke-width="1.5"/>
</g>
<pattern id="seatTexture" patternUnits="userSpaceOnUse" width="5" height="5" patternTransform="rotate(30)">
<circle cx="1" cy="1" r="0.7" fill="rgba(255,255,255,0.08)"/>
<path d="M0 2.5 L5 2.5" stroke="rgba(0,0,0,0.05)" stroke-width="0.5"/>
</pattern>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#bgGradient)" />
<circle cx="60" cy="80" r="2.5" fill="rgba(255,255,224,0.8)"/>
<circle cx="240" cy="60" r="2" fill="rgba(255,255,224,0.7)"/>
<circle cx="100" cy="40" r="1.5" fill="rgba(255,255,224,0.6)"/>
<path d="M200 90 l 2 0 l -1 2 l -1 -2 Z M215 130 l 2.5 0 l -1.25 2.5 l -1.25 -2.5 Z" fill="rgba(255,255,224,0.5)" />
<!-- Unicycle -->
<g id="unicycle" transform="translate(0, 5)">
<circle cx="150" cy="240" r="38" fill="#4A4A4A" stroke="#2C3E50" stroke-width="7"/> <!-- Tire -->
<circle cx="150" cy="240" r="32" fill="#D5D8DC" stroke="#AEB6BF" stroke-width="2"/> <!-- Rim -->
<use href="#spoke" transform="translate(150,240) rotate(0)" />
<use href="#spoke" transform="translate(150,240) rotate(45)" />
<use href="#spoke" transform="translate(150,240) rotate(90)" />
<use href="#spoke" transform="translate(150,240) rotate(135)" />
<use href="#spoke" transform="translate(150,240) rotate(180)" />
<use href="#spoke" transform="translate(150,240) rotate(225)" />
<use href="#spoke" transform="translate(150,240) rotate(270)" />
<use href="#spoke" transform="translate(150,240) rotate(315)" />
<circle cx="150" cy="240" r="6" fill="#7F8C8D" stroke="#566573" stroke-width="1"/> <!-- Hub -->
<path d="M150 235 C145 210, 142 190, 145 175 L155 175 C158 190, 155 210, 150 235 Z" fill="#E74C3C" stroke="#C0392B" stroke-width="2.5" stroke-linecap="round"/> <!-- Frame/Post -->
<path d="M125 172 Q150 158 175 172 L168 182 L132 182 Z" fill="#A569BD" stroke="#7D3C98" stroke-width="1.5"/> <!-- Seat base -->
<path d="M125 172 Q150 158 175 172 L168 182 L132 182 Z" fill="url(#seatTexture)" /> <!-- Seat texture -->
<line x1="150" y1="240" x2="120" y2="248" stroke="#7F8C8D" stroke-width="4.5" id="crankL" stroke-linecap="round"/>
<rect x="-12" y="-4" width="24" height="8" rx="2" ry="2" fill="#99A3A4" stroke="#7F8C8D" stroke-width="1" transform="translate(120 248) rotate(15)"/>
<line x1="150" y1="240" x2="180" y2="232" stroke="#7F8C8D" stroke-width="4.5" id="crankR" stroke-linecap="round"/>
<rect x="-12" y="-4" width="24" height="8" rx="2" ry="2" fill="#99A3A4" stroke="#7F8C8D" stroke-width="1" transform="translate(180 232) rotate(-15)"/>
</g>
<!-- Cat -->
<g id="cat" filter="url(#dropShadow)">
<!-- Tail -->
<path d="M168 170 C185 160, 205 145, 200 120 C195 95, 175 90, 165 110 C160 125, 165 150, 160 165 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5" />
<!-- Hind Legs -->
<path d="M145 175 C140 195, 130 225, 122 246 L128 250 C138 230, 148 200, 150 178 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Left hind leg -->
<ellipse cx="122" cy="248" rx="9" ry="6" fill="url(#catAccentGradient)" transform="rotate(15, 122, 248)" stroke="#D35400" stroke-width="0.5"/> <!-- Left foot -->
<path d="M155 175 C160 195, 170 210, 178 230 L172 234 C162 215, 152 200, 150 178 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Right hind leg -->
<ellipse cx="178" cy="232" rx="9" ry="6" fill="url(#catAccentGradient)" transform="rotate(-15, 178, 232)" stroke="#D35400" stroke-width="0.5"/> <!-- Right foot -->
<!-- Body -->
<path d="M130 178 C125 150, 130 120, 150 115 C170 120, 175 150, 170 178 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5" />
<path d="M138 172 Q150 162 162 172 Q150 182 138 172 Z" fill="url(#catAccentGradient)" /> <!-- Belly Patch -->
<!-- Head -->
<ellipse cx="150" cy="110" rx="30" ry="28" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/>
<path d="M130 92 Q132 80 140 84 L136 98 Z" fill="#FFCCBC" stroke="#D35400" stroke-width="0.5"/> <!-- Inner Left Ear -->
<path d="M170 92 Q168 80 160 84 L164 98 Z" fill="#FFCCBC" stroke="#D35400" stroke-width="0.5"/> <!-- Inner Right Ear -->
<path d="M125 98 Q137 75 142 92 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Outer Left Ear -->
<path d="M175 98 Q163 75 158 92 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Outer Right Ear -->
<path d="M138 118 C133 128, 167 128, 162 118 Q150 125 138 118 Z" fill="url(#catAccentGradient)" /> <!-- Muzzle -->
<ellipse cx="138" cy="106" rx="6.5" ry="7.5" fill="#2ECC71"/> <circle cx="138" cy="107" r="3" fill="black"/> <circle cx="136.5" cy="104" r="1.2" fill="white"/>
<ellipse cx="162" cy="106" rx="6.5" ry="7.5" fill="#2ECC71"/> <circle cx="162" cy="107" r="3" fill="black"/> <circle cx="160.5" cy="104" r="1.2" fill="white"/>
<path d="M148 116 Q150 113 152 116 L150 119 Z" fill="#F06292"/> <!-- Nose -->
<path d="M150 119 Q150 121 145 121 M150 119 Q150 121 155 121" stroke="#6D4C41" stroke-width="0.8" fill="none" stroke-linecap="round"/> <!-- Mouth -->
<g stroke="#5D4037" stroke-width="0.6" stroke-linecap="round">
<line x1="130" y1="114" x2="112" y2="110"/> <line x1="130" y1="118" x2="108" y2="118"/> <line x1="130" y1="122" x2="112" y2="124"/>
<line x1="170" y1="114" x2="188" y2="110"/> <line x1="170" y1="118" x2="192" y2="118"/> <line x1="170" y1="122" x2="188" y2="124"/>
</g>
<!-- Front Paws/Arms -->
<path d="M135 130 C120 125, 105 100, 110 80 C118 90, 125 110, 138 125 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Left Arm -->
<ellipse cx="110" cy="80" rx="9" ry="7" fill="url(#catAccentGradient)" transform="rotate(25, 110, 80)" stroke="#D35400" stroke-width="0.5"/> <!-- Left Paw -->
<path d="M165 130 C180 125, 195 100, 190 80 C182 90, 175 110, 162 125 Z" fill="url(#catFurGradient)" stroke="#D35400" stroke-width="1.5"/> <!-- Right Arm -->
<ellipse cx="190" cy="80" rx="9" ry="7" fill="url(#catAccentGradient)" transform="rotate(-25, 190, 80)" stroke="#D35400" stroke-width="0.5"/> <!-- Right Paw -->
<!-- Stripes -->
<path d="M138 135 Q133 145 138 155" stroke="#D35400" stroke-width="3.5" fill="none" opacity="0.6" stroke-linecap="round"/>
<path d="M162 135 Q167 145 162 155" stroke="#D35400" stroke-width="3.5" fill="none" opacity="0.6" stroke-linecap="round"/>
<path d="M142 98 Q138 102 135 100" stroke="#D35400" stroke-width="2.5" fill="none" opacity="0.6" stroke-linecap="round"/>
<path d="M158 98 Q162 102 165 100" stroke="#D35400" stroke-width="2.5" fill="none" opacity="0.6" stroke-linecap="round"/>
</g>
<!-- Juggling Fish -->
<g id="jugglingFish" filter="url(#dropShadow)">
<g transform="translate(105 65) rotate(-50)">
<path d="M0,0 C-15,-12 -30,-6 -38,0 C-30,6 -15,12 0,0 Z" fill="url(#fish1Gradient)" stroke="#1565C0" stroke-width="1"/> <!-- Body -->
<path d="M-38,0 L-50,-7 L-45,0 L-50,7 Z" fill="url(#fish1Gradient)" stroke="#1565C0" stroke-width="1"/> <!-- Tail -->
<path d="M-12,-1.5 C-18,-7 -25,-7 -30,-1.5 Z" fill="#90CAF9" stroke="#1565C0" stroke-width="0.7"/> <!-- Dorsal Fin -->
<circle cx="-7" cy="0.5" r="3" fill="white"/> <circle cx="-6" cy="0.5" r="1.5" fill="black"/>
</g>
<g transform="translate(150 35) rotate(5)">
<path d="M0,0 C-15,-12 -30,-6 -38,0 C-30,6 -15,12 0,0 Z" fill="url(#fish2Gradient)" stroke="#F9A825" stroke-width="1"/>
<path d="M-38,0 L-50,-7 L-45,0 L-50,7 Z" fill="url(#fish2Gradient)" stroke="#F9A825" stroke-width="1"/>
<path d="M-12,-1.5 C-18,-7 -25,-7 -30,-1.5 Z" fill="#FFEE58" stroke="#F9A825" stroke-width="0.7"/>
<circle cx="-7" cy="0.5" r="3" fill="white"/> <circle cx="-6" cy="0.5" r="1.5" fill="black"/>
</g>
<g transform="translate(195 65) rotate(50)">
<path d="M0,0 C-15,-12 -30,-6 -38,0 C-30,6 -15,12 0,0 Z" fill="url(#fish3Gradient)" stroke="#2E7D32" stroke-width="1"/>
<path d="M-38,0 L-50,-7 L-45,0 L-50,7 Z" fill="url(#fish3Gradient)" stroke="#2E7D32" stroke-width="1"/>
<path d="M-12,-1.5 C-18,-7 -25,-7 -30,-1.5 Z" fill="#A5D6A7" stroke="#2E7D32" stroke-width="0.7"/>
<circle cx="-7" cy="0.5" r="3" fill="white"/> <circle cx="-6" cy="0.5" r="1.5" fill="black"/>
</g>
</g>
<!-- Motion Lines for Juggling -->
<g id="fishWhoosh" fill="none" stroke="rgba(220,240,255,0.6)" stroke-width="1.8" stroke-linecap="round">
<g transform="translate(105 65) rotate(-50)"> <!-- Fish 1 trail -->
<path d="M-52 -6 Q -60 0 -52 6" /> <path d="M-55 -5 Q -63 0 -55 5" opacity="0.7"/>
</g>
<g transform="translate(195 65) rotate(50)"> <!-- Fish 3 trail -->
<path d="M-52 -6 Q -60 0 -52 6" /> <path d="M-55 -5 Q -63 0 -55 5" opacity="0.7"/>
</g>
<path d="M110 80 C125 55 140 45 150 40" stroke-dasharray="3 2" opacity="0.5"/>
<path d="M190 80 C175 55 160 45 150 40" stroke-dasharray="3 2" opacity="0.5"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="A cat balancing on a unicycle while juggling fish" >
<defs>
<radialGradient id="wheelGradient" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#6b8bbe"/>
<stop offset="100%" stop-color="#25406a"/>
</radialGradient>
<linearGradient id="spokeGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffffcc" />
<stop offset="100%" stop-color="#333366cc" />
</linearGradient>
<radialGradient id="catBodyGradient" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#f7bd7f" />
<stop offset="100%" stop-color="#bc6c25" />
</radialGradient>
<radialGradient id="catPatchGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#3e2723" />
<stop offset="100%" stop-color="#1b0d0b" />
</radialGradient>
<linearGradient id="fishBodyGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#6cedff"/>
<stop offset="100%" stop-color="#005d9e"/>
</linearGradient>
<pattern id="fishScalePattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse" >
<circle cx="5" cy="5" r="3" fill="#92e0ff" />
<circle cx="10" cy="5" r="3" fill="#b2ecff" />
<circle cx="0" cy="5" r="3" fill="#b2ecff" />
</pattern>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
<feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="#ffaa55" flood-opacity="0.7"/>
</filter>
</defs>
<!-- Background: subtle gradient sunrise desert-like -->
<rect width="300" height="300" fill="url(#bgGrad)" />
<linearGradient id="bgGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fde5e1"/>
<stop offset="100%" stop-color="#c3d9ff"/>
</linearGradient>
<!-- Ground ellipse / shadow under the wheel -->
<ellipse cx="150" cy="270" rx="75" ry="18" fill="rgba(50,50,50,0.12)" />
<!-- Unicycle Wheel -->
<circle cx="150" cy="240" r="65" fill="url(#wheelGradient)" stroke="#203a6a" stroke-width="4" />
<!-- Wheel spokes -->
<g stroke="url(#spokeGradient)" stroke-width="2" stroke-linecap="round" >
<line x1="150" y1="240" x2="150" y2="175"/>
<line x1="150" y1="240" x2="190" y2="210"/>
<line x1="150" y1="240" x2="110" y2="210"/>
<line x1="150" y1="240" x2="190" y2="270"/>
<line x1="150" y1="240" x2="110" y2="270"/>
</g>
<!-- Wheel rim decorative dashes -->
<circle cx="150" cy="240" r="65" fill="none" stroke="url(#spokeGradient)" stroke-width="2" stroke-dasharray="6 6" />
<!-- Unicycle post -->
<rect x="144" y="115" width="12" height="120" rx="6" ry="6" fill="#5a7f88" />
<rect x="138" y="215" width="24" height="12" rx="6" ry="6" fill="#4a6570" />
<!-- Pedals -->
<g>
<rect x="142" y="224" width="16" height="6" rx="3" ry="3" fill="#496676" />
<circle cx="150" cy="230" r="4" fill="#27404d" />
</g>
<!-- Cat body -->
<g filter="url(#glow)">
<ellipse cx="150" cy="155" rx="34" ry="45" fill="url(#catBodyGradient)" stroke="#6e3f10" stroke-width="1" />
</g>
<!-- Cat patches -->
<path d="M130 135 q15 -40 35 -30 q-10 15 -25 35 z" fill="url(#catPatchGradient)" />
<path d="M140 180 q10 -30 20 -10 q-15 10 -20 25z" fill="url(#catPatchGradient)" />
<!-- Cat chest fur -->
<path d="M115 175 q15 40 40 5" fill="none" stroke="#f6e1c3" stroke-width="3" />
<path d="M125 168 q10 30 30 10" fill="none" stroke="#f6e1c3" stroke-width="2" />
<!-- Cat tail looping around unicycle -->
<path d="M180 190 q40 40 10 70 q20 -20 -10 -70z" fill="url(#catBodyGradient)" stroke="#6e3f10" stroke-width="2" />
<circle cx="198" cy="243" r="8" fill="url(#catPatchGradient)" />
<!-- Cat legs -->
<path d="M115 180 q-10 25 12 40 q12 -5 8 -40z" fill="url(#catPatchGradient)" />
<path d="M155 190 q10 25 -7 35 q-12 -10 -10 -40z" fill="#ad6b33" />
<!-- Cat head with stylized shapes -->
<g transform="translate(150 100)">
<!-- Head base -->
<ellipse cx="0" cy="0" rx="30" ry="27" fill="url(#catBodyGradient)" stroke="#6e3f10" stroke-width="2"/>
<!-- Cheeks and chin -->
<path d="M-25 6 q20 30 50 0" fill="#f2c47a" />
<!-- Eyes -->
<ellipse cx="-12" cy="-7" rx="6" ry="9" fill="#1a2900" />
<ellipse cx="12" cy="-7" rx="6" ry="9" fill="#1a2900" />
<circle cx="-12" cy="-6" r="3" fill="#e5fec6" />
<circle cx="12" cy="-6" r="3" fill="#e5fec6" />
<!-- Pupils -->
<circle cx="-11" cy="-6" r="1.7" fill="#2a2500" />
<circle cx="13" cy="-6" r="1.7" fill="#2a2500" />
<!-- Nose -->
<path d="M0 3 q4 6 -8 3z" fill="#933d1a" />
<circle cx="0" cy="4" r="3" fill="#bf6a3c" />
<!-- Mouth and whiskers -->
<path d="M-15 10 q15 15 30 0" stroke="#683211" stroke-width="2" fill="none" />
<line x1="-30" y1="7" x2="-11" y2="7" stroke="#4a2a1a" stroke-width="1" />
<line x1="30" y1="7" x2="11" y2="7" stroke="#4a2a1a" stroke-width="1" />
<!-- Ears -->
<path d="M-23 -25 q-10 12 0 30 q15 -10 10 -25z" fill="url(#catPatchGradient)" stroke="#4a230f" stroke-width="1" />
<path d="M23 -25 q10 12 0 30 q-15 -10 -10 -25z" fill="url(#catPatchGradient)" stroke="#4a230f" stroke-width="1" />
<path d="M-20 -22 q-5 5 2 18 q3 -15 10 -18z" fill="#f4bc81" />
<path d="M20 -22 q5 5 -2 18 q-3 -15 -10 -18z" fill="#f4bc81" />
</g>
<!-- Arms juggling: 3 fish in arc above -->
<g>
<!-- Left forearm -->
<path d="M112 140 q-30 25 -5 45" stroke="#bc6c25" stroke-width="7" stroke-linecap="round" fill="none" />
<circle cx="105" cy="180" r="5" fill="#6e3f10" />
<!-- Right forearm -->
<path d="M188 140 q30 25 5 45" stroke="#bc6c25" stroke-width="7" stroke-linecap="round" fill="none" />
<circle cx="195" cy="180" r="5" fill="#6e3f10" />
<!-- Left hand juggling fish -->
<circle cx="85" cy="115" r="16" fill="url(#fishBodyGradient)" stroke="#04507b" stroke-width="2" />
<path d="M74 115 q15 20 25 0 q-5 10 -25 5z" fill="url(#fishScalePattern)" />
<polygon points="90,112 110,104 96,120" fill="#0f89c6" />
<circle cx="98" cy="116" r="4" fill="#001d2e" />
<!-- Center fish - highest -->
<circle cx="150" cy="72" r="20" fill="url(#fishBodyGradient)" stroke="#003559" stroke-width="2" />
<path d="M140 75 q30 -30 20 15 q-20 -15 -20 -15z" fill="url(#fishScalePattern)" />
<polygon points="140,72 165,80 150,90" fill="#198ee8" />
<circle cx="160" cy="75" r="5" fill="#001f3f" />
<path d="M155 60 q12 15 10 18" stroke="#ade8f4" stroke-width="2" fill="none" />
<!-- Right fish -->
<circle cx="215" cy="115" r="16" fill="url(#fishBodyGradient)" stroke="#04507b" stroke-width="2" />
<path d="M205 118 q15 20 25 0 q-5 10 -25 5z" fill="url(#fishScalePattern)" />
<polygon points="210,110 230,110 220,121" fill="#0f89c6" />
<circle cx="220" cy="120" r="4" fill="#001d2e" />
</g>
<!-- Strings / motion lines for juggling -->
<g stroke="#ffaf3f" stroke-width="1" fill="none" stroke-dasharray="4 2" opacity="0.7">
<path d="M115 145 Q110 110 85 115" />
<path d="M188 145 Q195 105 215 115" />
<path d="M150 78 Q150 110 150 140" />
</g>
<!-- Highlights and shiny effects on cat and fish -->
<g filter="url(#glow)" opacity="0.45" stroke="#fff" stroke-width="2" fill="none" stroke-linejoin="round">
<path d="M135 190 q10 15 25 5" />
<circle cx="150" cy="160" r="5" />
<path d="M125 130 q20 -15 30 0" />
<path d="M80 120 q15 -8 18 5" />
<path d="M210 115 q-10 10 -15 5" />
</g>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Gemini 2.5 Pro Preview 05-06
Player 1
Judge's Analysis
Player 1's submission adheres more closely to the prompt with a clear depiction of a cat on a unicycle juggling colorful fish.
The illustration is vibrant, well-composed, and visually appealing.
While Player 2's design is creative, the cat's pose and the juggling elements are less defined, making the overall concept less immediately recognizable and polished.
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
74
Player 2
67
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
3
Player 2
4
Circles
The number of circle elements (circle) in the SVG.
Player 1
17
Player 2
21
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
7
Player 2
5
Lines
The number of line elements (line) in the SVG.
Player 1
9
Player 2
7
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
3
Paths
The number of path elements (path) in the SVG.
Player 1
38
Player 2
27
Groups
The number of group elements (g) in the SVG.
Player 1
11
Player 2
7
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
6
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
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
8
Player 2
2
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
42
Player 2
21
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
45
Player 2
40
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
20
Player 2
1
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
140
Player 2
79
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
9
Player 2
7
Use Elements
The number of use elements (use) in the SVG.
Player 1
8
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.
