lighthouse-storm
rendered
the brief, redacted

Draw a lighthouse on a rocky outcrop during a storm, as a single self-contained SVG. Tests composition, layering, and whether a model can suggest weather without raster effects.

338 chars · 53 words · fingerprint 0b46c0c31095

raw output — byte exact

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="100%" height="100%">
  <defs>
    <!-- Beam gradient -->
    <linearGradient id="beamGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FFF2A3" stop-opacity="0.8"/>
      <stop offset="30%" stop-color="#FFF2A3" stop-opacity="0.25"/>
      <stop offset="100%" stop-color="#1A2A3A" stop-opacity="0"/>
    </linearGradient>

    <!-- Sky gradient -->
    <linearGradient id="skyGrad" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#0A1118"/>
      <stop offset="50%" stop-color="#15222E"/>
      <stop offset="100%" stop-color="#243447"/>
    </linearGradient>
  </defs>

  <style>
    .rain { stroke: #A0B2C6; stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; }
    .heavy-rain { stroke: #C2D1E0; stroke-width: 2.2; stroke-linecap: round; opacity: 0.8; }
    .bg-rock { fill: #131B22; }
    .mid-rock { fill: #1C2833; }
    .fg-rock { fill: #263544; }
    .lighthouse-wall { fill: #EAEFF2; }
    .lighthouse-shadow { fill: #B8C4D0; }
    .lighthouse-band { fill: #8B2626; }
    .metal { fill: #111820; }
    .light-glow { fill: #FFF7C2; }
  </style>

  <!-- BACKGROUND: Stormy Sky -->
  <rect width="1000" height="1000" fill="url(#skyGrad)"/>

  <!-- Swirling Storm Clouds -->
  <path d="M-100,-50 C150,-100 300,50 550,20 C800,-10 900,-80 1100,-30 L1100,-150 L-100,-150 Z" fill="#101922" opacity="0.8"/>
  <path d="M-50,80 C200,120 400,20 700,90 C950,150 1050,40 1200,100 L1200,-50 L-50,-50 Z" fill="#182531" opacity="0.6"/>

  <!-- LIGHTHOUSE BEAM (Sweeping across the dark sky) -->
  <!-- Main broad beam cone -->
  <polygon points="585,325 1050,45 1050,305" fill="url(#beamGrad)"/>
  <!-- Bright core of the beam -->
  <polygon points="585,325 1050,150 1050,190" fill="#FFFFFF" opacity="0.4"/>
  <!-- Secondary scatter glow in mist -->
  <circle cx="585" cy="325" r="45" fill="#FFF2A3" opacity="0.5"/>

  <!-- DISTANT WAVES / SEA -->
  <path d="M0,620 Q250,600 500,630 T1000,610 L1000,1000 L0,1000 Z" fill="#131B22"/>

  <!-- BACKGROUND/MIDGROUND ROCKY OUTCROP -->
  <path d="M350,750 L420,680 L480,690 L530,650 L600,680 L680,610 L750,720 L800,850 L350,850 Z" class="mid-rock"/>

  <!-- MAIN LIGHTHOUSE ROCKY ISLAND -->
  <path d="M 250 850 
           C 300 780, 380 750, 430 700 
           C 480 650, 520 620, 580 610 
           C 650 600, 720 650, 780 720 
           C 820 770, 850 820, 880 900 
           L 150 900 
           C 180 880, 220 870, 250 850 Z" class="fg-rock"/>

  <!-- Jagged rock highlights and facets (Windward side battered) -->
  <path d="M 430 700 L 490 780 L 410 840 Z" fill="#1B2631"/>
  <path d="M 580 610 L 640 700 L 520 730 Z" fill="#324559"/>
  <path d="M 680 660 L 780 720 L 730 810 Z" fill="#1B2631"/>

  <!-- LIGHTHOUSE STRUCTURE -->
  <!-- Base taper -->
  <polygon points="510,630 660,630 635,330 535,330" class="lighthouse-shadow"/>
  <polygon points="535,330 635,330 615,630 555,630" class="lighthouse-wall"/>

  <!-- Red stripe (Spiral/Band) -->
  <polygon points="571,430 599,430 594,480 576,480" class="lighthouse-band"/>
  <polygon points="550,550 585,550 580,600 558,600" class="lighthouse-band"/>

  <!-- Architectural Details: Door and Windows -->
  <path d="M 581,630 L 581,595 C 581,590 589,590 589,595 L 589,630 Z" class="metal"/>
  <rect x="565" y="500" width="8" height="14" rx="2" class="metal"/>
  <rect x="597" y="440" width="8" height="14" rx="2" class="metal"/>
  <rect x="570" y="380" width="7" height="12" rx="2" class="metal"/>

  <!-- Gallery Deck and Railing -->
  <path d="M 515,330 L 655,330 L 645,315 L 525,315 Z" class="metal"/>
  <!-- Railing posts and lines -->
  <line x1="530" y1="315" x2="530" y2="295" stroke="#111820" stroke-width="3"/>
  <line x1="560" y1="315" x2="560" y2="295" stroke="#111820" stroke-width="2"/>
  <line x1="585" y1="315" x2="585" y2="295" stroke="#111820" stroke-width="2"/>
  <line x1="610" y1="315" x2="610" y2="295" stroke="#111820" stroke-width="2"/>
  <line x1="640" y1="315" x2="640" y2="295" stroke="#111820" stroke-width="3"/>
  <line x1="525" y1="300" x2="645" y2="300" stroke="#111820" stroke-width="2"/>
  <line x1="525" y1="308" x2="645" y2="308" stroke="#111820" stroke-width="2"/>

  <!-- Lantern Room -->
  <rect x="555" y="260" width="60" height="55" class="metal"/>
  <!-- Light Source / Glowing Windows -->
  <rect x="562" y="270" width="46" height="35" class="light-glow"/>
  <line x1="585" y1="270" x2="585" y2="305" stroke="#111820" stroke-width="3"/>
  <line x1="562" y1="287" x2="608" y2="287" stroke="#111820" stroke-width="3"/>

  <!-- Lantern Roof (Dome) -->
  <path d="M 550,260 C 550,230 620,230 620,260 Z" class="metal"/>
  <polygon points="580,225 590,225 588,240 582,240" class="metal"/>
  <circle cx="585" cy="223" r="3" class="metal"/>

  <!-- FOREGROUND SEA & CRASHING WAVES -->
  <rect x="0" y="850" width="1000" height="150" class="bg-rock"/>
  
  <!-- Massive Wave Impact -->
  <path d="M 150 900 
           C 250 880, 350 800, 450 820 
           C 520 835, 580 910, 650 870
           C 720 830, 800 780, 900 850
           L 1000 1000 L 0 1000 Z" fill="#1C2833"/>
           
  <!-- Wave crests (Foam and spray whipped by wind) -->
  <path d="M 380,835 Q 430,780 470,830 Q 510,790 540,845" fill="none" stroke="#EAEFF2" stroke-width="4" stroke-linecap="round"/>
  <path d="M 680,810 Q 730,750 780,820 Q 830,760 880,830" fill="none" stroke="#EAEFF2" stroke-width="5" stroke-linecap="round"/>
  
  <!-- Massive splash against the base of the rock -->
  <path d="M 400,850 Q 420,700 480,720 Q 450,800 520,810" fill="#EAEFF2" opacity="0.8"/>
  <path d="M 700,830 Q 750,680 810,730 Q 780,810 850,830" fill="#EAEFF2" opacity="0.8"/>
  <circle cx="450" cy="710" r="4" fill="#EAEFF2" opacity="0.9"/>
  <circle cx="470" cy="695" r="3" fill="#EAEFF2" opacity="0.8"/>
  <circle cx="760" cy="710" r="5" fill="#EAEFF2" opacity="0.9"/>
  <circle cx="790" cy="690" r="3" fill="#EAEFF2" opacity="0.8"/>

  <!-- WIND-BLOWN RAIN (Diagonal streaks across entire canvas) -->
  <!-- Angle is steep from left to right, conveying strong gale-force wind -->
  <g transform="rotate(-15)">
    <!-- Light background rain -->
    <line x1="-100" y1="100" x2="-20" y2="300" class="rain"/><line x1="50" y1="-50" x2="130" y2="150" class="rain"/><line x1="200" y1="50" x2="280" y2="250" class="rain"/><line x1="350" y1="-100" x2="430" y2="100" class="rain"/><line x1="500" y1="0" x2="580" y2="200" class="rain"/><line x1="650" y1="-80" x2="730" y2="120" class="rain"/><line x1="800" y1="20" x2="880" y2="220" class="rain"/><line x1="950" y1="-50" x2="1030" y2="150" class="rain"/><line x1="1100" y1="50" x2="1180" y2="250" class="rain"/>

    <line x1="-20" y1="300" x2="60" y2="500" class="rain"/><line x1="130" y1="150" x2="210" y2="350" class="rain"/><line x1="280" y1="250" x2="360" y2="450" class="rain"/><line x1="430" y1="100" x2="510" y2="300" class="rain"/><line x1="580" y1="200" x2="660" y2="400" class="rain"/><line x1="730" y1="120" x2="810" y2="320" class="rain"/><line x1="880" y1="220" x2="960" y2="420" class="rain"/><line x1="1030" y1="150" x2="1110" y2="350" class="rain"/>

    <line x1="60" y1="500" x2="140" y2="700" class="rain"/><line x1="210" y1="350" x2="290" y2="550" class="rain"/><line x1="360" y1="450" x2="440" y2="650" class="rain"/><line x1="510" y1="300" x2="590" y2="500" class="rain"/><line x1="660" y1="400" x2="740" y2="600" class="rain"/><line x1="810" y1="320" x2="890" y2="520" class="rain"/><line x1="960" y1="420" x2="1040" y2="620" class="rain"/>

    <line x1="140" y1="700" x2="220" y2="900" class="rain"/><line x1="290" y1="550" x2="370" y2="750" class="rain"/><line x1="440" y1="650" x2="520" y2="850" class="rain"/><line x1="590" y1="500" x2="670" y2="700" class="rain"/><line x1="740" y1="600" x2="820" y2="800" class="rain"/><line x1="890" y1="520" x2="970" y2="720" class="rain"/>

    <!-- Heavy foreground rain streaks -->
    <line x1="100" y1="50" x2="150" y2="175" class="heavy-rain"/>
    <line x1="300" y1="200" x2="350" y2="325" class="heavy-rain"/>
    <line x1="750" y1="80" x2="800" y2="205" class="heavy-rain"/>
    <line x1="220" y1="400" x2="270" y2="525" class="heavy-rain"/>
    <line x1="550" y1="350" x2="600" y2="475" class="heavy-rain"/>
    <line x1="850" y1="300" x2="900" y2="425" class="heavy-rain"/>
    <line x1="400" y1="550" x2="450" y2="675" class="heavy-rain"/>
    <line x1="680" y1="500" x2="730" y2="625" class="heavy-rain"/>
  </g>
</svg>

request envelope — prompt redacted

{
  "model": "google/gemini-3.5-flash-lite",
  "system": "Respond with a single complete <svg> element and nothing else. No markdown fences, no explanation. Include an explicit viewBox. Do not reference external fonts, images, or stylesheets — the SVG must be fully self-contained.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 58 words, 338 chars»"
    }
  ],
  "maxOutputTokens": 16000,
  "gatewayStringId": "8491f856-2274-4cba-9747-9c6bc0f0c4ae"
}