Creative Challenge
"Whale surfing atop a giant wave made of musical notes"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="oceanGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,120,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,70,180);stop-opacity:1" />
</linearGradient>
<linearGradient id="whaleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(70,130,180);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(30,90,150);stop-opacity:1" />
</linearGradient>
<pattern id="musicalNotes" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<text x="0" y="15" font-family="Arial" font-size="20" fill="white">♪</text>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#oceanGradient)" />
<path d="M10,200 C40,190 75,150 120,180 C160,210 200,170 240,200 Q260,210 290,180"
fill="none" stroke="url(#musicalNotes)" stroke-width="4" />
<g transform="translate(100,60)">
<path d="M30,130 Q50,100 70,130 Q60,110 50,130 Z" fill="url(#whaleGradient)" />
<ellipse cx="56" cy="125" rx="5" ry="3" fill="white" />
<ellipse cx="52" cy="123" rx="2" ry="1.2" fill="black" />
<path d="M50,130 C45,140 55,140 50,150" fill="none" stroke="white" stroke-width="2" />
<line x1="50" y1="130" x2="50" y2="134" stroke="white" stroke-width="1" />
</g>
<g transform="translate(120,10)">
<path d="M30,130 C10,100 0,150 30,100 C50,120 40,100 60,130 Z" fill="url(#whaleGradient)" />
<ellipse cx="46" cy="125" rx="5" ry="3" fill="white" />
<ellipse cx="42" cy="123" rx="2" ry="1.2" fill="black" />
<path d="M40,130 C35,140 45,140 40,150" fill="none" stroke="white" stroke-width="2" />
<line x1="40" y1="130" x2="40" y2="134" stroke="white" stroke-width="1" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1a237e" />
<stop offset="100%" stop-color="#4fc3f7" />
</linearGradient>
<linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#1a237e" />
<stop offset="50%" stop-color="#4dabf5" />
<stop offset="100%" stop-color="#81d4fa" />
</linearGradient>
<linearGradient id="whaleGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#263238" />
<stop offset="70%" stop-color="#455a64" />
<stop offset="100%" stop-color="#607d8b" />
</linearGradient>
<filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.4" />
</feComponentTransfer>
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="5" result="blur" />
<feComposite in="SourceGraphic" in2="blur" operator="over" />
</filter>
</defs>
<!-- Background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Sun -->
<circle cx="250" cy="40" r="20" fill="#ffeb3b" filter="url(#glow)" />
<!-- Wave Base -->
<path d="M-20,200 C30,180 40,220 90,190 C130,160 190,180 250,160 C310,140 340,180 380,170 L380,300 L-20,300 Z" fill="url(#waveGradient)" />
<!-- Musical Notes in Wave -->
<g fill="#fff" opacity="0.8">
<!-- Eighth Notes -->
<path d="M50,200 L50,170 C50,165 55,160 60,165 L60,195 C60,200 50,205 50,200 Z" />
<path d="M100,180 L100,150 C100,145 105,140 110,145 L110,175 C110,180 100,185 100,180 Z" />
<path d="M150,170 L150,140 C150,135 155,130 160,135 L160,165 C160,170 150,175 150,170 Z" />
<path d="M200,190 L200,160 C200,155 205,150 210,155 L210,185 C210,190 200,195 200,190 Z" />
<path d="M240,180 L240,150 C240,145 245,140 250,145 L250,175 C250,180 240,185 240,180 Z" />
<!-- Quarter Notes -->
<path d="M80,190 L80,150 M80,150 C85,145 95,150 90,160" stroke="#fff" stroke-width="2" fill="none" />
<path d="M180,180 L180,140 M180,140 C185,135 195,140 190,150" stroke="#fff" stroke-width="2" fill="none" />
<path d="M220,175 L220,135 M220,135 C225,130 235,135 230,145" stroke="#fff" stroke-width="2" fill="none" />
<!-- Music Symbols -->
<path d="M70,220 C75,215 85,225 75,230 C65,235 65,225 70,220 Z" />
<path d="M120,210 C125,205 135,215 125,220 C115,225 115,215 120,210 Z" />
<path d="M170,220 C175,215 185,225 175,230 C165,235 165,225 170,220 Z" />
<text x="145" y="200" font-family="Arial" font-size="20" fill="#fff">♪</text>
<text x="195" y="210" font-family="Arial" font-size="20" fill="#fff">♫</text>
<text x="95" y="205" font-family="Arial" font-size="20" fill="#fff">♩</text>
</g>
<!-- Whale -->
<g transform="translate(120, 150) rotate(-15)">
<!-- Whale Body -->
<path d="M0,0 C20,-10 50,-15 70,-10 C90,-5 110,10 120,0 C130,-10 140,-5 140,0 C140,5 130,20 120,30 C110,40 90,50 70,45 C50,40 20,20 0,0 Z" fill="url(#whaleGradient)" filter="url(#dropShadow)" />
<!-- Whale Eye -->
<circle cx="35" cy="10" r="5" fill="#fff" />
<circle cx="37" cy="9" r="2" fill="#000" />
<!-- Whale Fin -->
<path d="M80,0 C90,-20 100,-25 110,-15 C105,-5 95,0 80,0 Z" fill="url(#whaleGradient)" />
<!-- Whale Tail -->
<path d="M140,0 C150,-10 160,-30 170,-20 C180,-10 170,0 160,0 C170,10 180,30 170,40 C160,30 150,10 140,0 Z" fill="url(#whaleGradient)" />
<!-- Water Splash -->
<path d="M40,30 C50,40 60,50 70,40 C80,30 90,40 100,35" stroke="#81d4fa" stroke-width="3" fill="none" stroke-linecap="round" />
<path d="M20,20 C30,30 40,40 50,30" stroke="#81d4fa" stroke-width="2" fill="none" stroke-linecap="round" />
</g>
<!-- Splash Elements -->
<g fill="#fff" opacity="0.8">
<circle cx="90" cy="170" r="3" />
<circle cx="110" cy="185" r="4" />
<circle cx="150" cy="190" r="5" />
<circle cx="175" cy="180" r="3" />
<circle cx="200" cy="175" r="4" />
<circle cx="215" cy="190" r="2" />
</g>
<!-- Sparkles -->
<g fill="#ffeb3b" filter="url(#glow)">
<circle cx="100" cy="160" r="1" />
<circle cx="130" cy="140" r="1.5" />
<circle cx="165" cy="155" r="1" />
<circle cx="190" cy="145" r="2" />
<circle cx="220" cy="160" r="1" />
</g>
</svg>Judge's Analysis
Player 2's image more effectively captures the whimsical concept of a whale surfing atop a wave made of musical notes.
The composition is vibrant, and the use of musical notes is visually integrated into the wave, enhancing the theme.
The technical quality and overall visual appeal of Player 2's submission outshine Player 1's more simplistic and less thematic execution.
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
"Cactus wearing sunglasses and a sombrero in a desert sunset"
"A tree with roots as legs dancing in a grassy meadow"
"Astronaut disco dancing with a robot on the moon"
"An ice cream cone floating in space with rings like Saturn"
"An octopus playing a grand piano in a moonlit ocean concert"
"Surreal fruit sailing a sea of chocolate milk under a checkerboard sky"
