Creative Challenge
"Clock tower with melting gears under a swirling aurora sky."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="auroraSky" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" style="stop-color:#001028; stop-opacity:1" />
<stop offset="40%" style="stop-color:#0c2c4d; stop-opacity:1" />
<stop offset="100%" style="stop-color:#103050; stop-opacity:1" />
</linearGradient>
<radialGradient id="auroraGlow1" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
<stop offset="0%" style="stop-color:#90EE90; stop-opacity:0.6" />
<stop offset="60%" style="stop-color:#40E0D0; stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#8A2BE2; stop-opacity:0.1" />
</radialGradient>
<radialGradient id="auroraGlow2" cx="30%" cy="40%" r="60%" fx="30%" fy="40%">
<stop offset="0%" style="stop-color:#FF69B4; stop-opacity:0.5" />
<stop offset="50%" style="stop-color:#BA55D3; stop-opacity:0.25" />
<stop offset="100%" style="stop-color:#4682B4; stop-opacity:0.1" />
</radialGradient>
<filter id="auroraFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="subtleBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.5" />
</filter>
<linearGradient id="towerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#383848;" />
<stop offset="30%" style="stop-color:#484858;" />
<stop offset="50%" style="stop-color:#505060;" />
<stop offset="70%" style="stop-color:#484858;" />
<stop offset="100%" style="stop-color:#383848;" />
</linearGradient>
<linearGradient id="towerHighlight" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#606070" />
<stop offset="100%" stop-color="#404050" />
</linearGradient>
<linearGradient id="roofGradient" x1="50%" y1="0%" x2="50%" y2="100%">
<stop offset="0%" style="stop-color:#2A2A3A;" />
<stop offset="100%" style="stop-color:#1A1A2A;" />
</linearGradient>
<linearGradient id="clockFaceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#FFF8DC;"/>
<stop offset="100%" style="stop-color:#F5DEB3;"/>
</linearGradient>
<linearGradient id="clockHandGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#4A3B31;" />
<stop offset="50%" style="stop-color:#8C7853;" />
<stop offset="100%" style="stop-color:#4A3B31;" />
</linearGradient>
<linearGradient id="gearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#B87333;" />
<stop offset="50%" style="stop-color:#CD7F32;" />
<stop offset="100%" style="stop-color:#8B4513;" />
</linearGradient>
<linearGradient id="gearHighlight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#E69540;" />
<stop offset="100%" style="stop-color:#D4AF37;" />
</linearGradient>
</defs>
<rect width="300" height="300" fill="url(#auroraSky)" />
<rect width="300" height="300" fill="url(#auroraGlow1)" opacity="0.7" style="mix-blend-mode: screen;" />
<rect width="300" height="300" fill="url(#auroraGlow2)" opacity="0.6" style="mix-blend-mode: screen;" />
<path d="M -50 100 Q 50 50, 150 120 T 350 100" stroke="#66CDAA" stroke-width="20" fill="none" opacity="0.4" filter="url(#auroraFilter)" />
<path d="M -50 150 Q 80 100, 150 180 T 350 130" stroke="#AFEEEE" stroke-width="15" fill="none" opacity="0.5" filter="url(#auroraFilter)" />
<path d="M -50 80 Q 100 120, 200 60 T 350 90" stroke="#DA70D6" stroke-width="18" fill="none" opacity="0.35" filter="url(#auroraFilter)" />
<path d="M 0 120 Q 70 180, 150 100 T 300 150 L 300 180 Q 150 130, 0 200 Z" fill="#98FB98" opacity="0.15" filter="url(#auroraFilter)" style="mix-blend-mode: lighten;" />
<path d="M 300 80 Q 200 40, 150 100 T 0 50 L 0 20 Q 150 70, 300 30 Z" fill="#EE82EE" opacity="0.15" filter="url(#auroraFilter)" style="mix-blend-mode: lighten;" />
<circle cx="60" cy="40" r="1.2" fill="white" opacity="0.9"/>
<circle cx="120" cy="60" r="0.9" fill="white" opacity="0.7"/>
<circle cx="200" cy="30" r="1.5" fill="white" opacity="0.95"/>
<circle cx="250" cy="80" r="0.8" fill="white" opacity="0.6"/>
<circle cx="30" cy="90" r="1" fill="white" opacity="0.8"/>
<circle cx="180" cy="130" r="1.1" fill="white" opacity="0.7"/>
<circle cx="270" cy="150" r="0.9" fill="white" opacity="0.9"/>
<circle cx="90" cy="20" r="1.3" fill="white" opacity="0.85"/>
<circle cx="220" cy="110" r="0.7" fill="white" opacity="0.75"/>
<circle cx="70" cy="170" r="1" fill="white" opacity="0.8"/>
<ellipse cx="150" cy="295" rx="60" ry="10" fill="#000000" opacity="0.4" filter="url(#auroraFilter)"/>
<g id="clockTower">
<path d="M 120 290 C 122 240, 123 190, 125 150 Q 126 130 135 130 L 165 130 Q 174 130 175 150 C 177 190, 178 240, 180 290 Z" fill="url(#towerGradient)" stroke="#202028" stroke-width="1.5"/>
<path d="M 130 200 L 132 160 Q 135 150 140 150 L 160 150 Q 165 150 168 160 L 170 200 Z" fill="url(#towerHighlight)" opacity="0.7"/>
<path d="M 138 220 q -2 5 0 10 q 2 4 0 5 q -5 -2 -5 -8 q 0 -5 5 -7 Z" fill="#101020" opacity="0.6" transform="rotate(2 138 220)"/>
<path d="M 162 220 q 2 5 0 10 q -2 4 0 5 q 5 -2 5 -8 q 0 -5 -5 -7 Z" fill="#101020" opacity="0.6" transform="rotate(-2 162 220)"/>
<path d="M 138 250 q -2 5 0 10 q 2 4 0 5 q -5 -2 -5 -8 q 0 -5 5 -7 Z" fill="#101020" opacity="0.6" transform="rotate(3 138 250)"/>
<path d="M 162 250 q 2 5 0 10 q -2 4 0 5 q 5 -2 5 -8 q 0 -5 -5 -7 Z" fill="#101020" opacity="0.6" transform="rotate(-3 162 250)"/>
<path d="M 135 130 L 115 130 Q 125 100 152 78 Q 175 100 185 130 L 165 130 Z" fill="url(#roofGradient)" stroke="#101015" stroke-width="1.5"/>
<path d="M 152 78 L 152 58 L 150 53 L 154 53 L 152 58" stroke="#101015" stroke-width="2" fill="#1A1A2A"/>
<circle cx="150" cy="165" r="30" fill="#F5DEB3" opacity="0.15" filter="url(#auroraFilter)"/>
<circle cx="150" cy="165" r="28" fill="url(#clockFaceGradient)" stroke="#3A2F2F" stroke-width="2"/>
<line x1="150" y1="142" x2="150" y2="139" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 12 -->
<path d="M171.7,156.5 l2.1,-1.2" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 1 -->
<path d="M177.3,165 l2.6,0" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 3 -->
<path d="M171.7,173.5 l2.1,1.2" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 5 -->
<line x1="150" y1="188" x2="150" y2="191" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 6 -->
<path d="M128.3,173.5 l-2.1,1.2" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 7 -->
<path d="M122.7,165 l-2.6,0" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 9 -->
<path d="M128.3,156.5 l-2.1,-1.2" stroke="#3A2F2F" stroke-width="1.5"/> <!-- 11 -->
<path d="M 150 165 C 153 170, 158 173, 155 178 C 152 183, 146 180, 147 174 C 147.5 171, 148 168, 150 165 Z"
fill="url(#clockHandGradient)" stroke="#201810" stroke-width="0.5" transform="rotate(304 150 165)"/>
<path d="M 150 165 L 150 150 C 152 145, 153 135, 150 130 C 147 125, 148 138, 149 148 L 150 165 M 150 130 C 150.5 128, 150 126, 149 127 C 148 128, 149.5 129, 150 130 Z"
fill="url(#clockHandGradient)" stroke="#201810" stroke-width="0.5" transform="rotate(48 150 165)"/>
<circle cx="150" cy="165" r="3" fill="#3A2F2F"/>
</g>
<g id="meltingGears" filter="url(#subtleBlur)">
<g transform="translate(115 220) scale(0.8) rotate(-10)">
<path d="M 0 -20
L 5 -18 C 8 -15, 8 -10, 5 -10 L 5 -12
L 12 -5 C 15 -3, 15 3, 12 5 L 12 5
L 18 -5 L 20 0
L 18 5 L 12 5
L 5 12 C 3 15, 3 18, 5 20 L 5 18
L 0 20 Q -2 30, 0 40 Q 2 30, 0 20
L -5 18 C -8 15, -8 10, -5 10 L -5 12
L -12 5 C -15 3, -15 -3, -12 -5 L -12 -5
L -18 5 L -20 0
L -18 -5 L -12 -5
L -5 -12 C -3 -15, -3 -18, -5 -20 L -5 -18
Z" fill="url(#gearGradient)" stroke="#504030" stroke-width="1"/>
<path d="M 0 -15
L 3.5 -13.5 C 5 -12, 5 -8, 3.5 -8 L 3.5 -10
L 9 -4 L 15 -4 L 16 0 L 15 4 L 9 4
L 3.5 10 C 2 12, 2 14, 3.5 16 L 3.5 13.5
L 0 15 Q -1 20, 0 28 Q 1 20, 0 15
L -3.5 13.5 C -5 12, -5 8, -3.5 8 L -3.5 10
L -9 -4 L -15 -4 L -16 0 L -15 4 L -9 4
L -3.5 -10 C -2 -12, -2 -14, -3.5 -16 L -3.5 -13.5
Z" fill="url(#gearHighlight)" opacity="0.7" transform="translate(0 -1) scale(0.8)"/>
</g>
<g transform="translate(180 285) scale(1.1) rotate(40)">
<path d="M 0 -15
A 15 15 0 0 1 10 -10
C 15 -12, 18 -8, 18 -2
A 18 18 0 0 1 15 10
C 12 18, 5 20, 0 19
A 19 19 0 0 1 -10 12
C -18 10, -20 0, -15 -5
A 15 15 0 0 1 0 -15 Z
M -2 18 C -5 25, 5 25, 2 18 Q 0 22, -2 18 Z"
fill="url(#gearGradient)" stroke="#504030" stroke-width="1"/>
<path d="M 0 -12
A 12 12 0 0 1 8 -8
C 12 -10, 14 -6, 14 0
A 14 14 0 0 1 12 8
C 10 14, 4 15, 0 14
A 15 15 0 0 1 -8 10
C -14 8, -16 -2, -12 -4
A 12 12 0 0 1 0 -12 Z"
fill="url(#gearHighlight)" opacity="0.6" transform="translate(0 -1) scale(0.8)"/>
</g>
<g transform="translate(130 255) scale(1.5) rotate(-25)">
<path d="M 0 -20
L 5 -18 L 5 -12 Q 8 -10 10 -10 L 12 -5 L 18 -5 L 20 0
L 18 5 L 12 5 Q 10 8 8 10 L 5 12 L 5 18
L 0 20 Q -5 25 -8 22 L -5 18 L -5 12 L -12 5
C -15 2 -18 5 -18 5 L -20 0
L -18 -5 L -12 -5 L -5 -12 L -5 -18
Z" fill="url(#gearGradient)" stroke="#504030" stroke-width="1"/>
<path d="M 0 -15
L 3 -14 L 3 -10 Q 5 -8 7 -8 L 9 -4 L 14 -4 L 15 0
L 14 4 L 9 4 Q 7 6 5 8 L 3 10 L 3 14
L 0 15 Q -3 18 -5 16 L -3 14 L -3 10 L -9 4
C -11 2 -13 4 -13 4 L -15 0
L -13 -4 L -9 -4 L -3 -10 L -3 -14
Z" fill="url(#gearHighlight)" opacity="0.7" transform="translate(0 -1) scale(0.8)"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="skyGrad" x1="150" y1="0" x2="150" y2="300">
<stop offset="0%" stop-color="#0b0b2a"/>
<stop offset="100%" stop-color="#1a1a4a"/>
</linearGradient>
<radialGradient id="auroraGrad">
<stop offset="30%" stop-color="#4f2c7a" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#1a1a4a" stop-opacity="0"/>
</radialGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Aurora -->
<g filter="url(#glow)" opacity="0.7">
<path d="M-20 80 Q150 20 320 60 T150 140 300 200" fill="url(#auroraGrad)" transform="rotate(-10 150 150)"/>
<path d="M0 120 Q150 40 300 90 T150 180 280 240" fill="#2c5d7a" opacity="0.6" transform="rotate(5 150 150)"/>
</g>
<!-- Clock Tower -->
<g transform="translate(150 160)">
<path d="M-40 0v-140l20-20h40l20 20v140" fill="#3a3a3a"/>
<rect x="-35" y="-135" width="70" height="100" fill="#d4af37" rx="5"/>
<circle r="25" fill="#1a1a1a"/>
<path d="M0-25v25M-25 0h25" stroke="#d4af37" stroke-width="3"/>
<text x="-8" y="5" font-size="10" fill="gold">XII</text>
</g>
<!-- Melting Gears -->
<g transform="translate(150 100)">
<ellipse cx="0" cy="-30" rx="40" ry="20" fill="#4a4a4a" transform="rotate(30)"/>
<path d="M-30-20q20-15 60 0t20 40l-10 50q-30-20-60 0t-10-50" fill="#6a6a6a"/>
<path d="M-40 50q20-40 80-20t-20 70" fill="url(#molten)" opacity="0.8"/>
</g>
<defs>
<linearGradient id="molten" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#ff6b35"/>
<stop offset="50%" stop-color="#ffd700"/>
<stop offset="100%" stop-color="#8b0000"/>
</linearGradient>
</defs>
<!-- Swirling Elements -->
<path d="M150 50q-50-30-100 0t50 80" fill="none" stroke="#4f2c7a" stroke-width="2" stroke-dasharray="4 4"/>
<circle cx="200" cy="80" r="5" fill="#fff" opacity="0.8"/>
<path d="M180 200q-20-40 40-30" stroke="#d4af37" stroke-width="2" stroke-linecap="round"/>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt with a recognizable clock tower, melting gears, and a swirling aurora sky.
The composition is clear and effectively conveys the theme.
Player 2's image is more abstract and less illustrative of the specific elements described in the prompt, making it less fitting overall.
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
"Three-eyed owl perched on a glowing crescent moon."
"A giant snail racing a time-traveling turtle under a starry sky."
"An octopus wearing a top hat and monocle, sipping tea at a tiny table underwater."
"A snail racing a cheetah on roller skates under a full moon."
