Creative Challenge
"An ant wearing a crown, holding a scepter, ruling over a picnic blanket kingdom."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<rect x="0" y="0" width="300" height="300" fill="#f0f0f0" rx="20"/>
<defs>
<linearGradient id="grad1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#ffd700" stop-opacity="1"/>
<stop offset="1" stop-color="#ffd700" stop-opacity="0.5"/>
</linearGradient>
<linearGradient id="grad2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8b9467" stop-opacity="1"/>
<stop offset="1" stop-color="#8b9467" stop-opacity="0.5"/>
</linearGradient>
<pattern id="pat1" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="20" height="20" fill="#fff" rx="2"/>
<circle cx="10" cy="10" r="2" fill="#666"/>
</pattern>
</defs>
<g transform="translate(150, 100)">
<circle cx="0" cy="0" r="20" fill="url(#grad1)" stroke="#666" stroke-width="2"/>
<path d="M-20,0 L20,0 L20,-20 L-20,-20 Z" fill="#fff" stroke="#666" stroke-width="2"/>
<rect x="-10" y="-30" width="20" height="20" fill="url(#pat1)" rx="2"/>
<path d="M-25,-40 L-25,-60 L25,-60 L25,-40 Z" fill="url(#grad2)" stroke="#666" stroke-width="2"/>
<path d="M-20,-50 L20,-50 L20,-70 L-20,-70 Z" fill="#fff" stroke="#666" stroke-width="2"/>
<circle cx="0" cy="-60" r="5" fill="#fff" stroke="#666" stroke-width="2"/>
</g>
<g transform="translate(150, 200)">
<rect x="-50" y="-20" width="100" height="40" fill="#fff" rx="10" stroke="#666" stroke-width="2"/>
<rect x="-40" y="-10" width="80" height="20" fill="#fff" rx="5" stroke="#666" stroke-width="2"/>
<circle cx="-20" cy="-15" r="5" fill="#fff" stroke="#666" stroke-width="2"/>
<circle cx="20" cy="-15" r="5" fill="#fff" stroke="#666" stroke-width="2"/>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Gradient for picnic blanket -->
<linearGradient id="blanketRed" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#FF638E"/>
<stop offset="100%" stop-color="#C0392B"/>
</linearGradient>
<linearGradient id="blanketWhite" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#fff"/>
<stop offset="100%" stop-color="#eeeeee"/>
</linearGradient>
<!-- Crown gradients -->
<radialGradient id="crownGold" cx="50%" cy="50%" r="70%">
<stop offset="0%" stop-color="#FFF84E"/>
<stop offset="80%" stop-color="#F5B807"/>
<stop offset="100%" stop-color="#BA8505"/>
</radialGradient>
<!-- Scepter gradients -->
<radialGradient id="scepterGem" cx="50%" cy="50%" r="80%">
<stop offset="0%" stop-color="#5DF2FF"/>
<stop offset="100%" stop-color="#0072AC"/>
</radialGradient>
<linearGradient id="scepterStaff" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFD966"/>
<stop offset="100%" stop-color="#B97D10"/>
</linearGradient>
<!-- Ant gradients -->
<radialGradient id="antBody" cx="45%" cy="40%" r="80%">
<stop offset="0%" stop-color="#5D2E12"/>
<stop offset="80%" stop-color="#2C1407"/>
<stop offset="100%" stop-color="#0E0703"/>
</radialGradient>
<radialGradient id="antHead" cx="50%" cy="45%" r="75%">
<stop offset="0%" stop-color="#9D5C2E"/>
<stop offset="100%" stop-color="#322012"/>
</radialGradient>
<!-- Blanket pattern -->
<pattern id="picnicPattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="40" height="40" fill="url(#blanketWhite)"/>
<rect x="0" y="0" width="20" height="20" fill="url(#blanketRed)"/>
<rect x="20" y="20" width="20" height="20" fill="url(#blanketRed)"/>
</pattern>
<!-- Shadow filter -->
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.25"/>
</filter>
</defs>
<!-- Picnic blanket kingdom -->
<g>
<rect x="25" y="170" width="250" height="80" rx="16" fill="url(#picnicPattern)" filter="url(#shadow)"/>
<!-- Blanket Fringes -->
<g>
<g>
<rect x="32" y="246" width="3" height="18" rx="2" fill="#F5B807" opacity="0.60"/>
<rect x="40" y="247" width="3" height="14" rx="2" fill="#d35400" opacity="0.80"/>
<rect x="48" y="245" width="3" height="17" rx="2" fill="#F5B807" opacity="0.60"/>
</g>
<g>
<rect x="238" y="246" width="3" height="18" rx="2" fill="#F5B807" opacity="0.60"/>
<rect x="248" y="247" width="3" height="14" rx="2" fill="#d35400" opacity="0.80"/>
<rect x="258" y="245" width="3" height="17" rx="2" fill="#F5B807" opacity="0.60"/>
</g>
</g>
<!-- 'Kingdom' elements: Food as castles -->
<g opacity="0.95">
<!-- Sandwich Castle -->
<g>
<rect x="120" y="190" width="35" height="22" rx="4" fill="#ECCC93" stroke="#B97D10" stroke-width="2"/>
<rect x="127" y="183" width="21" height="7" rx="2" fill="#C0392B" stroke="#96281B" stroke-width="1"/>
<rect x="122" y="185" width="5" height="8" rx="1.5" fill="#D5B526"/>
<rect x="148" y="185" width="5" height="8" rx="1.5" fill="#D5B526"/>
</g>
<!-- Strawberry Tower -->
<g>
<ellipse cx="220" cy="210" rx="8" ry="13" fill="#F5435D"/>
<ellipse cx="220" cy="200" rx="7" ry="5" fill="#F79F24"/>
<polygon points="220,185 225,200 215,200" fill="#44D96B"/>
</g>
<!-- Cookie Fort -->
<ellipse cx="85" cy="225" rx="13" ry="10" fill="#FCB663" stroke="#B97D10" stroke-width="2"/>
<circle cx="78" cy="220" r="2" fill="#955401"/>
<circle cx="93" cy="227" r="1.8" fill="#955401"/>
<circle cx="89" cy="232" r="1.2" fill="#955401"/>
</g>
</g>
<!-- The Ant King -->
<g id="ant-king" filter="url(#shadow)">
<!-- Legs -->
<g stroke="#3B1E06" stroke-width="3">
<!-- Left legs -->
<path d="M110 170 C95 155, 75 170, 85 185" fill="none"/>
<path d="M115 180 Q100 170, 90 200" fill="none"/>
<path d="M120 190 Q100 190, 110 210" fill="none"/>
<!-- Right legs -->
<path d="M165 170 C180 160, 200 170, 192 183" fill="none"/>
<path d="M160 180 Q177 175, 185 198" fill="none"/>
<path d="M155 190 Q173 195, 167 213" fill="none"/>
</g>
<!-- Body segments -->
<!-- Abdomen -->
<ellipse cx="137" cy="200" rx="23" ry="19" fill="url(#antBody)"/>
<!-- Thorax -->
<ellipse cx="145" cy="177" rx="17" ry="13" fill="url(#antBody)" />
<!-- Head (slightly tilted crownward) -->
<ellipse cx="152" cy="157" rx="12" ry="11" fill="url(#antHead)" />
<!-- Antennae -->
<g stroke="#835223" stroke-width="2.2" stroke-linecap="round">
<path d="M155 148 Q165 135, 163 124"/>
<ellipse cx="163" cy="120" rx="2.5" ry="2" fill="#835223"/>
<path d="M148 147 Q138 132, 128 128"/>
<ellipse cx="126" cy="126" rx="2.3" ry="2" fill="#835223"/>
</g>
<!-- Face details -->
<ellipse cx="147" cy="155" rx="2.2" ry="3" fill="#29231c"/>
<ellipse cx="156" cy="154" rx="2" ry="2.7" fill="#29231c"/>
<ellipse cx="147.7" cy="155.6" rx="0.9" ry="1.2" fill="#f2f7fa" opacity="0.5"/>
<ellipse cx="156.8" cy="155.1" rx="0.7" ry="1" fill="#f2f7fa" opacity="0.45"/>
<path d="M151 162 Q153 165, 156 161" stroke="#eee" stroke-width="1.1" fill="none"/>
<ellipse cx="153" cy="163" rx="2" ry="0.7" fill="#883c08"/>
<!-- Mandibles -->
<g>
<path d="M159 163 Q164 166, 161 171" stroke="#A46310" stroke-width="2" fill="none"/>
<path d="M147 162 Q142 165, 145 168" stroke="#A46310" stroke-width="2" fill="none"/>
</g>
<!-- Crown -->
<g>
<ellipse cx="152" cy="142.5" rx="10.5" ry="4" fill="url(#crownGold)" />
<polygon points="142,143 146,127 153,140 159,127 164,143 152,142.5"
fill="url(#crownGold)" stroke="#956C11" stroke-width="1.7"/>
<circle cx="146" cy="126" r="2" fill="#C8EB46" stroke="#6D8A02" stroke-width="0.8"/>
<circle cx="159" cy="127" r="2" fill="#C8EB46" stroke="#6D8A02" stroke-width="0.8"/>
<circle cx="153" cy="139" r="1.35" fill="#F5435D" stroke="#C0392B" stroke-width="0.6"/>
<polyline points="164,143 152,142.5 142,143" fill="none" stroke="#956C11" stroke-width="1.3"/>
</g>
<!-- Scepter -->
<g>
<rect x="164" y="180" width="4" height="38" rx="2" transform="rotate(15 166 180)" fill="url(#scepterStaff)" stroke="#B97D10" stroke-width="1"/>
<ellipse cx="168" cy="177" rx="5" ry="4" fill="url(#scepterGem)" stroke="#197faa" stroke-width="1.1"/>
<ellipse cx="168" cy="177" rx="2.3" ry="1.4" fill="#ffffff" opacity="0.3"/>
<ellipse cx="174" cy="176" rx="1.1" ry="2.1" fill="#FFEC52" opacity="0.7"/>
</g>
<!-- Arm holding scepter (right) -->
<path d="M153 172 Q170 174, 165 180" stroke="#43220e" stroke-width="4" fill="none"/>
<!-- Arm (left, raised) -->
<path d="M141 175 Q125 168, 124 150" stroke="#43220e" stroke-width="4" fill="none"/>
<!-- Hands -->
<ellipse cx="165.5" cy="179.8" rx="2.2" ry="1.5" fill="#7c4118"/>
<ellipse cx="124" cy="150" rx="2" ry="1.4" fill="#7c4118"/>
</g>
<!-- Royal Shadow (Ant King's shadow on blanket) -->
<ellipse cx="143" cy="212" rx="25" ry="9" fill="#220f07" opacity="0.18"/>
</svg>Judge's Analysis
Player 2's submission depicts an ant with a crown and scepter ruling over a picnic blanket, closely adhering to the prompt.
The composition is visually appealing and creative, with thoughtful details like the picnic food and checkered blanket.
Player 1's submission, while minimalistic, lacks clarity and does not effectively convey the idea of an ant ruling a picnic blanket kingdom.
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
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
The number of rectangle elements (rect) in the SVG.
The number of circle elements (circle) in the SVG.
The number of ellipse elements (ellipse) in the SVG.
The number of line elements (line) in the SVG.
The number of polygon elements (polygon) in the SVG.
The number of path elements (path) in the SVG.
The number of group elements (g) in the SVG.
Visual Effects Metrics
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
The number of pattern definitions (pattern) in the SVG.
The number of filter definitions (filter) in the SVG.
The number of mask definitions (mask) in the SVG.
The number of clipping path definitions (clipPath) in the SVG.
The number of elements with opacity attributes in the SVG.
The number of elements with stroke attributes in the SVG.
Colors Metrics
The number of unique colors used in the SVG.
Interactivity Metrics
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
The number of elements with transform attributes in the SVG.
Complexity Metrics
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
The maximum nesting level of group elements (g) in the SVG.
The number of elements defined within the defs element in the SVG.
The number of use elements (use) in the SVG.
Text Metrics
The number of text elements (text) in the SVG.
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.
