Creative Challenge
"Cactus wearing sunglasses on a surfboard, riding waves under a sunset"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Gradients and patterns -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#ff7800" />
<stop offset="40%" stop-color="#ff5400" />
<stop offset="70%" stop-color="#d4267d" />
<stop offset="100%" stop-color="#5e2b97" />
</linearGradient>
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#3c5da0" />
<stop offset="100%" stop-color="#1a2e5a" />
</linearGradient>
<linearGradient id="surfboardGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ffce85" />
<stop offset="100%" stop-color="#e0a44e" />
</linearGradient>
<linearGradient id="cactusGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2e8b57" />
<stop offset="100%" stop-color="#3cb371" />
</linearGradient>
<radialGradient id="sunGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffff33" />
<stop offset="80%" stop-color="#ff6600" />
<stop offset="100%" stop-color="#ff3300" />
</radialGradient>
<pattern id="waterPattern" patternUnits="userSpaceOnUse" width="20" height="20" patternTransform="rotate(45)">
<path d="M0,10 L20,10" stroke="#3a77c9" stroke-width="1" fill="none" stroke-opacity="0.3" />
</pattern>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="200" fill="url(#skyGradient)" />
<!-- Sun -->
<circle cx="240" cy="60" r="30" fill="url(#sunGradient)" />
<circle cx="240" cy="60" r="35" fill="none" stroke="#ff8c42" stroke-width="2" opacity="0.6" />
<circle cx="240" cy="60" r="40" fill="none" stroke="#ff8c42" stroke-width="1.5" opacity="0.4" />
<!-- Ocean -->
<rect x="0" y="200" width="300" height="100" fill="url(#waterGradient)" />
<rect x="0" y="200" width="300" height="100" fill="url(#waterPattern)" />
<!-- Waves -->
<path d="M0,200 Q25,190 50,200 T100,200 T150,200 T200,200 T250,200 T300,200" fill="none" stroke="#7fb3fa" stroke-width="2" />
<path d="M0,210 Q35,195 70,210 T140,210 T210,210 T280,210" fill="none" stroke="#7fb3fa" stroke-width="3" />
<path d="M-30,225 Q15,205 60,225 T150,225 T240,225 T330,225" fill="none" stroke="#7fb3fa" stroke-width="4" />
<!-- Main wave the cactus is surfing -->
<path d="M-40,245 Q30,215 100,245 T240,245 T380,245" fill="#5a9de9" fill-opacity="0.7" />
<path d="M-40,245 Q30,215 100,245" fill="none" stroke="white" stroke-width="2" stroke-opacity="0.6" />
<!-- Surfboard -->
<ellipse cx="150" cy="235" rx="60" ry="15" fill="url(#surfboardGradient)" />
<ellipse cx="150" cy="235" rx="60" ry="15" fill="none" stroke="#e59400" stroke-width="1" />
<line x1="105" y1="230" x2="195" y2="230" stroke="#c22" stroke-width="2" />
<line x1="110" y1="240" x2="190" y2="240" stroke="#c22" stroke-width="2" />
<!-- Cactus body -->
<path d="M150,145 C150,145 145,190 145,215 C145,225 155,225 155,215 C155,190 150,145 150,145 Z" fill="url(#cactusGradient)" stroke="#1a6334" stroke-width="1.5" />
<!-- Cactus arms -->
<path d="M150,170 L135,170 C125,170 125,180 130,185 C135,190 135,200 135,210 C135,215 140,215 140,210 C140,195 140,190 135,185 C130,180 135,175 140,175 L150,175 Z" fill="url(#cactusGradient)" stroke="#1a6334" stroke-width="1.5" />
<path d="M150,160 L165,160 C175,160 175,170 170,175 C165,180 165,190 165,200 C165,205 160,205 160,200 C160,185 160,180 165,175 C170,170 165,165 160,165 L150,165 Z" fill="url(#cactusGradient)" stroke="#1a6334" stroke-width="1.5" />
<!-- Cactus spines -->
<line x1="140" y1="150" x2="136" y2="145" stroke="#1a6334" stroke-width="1" />
<line x1="160" y1="150" x2="164" y2="145" stroke="#1a6334" stroke-width="1" />
<line x1="138" y1="170" x2="134" y2="165" stroke="#1a6334" stroke-width="1" />
<line x1="162" y1="180" x2="166" y2="175" stroke="#1a6334" stroke-width="1" />
<line x1="140" y1="190" x2="136" y2="185" stroke="#1a6334" stroke-width="1" />
<line x1="160" y1="200" x2="164" y2="195" stroke="#1a6334" stroke-width="1" />
<line x1="140" y1="210" x2="136" y2="205" stroke="#1a6334" stroke-width="1" />
<!-- Cactus face -->
<circle cx="147" cy="155" r="1.5" fill="#1a6334" />
<circle cx="153" cy="155" r="1.5" fill="#1a6334" />
<path d="M148,165 C148,162 152,162 152,165" fill="none" stroke="#1a6334" stroke-width="1" />
<!-- Sunglasses -->
<path d="M138,152 L162,152 C165,152 165,153 162,154 L138,154 C135,154 135,152 138,152 Z" fill="#111" />
<path d="M138,154 C135,154 134,158 137,158 L147,158 C150,158 150,154 147,154 Z" fill="#111" stroke="#444" stroke-width="0.5" />
<path d="M153,154 C150,154 150,158 153,158 L163,158 C166,158 165,154 162,154 Z" fill="#111" stroke="#444" stroke-width="0.5" />
<line x1="150" y1="154" x2="150" y2="158" stroke="#444" stroke-width="0.5" />
<!-- Reflections on sunglasses -->
<path d="M140,155 L144,155" stroke="#fff" stroke-width="0.8" stroke-opacity="0.7" />
<path d="M156,155 L160,155" stroke="#fff" stroke-width="0.8" stroke-opacity="0.7" />
<!-- Water splashes -->
<path d="M95,245 C95,235 85,230 80,240" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.8" />
<path d="M205,245 C205,235 215,230 220,240" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.8" />
<path d="M175,245 C180,235 185,240 190,235" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.8" />
<path d="M125,245 C120,235 115,240 110,235" fill="none" stroke="white" stroke-width="1.5" stroke-opacity="0.8" />
<!-- Small birds in distance -->
<path d="M60,70 C65,67 70,73 75,70 C70,73 75,79 70,76" fill="#333" />
<path d="M80,60 C85,57 90,63 95,60 C90,63 95,69 90,66" fill="#333" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Background Sunset -->
<rect x="0" y="0" width="300" height="300" fill="url(#sunsetGradient)"/>
<defs>
<linearGradient id="sunsetGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFC107"/>
<stop offset="30%" stop-color="#FF9800"/>
<stop offset="60%" stop-color="#FF69B4"/>
<stop offset="90%" stop-color="#F44336"/>
<stop offset="100%" stop-color="#FF3D00"/>
</linearGradient>
</defs>
<!-- Waves -->
<path d="M 0 250 C 50 250 100 200 150 200 C 200 200 250 250 300 250" stroke="#007bff" stroke-width="2" fill="none"/>
<path d="M 0 270 C 50 270 100 220 150 220 C 200 220 250 270 300 270" stroke="#17a2b8" stroke-width="2" fill="none"/>
<path d="M 0 290 C 50 290 100 240 150 240 C 200 240 250 290 300 290" stroke="#6610f2" stroke-width="2" fill="none"/>
<!-- Surfboard -->
<rect x="90" y="240" width="120" height="10" fill="#ff69b4" rx="5" />
<rect x="100" y="230" width="100" height="10" fill="#ff69b4" rx="5" />
<!-- Cactus -->
<g transform="translate(150 220)">
<circle cx="0" cy="0" r="20" fill="#8bc34a"/>
<path d="M 0 -20 L 10 30 L -10 30 Z" fill="#8bc34a"/>
<path d="M 0 -20 L 5 30 L -5 30 Z" fill="#8bc34a" transform="rotate(45 0 0)"/>
<path d="M 0 -20 L 10 30 L -10 30 Z" fill="#8bc34a" transform="rotate(90 0 0)"/>
<path d="M 0 -20 L 5 30 L -5 30 Z" fill="#8bc34a" transform="rotate(135 0 0)"/>
</g>
<!-- Sunglasses -->
<g transform="translate(135 205)">
<rect x="0" y="0" width="30" height="10" fill="#000" rx="5"/>
<rect x="5" y="5" width="20" height="20" fill="#4f4f4f" rx="5"/>
<circle cx="15" cy="15" r="5" fill="#fff"/>
</g>
</svg>Judge's Analysis
Player 1's submission demonstrates a more dynamic composition with vivid colors and distinct elements like the sunset and waves, aligning well with the prompt.
The technical execution shows depth with shading and gradient use, enhancing the visual appeal.
Player 2's entry, though creative, lacks the same level of detail and impact in the depiction of the scene.
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
"Moonlit cat orchestra on a floating lily pad"
"A penguin juggling colorful fish under the northern lights"
"A penguin juggling snowballs on a tightrope above an erupting volcano"
"Chameleon playing a tiny saxophone under a psychedelic mushroom"
"Floating city on a giant turtle's back, under a starry sky"
"Surreal clock with melting numbers dripping into a cup of steaming coffee"
