GPT-4o
Challenge Creator
Creative Challenge
"A steam-powered umbrella floating in a whimsical, cloudy sky"
<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="#79c0ff" />
<stop offset="100%" stop-color="#def0ff" />
</linearGradient>
<radialGradient id="umbrellaGradient" cx="50%" cy="50%" r="60%" fx="40%" fy="40%">
<stop offset="0%" stop-color="#f85c5c" />
<stop offset="100%" stop-color="#8c2e2e" />
</radialGradient>
<linearGradient id="handleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#916235" />
<stop offset="50%" stop-color="#c29062" />
<stop offset="100%" stop-color="#916235" />
</linearGradient>
<linearGradient id="brassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#f5d062" />
<stop offset="50%" stop-color="#c79520" />
<stop offset="100%" stop-color="#9c7004" />
</linearGradient>
<filter id="cloudBlur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<filter id="steamFilter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<pattern id="gearPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<circle cx="10" cy="10" r="8" fill="#b6824f" stroke="#615035" stroke-width="1"/>
<circle cx="10" cy="10" r="3" fill="#615035" stroke="#615035" stroke-width="0.5"/>
<path d="M10,2 L12,5 L8,5 Z" fill="#615035"/>
<path d="M10,18 L8,15 L12,15 Z" fill="#615035"/>
<path d="M2,10 L5,8 L5,12 Z" fill="#615035"/>
<path d="M18,10 L15,12 L15,8 Z" fill="#615035"/>
</pattern>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Clouds -->
<g>
<ellipse cx="50" cy="70" rx="35" ry="25" fill="white" filter="url(#cloudBlur)" />
<ellipse cx="90" cy="60" rx="25" ry="20" fill="white" filter="url(#cloudBlur)" />
<ellipse cx="210" cy="40" rx="40" ry="25" fill="white" filter="url(#cloudBlur)" />
<ellipse cx="250" cy="90" rx="30" ry="20" fill="white" filter="url(#cloudBlur)" />
<ellipse cx="30" cy="160" rx="25" ry="15" fill="white" filter="url(#cloudBlur)" />
<ellipse cx="270" cy="200" rx="35" ry="20" fill="white" filter="url(#cloudBlur)" />
</g>
<!-- Umbrella -->
<g transform="translate(150, 140)">
<!-- Umbrella canopy -->
<path d="M0,-80 C-60,-60 -80,-20 -80,0 L-50,0 C-50,-10 -40,-20 -30,-30 L-30,0 L-15,0 L-15,-40 C-10,-45 -5,-50 0,-55 L0,0 L15,0 L15,-40 C20,-45 25,-50 30,-30 L30,0 L50,0 C50,-10 40,-20 80,0 C80,-20 60,-60 0,-80 Z" fill="url(#umbrellaGradient)" stroke="#5a1e1e" stroke-width="1.5" />
<!-- Umbrella handle -->
<rect x="-5" y="0" width="10" height="60" rx="3" ry="3" fill="url(#handleGradient)" />
<!-- Umbrella tip -->
<ellipse cx="0" cy="63" rx="7" ry="5" fill="url(#brassGradient)" />
<!-- Steam-powered mechanism on top -->
<g transform="translate(0, -60)">
<!-- Main boiler -->
<ellipse cx="0" cy="-10" rx="25" ry="15" fill="url(#brassGradient)" stroke="#615035" stroke-width="1" />
<rect x="-20" y="-20" width="40" height="10" rx="5" ry="5" fill="url(#brassGradient)" stroke="#615035" stroke-width="1" />
<!-- Gears -->
<circle cx="-15" cy="-30" r="12" fill="url(#gearPattern)" />
<circle cx="15" cy="-30" r="8" fill="url(#gearPattern)" />
<!-- Pipes -->
<path d="M-15,-10 C-15,-5 -30,0 -30,10 C-30,15 -25,20 -10,25" fill="none" stroke="#b6824f" stroke-width="3" />
<path d="M15,-10 C15,-5 30,0 30,10 C30,15 25,20 10,25" fill="none" stroke="#b6824f" stroke-width="3" />
<!-- Valves -->
<circle cx="-30" cy="10" r="4" fill="url(#brassGradient)" stroke="#615035" stroke-width="1" />
<circle cx="30" cy="10" r="4" fill="url(#brassGradient)" stroke="#615035" stroke-width="1" />
<!-- Pressure gauge -->
<circle cx="0" cy="-25" r="6" fill="white" stroke="#615035" stroke-width="1" />
<path d="M0,-28 L0,-24" stroke="#615035" stroke-width="1" />
<path d="M-3,-25 L3,-25" stroke="#615035" stroke-width="1" />
</g>
<!-- Steam clouds -->
<g>
<circle cx="-25" cy="-70" r="5" fill="white" opacity="0.8" filter="url(#steamFilter)">
<animate attributeName="cy" from="-70" to="-95" dur="2s" repeatCount="indefinite" />
<animate attributeName="opacity" from="0.8" to="0" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="-20" cy="-75" r="4" fill="white" opacity="0.6" filter="url(#steamFilter)">
<animate attributeName="cy" from="-75" to="-95" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" from="0.6" to="0" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="25" cy="-75" r="5" fill="white" opacity="0.7" filter="url(#steamFilter)">
<animate attributeName="cy" from="-75" to="-100" dur="2.5s" repeatCount="indefinite" />
<animate attributeName="opacity" from="0.7" to="0" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="20" cy="-70" r="4" fill="white" opacity="0.8" filter="url(#steamFilter)">
<animate attributeName="cy" from="-70" to="-90" dur="2.2s" repeatCount="indefinite" />
<animate attributeName="opacity" from="0.8" to="0" dur="2.2s" repeatCount="indefinite" />
</circle>
</g>
<!-- Umbrella movement animation -->
<animateTransform attributeName="transform"
type="translate"
from="150,130"
to="150,150"
dur="4s"
repeatCount="indefinite"
additive="sum" />
<animateTransform attributeName="transform"
type="rotate"
from="-5"
to="5"
dur="6s"
repeatCount="indefinite"
additive="sum" />
</g>
<!-- Additional distant floating objects to add whimsy -->
<g transform="translate(50, 220)">
<circle cx="0" cy="0" r="3" fill="#f5d062" />
<path d="M-5,-2 L5,-2 L0,-8 Z" fill="#f85c5c" stroke="#8c2e2e" stroke-width="0.5" />
<animateTransform attributeName="transform"
type="translate"
from="50,220"
to="70,200"
dur="15s"
repeatCount="indefinite" />
</g>
<g transform="translate(230, 180)">
<circle cx="0" cy="0" r="2" fill="#f5d062" />
<path d="M-4,-1 L4,-1 L0,-6 Z" fill="#79c0ff" stroke="#4a87c5" stroke-width="0.5" />
<animateTransform attributeName="transform"
type="translate"
from="230,180"
to="210,160"
dur="12s"
repeatCount="indefinite" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!-- Definitions for reusable elements -->
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#7F7FD5" />
<stop offset="50%" stop-color="#91EAE4" />
<stop offset="100%" stop-color="#E0C3FC" />
</linearGradient>
<!-- Umbrella fabric gradients -->
<linearGradient id="umbrellaGradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FF6B6B" />
<stop offset="100%" stop-color="#FF9E80" />
</linearGradient>
<linearGradient id="umbrellaGradient2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#4ECDC4" />
<stop offset="100%" stop-color="#26C6DA" />
</linearGradient>
<!-- Metal texture for steampunk elements -->
<linearGradient id="brassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4B483" />
<stop offset="50%" stop-color="#F5D7A1" />
<stop offset="100%" stop-color="#C19A6B" />
</linearGradient>
<linearGradient id="copperGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#B87333" />
<stop offset="50%" stop-color="#DA8A67" />
<stop offset="100%" stop-color="#965336" />
</linearGradient>
<!-- Cloud gradient -->
<linearGradient id="cloudGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="#E6E6FA" />
</linearGradient>
<!-- Steam effect -->
<filter id="steamFilter" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" 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="steam" />
</filter>
<!-- Glow filter for sparkles -->
<filter id="glowFilter" 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 1 0 1 0 0 1 0 0 1 0 1 0 0 0 18 -7" result="glow" />
<feMerge>
<feMergeNode in="glow" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- Gear symbol for reuse -->
<symbol id="gear" viewBox="-10 -10 20 20">
<circle cx="0" cy="0" r="5" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<path d="M0,-8 L1.5,-5.5 L4,-6 L4,-4 L6,-3 L5,-1 L8,0 L5,1 L6,3 L4,4 L4,6 L1.5,5.5 L0,8 L-1.5,5.5 L-4,6 L-4,4 L-6,3 L-5,1 L-8,0 L-5,-1 L-6,-3 L-4,-4 L-4,-6 L-1.5,-5.5 Z" fill="url(#brassGradient)" stroke="#333" stroke-width="0.2" />
<circle cx="0" cy="0" r="2" fill="#8C6B4F" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite" />
</symbol>
<!-- Clouds -->
<symbol id="cloud" viewBox="0 0 100 60">
<path d="M30,50 C10,50 10,30 20,25 C20,10 40,10 45,20 C55,0 90,10 90,30 C100,30 100,50 80,50 Z" fill="url(#cloudGradient)" />
</symbol>
</defs>
<!-- Sky background -->
<rect x="0" y="0" width="300" height="300" fill="url(#skyGradient)" />
<!-- Background clouds -->
<g id="background-clouds">
<use href="#cloud" x="0" y="20" width="100" height="60" opacity="0.7" />
<use href="#cloud" x="80" y="40" width="120" height="70" opacity="0.8" />
<use href="#cloud" x="200" y="30" width="90" height="50" opacity="0.6" />
<use href="#cloud" x="30" y="120" width="70" height="40" opacity="0.5" />
<use href="#cloud" x="180" y="140" width="110" height="60" opacity="0.7" />
<use href="#cloud" x="-40" y="200" width="130" height="80" opacity="0.6" />
<use href="#cloud" x="170" y="220" width="160" height="90" opacity="0.8" />
</g>
<!-- Little flying things in background -->
<g id="background-elements">
<!-- Small birds -->
<path d="M240,120 C245,115 250,118 255,120 C250,122 245,125 240,120 Z" fill="#333">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; -5,-3; 0,0" dur="3s" repeatCount="indefinite" />
</path>
<path d="M230,110 C235,105 240,108 245,110 C240,112 235,115 230,110 Z" fill="#333">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; -5,3; 0,0" dur="4s" repeatCount="indefinite" />
</path>
<!-- Little balloon with basket -->
<g transform="translate(60, 60)">
<ellipse cx="0" cy="0" rx="15" ry="20" fill="#FFD166" stroke="#333" stroke-width="0.5" />
<path d="M-12,10 C-5,15 5,15 12,10" fill="none" stroke="#333" stroke-width="0.5" />
<path d="M0,20 L0,30" stroke="#333" stroke-width="0.5" fill="none" />
<rect x="-4" y="30" width="8" height="5" fill="#BF9B6F" stroke="#333" stroke-width="0.3" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; 3,5; 0,0" dur="8s" repeatCount="indefinite" />
</g>
<!-- Floating paper airplane -->
<path d="M40,95 L60,90 L45,100 Z" fill="white" stroke="#333" stroke-width="0.3" transform="rotate(-15, 45, 95)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; 10,-5; 0,0" dur="5s" repeatCount="indefinite" />
</path>
<!-- Some sparkles/stars -->
<g filter="url(#glowFilter)">
<path d="M40,200 L43,203 L40,206 L37,203 Z" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.3;0.9" dur="3s" repeatCount="indefinite" />
</path>
<path d="M260,130 L264,134 L260,138 L256,134 Z" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.4;0.9" dur="2.5s" repeatCount="indefinite" />
</path>
<path d="M100,220 L105,225 L100,230 L95,225 Z" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.5;0.9" dur="4s" repeatCount="indefinite" />
</path>
<path d="M210,50 L214,54 L210,58 L206,54 Z" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.3;0.9" dur="3.5s" repeatCount="indefinite" />
</path>
<circle cx="175" cy="80" r="1" fill="white">
<animate attributeName="r" values="1;1.5;1" dur="2s" repeatCount="indefinite" />
</circle>
<circle cx="250" cy="190" r="1" fill="white">
<animate attributeName="r" values="1;1.5;1" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="80" cy="170" r="1" fill="white">
<animate attributeName="r" values="1;1.5;1" dur="2.5s" repeatCount="indefinite" />
</circle>
<circle cx="120" cy="50" r="1" fill="white">
<animate attributeName="r" values="1;1.5;1" dur="1.5s" repeatCount="indefinite" />
</circle>
</g>
</g>
<!-- Steam-powered umbrella (main element) -->
<g id="umbrella" transform="translate(150, 140)">
<!-- Animation for gentle floating -->
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="150,140; 150,135; 150,140" dur="6s" repeatCount="indefinite" />
<!-- Umbrella canopy -->
<path d="M0,-70 C40,-60 70,-30 80,10 L-80,10 C-70,-30 -40,-60 0,-70Z" fill="url(#umbrellaGradient1)" stroke="#333" stroke-width="1.5" />
<path d="M0,-70 C-40,-60 -70,-30 -80,10 L80,10 C70,-30 40,-60 0,-70Z" fill="url(#umbrellaGradient2)" stroke="#333" stroke-width="1.5" />
<!-- Umbrella pattern details -->
<path d="M0,-70 L0,10 M-40,-50 L-40,10 M40,-50 L40,10" stroke="#333" stroke-width="0.5" fill="none" />
<path d="M-60,-25 A60,60 0 0,1 60,-25" stroke="#333" stroke-width="0.5" fill="none" />
<path d="M-70,-10 A70,70 0 0,1 70,-10" stroke="#333" stroke-width="0.5" fill="none" />
<!-- Steampunk elements on umbrella -->
<circle cx="-40" cy="-30" r="8" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<circle cx="40" cy="-30" r="8" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<circle cx="0" cy="-50" r="10" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<!-- Gears and mechanical details -->
<use href="#gear" x="-40" y="-30" width="20" height="20" />
<use href="#gear" x="40" y="-30" width="20" height="20" />
<g id="central-mechanism" transform="translate(0, -50)">
<circle cx="0" cy="0" r="9" fill="url(#copperGradient)" stroke="#333" stroke-width="0.5" />
<circle cx="0" cy="0" r="7" fill="url(#brassGradient)" stroke="#333" stroke-width="0.3" />
<circle cx="0" cy="0" r="3" fill="#8C6B4F" />
<path d="M-7,-7 L7,7 M-7,7 L7,-7" stroke="#333" stroke-width="0.3" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="8s" repeatCount="indefinite" />
</g>
<!-- Pipes and connectors -->
<path d="M-40,-30 C-30,-40 -10,-45 0,-50 C10,-45 30,-40 40,-30" fill="none" stroke="#B87333" stroke-width="1.5" />
<path d="M-40,-30 L-40,-20 C-40,-17 -37,-15 -34,-15 L34,-15 C37,-15 40,-17 40,-20 L40,-30" fill="none" stroke="#B87333" stroke-width="1" />
<!-- Steam valves -->
<rect x="-45" y="-22" width="10" height="4" rx="1" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<rect x="35" y="-22" width="10" height="4" rx="1" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<!-- Pressure gauge -->
<circle cx="0" cy="-15" r="5" fill="white" stroke="#333" stroke-width="0.5" />
<path d="M0,-17 L2,-14" stroke="#333" stroke-width="0.5">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 -15" to="360 0 -15" dur="3s" repeatCount="indefinite" />
</path>
<circle cx="0" cy="-15" r="4" fill="none" stroke="#333" stroke-width="0.3" />
<!-- Umbrella handle -->
<path d="M0,10 L0,60" stroke="#8C6B4F" stroke-width="3" fill="none" />
<path d="M0,60 C10,60 15,65 15,75 C15,80 10,80 5,80 C0,80 -5,80 -5,75 C-5,70 0,70 0,65 Z" fill="url(#copperGradient)" stroke="#333" stroke-width="0.5" />
<!-- Additional mechanical details -->
<circle cx="-20" cy="-40" r="3" fill="url(#brassGradient)" stroke="#333" stroke-width="0.3" />
<circle cx="20" cy="-40" r="3" fill="url(#brassGradient)" stroke="#333" stroke-width="0.3" />
<path d="M-20,-40 L-10,-20 M20,-40 L10,-20" stroke="#B87333" stroke-width="0.7" fill="none" />
<!-- Small pulleys -->
<circle cx="-60" cy="-20" r="4" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" />
<circle cx="-60" cy="-20" r="2" fill="none" stroke="#333" stroke-width="0.3" />
<circle cx="60" cy="-20" r="4" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" />
<circle cx="60" cy="-20" r="2" fill="none" stroke="#333" stroke-width="0.3" />
<!-- Steam coming out -->
<g filter="url(#steamFilter)">
<path d="M-45,-25 C-50,-35 -48,-45 -42,-38 C-38,-48 -30,-45 -35,-30" fill="white" opacity="0.8">
<animate attributeName="d" values="M-45,-25 C-50,-35 -48,-45 -42,-38 C-38,-48 -30,-45 -35,-30; M-45,-25 C-52,-32 -50,-42 -44,-35 C-40,-45 -32,-42 -37,-27; M-45,-25 C-50,-35 -48,-45 -42,-38 C-38,-48 -30,-45 -35,-30" dur="3s" repeatCount="indefinite" />
</path>
<path d="M45,-25 C50,-35 48,-45 42,-38 C38,-48 30,-45 35,-30" fill="white" opacity="0.8">
<animate attributeName="d" values="M45,-25 C50,-35 48,-45 42,-38 C38,-48 30,-45 35,-30; M45,-25 C52,-32 50,-42 44,-35 C40,-45 32,-42 37,-27; M45,-25 C50,-35 48,-45 42,-38 C38,-48 30,-45 35,-30" dur="4s" repeatCount="indefinite" />
</path>
<path d="M0,-60 C-5,-70 5,-75 8,-65 C12,-75 18,-70 10,-58" fill="white" opacity="0.7">
<animate attributeName="d" values="M0,-60 C-5,-70 5,-75 8,-65 C12,-75 18,-70 10,-58; M0,-60 C-8,-67 2,-72 5,-62 C9,-72 15,-67 7,-55; M0,-60 C-5,-70 5,-75 8,-65 C12,-75 18,-70 10,-58" dur="2.5s" repeatCount="indefinite" />
</path>
</g>
<!-- Little propeller on top for extra flying power -->
<g transform="translate(0, -80)">
<circle cx="0" cy="0" r="4" fill="url(#brassGradient)" stroke="#333" stroke-width="0.5" />
<g id="propeller">
<path d="M0,0 L-15,-5 L-13,-1 Z" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" />
<path d="M0,0 L-15,-5 L-13,-1 Z" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" transform="rotate(90)" />
<path d="M0,0 L-15,-5 L-13,-1 Z" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" transform="rotate(180)" />
<path d="M0,0 L-15,-5 L-13,-1 Z" fill="url(#copperGradient)" stroke="#333" stroke-width="0.3" transform="rotate(270)" />
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite" />
</g>
<circle cx="0" cy="0" r="1.5" fill="#8C6B4F" />
</g>
</g>
<!-- Foreground elements -->
<g id="foreground-elements">
<!-- Small floating gears -->
<use href="#gear" x="70" y="100" width="16" height="16" transform="rotate(15, 70, 100)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; 5,7; 0,0" dur="10s" repeatCount="indefinite" additive="sum" />
</use>
<use href="#gear" x="220" y="170" width="24" height="24" transform="rotate(45, 220, 170)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; -8,5; 0,0" dur="12s" repeatCount="indefinite" additive="sum" />
</use>
<use href="#gear" x="90" y="210" width="14" height="14" transform="rotate(30, 90, 210)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; 7,-6; 0,0" dur="9s" repeatCount="indefinite" additive="sum" />
</use>
<!-- More steam bursts in foreground -->
<g filter="url(#steamFilter)">
<path d="M190,190 C185,180 195,175 198,185 C202,175 208,180 200,192" fill="white" opacity="0.6">
<animate attributeName="d" values="M190,190 C185,180 195,175 198,185 C202,175 208,180 200,192; M190,190 C188,177 198,172 201,182 C205,172 211,177 203,189; M190,190 C185,180 195,175 198,185 C202,175 208,180 200,192" dur="5s" repeatCount="indefinite" />
</path>
<path d="M100,160 C95,150 105,145 108,155 C112,145 118,150 110,162" fill="white" opacity="0.5">
<animate attributeName="d" values="M100,160 C95,150 105,145 108,155 C112,145 118,150 110,162; M100,160 C98,147 108,142 111,152 C115,142 121,147 113,159; M100,160 C95,150 105,145 108,155 C112,145 118,150 110,162" dur="7s" repeatCount="indefinite" />
</path>
</g>
</g>
</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 image better captures the whimsical and steampunk theme with detailed mechanical elements like gears and propellers, enhancing the steam-powered concept.
The color palette and sky gradient add visual appeal and contribute to a more dynamic and imaginative scene.
Player 1's image, while charming, lacks the complexity and adherence to the prompt seen in Player 2's submission.
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
35
Player 2
59
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
3
Player 2
4
Circles
The number of circle elements (circle) in the SVG.
Player 1
13
Player 2
22
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
8
Player 2
1
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
11
Player 2
32
Groups
The number of group elements (g) in the SVG.
Player 1
6
Player 2
11
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
4
Player 2
6
Patterns
The number of pattern definitions (pattern) in the SVG.
Player 1
1
Player 2
—
Filters
The number of filter definitions (filter) in the SVG.
Player 1
2
Player 2
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
4
Player 2
16
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
14
Player 2
39
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
14
Player 2
19
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
12
Player 2
25
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
4
Player 2
11
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
51
Player 2
145
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
1
Player 2
2
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
7
Player 2
10
Use Elements
The number of use elements (use) in the SVG.
Player 1
—
Player 2
12
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 #1229
Mar 13, 2025
"A geometric ice cream cone with a melting galaxy scoop"
P1
P2
Match #1143
Mar 13, 2025
"Ballet-dancing flamingo on a tightrope, under a starry sky"
P1
P2
Match #1074
Mar 13, 2025
"A clock shaped like a sunflower, with petals indicating hours"
P1
P2
Match #1073
Mar 13, 2025
"Surreal cityscape reflected in a giant cat's eye"
P1
P2
Match #995
Mar 13, 2025
"Dancing giraffes in tutus under a surrealist starry sky"
P1
P2
Match #800
Mar 13, 2025
"A flamingo playing a saxophone on a floating iceberg"
P1
P2
