GPT-4o
Challenge Creator
Creative Challenge
"Flying fish leaping over a crescent moon at sunset."
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1c0c34; stop-opacity:1" /> <!-- Deep Indigo -->
<stop offset="30%" style="stop-color:#4b0082; stop-opacity:1" /> <!-- Indigo -->
<stop offset="55%" style="stop-color:#ff4500; stop-opacity:1" /> <!-- OrangeRed -->
<stop offset="80%" style="stop-color:#ffa500; stop-opacity:1" /> <!-- Orange -->
<stop offset="100%" style="stop-color:#ffe787; stop-opacity:1" /> <!-- Pale Gold -->
</linearGradient>
<!-- Glow Filter -->
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<!-- Fish Body Gradient -->
<linearGradient id="fishBodyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#c0e0ff; stop-opacity:1" /> <!-- Light Sky Blue -->
<stop offset="50%" style="stop-color:#e0f0ff; stop-opacity:1" /> <!-- Very Light Blue/Silverish -->
<stop offset="100%" style="stop-color:#ffd4a8; stop-opacity:0.9" /> <!-- Peach/Sunset Reflection -->
</linearGradient>
<!-- Fish Fin Gradient -->
<radialGradient id="fishFinGradient" cx="50%" cy="50%" r="70%">
<stop offset="0%" style="stop-color:#b0f0ff; stop-opacity:0.75" /> <!-- Bright Pale Turquoise -->
<stop offset="60%" style="stop-color:#c0e8ff; stop-opacity:0.55" /> <!-- Light Blue -->
<stop offset="100%" style="stop-color:#ffffff; stop-opacity:0.35" /> <!-- Transparent White -->
</radialGradient>
</defs>
<!-- Background -->
<rect width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars -->
<circle cx="50" cy="30" r="1.5" fill="#fffde4" opacity="0.9"><animate attributeName="opacity" values="0.9;0.5;0.9" dur="4s" repeatCount="indefinite" /></circle>
<circle cx="120" cy="50" r="1" fill="#fffde4" opacity="0.8"><animate attributeName="opacity" values="0.8;0.4;0.8" dur="3s" begin="0.5s" repeatCount="indefinite" /></circle>
<circle cx="200" cy="25" r="1.2" fill="#fffde4" opacity="0.9"><animate attributeName="opacity" values="0.9;0.6;0.9" dur="5s" begin="0.2s" repeatCount="indefinite" /></circle>
<circle cx="250" cy="60" r="1" fill="#fffde4" opacity="0.7"><animate attributeName="opacity" values="0.7;0.3;0.7" dur="3.5s" begin="1s" repeatCount="indefinite" /></circle>
<circle cx="80" cy="80" r="0.8" fill="#fffde4" opacity="0.8"><animate attributeName="opacity" values="0.8;0.5;0.8" dur="4.2s" begin="0.8s" repeatCount="indefinite" /></circle>
<circle cx="150" cy="90" r="1.3" fill="#fffde4" opacity="0.9"><animate attributeName="opacity" values="0.9;0.4;0.9" dur="3.8s" begin="1.2s" repeatCount="indefinite" /></circle>
<circle cx="280" cy="40" r="1.1" fill="#fffde4" opacity="0.85"><animate attributeName="opacity" values="0.85;0.55;0.85" dur="4.5s" begin="0.3s" repeatCount="indefinite" /></circle>
<!-- Shooting stars -->
<g>
<path d="M 30 70 L 45 65" stroke="#fffde4" stroke-width="1" opacity="0">
<animate attributeName="opacity" values="0;0.7;0" dur="3s" begin="1.5s" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="translate" values="0 0; 20 -5" dur="1.5s" begin="1.5s" repeatCount="indefinite" />
</path>
</g>
<g>
<path d="M 220 80 L 240 70" stroke="#fffde4" stroke-width="1.2" opacity="0">
<animate attributeName="opacity" values="0;0.8;0" dur="2.5s" begin="3s" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="translate" values="0 0; 25 -8" dur="1.25s" begin="3s" repeatCount="indefinite"/>
</path>
</g>
<!-- Moon -->
<g id="moonAndCraters">
<title>Crescent Moon</title>
<path d="M200,230 A70,70 0 0,0 200,150 A55,55 0 0,1 200,230 Z"
fill="#fffacd"
filter="url(#glow)"/>
<!-- Moon Craters -->
<circle cx="205" cy="180" r="5" fill="#e0dac4" opacity="0.6"/>
<circle cx="195" cy="200" r="8" fill="#d8d0b0" opacity="0.5"/>
<circle cx="210" cy="215" r="4" fill="#e0dac4" opacity="0.6"/>
</g>
<!-- Water/Sea -->
<g id="sea">
<title>Sea Waves</title>
<path d="M0,250 Q30,240 60,255 T120,250 Q150,245 180,255 T240,250 Q270,240 300,255 L300,300 L0,300 Z"
fill="#2a2a7c" opacity="0.75"/>
<path d="M0,260 Q40,250 80,265 T160,260 Q200,255 240,265 T300,260 L300,300 L0,300 Z"
fill="#3a3a8c" opacity="0.65"/>
<!-- Sunset reflection on water -->
<path fill="url(#skyGradient)" opacity="0.25" style="mix-blend-mode: screen;" transform="translate(0,5)">
<animate attributeName="d"
values="M-10,255 Q20,248 50,258 T110,253 Q140,248 170,258 T230,253 Q260,248 290,258 L310,258 L310,273 L-10,273 Z;
M-10,257 Q25,250 55,260 T115,255 Q145,250 175,260 T235,255 Q265,250 295,260 L310,260 L310,275 L-10,275 Z;
M-10,255 Q20,248 50,258 T110,253 Q140,248 170,258 T230,253 Q260,248 290,258 L310,258 L310,273 L-10,273 Z"
dur="6s" repeatCount="indefinite" />
</path>
</g>
<!-- Flying Fish -->
<g id="fish1" transform="translate(130, 100) rotate(-25)">
<title>Flying Fish 1</title>
<path d="M0,0 C20,-15 50,-15 70,0 C60,10 30,12 0,0 Z" fill="url(#fishBodyGradient)" stroke="#506B7B" stroke-width="0.5"/>
<path d="M15,-2 C30,-30 65,-25 50,10 C40,5 25,0 15,-2 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" transform="rotate(-10)" />
<path d="M18,-1 C33,-28 68,-23 53,12 C43,7 28,2 18,-1 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" opacity="0.8" transform="translate(2,1) rotate(-5)" />
<path d="M70,0 C75,-5 85,-3 80,5 L70,0 M70,0 C75,5 85,3 80,-5 L70,0" fill="#77BDF0" stroke="#506B7B" stroke-width="0.5" opacity="0.9"/>
<circle cx="10" cy="-2" r="2" fill="#1c1c1c"/>
<circle cx="10.5" cy="-2.5" r="0.5" fill="white" opacity="0.7"/>
<circle cx="-10" cy="10" r="1.5" fill="#add8e6" opacity="0.7"><animateTransform attributeName="transform" type="translate" values="0 0; -5 2; 0 0" dur="1.5s" repeatCount="indefinite" /></circle>
<ellipse cx="-15" cy="15" rx="1" ry="2" fill="#add8e6" opacity="0.6" transform="rotate(20 -15 15)"><animateTransform attributeName="transform" type="translate" values="0 0; -6 3; 0 0" dur="1.8s" repeatCount="indefinite" /></ellipse>
</g>
<g id="fish2" transform="translate(80, 150) rotate(-35) scale(0.85)">
<title>Flying Fish 2</title>
<path d="M0,0 C20,-15 50,-15 70,0 C60,10 30,12 0,0 Z" fill="url(#fishBodyGradient)" stroke="#506B7B" stroke-width="0.5"/>
<path d="M15,-2 C30,-30 65,-25 50,10 C40,5 25,0 15,-2 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" transform="rotate(-15)" />
<path d="M18,-1 C33,-28 68,-23 53,12 C43,7 28,2 18,-1 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" opacity="0.8" transform="translate(2,1) rotate(-10)" />
<path d="M70,0 C75,-5 85,-3 80,5 L70,0 M70,0 C75,5 85,3 80,-5 L70,0" fill="#77BDF0" stroke="#506B7B" stroke-width="0.5" opacity="0.9"/>
<circle cx="10" cy="-2" r="2" fill="#1c1c1c"/>
<circle cx="10.5" cy="-2.5" r="0.5" fill="white" opacity="0.7"/>
<circle cx="-12" cy="12" r="1.2" fill="#add8e6" opacity="0.7"><animateTransform attributeName="transform" type="translate" values="0 0; -4 2; 0 0" dur="1.35s" repeatCount="indefinite" /></circle>
<ellipse cx="-18" cy="17" rx="0.8" ry="1.5" fill="#add8e6" opacity="0.6" transform="rotate(25 -18 17)"><animateTransform attributeName="transform" type="translate" values="0 0; -5 3; 0 0" dur="1.65s" repeatCount="indefinite" /></ellipse>
</g>
<g id="fish3" transform="translate(40, 200) rotate(-45) scale(0.7)">
<title>Flying Fish 3</title>
<path d="M0,0 C20,-15 50,-15 70,0 C60,10 30,12 0,0 Z" fill="url(#fishBodyGradient)" stroke="#506B7B" stroke-width="0.5"/>
<path d="M15,-2 C30,-30 65,-25 50,10 C40,5 25,0 15,-2 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" transform="rotate(-20)" />
<path d="M18,-1 C33,-28 68,-23 53,12 C43,7 28,2 18,-1 Z" fill="url(#fishFinGradient)" stroke="#677889" stroke-width="0.3" opacity="0.8" transform="translate(2,1) rotate(-15)" />
<path d="M70,0 C75,-5 85,-3 80,5 L70,0 M70,0 C75,5 85,3 80,-5 L70,0" fill="#77BDF0" stroke="#506B7B" stroke-width="0.5" opacity="0.9"/>
<circle cx="10" cy="-2" r="2" fill="#1c1c1c"/>
<circle cx="10.5" cy="-2.5" r="0.5" fill="white" opacity="0.7"/>
<g transform="translate(0,5)"> <!-- Group for splash elements for consistent animation origin -->
<path d="M -5,5 Q 0, -10 5,5 T 15,5 Q 10,0 5,5 Z" fill="#add8e6" opacity="0.5">
<animateTransform attributeName="transform" type="scale" values="1 1; 1.2 0.8; 1 1" dur="0.8s" repeatCount="indefinite" additive="sum" />
</path>
<circle cx="-5" cy="8" r="2" fill="#add8e6" opacity="0.6"><animateTransform attributeName="transform" type="translate" values="0 0; -3 1.5; 0 0" dur="1.2s" repeatCount="indefinite" /></circle>
<circle cx="0" cy="10" r="1.5" fill="#add8e6" opacity="0.7"><animateTransform attributeName="transform" type="translate" values="0 0; -4 2; 0 0" dur="1.5s" repeatCount="indefinite" /></circle>
</g>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for gradients, patterns, etc. -->
<defs>
<!-- Sunset Sky Gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0a001a" />
<stop offset="30%" stop-color="#4a0069" />
<stop offset="60%" stop-color="#ff5e62" />
<stop offset="85%" stop-color="#ffa361" />
</linearGradient>
<!-- Water Gradient -->
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0e4a7b" />
<stop offset="100%" stop-color="#062b49" />
</linearGradient>
<!-- Moon Gradient -->
<linearGradient id="moonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fffef9" />
<stop offset="100%" stop-color="#ffe27a" />
</linearGradient>
<!-- Fish Body Gradient -->
<linearGradient id="fishBodyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#3498db" />
<stop offset="100%" stop-color="#1e5799" />
</linearGradient>
<!-- Fish Fin Gradient -->
<linearGradient id="fishFinGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2ecc71" />
<stop offset="100%" stop-color="#3498db" />
</linearGradient>
<!-- Water Splash Pattern -->
<radialGradient id="splashGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.8" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<!-- Water Droplet -->
<radialGradient id="dropletGradient" cx="30%" cy="30%" r="70%" fx="30%" fy="30%">
<stop offset="0%" stop-color="white" stop-opacity="0.9" />
<stop offset="100%" stop-color="#a0e6ff" stop-opacity="0.6" />
</radialGradient>
<!-- Star Glow -->
<radialGradient id="starGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<!-- Moon Glow -->
<radialGradient id="moonGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="0.3" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<!-- Fish Scales Pattern -->
<pattern id="fishScales" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<path d="M 0 5 C 2 2, 8 2, 10 5 C 8 8, 2 8, 0 5 Z" fill="#2980b9" fill-opacity="0.3" />
</pattern>
</defs>
<!-- Background Sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Stars in the sky -->
<g id="stars">
<circle cx="30" cy="30" r="1" fill="white" />
<circle cx="60" cy="20" r="1.5" fill="white" />
<circle cx="90" cy="40" r="1" fill="white" />
<circle cx="120" cy="25" r="1.2" fill="white" />
<circle cx="150" cy="15" r="1" fill="white" />
<circle cx="180" cy="30" r="1.3" fill="white" />
<circle cx="210" cy="20" r="1" fill="white" />
<circle cx="240" cy="35" r="1.5" fill="white" />
<circle cx="270" cy="25" r="1" fill="white" />
<!-- Larger glowing stars -->
<g>
<circle cx="50" cy="50" r="1.8" fill="white" />
<circle cx="50" cy="50" r="3" fill="url(#starGlow)" />
</g>
<g>
<circle cx="230" cy="40" r="1.8" fill="white" />
<circle cx="230" cy="40" r="3" fill="url(#starGlow)" />
</g>
<g>
<circle cx="190" cy="55" r="1.8" fill="white" />
<circle cx="190" cy="55" r="3" fill="url(#starGlow)" />
</g>
</g>
<!-- Crescent Moon -->
<g id="moon">
<!-- Moon glow -->
<circle cx="150" cy="80" r="40" fill="url(#moonGlow)" />
<!-- Crescent shape -->
<g transform="translate(150, 80) rotate(-20)">
<!-- Full moon circle -->
<circle cx="0" cy="0" r="25" fill="url(#moonGradient)" />
<!-- Overlapping circle to create crescent -->
<circle cx="15" cy="-5" r="22" fill="#0a001a" />
</g>
</g>
<!-- Water Surface -->
<path d="M 0,220 C 30,215 60,225 90,220 C 120,215 150,225 180,220 C 210,215 240,225 270,220 L 300,220 L 300,300 L 0,300 Z" fill="url(#waterGradient)" />
<!-- Water Surface Highlights -->
<path d="M 0,220 C 30,215 60,225 90,220 C 120,215 150,225 180,220 C 210,215 240,225 270,220 L 300,220"
fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.3" />
<!-- Small Surface Ripples -->
<path d="M 50,223 C 55,222 60,224 65,223" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M 150,223 C 155,222 160,224 165,223" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.5" />
<path d="M 250,223 C 255,222 260,224 265,223" fill="none" stroke="white" stroke-width="0.5" stroke-opacity="0.5" />
<!-- Water Splash at the base -->
<g id="splash" transform="translate(40, 220)">
<circle cx="0" cy="0" r="15" fill="url(#splashGradient)" />
<path d="M -10,-5 C -5,-15 5,-15 10,-5" fill="none" stroke="white" stroke-width="1" stroke-opacity="0.7" />
<path d="M -15,0 C -10,-8 -5,-8 0,0" fill="none" stroke="white" stroke-width="0.7" stroke-opacity="0.7" />
<path d="M 0,0 C 5,-8 10,-8 15,0" fill="none" stroke="white" stroke-width="0.7" stroke-opacity="0.7" />
</g>
<!-- Water Droplets -->
<g id="droplets">
<circle cx="50" cy="190" r="2" fill="url(#dropletGradient)" />
<circle cx="60" cy="170" r="1.5" fill="url(#dropletGradient)" />
<circle cx="45" cy="160" r="1" fill="url(#dropletGradient)" />
<circle cx="70" cy="150" r="2" fill="url(#dropletGradient)" />
<circle cx="55" cy="130" r="1" fill="url(#dropletGradient)" />
</g>
<!-- Additional smaller flying fish in the background -->
<g id="smallFish1" transform="translate(200, 170) rotate(-30) scale(0.4)">
<!-- Fish Body -->
<path d="M 0,0 C 30,-15 60,-15 90,0 L 100,5 C 110,10 120,10 130,5 L 140,0
C 120,10 100,15 80,10 C 50,5 30,5 0,0 Z"
fill="#5dade2" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Top Fin -->
<path d="M 60,-2 C 65,-20 75,-25 85,-15 C 75,-10 65,-5 60,-2 Z"
fill="#48c9b0" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Bottom Fin -->
<path d="M 70,10 C 75,25 85,30 95,20 C 85,15 75,15 70,10 Z"
fill="#48c9b0" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Tail Fin -->
<path d="M 130,5 C 140,15 150,15 160,5 C 150,-5 140,-5 130,5 Z"
fill="#48c9b0" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Fish Eye -->
<circle cx="20" cy="-5" r="4" fill="white" />
<circle cx="21" cy="-4" r="2" fill="black" />
</g>
<g id="smallFish2" transform="translate(240, 150) rotate(-15) scale(0.3)">
<!-- Fish Body -->
<path d="M 0,0 C 30,-15 60,-15 90,0 L 100,5 C 110,10 120,10 130,5 L 140,0
C 120,10 100,15 80,10 C 50,5 30,5 0,0 Z"
fill="#3498db" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Top Fin -->
<path d="M 60,-2 C 65,-20 75,-25 85,-15 C 75,-10 65,-5 60,-2 Z"
fill="#2ecc71" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Bottom Fin -->
<path d="M 70,10 C 75,25 85,30 95,20 C 85,15 75,15 70,10 Z"
fill="#2ecc71" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Tail Fin -->
<path d="M 130,5 C 140,15 150,15 160,5 C 150,-5 140,-5 130,5 Z"
fill="#2ecc71" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Fish Eye -->
<circle cx="20" cy="-5" r="4" fill="white" />
<circle cx="21" cy="-4" r="2" fill="black" />
</g>
<!-- Trail of motion behind the flying fish -->
<path d="M 50,215 C 70,190 100,165 130,140" fill="none" stroke="white" stroke-width="0.5" stroke-dasharray="2 3" stroke-opacity="0.6" />
<!-- Main Flying Fish arcing over the moon -->
<g id="flyingFish" transform="translate(140, 120) rotate(-35) scale(0.9)">
<!-- Fish Body -->
<path d="M 0,0 C 30,-15 60,-15 90,0 L 100,5 C 110,10 120,10 130,5 L 140,0
C 120,10 100,15 80,10 C 50,5 30,5 0,0 Z"
fill="url(#fishBodyGradient)" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Fish Scales -->
<path d="M 0,0 C 30,-15 60,-15 90,0 L 100,5 C 110,10 120,10 130,5 L 140,0
C 120,10 100,15 80,10 C 50,5 30,5 0,0 Z"
fill="url(#fishScales)" fill-opacity="0.7" />
<!-- Top Fin -->
<path d="M 60,-2 C 65,-20 75,-25 85,-15 C 75,-10 65,-5 60,-2 Z"
fill="url(#fishFinGradient)" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Bottom Fin -->
<path d="M 70,10 C 75,25 85,30 95,20 C 85,15 75,15 70,10 Z"
fill="url(#fishFinGradient)" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Tail Fin -->
<path d="M 130,5 C 140,15 150,15 160,5 C 150,-5 140,-5 130,5 Z"
fill="url(#fishFinGradient)" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Fish Eye -->
<circle cx="20" cy="-5" r="4" fill="white" />
<circle cx="21" cy="-4" r="2" fill="black" />
<circle cx="20" cy="-6" r="1" fill="white" />
<!-- Side Fins (Flying Wings) -->
<path d="M 50,0 C 45,20 60,40 80,30 C 70,20 60,10 50,0 Z"
fill="url(#fishFinGradient)" fill-opacity="0.8" stroke="#0e4a7b" stroke-width="0.5" />
<path d="M 60,0 C 55,-20 70,-40 90,-30 C 80,-20 70,-10 60,0 Z"
fill="url(#fishFinGradient)" fill-opacity="0.8" stroke="#0e4a7b" stroke-width="0.5" />
<!-- Gill Detail -->
<path d="M 30,-5 C 35,-2 35,2 30,5" fill="none" stroke="#0e4a7b" stroke-width="1" />
</g>
<!-- Reflection of moonlight on water -->
<path d="M 120,220 C 130,222 140,221 150,220 C 160,219 170,221 180,220"
fill="none" stroke="white" stroke-width="1" stroke-opacity="0.4" />
<path d="M 130,225 C 140,227 150,226 160,225 C 170,224 180,226 190,225"
fill="none" stroke="white" stroke-width="0.7" stroke-opacity="0.2" />
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 2
Judge's Analysis
Player 2's submission showcases greater creativity with a detailed and stylized design of the flying fish and a crescent moon partially eclipsed, adding depth and visual interest.
The technical execution is superior, with smoother gradients and more dynamic composition.
While Player 1 adheres to the prompt, its simpler design lacks the same level of refinement and impact as Player 2's work.
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
Total Shapes
The total number of shape elements (rect, circle, ellipse, line, polygon, polyline, path) in the SVG.
Player 1
42
Player 2
60
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
1
Player 2
1
Circles
The number of circle elements (circle) in the SVG.
Player 1
20
Player 2
31
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
2
Player 2
—
Lines
The number of line elements (line) in the SVG.
Player 1
—
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
—
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
19
Player 2
28
Groups
The number of group elements (g) in the SVG.
Player 1
8
Player 2
11
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
3
Player 2
9
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
—
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
1
Player 2
—
Masks
The number of mask definitions (mask) in the SVG.
Player 1
—
Player 2
—
Clip Paths
The number of clipping path definitions (clipPath) in the SVG.
Player 1
—
Player 2
—
Elements with Opacity
The number of elements with opacity attributes in the SVG.
Player 1
31
Player 2
—
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
14
Player 2
25
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
12
Player 2
17
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
19
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
13
Player 2
5
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
84
Player 2
115
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
4
Player 2
10
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
—
Text Metrics
Text Elements
The number of text elements (text) in the SVG.
Player 1
—
Player 2
—
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
Match #2724
May 09, 2025
"Whimsical treehouse atop a giant snail in a glowing mushroom forest."
P1
P2
Match #2635
May 09, 2025
"A cactus wearing a bowtie in the middle of a snowy desert."
P1
P2
Match #2555
May 09, 2025
"A single tree on a tiny floating island under a surreal, colorful nebula-filled sky."
P1
P2
Match #2446
May 09, 2025
"Two robots playing chess under a giant mushroom in the rain."
P1
P2
