Creative Challenge
"A flying jellyfish cityscape under a bright, shimmering aurora sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Shimmering aurora sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<defs>
<linearGradient id="skyGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#ff73b3" />
<stop offset="50%" stop-color="#c971e9" />
<stop offset="100%" stop-color="#6f7ce0" />
</linearGradient>
</defs>
<!-- Flying jellyfish -->
<circle cx="150" cy="100" r="30" fill="#ffec88" />
<path d="M130 130 C 100 120, 200 120, 170 130 Q150 160, 130 130" fill="#ffec88" />
<path d="M170 130 C 200 120, 100 120, 130 130 Q150 140, 170 130" fill="#ffec88" />
<!-- Jellyfish cityscape -->
<rect x="100" y="200" width="100" height="100" fill="#a2d5f2" />
<rect x="120" y="220" width="20" height="20" fill="#e94c9b" />
<rect x="160" y="220" width="20" height="20" fill="#e94c9b" />
<rect x="140" y="240" width="20" height="20" fill="#e94c9b" />
<rect x="180" y="240" width="20" height="20" fill="#e94c9b" />
<rect x="130" y="260" width="40" height="40" fill="#e94c9b" />
<rect x="180" y="260" width="40" height="40" fill="#e94c9b" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Gradients and Patterns -->
<defs>
<!-- Aurora Sky Gradient -->
<linearGradient id="auroraGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#08083A"/>
<stop offset="30%" stop-color="#1A0536"/>
<stop offset="70%" stop-color="#0A2E52"/>
<stop offset="100%" stop-color="#061B38"/>
</linearGradient>
<!-- Aurora Glow Gradient -->
<radialGradient id="auroraGlow" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
<stop offset="0%" stop-color="#74F9D5" stop-opacity="0.7"/>
<stop offset="40%" stop-color="#5CD9F4" stop-opacity="0.5"/>
<stop offset="70%" stop-color="#7C76F2" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#EC6EF8" stop-opacity="0"/>
</radialGradient>
<!-- Jellyfish Body Gradient -->
<radialGradient id="jellyfishGradient1" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
<stop offset="0%" stop-color="#F9F4FF" stop-opacity="0.9"/>
<stop offset="50%" stop-color="#C9A8FF" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#9D6BFF" stop-opacity="0.4"/>
</radialGradient>
<radialGradient id="jellyfishGradient2" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
<stop offset="0%" stop-color="#FFDBF8" stop-opacity="0.9"/>
<stop offset="50%" stop-color="#FFB0EC" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#FF7EDE" stop-opacity="0.4"/>
</radialGradient>
<radialGradient id="jellyfishGradient3" cx="50%" cy="40%" r="60%" fx="50%" fy="40%">
<stop offset="0%" stop-color="#E0FBFF" stop-opacity="0.9"/>
<stop offset="50%" stop-color="#B3E5FF" stop-opacity="0.7"/>
<stop offset="100%" stop-color="#84CFFF" stop-opacity="0.4"/>
</radialGradient>
<!-- Building Lights Pattern -->
<pattern id="buildingLights" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<rect width="2" height="2" fill="#FFEB99" opacity="0.8"/>
<rect x="5" y="5" width="2" height="2" fill="#FFEB99" opacity="0.5"/>
</pattern>
<!-- City Texture -->
<filter id="cityTexture">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="2" seed="5"/>
<feDisplacementMap in="SourceGraphic" scale="5"/>
</filter>
<!-- Glow Effect -->
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="3" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="over"/>
</filter>
</defs>
<!-- Background Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#auroraGradient)"/>
<!-- Stars -->
<g id="stars">
<circle cx="25" cy="35" r="0.6" fill="white" opacity="0.8"/>
<circle cx="78" cy="24" r="0.5" fill="white" opacity="0.7"/>
<circle cx="150" cy="15" r="0.7" fill="white" opacity="0.9"/>
<circle cx="180" cy="42" r="0.5" fill="white" opacity="0.7"/>
<circle cx="250" cy="30" r="0.6" fill="white" opacity="0.8"/>
<circle cx="45" cy="80" r="0.4" fill="white" opacity="0.6"/>
<circle cx="270" cy="70" r="0.5" fill="white" opacity="0.7"/>
<circle cx="120" cy="55" r="0.6" fill="white" opacity="0.8"/>
<circle cx="200" cy="65" r="0.4" fill="white" opacity="0.6"/>
<circle cx="90" cy="42" r="0.5" fill="white" opacity="0.7"/>
<!-- More stars scattered around -->
<circle cx="50" cy="60" r="0.3" fill="white" opacity="0.5"/>
<circle cx="120" cy="25" r="0.3" fill="white" opacity="0.5"/>
<circle cx="220" cy="45" r="0.3" fill="white" opacity="0.5"/>
<circle cx="30" cy="20" r="0.3" fill="white" opacity="0.5"/>
<circle cx="280" cy="25" r="0.3" fill="white" opacity="0.5"/>
</g>
<!-- Aurora Waves -->
<path d="M0,50 Q75,30 150,50 T300,30" fill="none" stroke="#74F9D5" stroke-width="10" stroke-opacity="0.3" filter="url(#glow)"/>
<path d="M0,70 Q75,50 150,70 T300,50" fill="none" stroke="#5CD9F4" stroke-width="12" stroke-opacity="0.2" filter="url(#glow)"/>
<path d="M0,30 Q75,60 150,30 T300,60" fill="none" stroke="#7C76F2" stroke-width="8" stroke-opacity="0.3" filter="url(#glow)"/>
<path d="M0,20 Q75,40 150,20 T300,40" fill="none" stroke="#EC6EF8" stroke-width="15" stroke-opacity="0.2" filter="url(#glow)"/>
<!-- Aurora Glow -->
<ellipse cx="150" cy="80" rx="200" ry="120" fill="url(#auroraGlow)"/>
<!-- Distant Cityscape -->
<g id="distantCity" opacity="0.7">
<rect x="20" y="180" width="15" height="30" fill="#2A2A4C"/>
<rect x="35" y="175" width="20" height="35" fill="#2A2A4C"/>
<rect x="55" y="190" width="10" height="20" fill="#2A2A4C"/>
<rect x="65" y="170" width="25" height="40" fill="#2A2A4C"/>
<rect x="90" y="185" width="15" height="25" fill="#2A2A4C"/>
<rect x="105" y="165" width="30" height="45" fill="#2A2A4C"/>
<rect x="135" y="180" width="10" height="30" fill="#2A2A4C"/>
<rect x="145" y="170" width="20" height="40" fill="#2A2A4C"/>
<rect x="165" y="175" width="25" height="35" fill="#2A2A4C"/>
<rect x="190" y="160" width="15" height="50" fill="#2A2A4C"/>
<rect x="205" y="175" width="20" height="35" fill="#2A2A4C"/>
<rect x="225" y="185" width="10" height="25" fill="#2A2A4C"/>
<rect x="235" y="170" width="15" height="40" fill="#2A2A4C"/>
<rect x="250" y="180" width="25" height="30" fill="#2A2A4C"/>
<!-- Building lights -->
<rect x="20" y="180" width="15" height="30" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="35" y="175" width="20" height="35" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="65" y="170" width="25" height="40" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="105" y="165" width="30" height="45" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="145" y="170" width="20" height="40" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="190" y="160" width="15" height="50" fill="url(#buildingLights)" opacity="0.3"/>
<rect x="235" y="170" width="15" height="40" fill="url(#buildingLights)" opacity="0.3"/>
</g>
<!-- Jellyfish City 1 -->
<g id="jellyfishCity1" transform="translate(70, 120) scale(0.8)">
<ellipse cx="0" cy="0" rx="30" ry="25" fill="url(#jellyfishGradient1)" filter="url(#glow)"/>
<!-- Buildings on top -->
<g transform="translate(-15, -20)">
<rect x="0" y="0" width="6" height="15" fill="#5D3A8E" opacity="0.9"/>
<rect x="8" y="-5" width="4" height="20" fill="#7A4CB4" opacity="0.9"/>
<rect x="14" y="-2" width="8" height="17" fill="#5D3A8E" opacity="0.9"/>
<rect x="24" y="-7" width="5" height="22" fill="#7A4CB4" opacity="0.9"/>
<!-- Windows -->
<rect x="1" y="2" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="6" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="10" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="-3" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="1" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="5" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="9" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="16" y="0" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="16" y="4" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="16" y="8" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="16" y="12" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="25" y="-5" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="25" y="0" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="25" y="5" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="25" y="10" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
</g>
<!-- Tentacles -->
<path d="M-25,10 Q-30,30 -35,40 T-40,70" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M-15,20 Q-20,35 -15,50 T-20,80" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M-5,20 Q0,40 -5,60 T0,90" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M5,20 Q15,35 10,55 T20,85" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M15,15 Q25,30 30,45 T40,70" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M25,5 Q35,25 40,40 T45,65" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
</g>
<!-- Jellyfish City 2 -->
<g id="jellyfishCity2" transform="translate(190, 140) scale(0.7)">
<ellipse cx="0" cy="0" rx="25" ry="20" fill="url(#jellyfishGradient2)" filter="url(#glow)"/>
<!-- Buildings on top -->
<g transform="translate(-10, -15)">
<rect x="0" y="-5" width="4" height="20" fill="#C56DB6" opacity="0.9"/>
<rect x="6" y="0" width="8" height="15" fill="#A44A96" opacity="0.9"/>
<rect x="16" y="-8" width="5" height="23" fill="#C56DB6" opacity="0.9"/>
<!-- Windows -->
<rect x="1" y="-3" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="1" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="5" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="9" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="8" y="2" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="8" y="6" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="8" y="10" width="4" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="-6" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="-2" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="2" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="6" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="10" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
</g>
<!-- Tentacles -->
<path d="M-20,5 Q-25,25 -30,35 T-35,65" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M-10,15 Q-15,30 -10,45 T-15,75" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M0,15 Q5,35 0,55 T5,85" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M10,10 Q20,30 15,50 T25,80" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M20,0 Q30,20 35,35 T40,60" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
</g>
<!-- Jellyfish City 3 -->
<g id="jellyfishCity3" transform="translate(120, 180) scale(0.6)">
<ellipse cx="0" cy="0" rx="28" ry="22" fill="url(#jellyfishGradient3)" filter="url(#glow)"/>
<!-- Buildings on top -->
<g transform="translate(-12, -17)">
<rect x="0" y="0" width="5" height="17" fill="#4A8EC0" opacity="0.9"/>
<rect x="7" y="-3" width="7" height="20" fill="#3E77A5" opacity="0.9"/>
<rect x="16" y="-6" width="4" height="23" fill="#4A8EC0" opacity="0.9"/>
<rect x="22" y="0" width="6" height="17" fill="#3E77A5" opacity="0.9"/>
<!-- Windows -->
<rect x="1" y="2" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="6" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="10" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="1" y="14" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="-1" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="3" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="7" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="11" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="9" y="15" width="3" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="-4" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="0" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="4" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="8" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="17" y="12" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="24" y="2" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="24" y="6" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="24" y="10" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
<rect x="24" y="14" width="2" height="2" fill="#FFFDDB" opacity="0.9"/>
</g>
<!-- Tentacles -->
<path d="M-22,8 Q-27,28 -32,38 T-37,68" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M-12,18 Q-17,33 -12,48 T-17,78" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M-2,18 Q3,38 -2,58 T3,88" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M8,13 Q18,33 13,53 T23,83" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M18,3 Q28,23 33,38 T38,63" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
</g>
<!-- Small Flying Jellyfish 1 -->
<g transform="translate(40, 80) scale(0.3)">
<ellipse cx="0" cy="0" rx="25" ry="20" fill="url(#jellyfishGradient1)" filter="url(#glow)"/>
<path d="M-20,5 Q-25,25 -30,35 T-35,65" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M-10,15 Q-15,30 -10,45 T-15,75" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M0,15 Q5,35 0,55 T5,85" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M10,10 Q20,30 15,50 T25,80" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
<path d="M20,0 Q30,20 35,35 T40,60" fill="none" stroke="#D8C2FF" stroke-width="2" opacity="0.7"/>
</g>
<!-- Small Flying Jellyfish 2 -->
<g transform="translate(250, 90) scale(0.25)">
<ellipse cx="0" cy="0" rx="25" ry="20" fill="url(#jellyfishGradient2)" filter="url(#glow)"/>
<path d="M-20,5 Q-25,25 -30,35 T-35,65" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M-10,15 Q-15,30 -10,45 T-15,75" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M0,15 Q5,35 0,55 T5,85" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M10,10 Q20,30 15,50 T25,80" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
<path d="M20,0 Q30,20 35,35 T40,60" fill="none" stroke="#FFCBF2" stroke-width="2" opacity="0.7"/>
</g>
<!-- Small Flying Jellyfish 3 -->
<g transform="translate(200, 70) scale(0.2)">
<ellipse cx="0" cy="0" rx="28" ry="22" fill="url(#jellyfishGradient3)" filter="url(#glow)"/>
<path d="M-22,8 Q-27,28 -32,38 T-37,68" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M-12,18 Q-17,33 -12,48 T-17,78" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M-2,18 Q3,38 -2,58 T3,88" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M8,13 Q18,33 13,53 T23,83" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
<path d="M18,3 Q28,23 33,38 T38,63" fill="none" stroke="#B3E5FF" stroke-width="2" opacity="0.7"/>
</g>
<!-- Light beams from jellyfish cities -->
<path d="M70,110 L50,210" stroke="#D8C2FF" stroke-width="0.5" opacity="0.3"/>
<path d="M70,110 L70,210" stroke="#D8C2FF" stroke-width="0.5" opacity="0.3"/>
<path d="M70,110 L90,210" stroke="#D8C2FF" stroke-width="0.5" opacity="0.3"/>
<path d="M190,130 L170,210" stroke="#FFCBF2" stroke-width="0.5" opacity="0.3"/>
<path d="M190,130 L190,210" stroke="#FFCBF2" stroke-width="0.5" opacity="0.3"/>
<path d="M190,130 L210,210" stroke="#FFCBF2" stroke-width="0.5" opacity="0.3"/>
<path d="M120,170 L100,210" stroke="#B3E5FF" stroke-width="0.5" opacity="0.3"/>
<path d="M120,170 L120,210" stroke="#B3E5FF" stroke-width="0.5" opacity="0.3"/>
<path d="M120,170 L140,210" stroke="#B3E5FF" stroke-width="0.5" opacity="0.3"/>
<!-- Additional atmospheric elements -->
<circle cx="70" cy="110" r="3" fill="white" opacity="0.5" filter="url(#glow)"/>
<circle cx="190" cy="130" r="3" fill="white" opacity="0.5" filter="url(#glow)"/>
<circle cx="120" cy="170" r="3" fill="white" opacity="0.5" filter="url(#glow)"/>
<!-- Floating particles -->
<circle cx="50" cy="130" r="0.5" fill="white" opacity="0.7"/>
<circle cx="90" cy="150" r="0.5" fill="white" opacity="0.7"/>
<circle cx="150" cy="100" r="0.5" fill="white" opacity="0.7"/>
<circle cx="180" cy="160" r="0.5" fill="white" opacity="0.7"/>
<circle cx="210" cy="120" r="0.5" fill="white" opacity="0.7"/>
<circle cx="230" cy="170" r="0.5" fill="white" opacity="0.7"/>
<circle cx="60" cy="190" r="0.5" fill="white" opacity="0.7"/>
<circle cx="130" cy="140" r="0.5" fill="white" opacity="0.7"/>
<circle cx="170" cy="90" r="0.5" fill="white" opacity="0.7"/>
<circle cx="100" cy="110" r="0.5" fill="white" opacity="0.7"/>
</svg>
Judge's Analysis
Player 2's submission captures the idea of a 'flying jellyfish cityscape under a bright, shimmering aurora sky' with greater creativity and adherence to the prompt.
The jellyfish are visually integrated into the cityscape with detailed design and vibrant colors that reflect the aurora, enhancing the overall visual appeal.
In contrast, Player 1's image lacks complexity and depth, with minimal elements that do not fully convey the theme.
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"