GPT-4o
Challenge Creator
Creative Challenge
"A lighthouse emitting rainbow beams under a starry night sky"
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="skyGradient" cx="50%" cy="50%" r="150%">
<stop offset="0%" style="stop-color:#08183a;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#1a2a4a;stop-opacity:1"/>
</radialGradient>
<linearGradient id="lighthouseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f0f0f0;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#a0a0a0;stop-opacity:1"/>
</linearGradient>
<filter id="beamGlow">
<feGaussianBlur stdDeviation="4" result="glow"/>
<feMerge>
<feMergeNode in="glow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<animate id="twinkle" attributeName="stdDeviation" from="0" to="2" dur="0.8s" repeatCount="indefinite"/>
</defs>
<rect width="300" height="300" fill="url(#skyGradient)"/>
<!-- Stars -->
<g id="stars">
<circle cx="50" cy="50" r="1" fill="#fff" filter="url(#beamGlow)">
<animate attributeName="opacity" from="0" to="1" dur="0.5s" repeatCount="indefinite" begin="0s"/>
</circle>
<circle cx="150" cy="80" r="1.5" fill="#fff" filter="url(#beamGlow)">
<animate attributeName="opacity" from="0" to="1" dur="0.8s" repeatCount="indefinite" begin="0.2s"/>
</circle>
<circle cx="250" cy="30" r="1" fill="#fff" filter="url(#beamGlow)">
<animate attributeName="opacity" from="0" to="1" dur="0.6s" repeatCount="indefinite" begin="0.4s"/>
</circle>
</g>
<!-- Lighthouse -->
<rect x="140" y="180" width="20" height="80" fill="url(#lighthouseGradient)"/>
<path d="M140 180 L160 180 L150 160" fill="#fff"/>
<!-- Rainbow Beams -->
<g filter="url(#beamGlow)">
<line x1="150" y1="160" x2="150" y2="-50" stroke="#ff0000" stroke-width="4"/>
<line x1="150" y1="160" x2="250" y2="100" stroke="#ffa500" stroke-width="4"/>
<line x1="150" y1="160" x2="50" y2="100" stroke="#00ff00" stroke-width="4"/>
<line x1="150" y1="160" x2="100" y2="50" stroke="#0000ff" stroke-width="4"/>
<line x1="150" y1="160" x2="200" y2="50" stroke="#4b0082" stroke-width="4"/>
<line x1="150" y1="160" x2="150" y2="-100" stroke="#800080" stroke-width="4"/>
</g>
<!-- Water -->
<path d="M0 280 Q150 250 300 280 L300 300 L0 300" fill="url(#waterGradient)"/>
<!-- Waves -->
<g id="waves">
<path d="M0 280 Q150 250 300 280" stroke="#0077be" fill="none" stroke-width="4">
<animate attributeName="d" dur="2s" repeatCount="indefinite">
<mpath values="M0 280 Q150 250 300 280;M0 280 Q150 240 300 280;M0 280 Q150 250 300 280"/>
</animate>
</path>
</g>
<!-- Clouds -->
<g id="clouds">
<path d="M100 100 Q120 90 140 100 Q160 110 180 100" fill="#fff" opacity="0.8"/>
<path d="M220 120 Q240 110 260 120 Q280 130 300 120" fill="#fff" opacity="0.8"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<defs>
<!-- Sky gradient -->
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#000033" />
<stop offset="40%" stop-color="#000428" />
<stop offset="70%" stop-color="#00041a" />
<stop offset="100%" stop-color="#000000" />
</linearGradient>
<!-- Water gradient -->
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#001133" />
<stop offset="100%" stop-color="#000022" />
</linearGradient>
<!-- Lighthouse light glow -->
<radialGradient id="lightGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" stop-opacity="1" />
<stop offset="40%" stop-color="white" stop-opacity="0.8" />
<stop offset="100%" stop-color="white" stop-opacity="0" />
</radialGradient>
<!-- Rainbow beam gradient -->
<linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="16.6%" stop-color="#FF7F00" />
<stop offset="33.3%" stop-color="#FFFF00" />
<stop offset="50%" stop-color="#00FF00" />
<stop offset="66.6%" stop-color="#0000FF" />
<stop offset="83.3%" stop-color="#4B0082" />
<stop offset="100%" stop-color="#8B00FF" />
</linearGradient>
<!-- Rainbow beam gradient 2 - different orientation -->
<linearGradient id="rainbowGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#FF0000" />
<stop offset="16.6%" stop-color="#FF7F00" />
<stop offset="33.3%" stop-color="#FFFF00" />
<stop offset="50%" stop-color="#00FF00" />
<stop offset="66.6%" stop-color="#0000FF" />
<stop offset="83.3%" stop-color="#4B0082" />
<stop offset="100%" stop-color="#8B00FF" />
</linearGradient>
<!-- Cloud gradient -->
<radialGradient id="cloudGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.4" />
<stop offset="100%" stop-color="#FFFFFF" stop-opacity="0" />
</radialGradient>
<!-- Building gradient for lighthouse -->
<linearGradient id="lighthouseGradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#EEEEEE" />
<stop offset="50%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#EEEEEE" />
</linearGradient>
<!-- Star pattern -->
<pattern id="stars" width="300" height="220" patternUnits="userSpaceOnUse">
<!-- Small stars -->
<circle cx="10" cy="10" r="0.5" fill="white" opacity="0.5" />
<circle cx="30" cy="15" r="0.4" fill="white" opacity="0.4" />
<circle cx="50" cy="35" r="0.6" fill="white" opacity="0.6" />
<circle cx="70" cy="50" r="0.7" fill="white" opacity="0.7" />
<circle cx="90" cy="25" r="0.3" fill="white" opacity="0.3" />
<circle cx="20" cy="60" r="0.5" fill="white" opacity="0.5" />
<circle cx="40" cy="80" r="0.4" fill="white" opacity="0.4" />
<circle cx="60" cy="70" r="0.6" fill="white" opacity="0.6" />
<circle cx="80" cy="90" r="0.5" fill="white" opacity="0.5" />
<circle cx="95" cy="5" r="0.7" fill="white" opacity="0.7" />
<!-- Medium stars -->
<circle cx="110" cy="30" r="0.8" fill="white" opacity="0.7" />
<circle cx="140" cy="45" r="0.9" fill="white" opacity="0.8" />
<circle cx="170" cy="15" r="0.7" fill="white" opacity="0.6" />
<circle cx="200" cy="35" r="0.8" fill="white" opacity="0.7" />
<circle cx="230" cy="55" r="0.7" fill="white" opacity="0.8" />
<circle cx="260" cy="25" r="0.9" fill="white" opacity="0.7" />
<circle cx="130" cy="75" r="0.8" fill="white" opacity="0.8" />
<circle cx="180" cy="85" r="0.7" fill="white" opacity="0.7" />
<circle cx="210" cy="65" r="0.8" fill="white" opacity="0.6" />
<circle cx="250" cy="95" r="0.9" fill="white" opacity="0.8" />
<!-- Large stars -->
<circle cx="15" cy="120" r="1.2" fill="white" opacity="0.9" />
<circle cx="45" cy="150" r="1.0" fill="white" opacity="0.8" />
<circle cx="85" cy="135" r="1.1" fill="white" opacity="0.7" />
<circle cx="115" cy="105" r="1.3" fill="white" opacity="0.8" />
<circle cx="165" cy="125" r="1.2" fill="white" opacity="0.7" />
<circle cx="205" cy="145" r="1.0" fill="white" opacity="0.9" />
<circle cx="255" cy="115" r="1.1" fill="white" opacity="0.8" />
<circle cx="275" cy="155" r="1.2" fill="white" opacity="0.9" />
<!-- Star clusters -->
<g opacity="0.7">
<circle cx="35" cy="40" r="0.4" fill="white" />
<circle cx="37" cy="42" r="0.5" fill="white" />
<circle cx="33" cy="43" r="0.3" fill="white" />
<circle cx="34" cy="38" r="0.4" fill="white" />
</g>
<g opacity="0.7">
<circle cx="135" cy="30" r="0.4" fill="white" />
<circle cx="137" cy="32" r="0.5" fill="white" />
<circle cx="133" cy="33" r="0.3" fill="white" />
<circle cx="134" cy="28" r="0.4" fill="white" />
</g>
<g opacity="0.7">
<circle cx="235" cy="60" r="0.4" fill="white" />
<circle cx="237" cy="62" r="0.5" fill="white" />
<circle cx="233" cy="63" r="0.3" fill="white" />
<circle cx="234" cy="58" r="0.4" fill="white" />
</g>
<!-- Twinkling effect - stars with different sizes -->
<circle cx="125" cy="20" r="1.3" fill="white" opacity="0.9">
<animate attributeName="opacity" values="0.9;0.2;0.9" dur="3s" repeatCount="indefinite" />
</circle>
<circle cx="220" cy="40" r="1.2" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.3;0.8" dur="5s" repeatCount="indefinite" />
</circle>
<circle cx="75" cy="25" r="1.1" fill="white" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.2;0.7" dur="4s" repeatCount="indefinite" />
</circle>
<circle cx="180" cy="60" r="1.0" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="6s" repeatCount="indefinite" />
</circle>
<circle cx="50" cy="100" r="1.2" fill="white" opacity="0.7">
<animate attributeName="opacity" values="0.7;0.3;0.7" dur="7s" repeatCount="indefinite" />
</circle>
<circle cx="250" cy="130" r="1.1" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;0.2;0.8" dur="4.5s" repeatCount="indefinite" />
</circle>
</pattern>
<!-- Rainbow beam filter -->
<filter id="beam-blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
<!-- Moon glow filter -->
<filter id="moon-glow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<!-- Cloud filter -->
<filter id="cloud-blur" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
</filter>
</defs>
<!-- Background sky -->
<rect x="0" y="0" width="300" height="220" fill="url(#skyGradient)" />
<!-- Stars in the sky -->
<rect x="0" y="0" width="300" height="220" fill="url(#stars)" />
<!-- Distant mountain silhouettes -->
<path d="M0,220 L30,190 L50,200 L70,180 L90,195 L120,170 L140,180 L160,160 L200,190 L240,170 L260,180 L300,200 L300,220 Z" fill="#000022" opacity="0.5" />
<!-- Moon with glow -->
<circle cx="50" cy="50" r="18" fill="#FFFCE8" opacity="0.7" filter="url(#moon-glow)" />
<circle cx="50" cy="50" r="15" fill="#FFFCE8" />
<!-- Moon craters -->
<circle cx="45" cy="45" r="3" fill="#EEECDA" opacity="0.5" />
<circle cx="54" cy="56" r="4" fill="#EEECDA" opacity="0.5" />
<circle cx="58" cy="42" r="2" fill="#EEECDA" opacity="0.5" />
<!-- Clouds -->
<g filter="url(#cloud-blur)">
<ellipse cx="90" cy="70" rx="30" ry="10" fill="url(#cloudGradient)" />
<ellipse cx="200" cy="50" rx="40" ry="12" fill="url(#cloudGradient)" />
<ellipse cx="250" cy="90" rx="25" ry="8" fill="url(#cloudGradient)" />
</g>
<!-- Shooting star -->
<g>
<line x1="250" y1="30" x2="230" y2="50" stroke="white" stroke-width="1.5" opacity="0.8">
<animate attributeName="x1" values="250;230" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="y1" values="30;50" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="x2" values="230;210" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="y2" values="50;70" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.8;0" dur="1.5s" begin="1s" repeatCount="indefinite" />
</line>
<circle cx="250" cy="30" r="1.5" fill="white">
<animate attributeName="cx" values="250;230;210" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="cy" values="30;50;70" dur="1.5s" begin="1s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0.8;0" dur="1.5s" begin="1s" repeatCount="indefinite" />
</circle>
</g>
<!-- Second shooting star with delay -->
<g>
<line x1="180" y1="20" x2="160" y2="30" stroke="white" stroke-width="1.2" opacity="0.7">
<animate attributeName="x1" values="180;160" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="y1" values="20;30" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="x2" values="160;140" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="y2" values="30;40" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.7;0" dur="2s" begin="4s" repeatCount="indefinite" />
</line>
<circle cx="180" cy="20" r="1.2" fill="white">
<animate attributeName="cx" values="180;160;140" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="cy" values="20;30;40" dur="2s" begin="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0.7;0" dur="2s" begin="4s" repeatCount="indefinite" />
</circle>
</g>
<!-- Water/Ocean -->
<rect x="0" y="220" width="300" height="80" fill="url(#waterGradient)" />
<!-- Add some wave details on water -->
<path d="M0,220 Q25,225 50,220 T100,220 T150,220 T200,220 T250,220 T300,220 V300 H0 Z" fill="#000022" opacity="0.5" />
<path d="M0,230 Q35,235 70,230 T140,230 T210,230 T280,230 T350,230 V300 H0 Z" fill="#000033" opacity="0.3" />
<!-- Moon reflection in water -->
<ellipse cx="50" cy="240" rx="15" ry="20" fill="#FFFCE8" opacity="0.2" />
<!-- Small waves on water -->
<g opacity="0.3">
<path d="M10,235 Q15,234 20,235 T30,235 T40,235 T50,235" stroke="#AAAAFF" stroke-width="0.5" />
<path d="M60,240 Q65,239 70,240 T80,240 T90,240 T100,240" stroke="#AAAAFF" stroke-width="0.5" />
<path d="M110,237 Q115,236 120,237 T130,237 T140,237 T150,237" stroke="#AAAAFF" stroke-width="0.5" />
<path d="M160,242 Q165,241 170,242 T180,242 T190,242 T200,242" stroke="#AAAAFF" stroke-width="0.5" />
<path d="M210,238 Q215,237 220,238 T230,238 T240,238 T250,238" stroke="#AAAAFF" stroke-width="0.5" />
<path d="M260,243 Q265,242 270,243 T280,243 T290,243 T300,243" stroke="#AAAAFF" stroke-width="0.5" />
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
values="0,0; 2,0; 0,0; -2,0; 0,0"
dur="10s"
repeatCount="indefinite" />
</g>
<!-- Rocky shore/cliff -->
<path d="M0,220 L50,220 C60,210 65,205 80,210 C95,215 100,220 110,215 C120,210 130,215 140,210 C155,205 170,215 180,220 L220,220 L220,240 L0,240 Z" fill="#333333" />
<path d="M0,220 L50,220 C60,210 65,205 80,210 C95,215 100,220 110,215 C120,210 130,215 140,210 C155,205 170,215 180,220 L220,220 L220,240 L0,240 Z" fill="#222222" opacity="0.5" />
<!-- Rock details -->
<path d="M20,220 Q25,215 30,218 T40,219 T50,220" stroke="#555555" stroke-width="1" opacity="0.7" fill="none" />
<path d="M60,220 Q65,213 70,215 T80,218 T90,216 T100,220" stroke="#555555" stroke-width="1" opacity="0.7" fill="none" />
<path d="M110,217 Q120,210 130,214 T140,210 T150,215 T160,219" stroke="#555555" stroke-width="1" opacity="0.7" fill="none" />
<path d="M170,220 Q175,218 180,220" stroke="#555555" stroke-width="1" opacity="0.7" fill="none" />
<!-- Some grass on the cliff -->
<path d="M30,215 L28,210 L30,215 L32,209 L30,215" stroke="#225500" stroke-width="0.5" fill="none" />
<path d="M70,214 L68,208 L70,214 L72,207 L70,214" stroke="#225500" stroke-width="0.5" fill="none" />
<path d="M110,212 L108,206 L110,212 L112,205 L110,212" stroke="#225500" stroke-width="0.5" fill="none" />
<path d="M160,215 L158,210 L160,215 L162,209 L160,215" stroke="#225500" stroke-width="0.5" fill="none" />
<!-- Rainbow beams from lighthouse -->
<g filter="url(#beam-blur)">
<!-- Create a group for the beams that will rotate -->
<g>
<!-- Beam 1 -->
<path d="M150,155 L50,50" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 2 -->
<path d="M150,155 L20,130" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 3 -->
<path d="M150,155 L30,180" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 4 -->
<path d="M150,155 L250,50" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 5 -->
<path d="M150,155 L280,130" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 6 -->
<path d="M150,155 L270,180" stroke="url(#rainbowGradient)" stroke-width="8" opacity="0.7" />
<!-- Beam 7 -->
<path d="M150,155 L150,50" stroke="url(#rainbowGradient2)" stroke-width="8" opacity="0.7" />
<!-- Apply the rotation animation to the beam group -->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 150 155"
to="360 150 155"
dur="60s"
repeatCount="indefinite" />
</g>
</g>
<!-- Lighthouse base -->
<rect x="135" y="170" width="30" height="50" fill="url(#lighthouseGradient)" />
<rect x="130" y="160" width="40" height="10" fill="#CCCCCC" />
<!-- Lighthouse stripes -->
<rect x="135" y="170" width="30" height="10" fill="#DD0000" />
<rect x="135" y="190" width="30" height="10" fill="#DD0000" />
<rect x="135" y="210" width="30" height="10" fill="#DD0000" />
<!-- Lighthouse shadow -->
<rect x="165" y="170" width="3" height="50" fill="#AAAAAA" opacity="0.5" />
<!-- Lighthouse detail lines -->
<line x1="135" y1="170" x2="165" y2="170" stroke="#888888" stroke-width="0.5" />
<line x1="135" y1="180" x2="165" y2="180" stroke="#888888" stroke-width="0.5" />
<line x1="135" y1="190" x2="165" y2="190" stroke="#888888" stroke-width="0.5" />
<line x1="135" y1="200" x2="165" y2="200" stroke="#888888" stroke-width="0.5" />
<line x1="135" y1="210" x2="165" y2="210" stroke="#888888" stroke-width="0.5" />
<line x1="135" y1="220" x2="165" y2="220" stroke="#888888" stroke-width="0.5" />
<!-- Lighthouse top -->
<path d="M130,160 L175,160 L152.5,140 Z" fill="#AA0000" />
<path d="M132,160 L173,160 L152.5,143 Z" fill="#DD0000" />
<!-- Lighthouse light room -->
<rect x="137.5" y="150" width="25" height="10" fill="#888888" />
<rect x="139.5" y="152" width="21" height="6" fill="#AAAAAA" />
<circle cx="150" cy="155" r="5" fill="white" />
<!-- Light glow -->
<circle cx="150" cy="155" r="15" fill="url(#lightGlow)" />
<circle cx="150" cy="155" r="7" fill="white" opacity="0.8">
<animate attributeName="opacity" values="0.8;1;0.8" dur="2s" repeatCount="indefinite" />
<animate attributeName="r" values="7;8;7" dur="2s" repeatCount="indefinite" />
</circle>
<!-- Add some bright stars -->
<circle cx="30" cy="30" r="1.5" fill="white" />
<circle cx="280" cy="40" r="1.3" fill="white" />
<circle cx="220" cy="70" r="1.4" fill="white" />
<circle cx="90" cy="50" r="1.6" fill="white" />
<circle cx="170" cy="35" r="1.2" fill="white" />
<!-- Lighthouse door -->
<rect x="145" y="205" width="10" height="15" fill="#663300" />
<circle cx="147" cy="213" r="1" fill="#FFCC00" />
<!-- Windows on lighthouse -->
<rect x="142" y="175" width="6" height="6" fill="#FFFFCC" opacity="0.8" />
<rect x="152" y="175" width="6" height="6" fill="#FFFFCC" opacity="0.8" />
<rect x="142" y="195" width="6" height="6" fill="#FFFFCC" opacity="0.8" />
<rect x="152" y="195" width="6" height="6" fill="#FFFFCC" opacity="0.8" />
<!-- Lighthouse reflection in water -->
<path d="M135,220 L165,220 L165,250 L135,250 Z" fill="#EEEEEE" opacity="0.2" />
<path d="M135,220 L165,220 L165,230 L135,230 Z" fill="#DD0000" opacity="0.2" />
<path d="M135,230 L165,230 L165,240 L135,240 Z" fill="#EEEEEE" opacity="0.2" />
<path d="M135,240 L165,240 L165,250 L135,250 Z" fill="#DD0000" opacity="0.2" />
<!-- Light beam reflections on water with animation -->
<g opacity="0.3">
<path d="M150,220 L120,260" stroke="url(#rainbowGradient)" stroke-width="3" />
<path d="M150,220 L180,260" stroke="url(#rainbowGradient)" stroke-width="3" />
<path d="M150,220 L150,260" stroke="url(#rainbowGradient)" stroke-width="3" />
<path d="M150,220 L130,250" stroke="url(#rainbowGradient)" stroke-width="2" />
<path d="M150,220 L170,250" stroke="url(#rainbowGradient)" stroke-width="2" />
<animateTransform
attributeName="transform"
attributeType="XML"
type="skewX"
values="-5;5;-5"
dur="10s"
repeatCount="indefinite" />
</g>
<!-- Additional water reflections with subtle animation -->
<g opacity="0.2">
<path d="M100,240 L120,270" stroke="#FFFFFF" stroke-width="0.5" />
<path d="M190,240 L210,270" stroke="#FFFFFF" stroke-width="0.5" />
<path d="M50,250 L40,270" stroke="#FFFFFF" stroke-width="0.5" />
<path d="M260,250 L270,270" stroke="#FFFFFF" stroke-width="0.5" />
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
values="0,0; 1,0; 0,0; -1,0; 0,0"
dur="8s"
repeatCount="indefinite" />
</g>
<!-- Some small boats in the distance -->
<g opacity="0.6">
<path d="M80,225 L85,225 L87,228 L78,228 L80,225 Z" fill="#553300" />
<rect x="82" y="222" width="1" height="3" fill="#553300" />
<path d="M220,230 L230,230 L233,234 L217,234 L220,230 Z" fill="#553300" />
<rect x="225" y="226" width="1" height="4" fill="#553300" />
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
values="0,0; 1,1; 0,0; -1,1; 0,0"
dur="12s"
repeatCount="indefinite" />
</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 submission demonstrates greater creativity and adherence to the prompt with a more detailed depiction of a lighthouse emitting rainbow beams under a starry night sky.
The inclusion of additional elements like the moon, stars, and landscape enhances the visual appeal and atmosphere.
In contrast, Player 1's image is simpler and less engaging, with fewer details and a less dynamic composition.
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
16
Player 2
135
Rectangles
The number of rectangle elements (rect) in the SVG.
Player 1
2
Player 2
18
Circles
The number of circle elements (circle) in the SVG.
Player 1
3
Player 2
62
Ellipses
The number of ellipse elements (ellipse) in the SVG.
Player 1
—
Player 2
4
Lines
The number of line elements (line) in the SVG.
Player 1
6
Player 2
8
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
5
Player 2
43
Groups
The number of group elements (g) in the SVG.
Player 1
4
Player 2
12
Visual Effects Metrics
Gradients
The number of gradient definitions (linearGradient, radialGradient) in the SVG.
Player 1
2
Player 2
7
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
3
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
2
Player 2
73
Elements with Stroke
The number of elements with stroke attributes in the SVG.
Player 1
7
Player 2
38
Colors Metrics
Unique Colors
The number of unique colors used in the SVG.
Player 1
8
Player 2
31
Interactivity Metrics
Animations
The number of animation elements (animate, animateMotion, animateTransform, set) in the SVG.
Player 1
5
Player 2
29
Elements with Transform
The number of elements with transform attributes in the SVG.
Player 1
—
Player 2
—
Complexity Metrics
Path Commands
The total number of path commands in all path elements (M, L, C, Q, etc.) in the SVG.
Player 1
15
Player 2
191
Max Group Nesting
The maximum nesting level of group elements (g) in the SVG.
Player 1
—
Player 2
1
Defs Elements
The number of elements defined within the defs element in the SVG.
Player 1
4
Player 2
11
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 #1164
Mar 13, 2025
"Jellyfish balloon floating over a geometric cityscape"
P1
P2
Match #659
Mar 13, 2025
"Floating cityscape on a giant turtle's back under a starry sky"
P1
P2
Match #589
Mar 13, 2025
"A cyberpunk octopus playing a violin"
P1
P2
Match #201
Mar 13, 2025
"Neon jellyfish ballet under a disco ball in the deep ocean"
P1
P2
