Run details
- Model
- mistralai/mistral-large-4-0
- Route
- OpenRouter API, one user message
- Reasoning
- provider default, 66,367 reasoning tokens
- Limits
- 60 min · 143,540 output tokens
- Date
- 21 Oct 2026
- Time
- 9 min 43 s
- Size
- 9.9 kB
- Tokens
- 50 in, 70,134 out
- List price
- $0.29 ($1.36 in / $4.18 out per M)
- Paid
- $0.29
Exact prompt
Design a logo for Night Heron, an independent bookshop that only opens after dark. It must be one standalone SVG file with no scripts, external fonts or linked images. Reply with the file in a single ```svg code block.
Source
9.9 kB 169 lines Raw
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 900 970" width="900" height="970" role="img" aria-labelledby="nhTitle nhDesc">
<title id="nhTitle">Night Heron — Independent Bookshop, Open After Dark</title>
<desc id="nhDesc">Logo for Night Heron, an independent bookshop that opens after dark: a heron stands in moonlit water beneath a crescent moon and stars, an open book floats nearby, with the wordmark below.</desc>
<defs>
<linearGradient id="skyGrad" gradientUnits="userSpaceOnUse" x1="0" y1="56" x2="0" y2="566">
<stop offset="0" stop-color="#070b1c"/>
<stop offset="0.35" stop-color="#0d1a38"/>
<stop offset="0.7" stop-color="#14304e"/>
<stop offset="1" stop-color="#0f3d4d"/>
</linearGradient>
<linearGradient id="waterGrad" gradientUnits="userSpaceOnUse" x1="0" y1="566" x2="0" y2="700">
<stop offset="0" stop-color="#0f4454"/>
<stop offset="0.35" stop-color="#0c3140"/>
<stop offset="1" stop-color="#061c2a"/>
</linearGradient>
<linearGradient id="goldGrad" gradientUnits="userSpaceOnUse" x1="556" y1="148" x2="644" y2="244">
<stop offset="0" stop-color="#f7dc95"/>
<stop offset="1" stop-color="#dfb25a"/>
</linearGradient>
<linearGradient id="horizonGrad" gradientUnits="userSpaceOnUse" x1="128" y1="0" x2="772" y2="0">
<stop offset="0" stop-color="#4d9aa0" stop-opacity="0"/>
<stop offset="0.45" stop-color="#4d9aa0" stop-opacity="0.25"/>
<stop offset="0.72" stop-color="#5fb3b8" stop-opacity="0.5"/>
<stop offset="1" stop-color="#4d9aa0" stop-opacity="0.05"/>
</linearGradient>
<radialGradient id="moonGlow">
<stop offset="0" stop-color="#f4d68c" stop-opacity="0.5"/>
<stop offset="0.55" stop-color="#f4d68c" stop-opacity="0.16"/>
<stop offset="1" stop-color="#f4d68c" stop-opacity="0"/>
</radialGradient>
<linearGradient id="fadeGrad" gradientUnits="userSpaceOnUse" x1="0" y1="566" x2="0" y2="700">
<stop offset="0" stop-color="#ffffff" stop-opacity="0.85"/>
<stop offset="1" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<clipPath id="badgeClip"><circle cx="450" cy="378" r="322"/></clipPath>
<clipPath id="waterClip"><rect x="128" y="566" width="644" height="134"/></clipPath>
<mask id="crescentMask" maskUnits="userSpaceOnUse" x="530" y="125" width="150" height="150">
<circle cx="600" cy="198" r="52" fill="#ffffff"/>
<circle cx="622" cy="185" r="48" fill="#000000"/>
</mask>
<mask id="fadeMask" maskUnits="userSpaceOnUse" x="120" y="560" width="660" height="146">
<rect x="120" y="560" width="660" height="146" fill="url(#fadeGrad)"/>
</mask>
<path id="star" d="M 0 -9 C 1.6 -3 3 -1.6 9 0 C 3 1.6 1.6 3 0 9 C -1.6 3 -3 1.6 -9 0 C -3 -1.6 -1.6 -3 0 -9 Z"/>
<!-- heron silhouette -->
<g id="heron">
<path d="M 452 500 C 450 534 449 568 451 598 C 452 620 452 636 451 654" fill="none" stroke="#04060e" stroke-width="7" stroke-linecap="round"/>
<path d="M 488 458 C 493 492 498 524 496 558 C 494 592 494 622 495 652" fill="none" stroke="#04060e" stroke-width="7" stroke-linecap="round"/>
<path fill="#04060e" d="M 354 498 C 328 512 306 530 290 550 C 310 536 334 518 354 508 Z"/>
<path fill="#04060e" d="M 368 484 C 348 498 330 516 316 538 C 334 520 352 502 370 492 Z"/>
<path fill="#04060e" d="M 310 473 C 345 438 388 418 428 413 C 452 410 468 407 480 400 C 487 376 497 346 522 313 C 530 303 540 299 548 303 C 557 307 564 312 568 318 C 594 321 624 327 652 335 C 628 339 598 341 576 340 C 566 346 556 351 550 356 C 530 364 518 378 513 398 C 509 414 505 430 500 446 C 496 468 484 490 458 505 C 430 519 392 521 362 513 C 340 507 318 491 310 473 Z"/>
<path fill="#04060e" d="M 532 312 C 514 300 498 294 480 292 C 496 300 510 308 526 318 Z"/>
<circle cx="553" cy="314" r="3.2" fill="#e9c46a"/>
</g>
</defs>
<!-- background card -->
<rect x="10" y="10" width="880" height="950" rx="46" fill="#0d1830"/>
<rect x="22" y="22" width="856" height="926" rx="36" fill="none" stroke="#d9b36a" stroke-opacity="0.22"/>
<!-- night scene inside the badge -->
<g clip-path="url(#badgeClip)">
<rect x="128" y="56" width="644" height="510" fill="url(#skyGrad)"/>
<circle cx="600" cy="198" r="88" fill="url(#moonGlow)"/>
<!-- stars -->
<g fill="#ffe9b8">
<use href="#star" xlink:href="#star" transform="translate(238 186)" opacity="0.9"/>
<use href="#star" xlink:href="#star" transform="translate(298 126) scale(0.65)" opacity="0.7"/>
<use href="#star" xlink:href="#star" transform="translate(368 204) scale(0.5)" opacity="0.55"/>
<use href="#star" xlink:href="#star" transform="translate(432 112) scale(1.15)" opacity="0.95"/>
<use href="#star" xlink:href="#star" transform="translate(508 166) scale(0.6)" opacity="0.65"/>
<use href="#star" xlink:href="#star" transform="translate(618 122) scale(0.85)" opacity="0.8"/>
<use href="#star" xlink:href="#star" transform="translate(706 210) scale(0.55)" opacity="0.6"/>
<use href="#star" xlink:href="#star" transform="translate(684 304) scale(0.65)" opacity="0.5"/>
<use href="#star" xlink:href="#star" transform="translate(212 304) scale(0.6)" opacity="0.65"/>
<use href="#star" xlink:href="#star" transform="translate(326 284) scale(0.45)" opacity="0.5"/>
<use href="#star" xlink:href="#star" transform="translate(756 300) scale(0.5)" opacity="0.5"/>
<use href="#star" xlink:href="#star" transform="translate(176 240) scale(0.5)" opacity="0.5"/>
<circle cx="268" cy="246" r="2"/>
<circle cx="352" cy="156" r="1.8"/>
<circle cx="462" cy="204" r="2"/>
<circle cx="548" cy="100" r="1.8"/>
<circle cx="648" cy="140" r="2"/>
<circle cx="664" cy="168" r="1.6"/>
<circle cx="196" cy="270" r="1.8"/>
<circle cx="408" cy="82" r="2"/>
<circle cx="588" cy="126" r="1.6"/>
<circle cx="242" cy="344" r="1.8"/>
<circle cx="520" cy="248" r="1.6"/>
<circle cx="700" cy="348" r="2"/>
</g>
<!-- crescent moon -->
<circle cx="600" cy="198" r="52" fill="url(#goldGrad)" mask="url(#crescentMask)"/>
<!-- water -->
<rect x="128" y="566" width="644" height="134" fill="url(#waterGrad)"/>
<!-- heron standing in the water -->
<use href="#heron" xlink:href="#heron"/>
<rect x="128" y="566" width="644" height="134" fill="#0d3140" opacity="0.4"/>
<rect x="128" y="565" width="644" height="2" fill="url(#horizonGrad)"/>
<!-- heron reflection -->
<g clip-path="url(#waterClip)">
<g mask="url(#fadeMask)">
<use href="#heron" xlink:href="#heron" transform="translate(0 1132) scale(1 -1)" opacity="0.15"/>
</g>
</g>
<!-- moonlight shimmer on the water -->
<g fill="#e9c979">
<rect x="558" y="578" width="84" height="5" rx="2.5" opacity="0.5"/>
<rect x="570" y="596" width="60" height="4" rx="2" opacity="0.38"/>
<rect x="548" y="618" width="104" height="5" rx="2.5" opacity="0.3"/>
<rect x="567" y="642" width="60" height="4" rx="2" opacity="0.22"/>
<rect x="582" y="654" width="28" height="3.5" rx="1.75" opacity="0.18"/>
</g>
<!-- ripples -->
<g fill="none" stroke="#9fd8d8">
<ellipse cx="450" cy="566" rx="24" ry="5" stroke-width="2" opacity="0.5"/>
<ellipse cx="450" cy="566" rx="40" ry="8.5" stroke-width="1.5" opacity="0.28"/>
<ellipse cx="495" cy="566" rx="20" ry="4.5" stroke-width="2" opacity="0.45"/>
<ellipse cx="495" cy="566" rx="34" ry="7.5" stroke-width="1.5" opacity="0.25"/>
<ellipse cx="296" cy="602" rx="54" ry="8" stroke-width="1.5" opacity="0.22"/>
<ellipse cx="232" cy="570" rx="26" ry="4" stroke-width="1.5" opacity="0.18"/>
<ellipse cx="560" cy="610" rx="30" ry="4.5" stroke-width="1.5" opacity="0.15"/>
<ellipse cx="580" cy="648" rx="34" ry="5" stroke-width="1.5" opacity="0.14"/>
<ellipse cx="360" cy="672" rx="36" ry="5" stroke-width="1.5" opacity="0.13"/>
</g>
<!-- open book floating on the water -->
<g>
<path d="M 256 597 C 269 588 284 588 296 595 C 308 588 323 588 336 597 L 336 609 C 323 601 308 601 296 607 C 284 601 269 601 256 609 Z" fill="#8a5a33"/>
<path d="M 258 594 C 270 586 284 586 296 593 C 308 586 322 586 334 594 L 334 606 C 322 599 308 599 296 605 C 284 599 270 599 258 606 Z" fill="#f2e9d6"/>
<path d="M 296 593 L 296 605" fill="none" stroke="#c9a45f" stroke-width="1.5"/>
<path d="M 265 592 C 272 587.5 280 587.5 288 591 M 304 591 C 312 587.5 320 587.5 327 592" fill="none" stroke="#c9a45f" stroke-width="1" opacity="0.55"/>
</g>
</g>
<!-- badge rings and cardinal ornaments -->
<circle cx="450" cy="378" r="322" fill="none" stroke="#d9b36a" stroke-width="3"/>
<circle cx="450" cy="378" r="314" fill="none" stroke="#d9b36a" opacity="0.15"/>
<circle cx="450" cy="378" r="334" fill="none" stroke="#d9b36a" opacity="0.5"/>
<g fill="#d9b36a">
<use href="#star" xlink:href="#star" transform="translate(450 44)"/>
<use href="#star" xlink:href="#star" transform="translate(116 378) scale(0.6)" opacity="0.9"/>
<use href="#star" xlink:href="#star" transform="translate(784 378) scale(0.6)" opacity="0.9"/>
<use href="#star" xlink:href="#star" transform="translate(450 712) scale(0.6)" opacity="0.9"/>
</g>
<!-- divider ornament -->
<g stroke="#d9b36a" stroke-width="1.5" opacity="0.7">
<line x1="268" y1="752" x2="414" y2="752"/>
<line x1="486" y1="752" x2="632" y2="752"/>
</g>
<path d="M 450 744 L 458 752 L 450 760 L 442 752 Z" fill="#d9b36a"/>
<!-- wordmark -->
<text x="456" y="850" text-anchor="middle" font-family="Georgia, 'Times New Roman', 'Palatino Linotype', 'Book Antiqua', serif" font-size="84" letter-spacing="12" fill="#f2e9d6">NIGHT HERON</text>
<text x="452" y="912" text-anchor="middle" font-family="Georgia, 'Times New Roman', 'Palatino Linotype', 'Book Antiqua', serif" font-size="20" letter-spacing="4" fill="#c9a45f">AN INDEPENDENT BOOKSHOP · OPEN AFTER DARK</text>
</svg>
