← 回到列表
#33
gpt-6-luna
openai
codex 2026-10-20 22:58（17 天前）
耗时0.04 s
首字延迟—
输入字节未采集
输入 tokens—
输出字节15.5 KB
tokens—
元素 / 动画174 / 0
配色数97
来源guest
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 820" role="img" aria-labelledby="title desc">
<title id="title">湾风正好：鹈鹕骑车记</title>
<desc id="desc">一只鹈鹕沿着旧金山海湾骑行，金门大桥映在清晨的水面上。</desc>
<defs>
<linearGradient id="paper" x2="0" y2="1"><stop stop-color="#faf3e4"/><stop offset="1" stop-color="#f2e8d3"/></linearGradient>
<linearGradient id="sky" x2="0" y2="1"><stop stop-color="#f8edda"/><stop offset="1" stop-color="#f7e4c6"/></linearGradient>
<linearGradient id="bay" x2="0" y2="1"><stop stop-color="#9fc2b9"/><stop offset="1" stop-color="#6e9996"/></linearGradient>
<linearGradient id="feather" x2="0" y2="1"><stop stop-color="#fff9e9"/><stop offset="1" stop-color="#e7ddc5"/></linearGradient>
<linearGradient id="bill" x2="0" y2="1"><stop stop-color="#e99b51"/><stop offset="1" stop-color="#c96543"/></linearGradient>
<linearGradient id="pouch" x2="0" y2="1"><stop stop-color="#e6a05c"/><stop offset="1" stop-color="#c85e47"/></linearGradient>
<linearGradient id="frame" x2="1" y2="1"><stop stop-color="#739b91"/><stop offset="1" stop-color="#3c6d70"/></linearGradient>
<pattern id="grain" width="150" height="150" patternUnits="userSpaceOnUse">
<filter id="noise"><feTurbulence type="fractalNoise" baseFrequency=".78" numOctaves="2" stitchTiles="stitch"/></filter>
<rect width="150" height="150" filter="url(#noise)" opacity=".14"/>
</pattern>
<clipPath id="pageClip"><rect x="0" y="0" width="1200" height="820" rx="7"/></clipPath>
</defs>
<style><![CDATA[:root { color-scheme: light; }
text { font-family: "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", sans-serif; fill: #294d53; }
.hair { stroke: #78928a; stroke-width: 1.4; fill: none; }
.ink { stroke: #294d53; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fine { stroke: #496d70; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.smallcap { font-size: 12px; letter-spacing: 2.4px; }
.button { cursor: pointer; }
.button:focus { outline: none; }
.button:focus .buttonBox { stroke: #c96543; stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) {
.drift { animation: none !important; }
}]]></style>
<g clip-path="url(#pageClip)">
<rect width="1200" height="820" fill="url(#paper)"/>
<path d="M0 0H1200V177H0Z" fill="url(#sky)"/>
<g aria-label="刊头">
<circle cx="61" cy="57" r="19" fill="#d9955a"/>
<path d="M48 60q12-14 25-2M53 66q9-8 18-1" fill="none" stroke="#fff2d8" stroke-width="2" stroke-linecap="round"/>
<text x="92" y="51" font-size="15" font-weight="700" letter-spacing="2">海岸线志</text>
<text x="92" y="72" class="smallcap" font-size="10">COASTAL NOTES · 第 08 期</text>
<text x="1138" y="55" text-anchor="end" class="smallcap" font-size="10">旧金山 · 四月清晨</text>
<text x="1138" y="77" text-anchor="end" font-size="12" fill="#6c8984">37°48′N 122°28′W</text>
<path d="M42 96H1158" class="hair" opacity=".72"/>
<text x="46" y="135" font-size="34" font-weight="650" letter-spacing="1.5">湾风正好</text>
<text x="259" y="132" font-size="15" fill="#66827d">一只鹈鹕，沿着海湾把早晨骑亮</text>
<text x="1152" y="132" text-anchor="end" class="smallcap" font-size="10">骑行札记 / 01</text>
</g>
<path d="M42 157H1158" class="hair" opacity=".72"/>
<rect x="0" y="158" width="1200" height="263" fill="url(#sky)"/>
<circle cx="1022" cy="222" r="32" fill="#e7b66f" opacity=".8"/>
<circle cx="1022" cy="222" r="45" fill="none" stroke="#e7b66f" stroke-width="1.2" opacity=".38"/>
<path d="M0 343Q140 321 286 340T571 338T855 341T1200 332V421H0Z" fill="#e6ddc6" opacity=".68"/>
<path d="M0 333Q94 288 172 311Q223 280 309 319Q376 287 462 321Q560 288 650 331L650 383H0Z" fill="#bfd0bd"/>
<path d="M690 326Q776 289 859 317Q933 277 1025 315Q1113 291 1200 323V389H690Z" fill="#b4c9b9"/>
<g fill="none" stroke-linecap="round" stroke-linejoin="round">
<path d="M40 361Q204 325 379 354Q532 380 706 350Q875 323 1157 359" stroke="#f7e9d0" stroke-width="8" opacity=".7"/>
<path d="M55 354Q230 323 398 355Q544 382 715 350Q891 319 1148 355" stroke="#c96c50" stroke-width="5"/>
<path d="M295 341L287 226L306 225L321 345M748 344L737 214L758 213L775 341" stroke="#bf634b" stroke-width="6"/>
<path d="M287 226Q303 191 315 225M737 214Q750 180 765 213" stroke="#bf634b" stroke-width="5"/>
<path d="M299 232L151 342M302 234L207 337M309 235L357 347M751 221L638 359M754 221L841 333M759 220L932 337" stroke="#d68461" stroke-width="1.5" opacity=".9"/>
<path d="M299 227V336M750 216V335" stroke="#b95748" stroke-width="2.5"/>
</g>
<path d="M0 367Q174 351 345 370T690 369T1026 366T1200 370V490H0Z" fill="url(#bay)"/>
<path d="M0 385Q133 375 270 388T545 386T822 387T1100 383T1200 386" fill="none" stroke="#d8e1cc" stroke-width="2" opacity=".6"/>
<g fill="none" stroke="#e6e5ce" stroke-width="2" stroke-linecap="round" opacity=".68">
<path d="M63 411h65M157 425h82M309 408h56M815 419h94M984 402h69M1077 428h45"/>
<path d="M438 400h43M591 429h62M737 405h37M190 448h48M907 446h57"/>
</g>
<g class="fine" fill="none">
<path d="M165 398v-27l18 25M169 399l-10 0q13 12 27 0z" stroke="#557b7c"/>
<path d="M809 238q9-9 17 0q8-9 16 0M870 259q7-7 14 0q7-7 14 0M110 264q6-6 12 0q6-6 12 0" stroke="#597d7b" stroke-width="1.8"/>
</g>
<path d="M0 477Q203 466 404 478T810 477T1200 474V617H0Z" fill="#d5d5bd"/>
<path d="M0 490Q240 478 476 490T955 488T1200 485V617H0Z" fill="#e6dfc9"/>
<path d="M0 600Q320 588 630 600T1200 594V649H0Z" fill="#c7cbb5"/>
<path d="M0 612Q250 603 510 614T1020 609T1200 611V650H0Z" fill="#d5d1ba"/>
<path d="M0 619Q312 608 627 620T1200 616M0 641H1200" fill="none" stroke="#aeb5a3" stroke-width="1.5" opacity=".65"/>
<g fill="none" stroke="#f9f0dd" stroke-width="2" opacity=".76">
<path d="M117 626h57M213 626h45M927 624h75M1056 622h44"/>
</g>
<text x="67" y="575" class="smallcap" font-size="9" fill="#77908a">海湾步道 → 码头</text>
<ellipse id="groundShadow" cx="574" cy="600" rx="206" ry="13" fill="#3d6664" opacity=".17"/>
<g id="farLeg">
<path id="farThigh" d="" fill="none" stroke="#cdbf9f" stroke-width="17" stroke-linecap="round"/>
<path id="farShin" d="" fill="none" stroke="#e2d6bb" stroke-width="11" stroke-linecap="round"/>
<circle id="farKnee" cx="0" cy="0" r="8" fill="#e4d7bb" stroke="#69827b" stroke-width="1.5"/>
<path id="farFoot" d="" fill="#d88a4e" stroke="#294d53" stroke-width="1.8" stroke-linejoin="round"/>
</g>
<g id="rearWheel" fill="none" stroke-linecap="round">
<circle cx="430" cy="528" r="75" stroke="#315a60" stroke-width="5"/>
<circle cx="430" cy="528" r="69" stroke="#f3ead8" stroke-width="2"/>
<g stroke="#688985" stroke-width="1.4" opacity=".9">
<path d="M430 453V603M355 528H505M377 475L483 581M483 475L377 581M401 459L459 597M497 499L363 557M459 459L401 597M363 499L497 557"/>
</g>
<circle cx="430" cy="528" r="6" fill="#d88950" stroke="#294d53" stroke-width="2"/>
</g>
<g id="frontWheel" fill="none" stroke-linecap="round">
<circle cx="705" cy="528" r="75" stroke="#315a60" stroke-width="5"/>
<circle cx="705" cy="528" r="69" stroke="#f3ead8" stroke-width="2"/>
<g stroke="#688985" stroke-width="1.4" opacity=".9">
<path d="M705 453V603M630 528H780M652 475L758 581M758 475L652 581M676 459L734 597M772 499L638 557M734 459L676 597M638 499L772 557"/>
</g>
<circle cx="705" cy="528" r="6" fill="#d88950" stroke="#294d53" stroke-width="2"/>
</g>
<g fill="none" stroke="url(#frame)" stroke-width="8" stroke-linecap="round" stroke-linejoin="round">
<path d="M430 528L528 442L589 512L430 528"/>
<path d="M528 442L674 428L589 512"/>
<path d="M674 428L705 528"/>
</g>
<g fill="none" stroke="#294d53" stroke-width="3" stroke-linecap="round">
<path d="M430 528L528 442L589 512L430 528M528 442L674 428L589 512M674 428L705 528"/>
<path d="M520 435L540 438M515 440l-5-10M665 420l8 3M674 428q-1-15 12-18M674 410h27q8 0 11 6"/>
<path d="M584 512h11M589 512l-14 18M589 512l14-18" stroke-width="4"/>
</g>
<path d="M504 436q24-12 49 0l-2 8h-47z" fill="#c9684a" stroke="#294d53" stroke-width="2"/>
<circle cx="589" cy="512" r="11" fill="#df9852" stroke="#294d53" stroke-width="2"/>
<g id="crank" fill="none" stroke="#294d53" stroke-width="4" stroke-linecap="round">
<path d="M589 512L614 512M589 512L564 512"/>
</g>
<g id="pedals" fill="none" stroke="#294d53" stroke-width="4" stroke-linecap="round">
<path d="M613 512h20M565 512h-20"/>
</g>
<g fill="#c96d4c" stroke="#294d53" stroke-width="1.5">
<circle cx="430" cy="528" r="3"/><circle cx="705" cy="528" r="3"/>
</g>
<g id="birdBody">
<path d="M500 381Q474 366 457 355Q470 380 488 393Z" fill="#d8c9a7" class="ink"/>
<path d="M492 389Q466 387 451 377Q466 398 489 402Z" fill="#eee3c8" class="fine"/>
<path d="M520 367Q552 345 587 367Q603 380 597 398Q568 410 529 397Z" fill="#ded3b9" stroke="#71877e" stroke-width="2"/>
<path d="M536 376q27-13 48 3M536 385q25-9 49 3" fill="none" stroke="#b5aa91" stroke-width="2"/>
<path d="M493 384Q501 358 530 348Q559 335 588 350Q614 363 623 389Q613 416 585 432Q555 445 524 426Q500 412 493 384Z" fill="url(#feather)" stroke="#294d53" stroke-width="2.4" stroke-linejoin="round"/>
<path d="M507 390Q519 369 540 363Q563 357 579 371Q558 374 544 387Q532 399 526 416Q511 409 507 390Z" fill="#f8f0dc" opacity=".86"/>
<path d="M531 416q19 8 38 2M540 423q18 6 34 0" fill="none" stroke="#c9bea4" stroke-width="1.6" stroke-linecap="round"/>
<path d="M561 369Q568 340 586 315Q607 285 639 274Q653 269 669 275Q661 293 642 300Q621 309 611 331Q602 351 591 379Z" fill="url(#feather)" stroke="#294d53" stroke-width="2.4" stroke-linejoin="round"/>
<path d="M584 349Q594 320 619 300Q634 289 650 286" fill="none" stroke="#fffdf2" stroke-width="5" opacity=".85" stroke-linecap="round"/>
<path d="M642 272Q649 250 672 250Q692 251 699 270Q693 289 674 293Q653 291 642 272Z" fill="#fff8e7" stroke="#294d53" stroke-width="2.3"/>
<path d="M646 264Q651 249 670 248Q685 248 692 258Q671 257 654 270Z" fill="#d7b785" stroke="#8d8068" stroke-width="1.5"/>
<path d="M663 268q5-4 10 0" fill="none" stroke="#294d53" stroke-width="2" stroke-linecap="round"/>
<circle cx="672" cy="267" r="2.1" fill="#294d53"/>
<circle cx="672.7" cy="266.2" r=".65" fill="#fff9e8"/>
<path d="M685 270Q728 265 790 283Q797 285 798 291Q796 295 788 294Q732 291 685 282Z" fill="url(#bill)" stroke="#294d53" stroke-width="2.2" stroke-linejoin="round"/>
<path d="M695 274Q742 272 785 285" fill="none" stroke="#f7c47b" stroke-width="2" stroke-linecap="round" opacity=".85"/>
<path d="M793 286l8 2-7 3" fill="#a94f43"/>
<path d="M687 281Q713 289 789 294Q778 313 761 328Q744 340 728 331Q709 319 695 291Z" fill="url(#pouch)" stroke="#294d53" stroke-width="2.2" stroke-linejoin="round"/>
<path d="M699 292Q718 314 738 322Q756 328 772 311" fill="none" stroke="#f1b26e" stroke-width="2.2" stroke-linecap="round"/>
<path d="M704 287Q735 295 778 297" fill="none" stroke="#a94f43" stroke-width="1.5" opacity=".72"/>
<path d="M526 365Q549 357 572 368Q598 380 622 389Q647 398 674 413Q658 419 643 416Q613 409 590 405Q555 402 532 389Q522 379 526 365Z" fill="#efe5cf" stroke="#294d53" stroke-width="2.2" stroke-linejoin="round"/>
<path d="M544 374Q573 380 603 394Q628 402 653 412" fill="none" stroke="#c8bda4" stroke-width="2" stroke-linecap="round"/>
<path d="M551 384Q586 388 615 401M558 392Q591 396 625 408M643 411l25 3M637 407l29 4" fill="none" stroke="#d3c7ad" stroke-width="1.6" stroke-linecap="round"/>
<path d="M664 410Q671 408 676 413Q676 418 670 420Q665 419 662 416Z" fill="#e5d8bd" stroke="#294d53" stroke-width="1.8"/>
<path d="M533 366q18-8 35-2M537 370q18-5 34 1" fill="none" stroke="#fff9eb" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="nearLeg">
<path id="nearThigh" d="" fill="none" stroke="#f0dcb9" stroke-width="19" stroke-linecap="round"/>
<path id="nearShin" d="" fill="none" stroke="#e9c99b" stroke-width="12" stroke-linecap="round"/>
<circle id="nearKnee" cx="0" cy="0" r="9" fill="#e6bd88" stroke="#294d53" stroke-width="1.6"/>
<path id="nearFoot" d="" fill="#d8874d" stroke="#294d53" stroke-width="2" stroke-linejoin="round"/>
<path id="nearWeb" d="" fill="none" stroke="#f3b873" stroke-width="1.4" stroke-linecap="round"/>
</g>
<g fill="none" stroke="#68877c" stroke-width="2" stroke-linecap="round">
<path d="M34 610q9-26 17-35M48 610q2-18 15-27M69 612q-1-20 9-31M1122 610q-5-23-18-32M1140 611q2-19 15-30M1160 610q7-21 17-27"/>
</g>
<g fill="#d89561">
<circle cx="51" cy="572" r="3"/><circle cx="63" cy="582" r="2.5"/><circle cx="1110" cy="578" r="2.6"/><circle cx="1147" cy="580" r="3"/>
</g>
<path d="M42 665H1158" class="hair" opacity=".76"/>
<text x="46" y="697" font-size="14" font-weight="600">海湾慢行，风把翅膀吹成帆。</text>
<text x="46" y="720" class="smallcap" font-size="9" fill="#6d8780">沿岸小径 · 从码头到晨光</text>
<g id="controls" aria-label="动画控制">
<g id="playButton" class="button" tabindex="0" role="button" aria-label="暂停动画">
<rect class="buttonBox" x="642" y="682" width="124" height="42" rx="21" fill="#f7efde" stroke="#8ba097" stroke-width="1.4"/>
<path id="playIcon" d="M660 696v14l12-7z" fill="#c66a4b"/>
<text id="playLabel" x="681" y="708" font-size="12">暂停</text>
</g>
<g id="restartButton" class="button" tabindex="0" role="button" aria-label="重新开始">
<rect class="buttonBox" x="779" y="682" width="104" height="42" rx="21" fill="#f7efde" stroke="#8ba097" stroke-width="1.4"/>
<path d="M801 703a8 8 0 1 0 2-6M799 694v7h7" fill="none" stroke="#557b79" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<text x="817" y="708" font-size="12">重来</text>
</g>
<g id="speedControl" class="button" tabindex="0" role="slider" aria-label="动画速度" aria-valuemin="0.5" aria-valuemax="1.8" aria-valuenow="1">
<text x="906" y="697" font-size="11" fill="#66827d">慢 </text>
<path d="M936 700H1080" stroke="#9eafa3" stroke-width="3" stroke-linecap="round"/>
<path d="M936 700H984" stroke="#c66a4b" stroke-width="3" stroke-linecap="round"/>
<circle id="speedKnob" cx="984" cy="700" r="7" fill="#c66a4b" stroke="#fff5df" stroke-width="2"/>
<text x="1092" y="697" font-size="11" fill="#66827d">快</text>
<text id="speedReadout" x="1008" y="721" font-size="10" fill="#66827d">1.0×</text>
</g>
</g>
<text x="1152" y="750" text-anchor="end" font-size="10" fill="#8a9888">纸上骑行 / 湾区晨刊</text>
<path d="M42 766H1158" class="hair" opacity=".72"/>
<text x="46" y="788" class="smallcap" font-size="9" fill="#7e9187">一路向海，慢慢就好。</text>
<text x="1152" y="788" text-anchor="end" class="smallcap" font-size="9" fill="#7e9187">海岸线志 · 春日号</text>
<rect width="1200" height="820" fill="url(#grain)" opacity=".16" pointer-events="none"/>
</g>
</svg>