Creative Challenge
"A skyscraper shaped like a giant, sleeping cat in a bustling futuristic city"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="catGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8ED6FF"/>
<stop offset="100%" stop-color="#004CB3"/>
</linearGradient>
<linearGradient id="windowGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#FFF700" />
<stop offset="100%" stop-color="#FF9500" />
</linearGradient>
<pattern id="cityPattern" patternUnits="userSpaceOnUse" width="10" height="10">
<rect width="10" height="10" fill="#222" />
<circle cx="5" cy="5" r="2" fill="#444" />
</pattern>
</defs>
<!-- Background: Futuristic city skyline -->
<rect x="0" y="0" width="300" height="300" fill="url(#cityPattern)" />
<!-- The giant sleeping cat skyscraper -->
<g transform="translate(50, 50)">
<!-- Cat body as a skyscraper -->
<path d="M50 0 L100 20 L110 250 L40 250 L50 0" fill="url(#catGradient)" stroke="#002F65" stroke-width="2" />
<!-- Cat head -->
<ellipse cx="80" cy="35" rx="25" ry="20" fill="url(#catGradient)" stroke="#002F65" stroke-width="2" />
<!-- Cat ears -->
<polygon points="65,15 75,0 85,15" fill="url(#catGradient)" stroke="#002F65" stroke-width="2" />
<polygon points="95,15 105,0 115,15" fill="url(#catGradient)" stroke="#002F65" stroke-width="2" />
<!-- Windows on the skyscraper body -->
<g id="windows">
<rect x="55" y="60" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="60" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="85" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="85" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="110" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="110" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="135" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="135" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="160" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="160" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="185" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="185" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="210" width="10" height="15" fill="url(#windowGradient)" />
<rect x="75" y="210" width="10" height="15" fill="url(#windowGradient)" />
<rect x="55" y="235" width="10" height="10" fill="url(#windowGradient)" />
<rect x="75" y="235" width="10" height="10" fill="url(#windowGradient)" />
</g>
<!-- Decorative extra futuristic lines and details -->
<path d="M100 20 C103 40, 108 60, 110 80" stroke="#002F65" stroke-width="2" fill="none" />
<path d="M40 20 C37 40, 32 60, 30 80" stroke="#002F65" stroke-width="2" fill="none" />
</g>
<!-- Additional futuristic elements: hovering air vehicles -->
<g>
<ellipse cx="220" cy="50" rx="10" ry="4" fill="#FF9500" opacity="0.8"/>
<path d="M210 50 Q220 40, 230 50 T250 50" fill="none" stroke="#FF9500" stroke-width="1.5" opacity="0.8"/>
<line x1="220" y1="54" x2="220" y2="60" stroke="#FF9500" stroke-width="1.2" opacity="0.8"/>
<line x1="215" y1="55" x2="215" y2="61" stroke="#FF9500" stroke-width="1.2" opacity="0.8"/>
</g>
<!-- Ground details: neon grid -->
<g opacity="0.5">
<rect x="0" y="260" width="300" height="40" fill="black"/>
<line x1="0" y1="270" x2="300" y2="270" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="0" y1="280" x2="300" y2="280" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="0" y1="290" x2="300" y2="290" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="0" y1="300" x2="300" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<g>
<line x1="10" y1="260" x2="10" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="20" y1="260" x2="20" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="30" y1="260" x2="30" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="40" y1="260" x2="40" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="50" y1="260" x2="50" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="60" y1="260" x2="60" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="70" y1="260" x2="70" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="80" y1="260" x2="80" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="90" y1="260" x2="90" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="100" y1="260" x2="100" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="110" y1="260" x2="110" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="120" y1="260" x2="120" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="130" y1="260" x2="130" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="140" y1="260" x2="140" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="150" y1="260" x2="150" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="160" y1="260" x2="160" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="170" y1="260" x2="170" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="180" y1="260" x2="180" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="190" y1="260" x2="190" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="200" y1="260" x2="200" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="210" y1="260" x2="210" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="220" y1="260" x2="220" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="230" y1="260" x2="230" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="240" y1="260" x2="240" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="250" y1="260" x2="250" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="260" y1="260" x2="260" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="270" y1="260" x2="270" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="280" y1="260" x2="280" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
<line x1="290" y1="260" x2="290" y2="300" stroke="#00FFAA" stroke-width="0.8"/>
</g>
</g>
</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:#1a0033"/>
<stop offset="100%" style="stop-color:#660066"/>
</linearGradient>
<radialGradient id="windowGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:#ffff99;stop-opacity:0.8"/>
<stop offset="100%" style="stop-color:#ff9900;stop-opacity:0"/>
</radialGradient>
<pattern id="windows" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="2" y="2" width="16" height="16" fill="url(#windowGlow)"/>
</pattern>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)"/>
<!-- Background Buildings -->
<path d="M0,300 L0,150 L30,200 L60,140 L90,180 L120,130 L150,160 L180,120 L210,170 L240,140 L270,190 L300,150 L300,300 Z" fill="#330033"/>
<!-- Cat Building -->
<path d="M50,300 L50,100 C50,80 100,60 150,60 C200,60 250,80 250,100 L250,300 Z" fill="#4d4d4d"/>
<path d="M50,100 C50,80 100,60 150,60 C200,60 250,80 250,100" fill="none" stroke="#666666" stroke-width="4"/>
<!-- Windows Pattern -->
<path d="M60,300 L60,110 C60,90 105,70 150,70 C195,70 240,90 240,110 L240,300 Z" fill="url(#windows)"/>
<!-- Cat Features -->
<ellipse cx="150" cy="80" rx="100" ry="30" fill="#333333"/>
<path d="M70,80 L50,40 L90,70 Z" fill="#333333"/> <!-- Left Ear -->
<path d="M230,80 L210,70 L250,40 Z" fill="#333333"/> <!-- Right Ear -->
<circle cx="110" cy="90" r="15" fill="#ffcc00"/> <!-- Left Eye (closed) -->
<circle cx="190" cy="90" r="15" fill="#ffcc00"/> <!-- Right Eye (closed) -->
<path d="M110,90 L125,90 M190,90 L175,90" stroke="#333333" stroke-width="3"/> <!-- Closed Eyes -->
<path d="M150,100 C130,110 170,110 150,100" fill="none" stroke="#333333" stroke-width="3"/> <!-- Nose -->
<!-- Whiskers -->
<g stroke="#666666" stroke-width="2">
<line x1="130" y1="105" x2="90" y2="95"/>
<line x1="130" y1="110" x2="90" y2="110"/>
<line x1="130" y1="115" x2="90" y2="125"/>
<line x1="170" y1="105" x2="210" y2="95"/>
<line x1="170" y1="110" x2="210" y2="110"/>
<line x1="170" y1="115" x2="210" y2="125"/>
</g>
<!-- Flying Vehicles -->
<g fill="#ff9900">
<circle cx="40" cy="150" r="5"/>
<circle cx="260" cy="180" r="5"/>
<circle cx="150" cy="200" r="5"/>
</g>
<!-- Light Trails -->
<path d="M35,150 L45,150 M255,180 L265,180 M145,200 L155,200" stroke="#ff9900" stroke-width="2" opacity="0.6"/>
</svg>Judge's Analysis
Player 2's submission more effectively captures the idea of a skyscraper shaped like a giant, sleeping cat.
The use of colors and shapes to represent the cat's face is well-integrated into the building structure, enhancing the futuristic city theme.
In contrast, Player 1's design is simpler and less visually coherent, lacking the integration and creativity seen in Player 2's work.
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
"Penguin-shaped hot air balloon floating above a desert oasis"
"Fire-breathing squirrel in a bonsai garden"
"Floating city on a giant tortoise's back under a vibrant galaxy sky"
"A cyberpunk octopus playing a violin"
"A giraffe wearing a top hat, sipping tea on a floating lily pad"
"Flying elephant juggling planets in the night sky"
