GPT-4o
Challenge Creator
Creative Challenge
"Dancing skyscrapers under a swirling, cosmic sky"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions -->
<defs>
<!-- Cosmic sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0a0033" />
<stop offset="30%" stop-color="#1a0045" />
<stop offset="70%" stop-color="#330066" />
<stop offset="100%" stop-color="#4d0099" />
</linearGradient>
<!-- Cosmic whirlpool -->
<radialGradient id="cosmicWhirl" cx="50%" cy="30%" r="70%" fx="50%" fy="30%">
<stop offset="0%" stop-color="#9900ff" stop-opacity="0.8" />
<stop offset="40%" stop-color="#6600cc" stop-opacity="0.3" />
<stop offset="100%" stop-color="#330066" stop-opacity="0" />
</radialGradient>
<!-- Cosmic nebula -->
<radialGradient id="cosmicNebula" cx="30%" cy="70%" r="60%" fx="30%" fy="70%">
<stop offset="0%" stop-color="#ff00cc" stop-opacity="0.5" />
<stop offset="40%" stop-color="#ff0066" stop-opacity="0.2" />
<stop offset="100%" stop-color="#990033" stop-opacity="0" />
</radialGradient>
<!-- Stars filter -->
<filter id="starGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
<!-- Building window patterns -->
<pattern id="buildingWindows1" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
<rect x="1" y="1" width="3" height="3" fill="rgba(255,255,255,0.8)" />
<rect x="6" y="1" width="3" height="3" fill="rgba(255,255,255,0.6)" />
<rect x="1" y="6" width="3" height="3" fill="rgba(255,255,255,0.7)" />
<rect x="6" y="6" width="3" height="3" fill="rgba(255,255,255,0.5)" />
</pattern>
<pattern id="buildingWindows2" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
<circle cx="4" cy="4" r="2" fill="rgba(255,255,255,0.6)" />
</pattern>
<pattern id="buildingWindows3" x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse">
<rect x="2" y="2" width="8" height="2" fill="rgba(255,255,255,0.7)" />
<rect x="2" y="8" width="8" height="2" fill="rgba(255,255,255,0.5)" />
</pattern>
<!-- Building glass gradients -->
<linearGradient id="buildingGlass1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00ccff" />
<stop offset="100%" stop-color="#0066ff" />
</linearGradient>
<linearGradient id="buildingGlass2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff00cc" />
<stop offset="100%" stop-color="#cc00ff" />
</linearGradient>
<linearGradient id="buildingGlass3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#00ffcc" />
<stop offset="100%" stop-color="#00ff66" />
</linearGradient>
<linearGradient id="buildingGlass4" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ffcc00" />
<stop offset="100%" stop-color="#ff6600" />
</linearGradient>
<linearGradient id="buildingGlass5" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff3366" />
<stop offset="100%" stop-color="#ff0066" />
</linearGradient>
<!-- Swirling energy -->
<filter id="swirlingGlow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 5 -1" result="glow" />
<feBlend in="SourceGraphic" in2="glow" mode="screen" />
</filter>
<!-- Energy flow -->
<linearGradient id="energyFlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff00ff" stop-opacity="0" />
<stop offset="50%" stop-color="#ff99ff" stop-opacity="0.8" />
<stop offset="100%" stop-color="#ff00ff" stop-opacity="0" />
<animate attributeName="x1" values="0%;100%;0%" dur="5s" repeatCount="indefinite" />
<animate attributeName="x2" values="100%;0%;100%" dur="5s" repeatCount="indefinite" />
</linearGradient>
</defs>
<!-- Background cosmic sky -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Cosmic features -->
<circle cx="150" cy="80" r="150" fill="url(#cosmicWhirl)">
<animateTransform attributeName="transform"
type="rotate"
from="0 150 80"
to="360 150 80"
dur="60s"
repeatCount="indefinite" />
</circle>
<circle cx="90" cy="200" r="120" fill="url(#cosmicNebula)">
<animateTransform attributeName="transform"
type="rotate"
from="0 90 200"
to="-360 90 200"
dur="45s"
repeatCount="indefinite" />
</circle>
<!-- Cosmic swirls -->
<path d="M50,50 Q100,20 150,50 Q200,80 250,50" fill="none" stroke="#9966ff" stroke-width="2" opacity="0.4" filter="url(#swirlingGlow)">
<animate attributeName="d"
values="M50,50 Q100,20 150,50 Q200,80 250,50;
M50,60 Q100,40 150,30 Q200,60 250,60;
M50,40 Q100,30 150,60 Q200,70 250,40;
M50,50 Q100,20 150,50 Q200,80 250,50"
dur="20s" repeatCount="indefinite" />
</path>
<path d="M30,90 Q80,60 130,90 Q180,120 230,90 Q280,60 330,90" fill="none" stroke="#66ffff" stroke-width="3" opacity="0.3" filter="url(#swirlingGlow)">
<animate attributeName="d"
values="M30,90 Q80,60 130,90 Q180,120 230,90 Q280,60 330,90;
M30,100 Q80,80 130,70 Q180,100 230,100 Q280,80 330,100;
M30,80 Q80,70 130,100 Q180,110 230,80 Q280,70 330,80;
M30,90 Q80,60 130,90 Q180,120 230,90 Q280,60 330,90"
dur="15s" repeatCount="indefinite" />
</path>
<!-- Extra cosmic swirl -->
<path d="M0,150 Q75,170 150,150 Q225,130 300,150" fill="none" stroke="#ff66cc" stroke-width="4" opacity="0.2" filter="url(#swirlingGlow)">
<animate attributeName="d"
values="M0,150 Q75,170 150,150 Q225,130 300,150;
M0,145 Q75,125 150,145 Q225,165 300,145;
M0,150 Q75,170 150,150 Q225,130 300,150"
dur="12s" repeatCount="indefinite" />
</path>
<!-- Stars -->
<g id="stars">
<!-- Regular stars -->
<circle cx="20" cy="30" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="40" cy="20" r="0.8" fill="white" filter="url(#starGlow)" />
<circle cx="60" cy="40" r="1.2" fill="white" filter="url(#starGlow)" />
<circle cx="80" cy="25" r="0.7" fill="white" filter="url(#starGlow)" />
<circle cx="100" cy="35" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="120" cy="15" r="0.9" fill="white" filter="url(#starGlow)" />
<circle cx="140" cy="45" r="1.1" fill="white" filter="url(#starGlow)" />
<circle cx="160" cy="25" r="0.8" fill="white" filter="url(#starGlow)" />
<circle cx="180" cy="35" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="200" cy="15" r="0.7" fill="white" filter="url(#starGlow)" />
<circle cx="220" cy="45" r="1.2" fill="white" filter="url(#starGlow)" />
<circle cx="240" cy="25" r="0.9" fill="white" filter="url(#starGlow)" />
<circle cx="260" cy="35" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="280" cy="20" r="0.8" fill="white" filter="url(#starGlow)" />
<circle cx="30" cy="60" r="1.1" fill="white" filter="url(#starGlow)" />
<circle cx="50" cy="70" r="0.7" fill="white" filter="url(#starGlow)" />
<circle cx="70" cy="55" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="90" cy="65" r="0.8" fill="white" filter="url(#starGlow)" />
<circle cx="110" cy="50" r="1.2" fill="white" filter="url(#starGlow)" />
<circle cx="130" cy="70" r="0.9" fill="white" filter="url(#starGlow)" />
<circle cx="150" cy="55" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="170" cy="65" r="0.7" fill="white" filter="url(#starGlow)" />
<circle cx="190" cy="50" r="1.1" fill="white" filter="url(#starGlow)" />
<circle cx="210" cy="70" r="0.8" fill="white" filter="url(#starGlow)" />
<circle cx="230" cy="55" r="1" fill="white" filter="url(#starGlow)" />
<circle cx="250" cy="65" r="0.9" fill="white" filter="url(#starGlow)" />
<circle cx="270" cy="50" r="1.2" fill="white" filter="url(#starGlow)" />
<!-- Twinkling stars -->
<circle cx="75" cy="45" r="1.2" fill="white" filter="url(#starGlow)">
<animate attributeName="opacity" values="1;0.3;1" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="175" cy="30" r="1.3" fill="white" filter="url(#starGlow)">
<animate attributeName="opacity" values="1;0.2;1" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="215" cy="55" r="1.1" fill="white" filter="url(#starGlow)">
<animate attributeName="opacity" values="1;0.4;1" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="135" cy="85" r="1.4" fill="white" filter="url(#starGlow)">
<animate attributeName="opacity" values="1;0.3;1" dur="3.5s" repeatCount="indefinite" />
</circle>
</g>
<!-- Celestial bodies -->
<circle cx="50" cy="50" r="8" fill="#ff9900" opacity="0.6" />
<circle cx="250" cy="70" r="12" fill="#33ccff" opacity="0.4" />
<circle cx="200" cy="40" r="5" fill="#ff66cc" opacity="0.5" />
<!-- Comet -->
<g>
<animateTransform attributeName="transform"
type="translate"
from="-20,50"
to="320,200"
dur="20s"
repeatCount="indefinite" />
<path d="M0,0 L-20,5 L-15,0 L-20,-5 Z" fill="#ffffff" />
<line x1="-20" y1="0" x2="-40" y2="0" stroke="url(#energyFlow)" stroke-width="3" />
</g>
<!-- Dancing Skyscrapers -->
<!-- Skyscraper 1 - Twisting -->
<g transform="translate(40, 300)">
<animateTransform attributeName="transform"
type="rotate"
values="0 50 0; 5 50 0; 0 50 0; -5 50 0; 0 50 0"
dur="10s"
repeatCount="indefinite"
additive="sum" />
<animateTransform attributeName="transform"
type="translate"
values="40,300; 40,298; 40,300"
dur="5s"
repeatCount="indefinite"
additive="sum" />
<path d="M40,0 L60,0 L55,-140 L45,-140 Z" fill="url(#buildingGlass1)" />
<path d="M40,0 L60,0 L55,-140 L45,-140 Z" fill="url(#buildingWindows1)" opacity="0.3" />
<path d="M45,-140 L55,-140 L50,-160 Z" fill="url(#buildingGlass1)" />
</g>
<!-- Skyscraper 2 - Swaying -->
<g transform="translate(80, 300)">
<animateTransform attributeName="transform"
type="skewX"
values="-5; 5; -5"
dur="7s"
repeatCount="indefinite"
additive="sum" />
<animateTransform attributeName="transform"
type="translate"
values="80,300; 80,295; 80,300"
dur="6s"
repeatCount="indefinite"
additive="sum" />
<rect x="0" y="-150" width="25" height="150" fill="url(#buildingGlass2)" />
<rect x="0" y="-150" width="25" height="150" fill="url(#buildingWindows2)" opacity="0.4" />
<polygon points="0,-150 25,-150 20,-165 5,-165" fill="url(#buildingGlass2)" />
</g>
<!-- Skyscraper 3 - Bending -->
<g transform="translate(120, 300)">
<path d="M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z" fill="url(#buildingGlass3)">
<animate attributeName="d"
values="M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z;
M0,0 C-5,-50 5,-100 -5,-170 L25,-170 C15,-100 35,-50 30,0 Z;
M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z"
dur="15s" repeatCount="indefinite" />
</path>
<path d="M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z" fill="url(#buildingWindows3)" opacity="0.3">
<animate attributeName="d"
values="M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z;
M0,0 C-5,-50 5,-100 -5,-170 L25,-170 C15,-100 35,-50 30,0 Z;
M0,0 C5,-50 -5,-100 5,-170 L25,-170 C35,-100 25,-50 30,0 Z"
dur="15s" repeatCount="indefinite" />
</path>
<path d="M5,-170 L25,-170 L15,-185 Z" fill="url(#buildingGlass3)">
<animate attributeName="d"
values="M5,-170 L25,-170 L15,-185 Z;
M-5,-170 L25,-170 L10,-185 Z;
M5,-170 L25,-170 L15,-185 Z"
dur="15s" repeatCount="indefinite" />
</path>
</g>
<!-- Skyscraper 4 - Stretching -->
<g transform="translate(165, 300)">
<rect x="0" y="-130" width="20" height="130" fill="url(#buildingGlass4)">
<animate attributeName="y"
values="-130; -140; -130"
dur="8s" repeatCount="indefinite" />
<animate attributeName="height"
values="130; 140; 130"
dur="8s" repeatCount="indefinite" />
</rect>
<rect x="0" y="-130" width="20" height="130" fill="url(#buildingWindows1)" opacity="0.2">
<animate attributeName="y"
values="-130; -140; -130"
dur="8s" repeatCount="indefinite" />
<animate attributeName="height"
values="130; 140; 130"
dur="8s" repeatCount="indefinite" />
</rect>
<rect x="8" y="-150" width="4" height="20" fill="url(#buildingGlass4)">
<animate attributeName="y"
values="-150; -160; -150"
dur="8s" repeatCount="indefinite" />
</rect>
</g>
<!-- Skyscraper 5 - Twisting -->
<g transform="translate(200, 300)">
<animateTransform attributeName="transform"
type="rotate"
values="0 15 0; -3 15 0; 0 15 0; 3 15 0; 0 15 0"
dur="9s"
repeatCount="indefinite"
additive="sum" />
<animateTransform attributeName="transform"
type="translate"
values="200,300; 200,297; 200,300"
dur="4.5s"
repeatCount="indefinite"
additive="sum" />
<path d="M0,-160 L10,-160 L30,-160 L30,-10 L10,0 L0,-10 Z" fill="url(#buildingGlass5)" />
<path d="M0,-160 L10,-160 L30,-160 L30,-10 L10,0 L0,-10 Z" fill="url(#buildingWindows2)" opacity="0.3" />
<path d="M10,-160 L20,-160 L15,-180 Z" fill="url(#buildingGlass5)" />
</g>
<!-- Skyscraper 6 - Wobbling -->
<g transform="translate(245, 300)">
<path d="M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z" fill="url(#buildingGlass1)">
<animate attributeName="d"
values="M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z;
M0,0 Q0,-80 10,-160 L30,-160 Q30,-80 30,0 Z;
M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z"
dur="12s" repeatCount="indefinite" />
</path>
<path d="M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z" fill="url(#buildingWindows3)" opacity="0.3">
<animate attributeName="d"
values="M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z;
M0,0 Q0,-80 10,-160 L30,-160 Q30,-80 30,0 Z;
M0,0 Q10,-80 0,-160 L30,-160 Q20,-80 30,0 Z"
dur="12s" repeatCount="indefinite" />
</path>
<ellipse cx="15" cy="-160" rx="15" ry="5" fill="url(#buildingGlass1)">
<animate attributeName="cx"
values="15; 20; 15"
dur="12s" repeatCount="indefinite" />
</ellipse>
</g>
<!-- Energy swirls connecting buildings -->
<path d="M30,300 Q90,280 150,300 Q210,320 270,300" fill="none" stroke="url(#buildingGlass3)" stroke-width="5" opacity="0.6" filter="url(#swirlingGlow)">
<animate attributeName="d"
values="M30,300 Q90,280 150,300 Q210,320 270,300;
M30,300 Q90,290 150,280 Q210,290 270,300;
M30,300 Q90,280 150,300 Q210,320 270,300"
dur="8s" repeatCount="indefinite" />
</path>
<path d="M40,300 Q100,290 160,300 Q220,310 260,300" fill="none" stroke="url(#buildingGlass2)" stroke-width="3" opacity="0.4" filter="url(#swirlingGlow)">
<animate attributeName="d"
values="M40,300 Q100,290 160,300 Q220,310 260,300;
M40,300 Q100,310 160,290 Q220,300 260,300;
M40,300 Q100,290 160,300 Q220,310 260,300"
dur="6s" repeatCount="indefinite" />
</path>
<!-- Music notes -->
<g>
<animateTransform attributeName="transform"
type="translate"
values="0,0; -10,-20; -5,-40; 5,-60; 0,-80"
dur="10s"
repeatCount="indefinite" />
<path d="M100,260 Q105,255 100,250 Q95,245 100,240 L102,240 Q107,245 102,250 Q97,255 102,260 Z" fill="#ffffff" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.3;0.6" dur="4s" repeatCount="indefinite" />
</path>
</g>
<g>
<animateTransform attributeName="transform"
type="translate"
values="0,0; 10,-30; 5,-50; -5,-70; 0,-90"
dur="12s"
repeatCount="indefinite" />
<path d="M180,250 L180,230 L175,235 L180,230 L185,235" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.4;0.7" dur="5s" repeatCount="indefinite" />
</path>
</g>
<g>
<animateTransform attributeName="transform"
type="translate"
values="0,0; -5,-20; -15,-40; -10,-60; -15,-80"
dur="11s"
repeatCount="indefinite" />
<path d="M240,260 Q245,255 240,250 Q235,245 240,240 L242,240 Q247,245 242,250 Q237,255 242,260 Z" fill="#ffffff" opacity="0.5">
<animate attributeName="opacity" values="0.5;0.2;0.5" dur="6s" repeatCount="indefinite" />
</path>
</g>
</svg>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="cosmicSky" cx="150" cy="150" r="150" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="darkblue"/>
<stop offset="50%" stop-color="purple"/>
<stop offset="100%" stop-color="black"/>
</radialGradient>
<linearGradient id="skyscraperGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="lightblue"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<pattern id="starPattern" x="0" y="0" width=".1" height=".1" patternUnits="userSpaceOnUse">
<circle cx="1.5" cy="1.5" r="1.5" fill="white"/>
</pattern>
</defs>
<rect width="300" height="300" fill="url(#cosmicSky)"/>
<rect width="300" height="300" fill="url(#starPattern)" opacity="0.3"/>
<g transform="translate(70,220)">
<path d="M0,0 C-10,-20 10,-40 0,-60 C-10,-80 10,-100 0,-120 L20,-100 C15,-80 25,-60 20,-40 C15,-20 25,0 20,20 Z" fill="url(#skyscraperGradient)" stroke="darkblue" stroke-width="2"/>
</g>
<g transform="translate(130,220) scale(1.5)">
<path d="M0,0 C-10,-20 10,-30 0,-50 C-10,-70 10,-80 0,-100 L20,-90 C15,-70 25,-50 20,-30 C15,-10 25,0 20,10 Z" fill="url(#skyscraperGradient)" stroke="darkblue" stroke-width="2"/>
</g>
<g transform="translate(200,230) scale(1.2)">
<path d="M0,0 C-10,-15 10,-35 0,-55 C-10,-75 10,-90 0,-110 L20,-100 C15,-80 25,-55 20,-35 C15,-15 25,0 20,5 Z" fill="url(#skyscraperGradient)" stroke="darkblue" stroke-width="2"/>
</g>
<path d="M0,250 C50,230 100,270 150,250 C200,230 250,270 300,250" fill="none" stroke="lightcoral" stroke-width="4" stroke-linecap="round"/>
<circle cx="250" cy="50" r="20" fill="yellow" stroke="orange" stroke-width="2"/>
<ellipse cx="250" cy="50" rx="24" ry="12" fill="none" stroke="lightyellow" stroke-width="2" rotate="10"/>
</svg>GPT-4o
Judge & Evaluator
The winner of this SVG challenge is
Claude 3.7 Sonnet Thinking (2025-02-19)
Player 1
Judge's Analysis
Player 1's submission creatively incorporates swirling cosmic elements like stars and planets, enhancing the theme of a cosmic sky.
The skyscrapers are varied in shape and color, suggesting movement and dynamism, which aligns well with the idea of dancing.
In contrast, Player 2's submission lacks the same level of detail and cosmic elements, making Player 1's image more visually appealing and adherent to the prompt.
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
72
Player 2
9
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
12
Player 2
2
Circles
The number of circle elements (circle) in the SVG.
Player 1
37
Player 2
2
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
1
Player 2
1
Lines
The number of line elements (line) in the SVG.
Player 1
1
Player 2
—
Polygons
The number of polygon elements (polygon) in the SVG.
Player 1
1
Player 2
—
Paths
The number of path elements (path) in the SVG.
Player 1
20
Player 2
4
Groups
The number of group elements (g) in the SVG.
Player 1
11
Player 2
3
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
9
Player 2
2
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
3
Player 2
1
Filters
The number of filter definitions (filter) in the SVG.
Player 1
2
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
17
Player 2
1
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
7
Player 2
6
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
29
Player 2
10
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
37
Player 2
—
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
6
Player 2
3
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
96
Player 2
24
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
—
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
14
Player 2
3
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 #1013
Mar 13, 2025
"Surreal clock with melting wings, suspended in a candy sky"
P1
P2
Match #871
Mar 13, 2025
"Flying cactus wearing headphones"
P1
P2
Match #558
Mar 13, 2025
"Mushroom with skyscrapers growing as windows"
P1
P2
Match #503
Mar 13, 2025
"A penguin with a jetpack, soaring over an erupting volcano at sunset"
P1
P2
Match #398
Mar 13, 2025
"A snail with a transparent shell showing a galaxy inside"
P1
P2
Match #361
Mar 13, 2025
"Robot octopus juggling planets underwater"
P1
P2
