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 viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
  <!-- Palette: #1b2a41 sky, #35506b sea/clouds, #4a4a52 rock, #e8e6e0 white, #c0392b red, #f5d76e beam -->

  <!-- Sky -->
  <rect x="0" y="0" width="800" height="600" fill="#1b2a41"/>

  <!-- Wind-swept cloud streaks -->
  <g fill="#35506b">
    <path d="M-20 70 Q 180 40 380 65 Q 300 90 120 92 Q 20 90 -20 70 Z" opacity="0.7"/>
    <path d="M300 40 Q 520 15 760 45 Q 640 70 460 68 Q 360 62 300 40 Z" opacity="0.6"/>
    <path d="M-30 140 Q 150 118 330 138 Q 220 158 60 158 Q -10 154 -30 140 Z" opacity="0.5"/>
    <path d="M470 110 Q 660 92 820 115 Q 700 135 560 132 Q 500 126 470 110 Z" opacity="0.5"/>
    <path d="M120 195 Q 300 178 470 196 Q 360 212 210 210 Q 150 206 120 195 Z" opacity="0.35"/>
  </g>

  <!-- Light beam (behind rain, in front of clouds) -->
  <g>
    <polygon points="452,178 800,80 800,230" fill="#f5d76e" opacity="0.45"/>
    <polygon points="452,178 800,110 800,200" fill="#f5d76e" opacity="0.5"/>
    <polygon points="440,178 60,110 60,250" fill="#f5d76e" opacity="0.18"/>
  </g>

  <!-- Rain: diagonal strokes driven by wind -->
  <g stroke="#e8e6e0" stroke-width="2" stroke-linecap="round" opacity="0.5">
    <line x1="80" y1="30" x2="58" y2="80"/>
    <line x1="160" y1="70" x2="138" y2="120"/>
    <line x1="40" y1="150" x2="18" y2="200"/>
    <line x1="230" y1="20" x2="208" y2="70"/>
    <line x1="300" y1="120" x2="278" y2="170"/>
    <line x1="130" y1="240" x2="108" y2="290"/>
    <line x1="250" y1="200" x2="228" y2="250"/>
    <line x1="340" y1="40" x2="318" y2="90"/>
    <line x1="200" y1="330" x2="178" y2="380"/>
    <line x1="90" y1="370" x2="68" y2="420"/>
    <line x1="310" y1="300" x2="288" y2="350"/>
    <line x1="560" y1="30" x2="538" y2="80"/>
    <line x1="640" y1="140" x2="618" y2="190"/>
    <line x1="720" y1="60" x2="698" y2="110"/>
    <line x1="600" y1="250" x2="578" y2="300"/>
    <line x1="700" y1="220" x2="678" y2="270"/>
    <line x1="760" y1="330" x2="738" y2="380"/>
    <line x1="540" y1="340" x2="518" y2="390"/>
    <line x1="660" y1="380" x2="638" y2="430"/>
    <line x1="380" y1="330" x2="358" y2="380"/>
    <line x1="60" y1="280" x2="38" y2="330"/>
    <line x1="500" y1="120" x2="478" y2="170"/>
  </g>
  <g stroke="#e8e6e0" stroke-width="1.5" stroke-linecap="round" opacity="0.25">
    <line x1="120" y1="110" x2="98" y2="160"/>
    <line x1="270" y1="90" x2="248" y2="140"/>
    <line x1="180" y1="180" x2="158" y2="230"/>
    <line x1="350" y1="230" x2="328" y2="280"/>
    <line x1="620" y1="80" x2="598" y2="130"/>
    <line x1="750" y1="160" x2="728" y2="210"/>
    <line x1="680" y1="310" x2="658" y2="360"/>
    <line x1="580" y1="180" x2="558" y2="230"/>
    <line x1="150" y1="320" x2="128" y2="370"/>
    <line x1="40" y1="60" x2="18" y2="110"/>
    <line x1="300" y1="380" x2="278" y2="430"/>
    <line x1="720" y1="410" x2="698" y2="460"/>
  </g>

  <!-- Sea -->
  <path d="M0 480 Q 60 460 120 478 Q 180 496 240 476 Q 300 458 360 478 Q 420 498 480 478 Q 540 460 600 480 Q 660 500 720 480 Q 770 464 800 476 L 800 600 L 0 600 Z" fill="#35506b"/>
  <!-- Wave crests -->
  <g stroke="#e8e6e0" stroke-width="3" fill="none" stroke-linecap="round" opacity="0.7">
    <path d="M30 490 Q 70 475 110 490"/>
    <path d="M180 500 Q 225 483 270 498"/>
    <path d="M560 495 Q 605 478 650 494"/>
    <path d="M690 510 Q 730 495 775 508"/>
    <path d="M90 540 Q 135 524 180 540"/>
    <path d="M600 550 Q 645 534 690 548"/>
  </g>

  <!-- Rocky outcrop -->
  <path d="M290 600 L 310 520 L 350 480 L 400 460 L 440 452 L 490 458 L 540 480 L 570 520 L 590 600 Z" fill="#4a4a52"/>
  <path d="M320 600 L 340 530 L 385 495 L 430 485 L 470 492 L 500 515 L 515 600 Z" fill="#1b2a41" opacity="0.35"/>
  <!-- Rock facet lines -->
  <g stroke="#1b2a41" stroke-width="3" fill="none" opacity="0.6">
    <path d="M350 480 L 375 530 L 360 600"/>
    <path d="M490 458 L 500 510 L 530 560"/>
    <path d="M440 452 L 445 500"/>
  </g>
  <!-- Spray at rock base -->
  <g fill="#e8e6e0" opacity="0.8">
    <circle cx="300" cy="522" r="7"/>
    <circle cx="288" cy="535" r="5"/>
    <circle cx="312" cy="540" r="4"/>
    <circle cx="580" cy="528" r="7"/>
    <circle cx="595" cy="542" r="5"/>
    <circle cx="568" cy="545" r="4"/>
    <circle cx="275" cy="548" r="3"/>
  </g>

  <!-- Lighthouse -->
  <g>
    <!-- Tower with taper -->
    <polygon points="418,220 462,220 480,460 400,460" fill="#e8e6e0"/>
    <!-- Red bands -->
    <polygon points="421.5,262 458.5,262 461.7,300 418.3,300" fill="#c0392b"/>
    <polygon points="425,342 455,342 458.5,380 421.6,380" fill="#c0392b"/>
    <polygon points="428.3,422 451.6,422 455,460 425,460" fill="#c0392b"/>
    <!-- Shadow side -->
    <polygon points="446,220 462,220 480,460 452,460" fill="#35506b" opacity="0.3"/>
    <!-- Gallery -->
    <rect x="410" y="210" width="60" height="10" fill="#4a4a52"/>
    <rect x="416" y="196" width="48" height="14" fill="#4a4a52"/>
    <!-- Lantern room -->
    <rect x="424" y="164" width="32" height="32" fill="#4a4a52"/>
    <rect x="430" y="168" width="20" height="26" fill="#f5d76e"/>
    <!-- Roof -->
    <polygon points="420,164 460,164 440,138" fill="#c0392b"/>
    <circle cx="440" cy="134" r="4" fill="#4a4a52"/>
    <!-- Door -->
    <rect x="430" y="430" width="20" height="30" rx="8" fill="#4a4a52"/>
    <!-- Windows -->
    <rect x="434" y="316" width="12" height="16" rx="5" fill="#4a4a52"/>
    <rect x="434" y="396" width="12" height="16" rx="5" fill="#4a4a52"/>
  </g>

  <!-- Foreground rain over scene -->
  <g stroke="#e8e6e0" stroke-width="2.5" stroke-linecap="round" opacity="0.4">
    <line x1="420" y1="520" x2="396" y2="575"/>
    <line x1="240" y1="440" x2="216" y2="495"/>
    <line x1="640" y1="470" x2="616" y2="525"/>
    <line x1="110" y1="470" x2="86" y2="525"/>
    <line x1="740" y1="540" x2="716" y2="595"/>
    <line x1="340" y1="550" x2="316" y2="600"/>
    <line x1="530" y1="440" x2="506" y2="495"/>
  </g>
</svg>

request envelope — prompt redacted

{
  "model": "anthropic/claude-fable-5",
  "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": "edf0793e-2e8b-4fa7-9a2c-3f5896800c71"
}