Creative Challenge
"Mushroom with skyscrapers growing as windows"
<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,250);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(70,130,180);stop-opacity:1" />
</linearGradient>
<linearGradient id="capGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,165,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,99,71);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)" />
<ellipse cx="150" cy="180" rx="100" ry="60" fill="url(#capGradient)" stroke="rgb(139,69,19)" stroke-width="4" />
<rect x="120" y="180" width="60" height="100" fill="rgb(245,245,220)" />
<g fill="rgb(169,169,169)" stroke="rgb(105,105,105)" stroke-width="1">
<rect x="130" y="185" width="12" height="30" />
<rect x="148" y="185" width="12" height="40" />
<rect x="166" y="185" width="12" height="50" />
</g>
<g>
<rect x="132" y="215" width="8" height="15" fill="rgb(211,211,211)" />
<rect x="150" y="225" width="8" height="10" fill="rgb(211,211,211)" />
<rect x="168" y="235" width="8" height="5" fill="rgb(211,211,211)" />
</g>
<circle cx="140" cy="150" r="15" fill="rgb(255,255,255)" />
<circle cx="180" cy="140" r="10" fill="rgb(255,255,255)" />
<circle cx="160" cy="170" r="12" fill="rgb(255,255,255)" />
<path d="M100,210 C120,240 180,240 200,210" fill="none" stroke="rgb(139,69,19)" stroke-width="3" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Gradients -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0B0B3B" />
<stop offset="70%" stop-color="#3D0E61" />
<stop offset="100%" stop-color="#851E3E" />
</linearGradient>
<linearGradient id="capGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FF5E7C" />
<stop offset="100%" stop-color="#FF335C" />
</linearGradient>
<linearGradient id="stemGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F5F7FA" />
<stop offset="100%" stop-color="#C3CFE2" />
</linearGradient>
<!-- Window patterns -->
<pattern id="yellowWindows" width="8" height="8" patternUnits="userSpaceOnUse">
<rect x="1" y="1" width="2.5" height="2.5" fill="#FFEB3B" opacity="0.9" />
<rect x="5" y="1" width="2.5" height="2.5" fill="#FFEB3B" opacity="0.7" />
<rect x="1" y="5" width="2.5" height="2.5" fill="#FFEB3B" opacity="0.8" />
<rect x="5" y="5" width="2.5" height="2.5" fill="#FFEB3B" opacity="0.9" />
</pattern>
<pattern id="blueWindows" width="7" height="7" patternUnits="userSpaceOnUse">
<rect x="1" y="1" width="2" height="2" fill="#81D4FA" opacity="0.9" />
<rect x="4" y="1" width="2" height="2" fill="#81D4FA" opacity="0.7" />
<rect x="1" y="4" width="2" height="2" fill="#81D4FA" opacity="0.8" />
<rect x="4" y="4" width="2" height="2" fill="#81D4FA" opacity="0.9" />
</pattern>
<pattern id="whiteWindows" width="6" height="6" patternUnits="userSpaceOnUse">
<rect x="1" y="1" width="1.5" height="1.5" fill="#E1F5FE" opacity="0.9" />
<rect x="3.5" y="1" width="1.5" height="1.5" fill="#E1F5FE" opacity="0.7" />
<rect x="1" y="3.5" width="1.5" height="1.5" fill="#E1F5FE" opacity="0.8" />
<rect x="3.5" y="3.5" width="1.5" height="1.5" fill="#E1F5FE" opacity="0.9" />
</pattern>
<pattern id="orangeWindows" width="5" height="5" patternUnits="userSpaceOnUse">
<rect x="0.5" y="0.5" width="1.5" height="1.5" fill="#FFD54F" opacity="0.9" />
<rect x="3" y="0.5" width="1.5" height="1.5" fill="#FFD54F" opacity="0.7" />
<rect x="0.5" y="3" width="1.5" height="1.5" fill="#FFD54F" opacity="0.8" />
<rect x="3" y="3" width="1.5" height="1.5" fill="#FFD54F" opacity="0.9" />
</pattern>
<!-- Glow filter for lights -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="1.5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g>
<circle cx="40" cy="30" r="0.8" fill="#FFFFFF" />
<circle cx="60" cy="20" r="1" fill="#FFFFFF" />
<circle cx="90" cy="40" r="0.6" fill="#FFFFFF" />
<circle cx="120" cy="15" r="0.7" fill="#FFFFFF" />
<circle cx="180" cy="25" r="0.9" fill="#FFFFFF" />
<circle cx="210" cy="35" r="0.7" fill="#FFFFFF" />
<circle cx="240" cy="15" r="1" fill="#FFFFFF" />
<circle cx="270" cy="40" r="0.8" fill="#FFFFFF" />
<circle cx="30" cy="60" r="0.7" fill="#FFFFFF" />
<circle cx="150" cy="30" r="0.9" fill="#FFFFFF" />
<circle cx="280" cy="70" r="0.6" fill="#FFFFFF" />
</g>
<!-- Moon -->
<circle cx="250" cy="50" r="15" fill="#FFFDE7" opacity="0.8" />
<circle cx="245" cy="45" r="5" fill="#F5F5F5" opacity="0.3" />
<!-- Clouds -->
<g opacity="0.7">
<ellipse cx="70" cy="80" rx="30" ry="12" fill="#9C92AC" />
<ellipse cx="40" cy="85" rx="20" ry="8" fill="#9C92AC" />
<ellipse cx="90" cy="75" rx="15" ry="6" fill="#9C92AC" />
<ellipse cx="230" cy="60" rx="25" ry="10" fill="#9C92AC" />
<ellipse cx="260" cy="65" rx="18" ry="7" fill="#9C92AC" />
</g>
<!-- Flying Elements -->
<g transform="translate(100, 70)">
<ellipse cx="0" cy="0" rx="8" ry="3" fill="#78909C" />
<ellipse cx="0" cy="-1" rx="5" ry="1.5" fill="#546E7A" />
<circle cx="-5" cy="0" r="1" fill="#4FC3F7" filter="url(#glow)" />
<circle cx="5" cy="0" r="1" fill="#FF5252" filter="url(#glow)" />
</g>
<g transform="translate(190, 90)">
<ellipse cx="0" cy="0" rx="10" ry="3" fill="#78909C" />
<ellipse cx="0" cy="-1.5" rx="6" ry="1.5" fill="#546E7A" />
<circle cx="-7" cy="0" r="1" fill="#4FC3F7" filter="url(#glow)" />
<circle cx="7" cy="0" r="1" fill="#FF5252" filter="url(#glow)" />
</g>
<!-- Ground -->
<path d="M0,250 C50,245 100,260 150,250 C200,240 250,255 300,250 L300,300 L0,300 Z" fill="#795548" />
<path d="M0,260 C50,255 100,270 150,260 C200,255 250,265 300,260 L300,300 L0,300 Z" fill="#5D4037" />
<!-- Mushroom stem -->
<path d="M125,250 Q125,180 150,180 Q175,180 175,250 Z" fill="url(#stemGradient)" />
<ellipse cx="150" cy="250" rx="25" ry="5" fill="#CFD8DC" opacity="0.3" />
<!-- Stem details -->
<path d="M132,220 C140,210 160,210 168,220" stroke="#E0E0E0" stroke-width="1.5" fill="none" />
<path d="M130,195 C140,185 160,185 170,195" stroke="#E0E0E0" stroke-width="1.5" fill="none" />
<path d="M135,235 C140,225 160,225 165,235" stroke="#E0E0E0" stroke-width="1.5" fill="none" />
<!-- Mushroom cap -->
<ellipse cx="150" cy="180" rx="100" ry="70" fill="url(#capGradient)" />
<!-- Cap shading -->
<ellipse cx="150" cy="180" rx="80" ry="55" fill="#FF335C" opacity="0.2" />
<!-- Main central skyscraper -->
<g transform="translate(150, 145) scale(0.7)">
<rect x="-15" y="0" width="30" height="80" fill="#263238" />
<rect x="-12" y="5" width="24" height="70" fill="url(#blueWindows)" />
<polygon points="-15,0 15,0 0,-15" fill="#37474F" />
<line x1="0" y1="-15" x2="0" y2="-25" stroke="#E0E0E0" stroke-width="1" />
<circle cx="0" cy="-25" r="1.5" fill="#FF5252" filter="url(#glow)" />
</g>
<!-- Skyscraper 2 -->
<g transform="translate(110, 160) scale(0.55)">
<rect x="0" y="0" width="20" height="70" fill="#37474F" />
<rect x="2" y="5" width="16" height="60" fill="url(#yellowWindows)" />
<polygon points="0,0 20,0 10,-10" fill="#546E7A" />
</g>
<!-- Skyscraper 3 -->
<g transform="translate(185, 155) scale(0.6)">
<rect x="0" y="0" width="25" height="60" fill="#263238" />
<rect x="3" y="5" width="19" height="50" fill="url(#whiteWindows)" />
<rect x="5" y="-8" width="15" height="8" fill="#455A64" />
</g>
<!-- Skyscraper 4 -->
<g transform="translate(80, 170) scale(0.5)">
<rect x="0" y="0" width="22" height="65" fill="#37474F" />
<rect x="2" y="5" width="18" height="55" fill="url(#orangeWindows)" />
<polygon points="0,0 22,0 11,-12" fill="#546E7A" />
</g>
<!-- Skyscraper 5 -->
<g transform="translate(210, 165) scale(0.45)">
<rect x="0" y="0" width="20" height="55" fill="#263238" />
<rect x="2" y="5" width="16" height="45" fill="url(#yellowWindows)" />
<rect x="5" y="-10" width="10" height="10" fill="#455A64" />
</g>
<!-- Additional skyscrapers -->
<g transform="translate(60, 185) scale(0.4)">
<rect x="0" y="0" width="18" height="50" fill="#37474F" />
<rect x="2" y="5" width="14" height="40" fill="url(#blueWindows)" />
<polygon points="0,0 18,0 9,-8" fill="#546E7A" />
</g>
<g transform="translate(235, 180) scale(0.45)">
<rect x="0" y="0" width="20" height="45" fill="#263238" />
<rect x="2" y="5" width="16" height="35" fill="url(#whiteWindows)" />
<rect x="5" y="-6" width="10" height="6" fill="#455A64" />
</g>
<g transform="translate(130, 190) scale(0.35)">
<rect x="0" y="0" width="15" height="45" fill="#37474F" />
<rect x="2" y="5" width="11" height="35" fill="url(#yellowWindows)" />
<polygon points="0,0 15,0 7.5,-10" fill="#546E7A" />
</g>
<g transform="translate(170, 195) scale(0.3)">
<rect x="0" y="0" width="22" height="40" fill="#263238" />
<rect x="2" y="5" width="18" height="30" fill="url(#orangeWindows)" />
<rect x="6" y="-8" width="10" height="8" fill="#455A64" />
</g>
<!-- Small buildings scattered around -->
<g transform="translate(95, 200) scale(0.25)">
<rect x="0" y="0" width="16" height="30" fill="#37474F" />
<rect x="2" y="5" width="12" height="20" fill="url(#whiteWindows)" />
<polygon points="0,0 16,0 8,-6" fill="#546E7A" />
</g>
<g transform="translate(195, 205) scale(0.25)">
<rect x="0" y="0" width="14" height="25" fill="#263238" />
<rect x="2" y="5" width="10" height="15" fill="url(#blueWindows)" />
<rect x="4" y="-5" width="6" height="5" fill="#455A64" />
</g>
<!-- Connecting bridges -->
<path d="M125,175 L140,173" stroke="#CFD8DC" stroke-width="1" fill="none" />
<path d="M160,172 L175,175" stroke="#CFD8DC" stroke-width="1" fill="none" />
<path d="M95,185 L110,183" stroke="#CFD8DC" stroke-width="1" fill="none" />
<path d="M190,180 L205,182" stroke="#CFD8DC" stroke-width="1" fill="none" />
<!-- Building lights -->
<circle cx="110" cy="160" r="1" fill="#FFEB3B" filter="url(#glow)" />
<circle cx="185" cy="155" r="1" fill="#4FC3F7" filter="url(#glow)" />
<circle cx="80" cy="170" r="1" fill="#FF5252" filter="url(#glow)" />
<circle cx="210" cy="165" r="1" fill="#FFEB3B" filter="url(#glow)" />
<!-- Light beams -->
<path d="M150,145 L130,80" stroke="#FFEB3B" stroke-width="0.5" opacity="0.2" />
<path d="M150,145 L170,70" stroke="#FFEB3B" stroke-width="0.5" opacity="0.2" />
<path d="M110,160 L90,90" stroke="#FFEB3B" stroke-width="0.5" opacity="0.15" />
<!-- Plants at base -->
<g transform="translate(125, 250)">
<path d="M0,0 C5,-10 10,-5 15,0" stroke="#4CAF50" stroke-width="2" fill="none" />
<path d="M5,0 C10,-15 15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none" />
</g>
<g transform="translate(155, 250)">
<path d="M0,0 C5,-10 10,-5 15,0" stroke="#4CAF50" stroke-width="2" fill="none" />
<path d="M5,0 C10,-15 15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none" />
</g>
<!-- Flowers -->
<g transform="translate(110, 250)">
<circle cx="0" cy="0" r="3" fill="#FF4081" />
<circle cx="0" cy="0" r="1" fill="#FFEB3B" />
</g>
<g transform="translate(190, 250)">
<circle cx="0" cy="0" r="3" fill="#FF4081" />
<circle cx="0" cy="0" r="1" fill="#FFEB3B" />
</g>
<g transform="translate(140, 250)">
<circle cx="0" cy="0" r="2.5" fill="#FF4081" />
<circle cx="0" cy="0" r="0.8" fill="#FFEB3B" />
</g>
<g transform="translate(165, 250)">
<circle cx="0" cy="0" r="2.5" fill="#FF4081" />
<circle cx="0" cy="0" r="0.8" fill="#FFEB3B" />
</g>
</svg>Judge's Analysis
Player 2's image more effectively embodies the concept of 'skyscrapers growing as windows on a mushroom,' with a clear depiction of buildings integrated into the mushroom's cap.
The visual appeal is enhanced by the night sky and landscape elements, adding depth and context.
In contrast, Player 1's image is simpler and less detailed, lacking the same level of creativity and adherence to the prompt.
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
"Surreal clock with melting wings, suspended in a candy sky"
"Dancing skyscrapers under a swirling, cosmic sky"
"Flying cactus wearing headphones"
"A penguin with a jetpack, soaring over an erupting volcano at sunset"
"A snail with a transparent shell showing a galaxy inside"
"Robot octopus juggling planets underwater"
