Creative Challenge
"A lizard wearing roller skates on a tightrope under a crescent moon."
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<radialGradient id="skyGrad" cx="0.5" cy="0.3" r="0.7">
<stop offset="0%" stop-color="#1a237e"/>
<stop offset="100%" stop-color="#000018"/>
</radialGradient>
<radialGradient id="moonGrad" cx="0.4" cy="0.4" r="0.5">
<stop offset="0%" stop-color="#fff9c4"/>
<stop offset="100%" stop-color="#ffe57f"/>
</radialGradient>
<linearGradient id="lizardBodyGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#76c043"/>
<stop offset="50%" stop-color="#a2d729"/>
<stop offset="100%" stop-color="#58a300"/>
</linearGradient>
<pattern id="ropePattern" width="8" height="8" patternUnits="userSpaceOnUse">
<path d="M0,0 L8,8 M8,0 L0,8" stroke="#ccc" stroke-width="1"/>
</pattern>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.5"/>
</filter>
</defs>
<rect width="300" height="300" fill="url(#skyGrad)"/>
<circle cx="20" cy="30" r="1.5" fill="#fff" opacity="0.8"/>
<circle cx="80" cy="50" r="1" fill="#fff" opacity="0.7"/>
<circle cx="140" cy="40" r="1.8" fill="#fff" opacity="0.6"/>
<circle cx="260" cy="80" r="1.2" fill="#fff" opacity="0.8"/>
<circle cx="200" cy="30" r="1" fill="#fff" opacity="0.7"/>
<circle cx="50" cy="100" r="1.3" fill="#fff" opacity="0.6"/>
<circle cx="280" cy="120" r="1.1" fill="#fff" opacity="0.7"/>
<circle cx="160" cy="20" r="1" fill="#fff" opacity="0.8"/>
<circle cx="230" cy="60" r="40" fill="url(#moonGrad)"/>
<circle cx="245" cy="55" r="35" fill="#000018"/>
<path d="M20,200 C150,190 150,210 280,200" stroke="url(#ropePattern)" stroke-width="3" fill="none"/>
<g transform="translate(150,200)" filter="url(#shadow)">
<path d="M-40,0 C-60,-10 -60,-40 -40,-30" fill="url(#lizardBodyGrad)" stroke="#3d672b" stroke-width="1.5"/>
<ellipse cx="0" cy="0" rx="40" ry="15" fill="url(#lizardBodyGrad)" stroke="#3d672b" stroke-width="1.5"/>
<ellipse cx="45" cy="-5" rx="12" ry="8" fill="url(#lizardBodyGrad)" stroke="#3d672b" stroke-width="1.5"/>
<circle cx="-10" cy="-2" r="4" fill="#4a7322" opacity="0.7"/>
<circle cx="5" cy="5" r="3" fill="#4a7322" opacity="0.7"/>
<circle cx="15" cy="-5" r="2.5" fill="#4a7322" opacity="0.7"/>
<circle cx="52" cy="-8" r="3" fill="#ffeb3b" stroke="#3d672b" stroke-width="1"/>
<circle cx="53" cy="-9" r="1" fill="#000"/>
<line x1="25" y1="5" x2="30" y2="20" stroke="#3d672b" stroke-width="3" stroke-linecap="round"/>
<line x1="15" y1="5" x2="20" y2="20" stroke="#3d672b" stroke-width="3" stroke-linecap="round"/>
<line x1="-5" y1="5" x2="0" y2="20" stroke="#3d672b" stroke-width="3" stroke-linecap="round"/>
<line x1="-15" y1="5" x2="-10" y2="20" stroke="#3d672b" stroke-width="3" stroke-linecap="round"/>
<g transform="translate(30,20) rotate(-10)">
<rect x="-4" y="0" width="8" height="4" fill="#e53935" stroke="#b71c1c" stroke-width="1"/>
<circle cx="-2" cy="6" r="2" fill="#212121"/>
<circle cx="2" cy="6" r="2" fill="#212121"/>
</g>
<g transform="translate(20,20) rotate(-5)">
<rect x="-4" y="0" width="8" height="4" fill="#e53935" stroke="#b71c1c" stroke-width="1"/>
<circle cx="-2" cy="6" r="2" fill="#212121"/>
<circle cx="2" cy="6" r="2" fill="#212121"/>
</g>
<g transform="translate(0,20) rotate(5)">
<rect x="-4" y="0" width="8" height="4" fill="#e53935" stroke="#b71c1c" stroke-width="1"/>
<circle cx="-2" cy="6" r="2" fill="#212121"/>
<circle cx="2" cy="6" r="2" fill="#212121"/>
</g>
<g transform="translate(-10,20) rotate(10)">
<rect x="-4" y="0" width="8" height="4" fill="#e53935" stroke="#b71c1c" stroke-width="1"/>
<circle cx="-2" cy="6" r="2" fill="#212121"/>
<circle cx="2" cy="6" r="2" fill="#212121"/>
</g>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- Gradient background -->
<defs>
<linearGradient id="nightSky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1A1A4F;stop-opacity:1" />
<stop offset="100%" style="stop-color:#0A192F;stop-opacity:1" />
</linearGradient>
<linearGradient id="moonGlow" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#F7F7F7;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#C9E4CA;stop-opacity:0.2" />
</linearGradient>
<path id="moonPath" d="M 150 100 C 200 50, 160 30, 100 30, 40 30, 40 70, 40 110, 60 130, 100 145, 140 145, 160 130, 200 110, 240 70, 240 30, 220 20, 180 10, 150 5, 120 20, 100 30, 80 40, 50 70, 40 110, 40 130, 60 145, 100 145, 140 145, 160 130, 180 110, 200 70, 240 30, 250 20, 260 10, 270 5, 260 0, 250 0, 220 10, 200 20, 180 30, 150 40, 120 50, 100 60, 80 70, 50 80, 40 100, 40 120, 60 140, 80 150, 100 155, 120 155, 140 150, 160 140, 180 120, 200 100, 220 80, 240 60, 260 40, 270 20, 260 10, 250 5, 240 0, 220 0, 200 10, 180 20, 160 30, 140 40, 120 50, 100 60, 80 70, 60 80, 40 90, 20 100, 0 110, 10 120, 30 130, 50 140, 70 150, 90 155, 110 155, 130 150, 150 140, 170 130, 190 120, 210 100, 230 80, 250 60, 270 40, 290 20, 300 10, 300 0, 290 0, 270 10, 250 20, 230 30, 210 40, 190 50, 170 60, 150 70, 130 80, 110 90, 90 100, 70 110, 50 120, 30 130, 10 140, 0 150, 10 140, 30 130, 50 120, 70 110, 90 100, 110 90, 130 80, 150 70, 170 60, 190 50, 210 40, 230 30, 250 20, 270 10, 290 0, 300 0, 300 10, 290 20, 270 30, 250 40, 230 50, 210 60, 190 70, 170 80, 150 90, 130 100, 110 110, 90 120, 70 130, 50 140, 30 150, 10 160, 0 170, 10 180, 30 190, 50 200, 70 210, 90 220, 110 230, 130 240, 150 250, 170 260, 190 270, 210 280, 230 290, 250 300, 270 300, 290 290, 300 280, 300 270, 290 260, 270 250, 250 240, 230 230, 210 220, 190 210, 170 200, 150 190, 130 180, 110 170, 90 160, 70 150, 50 140, 30 130, 10 120, 0 110, 10 100, 30 90, 50 80, 70 70, 90 60, 110 50, 130 40, 150 30, 170 20, 190 10, 210 0, 230 0, 250 10, 270 20, 290 30, 300 40, 300 50, 290 60, 270 70, 250 80, 230 90, 210 100, 190 110, 170 120, 150 130, 130 140, 110 150, 90 160, 70 170, 50 180, 30 190, 10 200, 0 210, 10 220, 30 230, 50 240, 70 250, 90 260, 110 270, 130 280, 150 290, 170 300, 190 300, 210 290, 230 280, 250 270, 270 260, 290 250, 300 240, 300 230, 290 220, 270 210, 250 200, 230 190, 210 180, 190 170, 170 160, 150 150, 130 140, 110 130, 90 120, 70 110, 50 100, 30 90, 10 80, 0 70, 10 60, 30 50, 50 40, 70 30, 90 20, 110 10, 130 0, 150 0, 170 10, 190 20, 210 30, 230 40, 250 50, 270 60, 290 70, 300 80, 300 90, 290 100, 270 110, 250 120, 230 130, 210 140, 190 150, 170 160, 150 170, 130 180, 110 190, 90 200, 70 210, 50 220, 30 230, 10 240, 0 250, 10 240, 30 230, 50 220, 70 210, 90 200, 110 190, 130 180, 150 170, 170 160, 190 150, 210 140, 230 130, 250 120, 270 110, 290 100, 300 90, 300 80, 290 70, 270 60, 250 50, 230 40, 210 30, 190 20, 170 10, 150 0, 130 10, 110 20, 90 30, 70 40, 50 50, 30 60, 10 70, 0 80, 10 90, 30 100, 50 110, 70 120, 90 130, 110 140, 130 150, 150 160, 170 170, 190 180, 210 190, 230 200, 250 210, 270 220, 290 230, 300 240, 300 250, 290 260, 270 270, 250 280, 230 290, 210 300, 190 300, 170 290, 150 280, 130 270, 110 260, 90 250, 70 240, 50 230, 30 220, 10 210, 0 200, 10 190, 30 180, 50 170, 70 160, 90 150, 110 140, 130 130, 150 120, 170 110, 190 100, 210 90, 230 80, 250 70, 270 60, 290 50, 300 40, 300 30, 290 20, 270 10, 250 0, 230 0, 210 10, 190 20, 170 30, 150 40, 130 50, 110 60, 90 70, 70 80, 50 90, 30 100, 10 110, 0 120, 10 130, 30 140, 50 150, 70 160, 90 170, 110 180, 130 190, 150 200, 170 210, 190 220, 210 230, 230 240, 250 250, 270 260, 290 270, 300 280, 300 300, 290 290, 270 280, 250 270, 230 260, 210 250, 190 240, 170 230, 150 220, 130 210, 110 200, 90 190, 70 180, 50 170, 30 160, 10 150, 0 140, 10 130, 30 120, 50 110, 70 100, 90 90, 110 80, 130 70, 150 60, 170 50, 190 40, 210 30, 230 20, 250 10, 270 0, 290 0, 300 10, 300 20, 290 30, 270 40, 250 50, 230 60, 210 70, 190 80, 170 90, 150 100, 130 110, 110 120, 90 130, 70 140, 50 150, 30 160, 10 170, 0 180, 10 190, 30 200, 50 210, 70 220, 90 230, 110 240, 130 250, 150 260, 170 270, 190 280, 210 290, 230 300, 250 300, 270 290, 290 280, 300 270, 300 260, 290 250, 270 240, 250 230, 230 220, 210 210, 190 200, 170 190, 150 180, 130 170, 110 160, 90 150, 70 140, 50 130, 30 120, 10 110, 0 100, 10 90, 30 80, 50 70, 70 60, 90 50, 110 40, 130 30, 150 20, 170 10, 190 0, 210 0, 230 10, 250 20, 270 30, 290 40, 300 50" />
<filter id="moonGlowFilter">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#nightSky)" />
<!-- Moon -->
<path d="M 100 100 Q 150 120 200 100 Q 250 80 300 100" fill="#F7F7F7" />
<use filter="url(#moonGlowFilter)" href="#moonPath" fill="#F7F7F7" opacity="0.8" />
<!-- Stars -->
<g opacity="0.6">
<circle cx="50" cy="50" r="1" fill="white" />
<circle cx="80" cy="100" r="1" fill="white" />
<circle cx="120" cy="70" r="1" fill="white" />
<circle cx="180" cy="40" r="1" fill="white" />
<circle cx="200" cy="90" r="1" fill="white" />
<circle cx="220" cy="60" r="1" fill="white" />
<circle cx="280" cy="80" r="1" fill="white" />
<circle cx="250" cy="120" r="1" fill="white" />
<circle cx="300" cy="150" r="1" fill="white" />
</g>
<!-- Tightrope -->
<path d="M 50 150 Q 150 140 250 140 Q 240 140 300 150" stroke="#666" stroke-width="2" fill="none" />
<!-- Lizard with roller skates -->
<g transform="translate(150,140)">
<!-- Lizard body -->
<path d="M -30 -20 Q -20 -10 0 0 Q 20 -10 30 -20 L 30 -40 Q 20 -50 -20 -50 Q -40 -30 -40 -10 L -40 0 Q -20 10 0 20 L 0 40 Q 20 50 40 50 Q 60 40 60 20 L 60 0 Q 40 -10 20 -20 Z"
fill="url(#moonGlow)" opacity="0.9" />
<!-- Lizard tail -->
<path d="M 0 0 Q 20 -20 40 -30 Q 60 -40 80 -35" stroke="#4A9338" stroke-width="4" fill="none" />
<!-- Roller skate wheels -->
<circle cx="-25" cy="-35" r="8" fill="#CD3700" />
<circle cx="25" cy="-35" r="8" fill="#CD3700" />
<!-- Skate details -->
<rect x="-30" y="-40" width="60" height="10" fill="#4A9338" />
</g>
</svg>Judge's Analysis
Player 1's submission adheres closely to the prompt with a clear depiction of a lizard wearing roller skates on a tightrope under a crescent moon.
The composition is clean, visually appealing, and easily interpretable.
Player 2's submission, while abstract and creative, lacks clarity and fails to represent the prompt effectively.
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
"A flamingo wearing a crown, standing on a stack of pancakes."
"A clock melting over a campfire under a starry sky."
"Rocketship shaped like a fish leaping out of a cupcake galaxy."
"A floating island with a single tree, roots dangling into the clouds below."
