Creative Challenge
"Flying sandwich service delivering to floating picnic tables"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#87CEEB"/>
<stop offset="100%" stop-color="#E0F6FF"/>
</linearGradient>
<radialGradient id="cloud">
<stop offset="70%" stop-color="white"/>
<stop offset="100%" stop-color="#E8F4FF"/>
</radialGradient>
<pattern id="check" width="4" height="4" patternUnits="userSpaceOnUse">
<rect width="2" height="2" fill="#FF6666"/>
<rect x="2" y="2" width="2" height="2" fill="#FF6666"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#sky)"/>
<!-- Floating tables -->
<g transform="translate(50 200)">
<path d="M0 0 Q30 -20 60 0 Q90 20 60 40 Q30 60 0 40 Z" fill="url(#cloud)"/>
<rect x="10" y="20" width="40" height="24" fill="url(#check)" rx="3"/>
</g>
<g transform="translate(180 160)">
<path d="M0 0 Q40 -30 80 0 Q120 30 80 60 Q40 90 0 60 Z" fill="url(#cloud)"/>
<rect x="20" y="30" width="40" height="24" fill="url(#check)" rx="3"/>
</g>
<!-- Delivery balloon -->
<g transform="translate(140 80)">
<path d="M30 80 Q30 20 60 0 Q90 20 90 80" fill="#FFD700" stroke="#FFA500" stroke-width="2"/>
<rect x="50" y="70" width="20" height="20" fill="#8B4513" rx="3"/>
<path d="M60 90 L50 110 70 110 Z" fill="#8B4513"/>
<circle cx="60" cy="60" r="10" fill="#FF6347"/>
</g>
<!-- Flying sandwiches -->
<g transform="translate(100 120)">
<ellipse cx="0" cy="0" rx="25" ry="15" fill="#F4A460"/>
<rect x="-15" y="-5" width="30" height="10" fill="#8B0000" rx="3"/>
<rect x="-20" y="5" width="40" height="8" fill="#228B22"/>
<path d="M-25 0 L25 0 Q30 15 0 25 Q-30 15 -25 0" fill="#FFD700"/>
</g>
<g transform="translate(200 180) rotate(15)">
<ellipse cx="0" cy="0" rx="20" ry="12" fill="#DEB887"/>
<rect x="-10" y="-4" width="20" height="8" fill="#8B4513" rx="2"/>
<rect x="-12" y="4" width="24" height="6" fill="#2E8B57"/>
<path d="M-20 0 L20 0 Q25 10 0 18 Q-25 10 -20 0" fill="#FF4500"/>
</g>
<!-- Motion trails -->
<path d="M140 100 Q160 60 200 80" fill="none" stroke="#FFFFFF88" stroke-width="2" stroke-dasharray="4 4"/>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(135,206,235);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
</linearGradient>
<linearGradient id="sandwichGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,229,180);" />
<stop offset="100%" style="stop-color:rgb(205,133,63);" />
</linearGradient>
<pattern id="breadTexture" width="8" height="8" patternUnits="userSpaceOnUse">
<circle cx="4" cy="4" r="1" fill="rgba(165,102,42,0.4)" />
</pattern>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Flying Sandwich -->
<g transform="translate(150,150) rotate(-15)">
<rect x="-20" y="0" width="40" height="100" rx="15" fill="url(#sandwichGradient)" />
<rect x="-18" y="5" width="36" height="15" rx="7" fill="url(#breadTexture)" />
<rect x="-18" y="80" width="36" height="15" rx="7" fill="url(#breadTexture)" />
<path d="M-18,20 C-10,50 10,50 18,20" fill="rgb(144,238,144)" />
<path d="M-18,60 C-10,30 10,30 18,60" fill="rgb(165,42,42)" />
<circle cx="0" cy="50" r="6" fill="rgb(255,255,240)" />
<circle cx="10" cy="40" r="6" fill="rgb(255,255,240)" />
</g>
<!-- Floating Picnic Tables -->
<g transform="translate(80,240)">
<path d="M-30,0 L30,0 L50,-30 L-50,-30 Z" fill="rgb(210,180,140)" />
<rect x="-50" y="-30" width="100" height="5" fill="rgb(139,69,19)" />
<circle cx="-20" cy="-40" r="3" fill="rgb(205,133,63)" />
<circle cx="20" cy="-40" r="3" fill="rgb(205,133,63)" />
</g>
<g transform="translate(220,200)">
<path d="M-30,0 L30,0 L50,-30 L-50,-30 Z" fill="rgb(210,180,140)" />
<rect x="-50" y="-30" width="100" height="5" fill="rgb(139,69,19)" />
<circle cx="-20" cy="-40" r="3" fill="rgb(205,133,63)" />
<circle cx="20" cy="-40" r="3" fill="rgb(205,133,63)" />
</g>
<!-- Additional Elements -->
<g transform="translate(110,50)">
<path d="M0,0 C10,10 20,-10 30,0" fill="none" stroke="rgb(255,165,0)" stroke-width="3" />
<polygon points="30,-5 35,0 30,5" fill="rgb(255,165,0)" />
</g>
<g transform="translate(230,90)">
<path d="M0,0 C10,10 20,-10 30,0" fill="none" stroke="rgb(255,165,0)" stroke-width="3" />
<polygon points="30,-5 35,0 30,5" fill="rgb(255,165,0)" />
</g>
</svg>Judge's Analysis
Player 1's image creatively integrates elements like the flying sandwich and floating picnic tables with a clear trajectory, capturing the whimsical essence of the prompt.
The composition is well-balanced, and the use of colors enhances the visual appeal.
Player 2's image, although technically proficient, lacks the same level of engagement with the prompt and creativity seen in Player 1's submission.
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
"Chameleon playing chess against a flamingo in a jungle setting"
"Clockwork owl with kaleidoscope wings"
"Frog riding a unicycle on a rainbow"
"Surreal clock melting over a mountain peak, Daliesque style"
"A clock made of clouds with birds as hands, in a surrealism style"
"Floating library island under an inverted waterfall, surrealism"
