Creative Challenge
"Solar-powered desert ice cream truck under a starry sky"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="desertGradient" cx="50%" cy="70%" r="50%">
<stop offset="0%" stop-color="#f4e037" />
<stop offset="100%" stop-color="#e79a56" />
</radialGradient>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#33334d" />
<stop offset="100%" stop-color="#150a25" />
</linearGradient>
<pattern id="starryPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<circle fill="#fdf6e3" cx="1" cy="1" r="1" />
<circle fill="#fdf6e3" cx="8" cy="3" r="0.5" />
<circle fill="#fdf6e3" cx="5" cy="5" r="0.7" />
<circle fill="#fdf6e3" cx="3" cy="8" r="0.3" />
<circle fill="#fdf6e3" cx="7" cy="9" r="0.6" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<rect y="150" width="300" height="150" fill="url(#desertGradient)" />
<g id="iceCreamTruck" transform="translate(70,150)">
<rect x="0" y="0" width="160" height="70" rx="10" ry="10" fill="#fff5cd" stroke="#6e4814" stroke-width="2"/>
<rect x="20" y="10" width="120" height="40" fill="#eccd81" />
<circle cx="40" cy="70" r="15" fill="#6e4814" />
<circle cx="130" cy="70" r="15" fill="#6e4814" />
<g transform="translate(10,-10)">
<polygon points="20,20 40,0 60,20" fill="url(#starryPattern)" />
</g>
</g>
<g transform="translate(70,20)">
<rect x="0" y="0" width="40" height="35" fill="#fdf6e3" />
<polygon points="20,0 0,35 40,35" fill="#ffd966" />
<path d="M0 35 L5 35 C5 30 15 30 15 35 M20 35 L25 35 C25 30 35 30 35 35" stroke="#6e4814" fill="#ffd966"/>
</g>
<rect width="300" height="300" fill="url(#starryPattern)" fill-opacity="0.3"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Definitions for gradients and patterns -->
<defs>
<!-- Gradient for the sky -->
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#0f0c29"/>
<stop offset="50%" stop-color="#302b63"/>
<stop offset="100%" stop-color="#24243e"/>
</linearGradient>
<!-- Gradient for the desert -->
<linearGradient id="desertGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#EDC9AF"/>
<stop offset="100%" stop-color="#F0EAD6"/>
</linearGradient>
<!-- Gradient for the solar panels -->
<linearGradient id="solarPanel" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#7ec0ee"/>
<stop offset="100%" stop-color="#4682b4"/>
</linearGradient>
<!-- Pattern for the ice cream texture -->
<pattern id="iceCreamPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<circle cx="5" cy="5" r="2" fill="#ffcccb" />
</pattern>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="150" fill="url(#skyGradient)"/>
<!-- Starry sky -->
<g>
<circle cx="20" cy="20" r="1.2" fill="#ffffff" />
<circle cx="100" cy="30" r="1" fill="#ffffff" />
<circle cx="150" cy="50" r="1.3" fill="#ffffff" />
<circle cx="250" cy="40" r="1" fill="#ffffff" />
<circle cx="280" cy="20" r="1.2" fill="#ffffff" />
<circle cx="230" cy="70" r="0.8" fill="#ffffff" />
<circle cx="50" cy="60" r="1.1" fill="#ffffff" />
<circle cx="80" cy="20" r="0.9" fill="#ffffff" />
<circle cx="200" cy="30" r="1" fill="#ffffff" />
<circle cx="170" cy="10" r="1" fill="#ffffff" />
<circle cx="120" cy="15" r="0.8" fill="#ffffff" />
</g>
<!-- Desert ground -->
<rect x="0" y="150" width="300" height="150" fill="url(#desertGradient)"/>
<!-- Ice cream truck -->
<g id="truck" transform="translate(80, 160)">
<!-- Truck body -->
<rect x="0" y="20" width="140" height="40" fill="#ff6f61" stroke="#d94e42" stroke-width="2" rx="5" ry="5"/>
<!-- Truck cabin -->
<rect x="110" y="0" width="30" height="30" fill="#ff6f61" stroke="#d94e42" stroke-width="2" rx="3" ry="3"/>
<!-- Truck wheels -->
<circle cx="30" cy="70" r="8" fill="#333" />
<circle cx="110" cy="70" r="8" fill="#333" />
<!-- Solar panel roof on truck cabinet -->
<rect x="110" y="2" width="28" height="12" fill="url(#solarPanel)" />
<!-- Ice cream serving window decoration -->
<rect x="10" y="25" width="30" height="18" fill="url(#iceCreamPattern)" stroke="#fff" stroke-width="1"/>
<!-- Decorative stripe -->
<path d="M0,40 Q70,10 140,40" fill="none" stroke="#fff" stroke-width="2" opacity="0.7"/>
<!-- Ice cream cone on the side (artistic metaphor) -->
<g transform="translate(20, -20)">
<!-- Cone -->
<path d="M10,30 L20,10 L30,30 Z" fill="#d2b48c" stroke="#a67c52" stroke-width="1"/>
<!-- Scoop -->
<circle cx="20" cy="10" r="7" fill="#ffcccb" stroke="#ff8c8c" stroke-width="1"/>
<!-- Drip -->
<path d="M16,15 Q20,20 24,15" fill="none" stroke="#ff8c8c" stroke-width="1"/>
</g>
</g>
<!-- Additional desert elements: cactus and dunes -->
<g>
<!-- Cactus -->
<path d="M250,180 v-20 Q250,150 260,150 v-10 Q260,130 245,130 v10 Q245,130 235,140 v20 z" fill="#2b7a0b" stroke="#1e5e08" stroke-width="2"/>
<!-- Dune 1 -->
<path d="M0,210 C50,190 100,230 150,210 S250,230 300,210 L300,300 L0,300 Z" fill="#e3c9a8" />
<!-- Dune 2 -->
<path d="M0,240 C40,220 80,260 130,240 S230,260 300,240 L300,300 L0,300 Z" fill="#eed9c4" opacity="0.8"/>
</g>
</svg>Judge's Analysis
Player 2's submission is more visually appealing and aligns better with the prompt.
It creatively depicts a desert landscape with a distinct ice cream truck silhouette under a starry sky.
The inclusion of stars and desert elements enhances the scene's atmosphere, while Player 1's image lacks clear representation of the desert or the ice cream theme.
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.
Similar Challenges
"Giraffe in a UFO knitting a rainbow scarf"
"Sky-high jellyfish floating above a busy cityscape"
"A clock face made of melting candles"
"A giraffe with a fishbowl head, swimming in a jellybean sea"
"Giraffe on roller skates juggling flaming pizzas under a disco ball"
"Three-eyed cat juggling planets in a void"
