Creative Challenge
"A steampunk hot air balloon shaped like a whale soaring through a starry night sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background with night sky -->
<defs>
<radialGradient id="skyGradient" cx="50%" cy="50%" r="80%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#1a2049" />
<stop offset="70%" stop-color="#0c1130" />
<stop offset="100%" stop-color="#050918" />
</radialGradient>
<!-- Gears pattern -->
<pattern id="gearPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="5" fill="none" stroke="#b87333" stroke-width="1" />
<path d="M10,2 L11,5 L14,4 L12,7 L14,10 L11,9 L10,12 L9,9 L6,10 L8,7 L6,4 L9,5 Z" fill="#b87333" />
</pattern>
<!-- Brass texture -->
<radialGradient id="brassGradient" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#f5d478" />
<stop offset="70%" stop-color="#d4a94e" />
<stop offset="100%" stop-color="#a67c00" />
</radialGradient>
<!-- Copper texture -->
<linearGradient id="copperGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d3825f" />
<stop offset="50%" stop-color="#b87333" />
<stop offset="100%" stop-color="#7d4e24" />
</linearGradient>
<!-- Filter for the steamy glow -->
<filter id="steamGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<!-- Cloud filter -->
<filter id="cloudEffect">
<feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="2" />
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</defs>
<!-- Night sky background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<g id="stars">
<g fill="#ffffff">
<circle cx="25" cy="30" r="1.2" />
<circle cx="52" cy="75" r="0.8" />
<circle cx="120" cy="40" r="1" />
<circle cx="180" cy="25" r="1.3" />
<circle cx="220" cy="60" r="0.9" />
<circle cx="270" cy="35" r="1" />
<circle cx="60" cy="150" r="1.2" />
<circle cx="240" cy="120" r="1.1" />
<circle cx="195" cy="190" r="0.7" />
<circle cx="275" cy="230" r="1" />
<circle cx="30" cy="220" r="1.3" />
<circle cx="90" cy="250" r="0.9" />
</g>
<!-- Twinkling effect for some stars -->
<g fill="#ffffff" opacity="0.8">
<animate attributeName="opacity" values="0.8;1;0.8" dur="3s" repeatCount="indefinite" />
<circle cx="75" cy="45" r="1.5" />
<circle cx="150" cy="70" r="1.2" />
<circle cx="200" cy="150" r="1.4" />
<circle cx="125" cy="200" r="1.3" />
<circle cx="250" cy="180" r="1.1" />
</g>
</g>
<!-- Distant clouds -->
<g opacity="0.3" filter="url(#cloudEffect)">
<ellipse cx="50" cy="240" rx="30" ry="10" fill="#aabbee" />
<ellipse cx="240" cy="260" rx="40" ry="15" fill="#aabbee" />
</g>
<!-- Main whale balloon body -->
<g id="whaleBody" transform="translate(150, 130)">
<!-- Whale body shape -->
<path d="M0,-50 C40,-60 80,-30 90,0 C100,30 90,50 60,60 C30,70 -20,70 -50,60 C-80,50 -90,20 -85,0 C-80,-30 -40,-40 0,-50Z"
fill="url(#brassGradient)" stroke="#6d5524" stroke-width="2" />
<!-- Riveted panels -->
<path d="M-60,0 C-50,-20 -20,-30 0,-35 C20,-30 40,-25 60,-10 C70,10 70,30 50,40 C20,50 -30,50 -50,30 C-65,15 -65,10 -60,0Z"
fill="none" stroke="#8b7034" stroke-width="1" stroke-dasharray="5,5" />
<!-- Gears and mechanical elements -->
<g>
<circle cx="-40" cy="10" r="15" fill="url(#gearPattern)" stroke="#8b7034" />
<circle cx="30" cy="20" r="12" fill="url(#gearPattern)" stroke="#8b7034" />
<rect x="-10" y="-40" width="20" height="10" fill="url(#copperGradient)" rx="2" ry="2" />
</g>
<!-- Whale features -->
<path d="M80,5 C85,0 90,0 95,5" fill="none" stroke="#6d5524" stroke-width="2" stroke-linecap="round" /> <!-- Mouth -->
<circle cx="75" cy="-5" r="3" fill="#111111" stroke="#6d5524" stroke-width="1" /> <!-- Eye -->
<path d="M60,-15 C65,-25 70,-25 75,-15" fill="none" stroke="#6d5524" stroke-width="1.5" /> <!-- Eyebrow -->
<!-- Tail -->
<path d="M-85,0 C-95,-5 -100,-15 -90,-25 C-95,-10 -100,0 -95,10" fill="url(#brassGradient)" stroke="#6d5524" stroke-width="2" />
<!-- Fins -->
<path d="M0,50 C-5,65 10,70 20,55" fill="url(#brassGradient)" stroke="#6d5524" stroke-width="1.5" />
<path d="M40,45 C45,60 60,55 55,40" fill="url(#brassGradient)" stroke="#6d5524" stroke-width="1.5" />
<!-- Steam vents -->
<g>
<circle cx="-60" cy="-20" r="3" fill="#dddddd" filter="url(#steamGlow)" />
<circle cx="-50" cy="-25" r="2" fill="#dddddd" filter="url(#steamGlow)" />
<circle cx="40" cy="-30" r="3" fill="#dddddd" filter="url(#steamGlow)" />
<circle cx="50" cy="-25" r="2" fill="#dddddd" filter="url(#steamGlow)" />
</g>
</g>
<!-- Hot air balloon basket -->
<g id="basket" transform="translate(150, 200)">
<!-- Main basket -->
<rect x="-20" y="0" width="40" height="25" fill="url(#copperGradient)" stroke="#6d5524" stroke-width="2" rx="5" ry="5" />
<!-- Basket details -->
<rect x="-15" y="5" width="30" height="15" fill="none" stroke="#8b7034" stroke-width="1" stroke-dasharray="2,2" />
<circle cx="-10" cy="12" r="3" fill="url(#gearPattern)" stroke="#8b7034" />
<circle cx="10" cy="12" r="3" fill="url(#gearPattern)" stroke="#8b7034" />
<!-- Suspension ropes -->
<path d="M-15,0 C-20,-15 -40,-30 -50,-50" fill="none" stroke="#8b7034" stroke-width="1.5" />
<path d="M15,0 C20,-15 40,-30 50,-50" fill="none" stroke="#8b7034" stroke-width="1.5" />
<path d="M-5,0 C-10,-20 -20,-40 -20,-70" fill="none" stroke="#8b7034" stroke-width="1.5" />
<path d="M5,0 C10,-20 20,-40 20,-70" fill="none" stroke="#8b7034" stroke-width="1.5" />
<!-- Two small steampunk figures in the basket -->
<circle cx="-8" cy="15" r="3" fill="#6d5524" />
<rect x="-9" y="18" width="2" height="5" fill="#6d5524" />
<circle cx="8" cy="15" r="3" fill="#6d5524" />
<rect x="7" y="18" width="2" height="5" fill="#6d5524" />
</g>
<!-- Steam clouds -->
<g opacity="0.7">
<path d="M110,140 C105,130 107,120 115,115 C120,110 130,113 133,120 C137,115 145,115 150,120 C155,110 165,110 170,117 C175,112 185,115 188,125 C193,120 200,125 200,132 C205,127 215,130 215,140 C215,150 200,157 185,155 C180,165 165,167 155,160 C145,167 130,165 125,155 C115,160 105,155 110,140"
fill="#ffffff" opacity="0.3" filter="url(#steamGlow)">
<animate attributeName="opacity" values="0.3;0.5;0.3" dur="5s" repeatCount="indefinite" />
</path>
</g>
<!-- Propellers/Rotors -->
<g transform="translate(95, 130)">
<circle cx="0" cy="0" r="5" fill="url(#copperGradient)" stroke="#6d5524" />
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite" />
<rect x="-2" y="-15" width="4" height="30" rx="2" ry="2" fill="url(#brassGradient)" stroke="#6d5524" />
<rect x="-15" y="-2" width="30" height="4" rx="2" ry="2" fill="url(#brassGradient)" stroke="#6d5524" />
</g>
</g>
<g transform="translate(205, 130)">
<circle cx="0" cy="0" r="5" fill="url(#copperGradient)" stroke="#6d5524" />
<g>
<animateTransform attributeName="transform" type="rotate" from="0" to="-360" dur="2.5s" repeatCount="indefinite" />
<rect x="-2" y="-15" width="4" height="30" rx="2" ry="2" fill="url(#brassGradient)" stroke="#6d5524" />
<rect x="-15" y="-2" width="30" height="4" rx="2" ry="2" fill="url(#brassGradient)" stroke="#6d5524" />
</g>
</g>
<!-- Moon -->
<circle cx="230" cy="50" r="15" fill="#f5f5f5">
<animate attributeName="fill" values="#f5f5f5;#f8f8e0;#f5f5f5" dur="10s" repeatCount="indefinite" />
</circle>
<circle cx="224" cy="45" r="3" fill="#e5e5e5" />
<circle cx="235" cy="55" r="4" fill="#e5e5e5" />
<circle cx="238" cy="42" r="2" fill="#e5e5e5" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Starry Night Sky -->
<rect x="0" y="0" width="300" height="300" fill="black" />
<circle cx="150" cy="150" r="2" fill="white" />
<circle cx="50" cy="100" r="1" fill="white" />
<circle cx="200" cy="60" r="2" fill="white" />
<circle cx="250" cy="200" r="1.5" fill="white" />
<circle cx="100" cy="210" r="1.7" fill="white" />
<!-- Moon -->
<circle cx="250" cy="30" r="20" fill="white" />
<!-- Whale-shaped Hot Air Balloon -->
<ellipse cx="150" cy="150" rx="40" ry="100" fill="gray" stroke="brown" stroke-width="2" />
<path d="M110,150 Q120,190 150,200 Q180,190 190,150 Q180,160 150,170 Q120,160 110,150 Z" fill="gray" />
<!-- Balloon Structure -->
<rect x="140" y="150" width="20" height="60" fill="gray" />
<rect x="130" y="150" width="40" height="20" fill="gray" />
<!-- Gears Decoration -->
<circle cx="100" cy="180" r="10" fill="brown" />
<circle cx="200" cy="180" r="10" fill="brown" />
<circle cx="120" cy="130" r="7" fill="brown" />
<circle cx="180" cy="130" r="7" fill="brown" />
<!-- Stars -->
<circle cx="30" cy="50" r="2" fill="white" />
<circle cx="80" cy="20" r="1.5" fill="white" />
<circle cx="20" cy="120" r="2.3" fill="white" />
<circle cx="270" cy="80" r="1.8" fill="white" />
</svg>Judge's Analysis
Player 1's image creatively captures the essence of a steampunk whale-shaped hot air balloon with detailed elements like propellers and gears, adhering closely to the prompt.
The composition is clear and visually appealing, set against a starry night sky.
In contrast, Player 2's image lacks distinct whale or steampunk features, making it less relevant to the prompt and visually less engaging.
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
"Floating umbrella cityscape"
"A giraffe in a spacesuit floating through a vibrant nebula"
"Iridescent squid playing chess on a floating lily pad"
"Juggling octopus balancing on a unicycle"
"Rainbow-eating cat beneath a swirling starry sky"
"Melting clock face dripping off a cactus"
