Creative Challenge
"A lighthouse floating in the sky above the clouds."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Sky gradient -->
<radialGradient id="skyGrad" cx="50%" cy="0%" r="120%">
<stop offset="0%" stop-color="#a6d7ff"/>
<stop offset="60%" stop-color="#4c87ff"/>
<stop offset="100%" stop-color="#1e2a7a"/>
</radialGradient>
<!-- Lighthouse stripes -->
<linearGradient id="redStripe" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff7070"/>
<stop offset="100%" stop-color="#c91a1a"/>
</linearGradient>
<pattern id="stripePattern" patternUnits="userSpaceOnUse" width="40" height="40" patternTransform="rotate(5)">
<rect width="40" height="20" fill="url(#redStripe)"/>
<rect y="20" width="40" height="20" fill="#ffffff"/>
</pattern>
<!-- Lighthouse light -->
<linearGradient id="beamGrad" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="rgba(255,255,204,0.9)"/>
<stop offset="70%" stop-color="rgba(255,255,204,0)"/>
</linearGradient>
<!-- Lantern glass -->
<linearGradient id="glassGrad" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ffffe6"/>
<stop offset="100%" stop-color="#ffd54d"/>
</linearGradient>
<!-- Cloud blur -->
<filter id="cloudBlur" x="-10%" y="-10%" width="120%" height="120%">
<feGaussianBlur stdDeviation="6"/>
</filter>
<!-- Soft shadow -->
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- Sky background -->
<rect width="300" height="300" fill="url(#skyGrad)"/>
<!-- Stars -->
<g fill="#ffffff" opacity="0.7">
<circle cx="25" cy="40" r="1.2"/>
<circle cx="60" cy="80" r="0.9"/>
<circle cx="110" cy="30" r="1.5"/>
<circle cx="200" cy="50" r="1"/>
<circle cx="250" cy="70" r="1.1"/>
<circle cx="270" cy="20" r="0.8"/>
<circle cx="180" cy="90" r="1.3"/>
<circle cx="40" cy="120" r="0.8"/>
<circle cx="140" cy="65" r="1"/>
</g>
<!-- Distant clouds -->
<g fill="#ffffff" opacity="0.5" filter="url(#cloudBlur)">
<ellipse cx="80" cy="160" rx="50" ry="15"/>
<ellipse cx="220" cy="140" rx="60" ry="18"/>
<ellipse cx="150" cy="180" rx="70" ry="20"/>
</g>
<!-- Lighthouse beams -->
<g opacity="0.6">
<polygon points="150,75 300,45 300,65 150,95" fill="url(#beamGrad)"/>
<polygon points="150,75 0,45 0,65 150,95" fill="url(#beamGrad)"/>
</g>
<!-- Lighthouse -->
<g transform="translate(150 75)" filter="url(#softShadow)">
<!-- Tower -->
<path d="M-15 0 L15 0 L10 120 L-10 120 Z" fill="url(#stripePattern)"/>
<!-- Balcony -->
<ellipse cx="0" cy="0" rx="22" ry="4" fill="#444"/>
<rect x="-25" y="-4" width="50" height="8" fill="#444"/>
<!-- Railing -->
<g stroke="#222" stroke-width="1">
<line x1="-20" y1="-4" x2="-20" y2="-10"/>
<line x1="-10" y1="-4" x2="-10" y2="-10"/>
<line x1="0" y1="-4" x2="0" y2="-10"/>
<line x1="10" y1="-4" x2="10" y2="-10"/>
<line x1="20" y1="-4" x2="20" y2="-10"/>
</g>
<!-- Lantern room -->
<rect x="-12" y="-24" width="24" height="20" fill="url(#glassGrad)" stroke="#333" stroke-width="1"/>
<!-- Lantern frame -->
<line x1="-12" y1="-14" x2="12" y2="-14" stroke="#333" stroke-width="1"/>
<line x1="-4" y1="-24" x2="-4" y2="-4" stroke="#333" stroke-width="1"/>
<line x1="4" y1="-24" x2="4" y2="-4" stroke="#333" stroke-width="1"/>
<!-- Dome -->
<path d="M-12 -24 A12 8 0 0 1 12 -24 L0 -32 Z" fill="#333"/>
<!-- Finial -->
<circle cx="0" cy="-33" r="2" fill="#ffd54d"/>
</g>
<!-- Main cloud platform -->
<g filter="url(#cloudBlur)">
<path d="M60 200
q20 -30 50 -10
q40 -40 80 10
q40 -10 60 20
q-10 40 -60 30
q-20 20 -60 10
q-40 10 -60 -20
q-30 0 -10 -40z"
fill="#ffffff"/>
</g>
<!-- Subtle floating sparkles -->
<g fill="#ffd54d" opacity="0.6">
<circle cx="140" cy="120" r="1.3"/>
<circle cx="160" cy="130" r="0.9"/>
<circle cx="130" cy="145" r="1.1"/>
<circle cx="170" cy="150" r="1.4"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Sky background with gradient and stars -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4682B4;stop-opacity:1" />
</linearGradient>
<path id="star" d="M10 10l10 10 10-10 10 10-10 10-10-10-10 10-10-10"/>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Clouds -->
<path d="M50 200Q60 180,90 180,100 160Q110 140,100 120,90 100,80 80,70 80,60 90,50 100,50 120,60 140,70 160,80 160,90 180,100 190,110 200,130 210,150Q220 170,230 180,240 180,250 160,260 140,270 130,280 120,290 110,300 100,300 90,290 80,280 70,270 60,260 50,250,40 240,30 220,20 200,10 180Q150 10,120 20,90 30,60 40,40 50,30 60,20 70,10 80,0 90,10 100,20 110,30 120,40 130,50 140,60 150,70 160,80 170,90 180,100 190,110 200,130 210,150 220,170,230 190Q240 200,250 210,260 220,270 230,280 240,290 250,300 260,310 270,320 270,330 260,340 250,350 240,360 220,370 200,380 180,390 160,400 140,410 120,420 100,430 80,440 60,450 40,460 20,470 0,480 10,490 20,500 30,510 40,520 50,530 60,540 70,550 80,560 90,570 100,580 110,590 120,600 130,610 140,620 150,630 160,640 170,650 180,660 190,670 200,680 210,690 220,700 230,710 240,720 250,730 260,740 270,750 280,760 290,770 300,780 310,790 320,800 330,810 340,820 350,830 360,840 370,850 380,860 390,870 400,880 410,890 420,900 430,910 440,920 450,930 460,940 470,950 480,960 490,970 500,980 510,990 520,1000 530" fill="white" opacity="0.8"/>
<!-- Lighthouse -->
<g transform="translate(150,220)">
<!-- Lighthouse base -->
<path d="M-30-120L30-120L30-60L-30-60L-30-120" fill="#FFA500" opacity="0.8"/>
<!-- Lighthouse tower -->
<path d="M-15-180L15-180L15-120L-15-120L-15-180" fill="url(#gradient-1)"/>
<defs>
<linearGradient id="gradient-1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#E67E22;stop-opacity:1" />
<stop offset="100%" style="stop-color:#D35400;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Lantern room -->
<path d="M-10-240L10-240L10-200L-10-200L-10-240" fill="#F1C40F" opacity="0.9"/>
<!-- Light rays -->
<path d="M0-200L50-150, -50-150, 0-100, 50-50, -50-50, 0-150, 30-180, -30-180" stroke="#FDB813" stroke-width="2" opacity="0.8"/>
<!-- Gallery and railings -->
<path d="M-20-160L20-160M-18-165L18-165M-20-170L20-170M-15-175L15-175" stroke="#2F4F4F" stroke-width="2"/>
</g>
<!-- Floating clouds -->
<path d="M140 280Q150 270,160 260,170 250,180 240,190 230,200 220,210 210,220 200,230 190,240 180,250 170,260 160,270 150,280 140" fill="white" opacity="0.8"/>
<!-- Birds -->
<path d="M20 100L30 110,25 105,20 100" fill="#2F4F4F" transform="translate(100,100)"/>
<path d="M20 100L30 110,25 105,20 100" fill="#2F4F4F" transform="translate(200,150)"/>
<path d="M20 100L30 110,25 105,20 100" fill="#2F4F4F" transform="translate(250,120)"/>
</svg>Judge's Analysis
Player 1's submission adheres more closely to the prompt by depicting a realistic lighthouse floating above the clouds with soft lighting and atmospheric effects.
The technical quality and composition are strong, creating a visually appealing and immersive scene.
Player 2's abstract approach is creative but lacks clarity and adherence to the prompt's concept of a lighthouse above the clouds.
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.
