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: #232f3e sky, #16222c sea, #3a4148 rock, #e8eaec white, #b03a3a red, #f5d97a light -->
  <rect width="800" height="600" fill="#232f3e"/>

  <!-- storm clouds -->
  <g fill="#16222c" opacity="0.75">
    <ellipse cx="120" cy="70" rx="200" ry="55"/>
    <ellipse cx="380" cy="45" rx="220" ry="50"/>
    <ellipse cx="680" cy="80" rx="230" ry="60"/>
    <ellipse cx="250" cy="110" rx="180" ry="40"/>
    <ellipse cx="600" cy="120" rx="160" ry="35"/>
  </g>

  <!-- light beams -->
  <g>
    <polygon points="408,178 800,90 800,200" fill="#f5d97a" opacity="0.55"/>
    <polygon points="408,178 800,110 800,180" fill="#f5d97a" opacity="0.45"/>
    <polygon points="392,178 0,120 0,215" fill="#f5d97a" opacity="0.28"/>
  </g>

  <!-- wind streaks -->
  <g stroke="#e8eaec" stroke-width="3" fill="none" opacity="0.35" stroke-linecap="round">
    <path d="M40,150 q90,-18 170,-6 q60,9 100,2"/>
    <path d="M470,250 q100,-20 190,-8 q70,9 110,0"/>
    <path d="M60,300 q110,-22 200,-8"/>
    <path d="M520,140 q90,-16 170,-4"/>
    <path d="M100,230 q80,-14 150,-5"/>
  </g>

  <!-- rain -->
  <g stroke="#e8eaec" stroke-width="2" opacity="0.45" stroke-linecap="round">
    <line x1="60" y1="60" x2="30" y2="120"/>
    <line x1="130" y1="110" x2="100" y2="170"/>
    <line x1="200" y1="60" x2="170" y2="120"/>
    <line x1="255" y1="160" x2="225" y2="220"/>
    <line x1="310" y1="90" x2="280" y2="150"/>
    <line x1="180" y1="250" x2="150" y2="310"/>
    <line x1="90" y1="360" x2="60" y2="420"/>
    <line x1="250" y1="330" x2="220" y2="390"/>
    <line x1="330" y1="240" x2="300" y2="300"/>
    <line x1="500" y1="70" x2="470" y2="130"/>
    <line x1="560" y1="200" x2="530" y2="260"/>
    <line x1="620" y1="90" x2="590" y2="150"/>
    <line x1="690" y1="180" x2="660" y2="240"/>
    <line x1="740" y1="60" x2="710" y2="120"/>
    <line x1="640" y1="300" x2="610" y2="360"/>
    <line x1="720" y1="260" x2="690" y2="320"/>
    <line x1="560" y1="340" x2="530" y2="400"/>
    <line x1="140" y1="420" x2="110" y2="480"/>
    <line x1="700" y1="400" x2="670" y2="460"/>
    <line x1="40" y1="240" x2="10" y2="300"/>
    <line x1="470" y1="380" x2="440" y2="440"/>
  </g>

  <!-- sea -->
  <path d="M0,470 Q60,445 130,465 Q200,485 270,460 Q340,440 410,465 Q480,488 550,462 Q620,440 690,465 Q750,485 800,462 L800,600 L0,600 Z" fill="#16222c"/>
  <!-- foam lines on sea -->
  <g stroke="#e8eaec" stroke-width="3" fill="none" opacity="0.5" stroke-linecap="round">
    <path d="M0,472 Q60,448 130,468 Q200,488 270,463"/>
    <path d="M410,468 Q480,490 550,465 Q620,443 690,468"/>
    <path d="M60,520 Q120,500 190,518 Q250,533 300,515"/>
    <path d="M480,530 Q550,510 620,528 Q680,542 740,522"/>
    <path d="M150,565 Q220,548 290,563"/>
  </g>

  <!-- crashing spray on rocks -->
  <g fill="#e8eaec" opacity="0.7">
    <circle cx="268" cy="455" r="7"/>
    <circle cx="252" cy="440" r="5"/>
    <circle cx="282" cy="438" r="4"/>
    <circle cx="540" cy="452" r="6"/>
    <circle cx="558" cy="438" r="4"/>
    <circle cx="525" cy="436" r="4"/>
  </g>

  <!-- rocky outcrop -->
  <path d="M250,600 L268,500 L300,462 L330,478 L355,440 L400,428 L450,436 L480,462 L510,452 L540,480 L560,600 Z" fill="#3a4148"/>
  <path d="M300,600 L318,505 L355,455 L400,445 L440,455 L470,500 L490,600 Z" fill="#16222c" opacity="0.35"/>

  <!-- lighthouse -->
  <g>
    <!-- tower -->
    <path d="M372,220 L428,220 L444,440 L356,440 Z" fill="#e8eaec"/>
    <!-- red bands -->
    <path d="M369.5,255 L430.5,255 L433.5,296 L366.5,296 Z" fill="#b03a3a"/>
    <path d="M363.5,340 L436.5,340 L439.5,381 L360.5,381 Z" fill="#b03a3a"/>
    <!-- base -->
    <rect x="348" y="438" width="104" height="16" fill="#b03a3a"/>
    <!-- gallery -->
    <rect x="364" y="210" width="72" height="12" rx="4" fill="#b03a3a"/>
    <!-- lantern room -->
    <rect x="382" y="162" width="36" height="50" fill="#3a4148"/>
    <rect x="388" y="168" width="24" height="38" fill="#f5d97a"/>
    <line x1="400" y1="168" x2="400" y2="206" stroke="#3a4148" stroke-width="3"/>
    <!-- roof -->
    <path d="M378,162 L400,138 L422,162 Z" fill="#b03a3a"/>
    <line x1="400" y1="138" x2="400" y2="124" stroke="#3a4148" stroke-width="4" stroke-linecap="round"/>
    <!-- door -->
    <path d="M390,440 L410,440 L410,412 Q400,402 390,412 Z" fill="#3a4148"/>
    <!-- window -->
    <rect x="394" y="310" width="12" height="18" rx="4" fill="#3a4148"/>
  </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"
}