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>
    <!-- Soft gradient for the beam of light -->
    <linearGradient id="beamGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FFF0A5" stop-opacity="0.9" />
      <stop offset="20%" stop-color="#FFF0A5" stop-opacity="0.4" />
      <stop offset="100%" stop-color="#FFF0A5" stop-opacity="0" />
    </linearGradient>

    <!-- Sky gradient for atmospheric depth -->
    <linearGradient id="skyGradient" x1="50%" y1="0%" x2="50%" y2="100%">
      <stop offset="0%" stop-color="#0b1329" />
      <stop offset="60%" stop-color="#162342" />
      <stop offset="100%" stop-color="#223354" />
    </linearGradient>
  </defs>

  <style>
    /* Styling for rain streaks and wind lines with varied slants to create turbulence */
    .rain { stroke: #8FA3BE; stroke-width: 1.5; stroke-linecap: round; opacity: 0.6; }
    .rain-heavy { stroke: #B2C6E0; stroke-width: 2; stroke-linecap: round; opacity: 0.8; }
    .wind { fill: none; stroke: #4A6080; stroke-width: 1; opacity: 0.3; stroke-dasharray: 40 20 10 30; }
  </style>

  <!-- 1. Background Sky (Color 1: #0b1329) -->
  <rect x="0" y="0" width="1000" height="1000" fill="url(#skyGradient)" />

  <!-- 2. Distant Storm Clouds & Swirling Wind Lines -->
  <path d="M-100,50 Q150,-20 400,80 T900,40 T1100,100 L1100,-50 L-100,-50 Z" fill="#111A30" />
  
  <path class="wind" d="M -50,150 C 200,120 400,200 750,130 C 900,100 1050,160 1150,120" />
  <path class="wind" d="M -50,300 C 150,260 450,350 700,280 C 950,210 1000,290 1150,250" />
  <path class="wind" d="M -50,450 C 300,400 500,480 850,410 C 950,390 1050,430 1150,400" />

  <!-- 3. The Lighthouse Beam (Color 2: #FFF0A5 - bright beam cutting through rain) -->
  <!-- Main broad beam -->
  <polygon points="492,275 1050,40 1050,320" fill="url(#beamGradient)" />
  <!-- Secondary inner core of beam for intensity -->
  <polygon points="492,275 1050,140 1050,220" fill="#FFFBE6" opacity="0.6" />

  <!-- 4. Crashing Sea & Rocky Outcrop (Color 3: #111827 - dark masses) -->
  <!-- Base Ocean -->
  <rect x="0" y="700" width="1000" height="300" fill="#0E1626" />
  
  <!-- Massive Rock Formation -->
  <path d="M 300,1000 L 320,820 L 380,780 L 410,790 L 450,710 L 530,710 L 580,780 L 680,760 L 720,840 L 750,1000 Z" fill="#131C2E" />
  <!-- Rock Highlights / Facets (Color 4: #243554) -->
  <path d="M 380,780 L 450,710 L 510,790 L 410,790 Z" fill="#1B2840" />
  <path d="M 580,780 L 680,760 L 710,880 L 550,880 Z" fill="#1B2840" />
  <path d="M 320,820 L 410,790 L 550,1000 L 300,1000 Z" fill="#182338" />

  <!-- White-water Foam around the rocks (Color 5: #D0E1F9) -->
  <path d="M 250,850 Q 290,830 350,860 T 450,840 T 550,880 T 650,830 T 780,870 Q 820,900 850,950 L 250,950 Z" fill="#1C2D4A" />
  <path d="M 280,880 C 330,860 380,910 440,870 C 500,830 560,910 630,860 C 700,810 750,900 800,870" fill="none" stroke="#D0E1F9" stroke-width="4" stroke-linecap="round" opacity="0.8" />
  <path d="M 340,920 C 390,900 450,940 520,900 C 590,860 650,930 720,890" fill="none" stroke="#D0E1F9" stroke-width="3" stroke-linecap="round" opacity="0.6" />
  
  <!-- Crashing wave left -->
  <path d="M 180,800 Q 220,740 280,730 Q 260,770 310,810 Q 240,820 180,800 Z" fill="#D0E1F9" opacity="0.8" />
  <!-- Crashing wave right -->
  <path d="M 720,780 Q 770,720 840,730 Q 820,780 890,810 Q 800,830 720,780 Z" fill="#D0E1F9" opacity="0.8" />

  <!-- 5. The Lighthouse Structure -->
  <!-- Main Tower (Tapered) -->
  <polygon points="460,720 520,720 505,270 475,270" fill="#EAEFF5" />
  <!-- Tower Shadow / Stripe (Color 6: #C0392B - classic red accent, subdued for storm) -->
  <polygon points="485,720 495,720 493,520 487,520" fill="#992D22" />
  <polygon points="489,450 491,450 490,340 490,340" fill="#992D22" />
  <polygon points="487,270 493,270 492,300 488,300" fill="#992D22" />

  <!-- Tower horizontal bands/details -->
  <polygon points="473,445 507,445 506,455 474,455" fill="#3A4A6B" />
  <polygon points="476,335 504,335 503,345 477,345" fill="#3A4A6B" />

  <!-- Lighthouse Base / Door -->
  <path d="M 455,720 L 525,720 L 520,680 L 460,680 Z" fill="#3A4A6B" />
  <path d="M 483,720 L 497,720 L 497,690 L 483,690 Z" fill="#1C2D4A" />

  <!-- Gallery & Railing -->
  <rect x="465" y="255" width="70" height="15" rx="3" fill="#3A4A6B" />
  <!-- Railing posts and lines -->
  <line x1="470" y1="255" x2="470" y2="235" stroke="#3A4A6B" stroke-width="3" />
  <line x1="530" y1="255" x2="530" y2="235" stroke="#3A4A6B" stroke-width="3" />
  <line x1="490" y1="255" x2="490" y2="235" stroke="#3A4A6B" stroke-width="2" />
  <line x1="510" y1="255" x2="510" y2="235" stroke="#3A4A6B" stroke-width="2" />
  <line x1="467" y1="240" x2="533" y2="240" stroke="#3A4A6B" stroke-width="2" />
  <line x1="467" y1="248" x2="533" y2="248" stroke="#3A4A6B" stroke-width="1.5" />

  <!-- Lantern Room (Glass & Light Source) -->
  <rect x="475" y="190" width="50" height="45" fill="#223354" />
  <!-- Glowing interior/bulb -->
  <rect x="482" y="198" width="36" height="30" fill="#FFF0A5" />
  <path d="M 475,190 L 525,190 L 500,165 Z" fill="#992D22" /> <!-- Roof -->
  <!-- Lightning rod -->
  <line x1="500" y1="165" x2="500" y2="150" stroke="#3A4A6B" stroke-width="2" />

  <!-- 6. Foreground Heavy Rain & Wind-driven Streaks (Overlays) -->
  <g>
    <!-- Left-to-right slanting heavy rain driven by gale-force winds -->
    <line x1="50" y1="0" x2="150" y2="250" class="rain-heavy" />
    <line x1="120" y1="0" x2="220" y2="250" class="rain" />
    <line x1="200" y1="50" x2="300" y2="300" class="rain" />
    <line x1="270" y1="20" x2="370" y2="270" class="rain-heavy" />
    <line x1="350" y1="100" x2="450" y2="350" class="rain" />
    <line x1="420" y1="10" x2="520" y2="260" class="rain" />
    
    <!-- Rain cutting through the light beam (higher opacity/contrast) -->
    <line x1="530" y1="120" x2="610" y2="320" class="rain-heavy" stroke="#FFFBE6" opacity="0.9" />
    <line x1="570" y1="180" x2="650" y2="380" class="rain-heavy" stroke="#FFFBE6" opacity="0.8" />
    <line x1="620" y1="80" x2="700" y2="280" class="rain-heavy" stroke="#FFFBE6" opacity="0.9" />
    <line x1="680" y1="150" x2="760" y2="350" class="rain" stroke="#FFFBE6" opacity="0.7" />
    <line x1="730" y1="100" x2="810" y2="300" class="rain-heavy" stroke="#FFFBE6" opacity="0.8" />
    <line x1="800" y1="180" x2="880" y2="380" class="rain" stroke="#FFFBE6" opacity="0.6" />
    <line x1="850" y1="70" x2="930" y2="270" class="rain" stroke="#FFFBE6" opacity="0.7" />
    <line x1="910" y1="140" x2="990" y2="340" class="rain-heavy" stroke="#FFFBE6" opacity="0.8" />

    <!-- Right side lower field rain -->
    <line x1="600" y1="400" x2="700" y2="650" class="rain" />
    <line x1="670" y1="450" x2="770" y2="700" class="rain-heavy" />
    <line x1="750" y1="380" x2="850" y2="630" class="rain" />
    <line x1="820" y1="450" x2="920" y2="700" class="rain-heavy" />
    <line x1="900" y1="400" x2="1000" y2="650" class="rain" />

    <line x1="50" y1="500" x2="150" y2="750" class="rain" />
    <line x1="130" y1="580" x2="230" y2="830" class="rain-heavy" />
    <line x1="210" y1="480" x2="310" y2="730" class="rain" />
    <line x1="290" y1="550" x2="390" y2="800" class="rain" />
    <line x1="380" y1="500" x2="480" y2="750" class="rain-heavy" />

    <!-- Extra dynamic wind swirls cutting across foreground -->
    <path class="wind" d="M -50,650 C 150,600 350,680 600,610 C 800,550 900,600 1050,570" stroke-width="1.5" opacity="0.4" />
    <path class="wind" d="M 100,850 C 300,800 500,870 750,810 C 900,770 950,800 1100,780" stroke-width="1.5" opacity="0.4" />
  </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"
}