疑似 GPT-6-Sol 的画风

Novert 2026-09-17 12:16 1
创建一个HTML，内容是SVG绘制一个鹈鹕骑莎布-尼古拉丝 的2D动画
HTML
<!doctype html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <meta name="theme-color" content="#101c2a">

  <title>鹈鹕骑莎布-尼古拉丝 · SVG 2D 动画</title>

  <style>

    :root { color-scheme: dark; --cream:#f2e9cb; --gold:#eac17b; }

    * { box-sizing:border-box; }

    html,body { margin:0; min-height:100%; }

    body { display:grid; place-items:center; padding:22px; background:radial-gradient(circle at 50% 20%,#284054,#101b28 55%,#090f19); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--cream); }

    .frame { width:min(1200px,100%); }

    .topline { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:0 4px 12px; }

    h1 { margin:0; font-size:clamp(20px,2.6vw,32px); font-weight:700; letter-spacing:.08em; }

    .subtitle { margin:5px 0 0; color:#b7c5c0; font-size:13px; letter-spacing:.16em; }

    .controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

    button { appearance:none; border:1px solid #78989080; border-radius:999px; background:#192d3e; color:#f3e8c9; font:600 13px system-ui,sans-serif; padding:8px 14px; cursor:pointer; transition:background .2s,transform .2s; }

    button:hover { background:#29485a; transform:translateY(-1px); }

    button:focus-visible { outline:2px solid #efca83; outline-offset:3px; }

    .scene { display:block; width:100%; height:auto; border:1px solid #69817d66; border-radius:18px; box-shadow:0 24px 70px #0008, inset 0 0 0 1px #fff1; background:#101d2b; overflow:hidden; }

    .caption { display:flex; justify-content:space-between; gap:16px; padding:11px 4px 0; color:#b4c4bd; font-size:12px; letter-spacing:.07em; }

    svg * { vector-effect:non-scaling-stroke; }

    .star { animation:twinkle 3s ease-in-out infinite alternate; }

    .star:nth-of-type(3n) { animation-delay:-1.4s; }

    .star:nth-of-type(4n) { animation-delay:-2.1s; }

    .mist { animation:mist 12s ease-in-out infinite alternate; }

    .mist.two { animation-duration:16s; animation-direction:alternate-reverse; }

    .beast { animation:gallop 1.2s ease-in-out infinite; transform-origin:590px 490px; }

    .front-leg { animation:frontStep 1.2s ease-in-out infinite; transform-origin:770px 520px; }

    .front-leg.other { animation-delay:-.6s; transform-origin:700px 530px; }

    .rear-leg { animation:rearStep 1.2s ease-in-out infinite; transform-origin:385px 525px; }

    .rear-leg.other { animation-delay:-.6s; transform-origin:470px 530px; }

    .tentacle { animation:sway 2.8s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:85% 80%; }

    .tentacle.t2 { animation-delay:-.9s; animation-duration:3.4s; transform-origin:0% 80%; }

    .tentacle.t3 { animation-delay:-1.5s; animation-duration:3.1s; transform-origin:85% 80%; }

    .tentacle.t4 { animation-delay:-1.8s; animation-duration:3.7s; transform-origin:0% 80%; }

    .tail { animation:tail 1.7s ease-in-out infinite alternate; transform-origin:355px 447px; }

    .rider { animation:riderBounce 1.2s ease-in-out infinite; transform-origin:520px 355px; }

    .wing { animation:flap 1.2s ease-in-out infinite; transform-origin:450px 265px; }

    .crest { animation:crest 1.2s ease-in-out infinite alternate; transform-origin:596px 157px; }

    .reins { animation:reins 1.2s ease-in-out infinite; }

    .moon-halo { animation:halo 5s ease-in-out infinite alternate; transform-origin:940px 145px; }

    .run-dust { animation:dust 1.2s ease-out infinite; }

    .run-dust.d2 { animation-delay:-.55s; }

    .run-dust.d3 { animation-delay:-.9s; }

    .eye-glow { animation:eye 2.6s ease-in-out infinite alternate; }

    .ground-lines { animation:ground 1.2s linear infinite; }

    .paused *, .paused *::before, .paused *::after { animation-play-state:paused !important; }

    @keyframes twinkle { from { opacity:.3; } to { opacity:1; } }

    @keyframes mist { from { transform:translateX(-20px); opacity:.25; } to { transform:translateX(22px); opacity:.5; } }

    @keyframes gallop { 0%,100% { transform:translateY(0) rotate(-.35deg); } 50% { transform:translateY(-13px) rotate(.6deg); } }

    @keyframes riderBounce { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(2deg); } }

    @keyframes frontStep { 0%,100% { transform:rotate(14deg); } 50% { transform:rotate(-19deg); } }

    @keyframes rearStep { 0%,100% { transform:rotate(-20deg); } 50% { transform:rotate(17deg); } }

    @keyframes sway { from { transform:rotate(-5deg); } to { transform:rotate(8deg); } }

    @keyframes tail { from { transform:rotate(-9deg); } to { transform:rotate(10deg); } }

    @keyframes flap { 0%,100% { transform:rotate(6deg); } 50% { transform:rotate(-28deg); } }

    @keyframes crest { from { transform:rotate(-5deg); } to { transform:rotate(9deg); } }

    @keyframes reins { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

    @keyframes halo { from { opacity:.28; transform:scale(.96); } to { opacity:.55; transform:scale(1.05); } }

    @keyframes dust { 0% { transform:translate(0,0) scale(.65); opacity:0; } 25% { opacity:.5; } 100% { transform:translate(-95px,-19px) scale(1.55); opacity:0; } }

    @keyframes eye { from { opacity:.65; } to { opacity:1; } }

    @keyframes ground { to { transform:translateX(-170px); } }

    @media (prefers-reduced-motion:reduce) { svg * { animation:none !important; } }

  </style>

</head>

<body>

  <main class="frame">

    <div class="topline">

      <div><h1>月下奇骑</h1><p class="subtitle">鹈鹕 × 莎布-尼古拉丝 · 一场荒诞的夜行</p></div>

      <div class="controls"><button id="pause" type="button" aria-pressed="false">⏸ 暂停</button><button id="speed" type="button" aria-pressed="false">◷ 慢动作</button></div>

    </div>

    <svg id="art" class="scene" viewBox="0 0 1200 750" role="img" aria-labelledby="svg-title svg-desc" xmlns="http://www.w3.org/2000/svg">

      <title id="svg-title">鹈鹕骑着莎布-尼古拉丝奔过月下荒原</title>

      <desc id="svg-desc">一只戴着护目镜的白色鹈鹕坐在暗色羊角怪物的背上。怪物迈步奔跑，触手摆动，鹈鹕拍翅，月光和尘土随之闪烁。</desc>

      <defs>

        <linearGradient id="sky" x2="0" y2="1"><stop stop-color="#111a32"/><stop offset=".55" stop-color="#244053"/><stop offset="1" stop-color="#526567"/></linearGradient>

        <radialGradient id="moonGlow"><stop stop-color="#f7e9bd" stop-opacity=".5"/><stop offset=".35" stop-color="#d6dfc3" stop-opacity=".16"/><stop offset="1" stop-color="#a4cab8" stop-opacity="0"/></radialGradient>

        <linearGradient id="moon" x2=".2" y2="1"><stop stop-color="#fff6d7"/><stop offset="1" stop-color="#d6ddbf"/></linearGradient>

        <linearGradient id="land" x2="0" y2="1"><stop stop-color="#344848"/><stop offset="1" stop-color="#182d32"/></linearGradient>

        <linearGradient id="beastBody" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#455453"/><stop offset=".4" stop-color="#243b3d"/><stop offset="1" stop-color="#0b2029"/></linearGradient>

        <linearGradient id="horn" x2="1" y2="1"><stop stop-color="#d8c49a"/><stop offset=".55" stop-color="#ad9274"/><stop offset="1" stop-color="#665b54"/></linearGradient>

        <linearGradient id="feather" x2=".4" y2="1"><stop stop-color="#fff7df"/><stop offset=".58" stop-color="#e6e7d4"/><stop offset="1" stop-color="#a9c6be"/></linearGradient>

        <linearGradient id="bill" x2=".1" y2="1"><stop stop-color="#ffe1a3"/><stop offset=".5" stop-color="#edaa69"/><stop offset="1" stop-color="#b96258"/></linearGradient>

        <linearGradient id="pouch" x2=".2" y2="1"><stop stop-color="#e9a277"/><stop offset="1" stop-color="#9f4c58"/></linearGradient>

        <radialGradient id="eyeLight"><stop stop-color="#fff3ad"/><stop offset=".35" stop-color="#f2ca7b"/><stop offset="1" stop-color="#bd6554"/></radialGradient>

        <filter id="blur"><feGaussianBlur stdDeviation="18"/></filter>

        <filter id="soft"><feGaussianBlur stdDeviation="4"/></filter>

        <filter id="glow"><feGaussianBlur stdDeviation="3" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter>

        <pattern id="speckle" width="46" height="46" patternUnits="userSpaceOnUse"><circle cx="8" cy="11" r="1.1" fill="#8b9d87" opacity=".35"/><circle cx="37" cy="33" r="1.5" fill="#b2b398" opacity=".18"/></pattern>

      </defs>



      <!-- Night sky, moon, and distant ruins -->

      <rect width="1200" height="750" fill="url(#sky)"/>

      <g fill="#d9e9df">

        <circle class="star" cx="55" cy="83" r="1.5"/><circle class="star" cx="123" cy="148" r="2"/><circle class="star" cx="205" cy="54" r="1.4"/><circle class="star" cx="285" cy="172" r="1.8"/><circle class="star" cx="344" cy="82" r="1.4"/><circle class="star" cx="426" cy="144" r="1.6"/><circle class="star" cx="492" cy="55" r="2"/><circle class="star" cx="563" cy="113" r="1.2"/><circle class="star" cx="667" cy="73" r="1.8"/><circle class="star" cx="728" cy="156" r="1.3"/><circle class="star" cx="795" cy="72" r="1.4"/><circle class="star" cx="843" cy="214" r="1.2"/><circle class="star" cx="1069" cy="77" r="1.4"/><circle class="star" cx="1133" cy="173" r="1.8"/><circle class="star" cx="1173" cy="95" r="1.2"/>

      </g>

      <circle class="moon-halo" cx="940" cy="145" r="195" fill="url(#moonGlow)"/>

      <circle cx="940" cy="145" r="69" fill="url(#moon)"/>

      <path d="M908 119c9-12 25-15 34-5m20 51c8-6 17-6 22-1m-62 18c9-4 18-1 21 6" fill="none" stroke="#b5bfa9" stroke-width="3" opacity=".35"/>

      <path d="M0 425Q112 345 236 407T488 400q106-102 232-18t249 0q111-76 231-15v383H0Z" fill="#253c49" opacity=".72"/>

      <path d="M0 492q151-63 308-19t285-8q139-59 277-16t330-31v332H0Z" fill="#31494d"/>

      <g fill="#172b36" opacity=".7">

        <path d="M78 465v-90h24v-19h17v104Zm35-5v-51h14v51Zm-35-85 12-16 12 16"/>

        <path d="M1033 441v-70h30v-28h20v99Zm39 0v-42h13v42Zm-39-70 15-22 15 22"/>

        <path d="M177 457v-61h12v-32h10v93Zm-11 0v-45h9v45Z"/>

      </g>

      <g class="mist" fill="#bad2c2" filter="url(#blur)" opacity=".35"><ellipse cx="225" cy="458" rx="245" ry="32"/><ellipse cx="690" cy="472" rx="284" ry="34"/></g>

      <g class="mist two" fill="#bdd1bf" filter="url(#blur)" opacity=".25"><ellipse cx="982" cy="530" rx="270" ry="38"/><ellipse cx="310" cy="545" rx="280" ry="42"/></g>

      <path d="M0 580Q247 555 419 572t375-10q188-26 406 8v180H0Z" fill="url(#land)"/>

      <path d="M0 633q200-16 420 2t402-1q209-17 378 10v106H0Z" fill="#152b31"/>

      <rect y="560" width="1200" height="190" fill="url(#speckle)" opacity=".55"/>

      <g class="ground-lines" stroke="#8ca393" stroke-linecap="round" opacity=".45"><path d="M33 663h103m84-48h80m92 54h137m80-50h109m81 62h116m50-63h92m58 40h143" stroke-width="3"/><path d="M148 703h82m321-22h70m311 25h110" stroke-width="2"/></g>



      <!-- Running shadow and dust -->

      <ellipse cx="587" cy="654" rx="322" ry="32" fill="#061921" opacity=".65" filter="url(#soft)"/>

      <g fill="#b6b09a" opacity=".45"><g class="run-dust"><circle cx="295" cy="635" r="15"/><circle cx="329" cy="637" r="10"/></g><g class="run-dust d2"><circle cx="405" cy="646" r="12"/><circle cx="432" cy="640" r="7"/></g><g class="run-dust d3"><circle cx="752" cy="641" r="14"/><circle cx="780" cy="645" r="8"/></g></g>



      <!-- Shub-Niggurath, imagined as a many-eyed, many-tentacled goat -->

      <g class="beast">

        <!-- tentacles behind the body -->

        <g class="tentacle"><path d="M391 446C278 443 177 404 165 326c-8-53 25-73 54-51 26 21 11 56-16 47" fill="none" stroke="#0b252d" stroke-width="42" stroke-linecap="round"/><path d="M388 442C273 438 181 394 170 327" fill="none" stroke="#69817a" stroke-width="7" opacity=".44" stroke-linecap="round"/><g fill="#a3b49a" opacity=".45"><circle cx="260" cy="414" r="5"/><circle cx="229" cy="397" r="4"/><circle cx="202" cy="373" r="4"/></g></g>

        <g class="tentacle t2"><path d="M695 421C841 402 1018 314 1054 254c22-37 9-64-19-62-30 2-31 34-10 42" fill="none" stroke="#112b34" stroke-width="39" stroke-linecap="round"/><path d="M723 413c161-30 294-103 327-159" fill="none" stroke="#6d8b80" stroke-width="6" opacity=".45" stroke-linecap="round"/><g fill="#a1aa92" opacity=".46"><circle cx="906" cy="354" r="4"/><circle cx="946" cy="330" r="4"/><circle cx="982" cy="305" r="4"/></g></g>

        <g class="tentacle t3"><path d="M419 480C304 546 165 556 109 519c-32-21-28-56 3-63 28-7 43 18 32 36" fill="none" stroke="#102a32" stroke-width="35" stroke-linecap="round"/><path d="M394 495C264 558 154 543 112 517" fill="none" stroke="#7e9b8b" stroke-width="5" opacity=".36"/></g>

        <g class="tentacle t4"><path d="M746 492c120 9 239 57 326 15 55-26 50-69 19-78-27-9-48 14-32 36" fill="none" stroke="#0a242e" stroke-width="33" stroke-linecap="round"/><path d="M765 493c139 17 237 53 308 13" fill="none" stroke="#7e9788" stroke-width="5" opacity=".34"/></g>



        <!-- far legs -->

        <g class="rear-leg other"><path d="M448 504q-26 53-14 91l-42 31 14 22 68-3 14-50 25-73Z" fill="#142c31" stroke="#738b7c" stroke-width="4"/><path d="m391 624-22 23 78 3 11-19Z" fill="#101f27" stroke="#81907b" stroke-width="3"/></g>

        <g class="front-leg other"><path d="M693 506q-17 62 12 91l-7 40 27 10 45-20-10-40 23-65Z" fill="#172f35" stroke="#788d7e" stroke-width="4"/><path d="m695 636-14 13 50 8 40-25-22-13Z" fill="#111f28" stroke="#8d967e" stroke-width="3"/></g>



        <!-- tail -->

        <g class="tail"><path d="M383 442q-101-30-112-102 38 38 100 33" fill="#1d363b" stroke="#84917e" stroke-width="4"/><path d="M276 339q-42-19-47-55 34 18 55 7 10 35-8 48Z" fill="#33484a" stroke="#8b9b85" stroke-width="3"/></g>



        <!-- body silhouette and fur -->

        <path d="M336 424q13-59 86-90 65-26 161-18 69-9 119 22 70 17 96 84 16 66-42 118-54 38-169 43-80 11-175-22-91-24-102-83-9-42 26-54Z" fill="url(#beastBody)" stroke="#8ba18d" stroke-width="5"/>

        <path d="M352 444q-7-38 39-72 13 30 30 4 9-20 31-30 9 30 27 7 21-27 45-30 2 32 32 20 26-11 44-21 0 35 31 28 25-6 38-2 10 30 39 26 32 2 45 23-49-33-110-28-130-3-184 23-68 17-107 52Z" fill="#56665b" opacity=".75"/>

        <path d="M347 494q56 85 185 77 96 18 175-15-65 61-186 38-139-3-174-100Z" fill="#0a222c" opacity=".7"/>

        <g fill="none" stroke="#84998a" stroke-width="4" opacity=".65" stroke-linecap="round"><path d="m358 478-17 22 24-6-10 23 26-9"/><path d="m409 542-8 24 21-11 2 25 21-19"/><path d="m557 576 13 24 15-21 12 21 17-28"/><path d="m703 532 23 12-3-23 25 7"/></g>



        <!-- mysterious eyes on the flank -->

        <g class="eye-glow" filter="url(#glow)"><ellipse cx="430" cy="455" rx="16" ry="11" fill="#dbb66b"/><ellipse cx="534" cy="497" rx="14" ry="10" fill="#d8a46b"/><ellipse cx="621" cy="444" rx="12" ry="9" fill="#d6ae72"/><ellipse cx="679" cy="494" rx="10" ry="7" fill="#d8b979"/></g>

        <g fill="#162b31"><ellipse cx="432" cy="455" rx="5" ry="10"/><ellipse cx="535" cy="497" rx="4" ry="9"/><ellipse cx="622" cy="444" rx="4" ry="8"/><ellipse cx="680" cy="494" rx="3" ry="6"/></g>



        <!-- near legs -->

        <g class="rear-leg"><path d="M390 518q-11 45 24 75l-36 36 18 24 67-6 6-51 9-49Z" fill="#223b3d" stroke="#93a28b" stroke-width="4"/><path d="m379 626-24 22 83 8 24-15-29-17Z" fill="#14262d" stroke="#aaa88b" stroke-width="3"/><path d="m394 649 7-17m7 19 11-16" stroke="#9aa38b" stroke-width="2"/></g>

        <g class="front-leg"><path d="M743 519q34 43 19 73l38 39-18 22-75-10-7-43-11-65Z" fill="#2b4341" stroke="#95a38b" stroke-width="4"/><path d="m711 628-27 18 85 10 31-23-31-15Z" fill="#17282e" stroke="#b1ad8d" stroke-width="3"/><path d="m734 650 8-19m8 20 10-18" stroke="#a8ad91" stroke-width="2"/></g>



        <!-- long neck and goat face -->

        <path d="M683 375q54-58 113-33 49 19 55 76 2 38-33 67-44 37-102 5-38-20-48-65Z" fill="#263d3c" stroke="#8fa18a" stroke-width="5"/>

        <path d="M796 377q48 10 72 38 18 23 2 46-28 29-85 10-29-11-33-45Z" fill="#344948" stroke="#9ca68e" stroke-width="4"/>

        <path d="M844 429q40 4 49 25 5 20-17 31-33 6-69-7Z" fill="#59605a" stroke="#b7af92" stroke-width="4"/>

        <path d="M843 449q18-8 31 4" fill="none" stroke="#202e32" stroke-width="5" stroke-linecap="round"/>

        <ellipse cx="863" cy="447" rx="5" ry="4" fill="#1b2a2e"/>

        <path d="M763 377q-27-3-36 17 17 7 38 5Z" fill="#5a6256" stroke="#a4a68b" stroke-width="3"/>

        <path d="M746 406q17-15 37-7" fill="none" stroke="#0d2530" stroke-width="8" stroke-linecap="round"/>

        <ellipse class="eye-glow" cx="780" cy="410" rx="18" ry="14" fill="url(#eyeLight)" filter="url(#glow)"/>

        <ellipse cx="783" cy="410" rx="6" ry="12" fill="#12242c"/>

        <circle cx="775" cy="405" r="3" fill="#fff4c1"/>

        <path d="M769 476q32 58 15 86-6-28-29-39 11 38-11 49 6-38-23-76" fill="#182f35" stroke="#92a38d" stroke-width="4"/>

        <!-- horns -->

        <path d="M743 372q-17-67 26-105 24-19 50-12-50 10-44 76 17-41 58-56-30 31-35 80Z" fill="url(#horn)" stroke="#d8c5a3" stroke-width="4"/>

        <path d="M791 357q8-75 67-92 36-7 54 13-57-11-79 67Z" fill="url(#horn)" stroke="#d9c5a5" stroke-width="4"/>

        <path d="M760 315q12-22 29-32m14 36q13-25 32-34" stroke="#735e55" stroke-width="3" fill="none" opacity=".55"/>

        <g fill="#859c89" stroke="#bdc1a3" stroke-width="2"><path d="m703 368-14-28 27 11Z"/><path d="m685 404-21-25 29 8Z"/><path d="m699 463-26 7 20 15Z"/></g>



        <!-- saddle and reins -->

        <path d="M397 363q91-39 193-7l36 41q-113-26-232 14Z" fill="#844e4b" stroke="#e1ad7d" stroke-width="5"/>

        <path d="M420 373q77-24 147-9" stroke="#f3ca8c" stroke-width="5" fill="none" stroke-linecap="round"/>

        <path d="M410 396q8 93 51 130m113-139q-5 90 26 135" stroke="#a56d58" stroke-width="15" fill="none" opacity=".8"/>

        <path d="M411 398q9 91 50 128m112-136q-4 88 27 131" stroke="#d7ae77" stroke-width="4" fill="none"/>

        <g class="reins"><path d="M555 349Q671 323 756 390q47 35 65 21" fill="none" stroke="#e6bf84" stroke-width="5" stroke-linecap="round"/><path d="M556 355Q674 342 743 417q29 20 67 16" fill="none" stroke="#9b614e" stroke-width="4" stroke-linecap="round"/><circle cx="813" cy="422" r="8" fill="#d8b985" stroke="#7e614d" stroke-width="3"/></g>



        <!-- pelican rider -->

        <g class="rider">

          <!-- feet and legs -->

          <path d="M474 321q-9 43-28 63m77-52q8 32 28 48" fill="none" stroke="#d89161" stroke-width="13" stroke-linecap="round"/>

          <path d="m449 377-26 10 17 3-8 11 21-9 19-1m75-13 24 10-18 2 11 11-23-10-17-2" fill="#eaaa6b" stroke="#9d6856" stroke-width="3" stroke-linejoin="round"/>

          <!-- trailing scarf -->

          <path d="M573 250q-68-12-119 8-52 14-91-6 25 35 99 35l100-17Z" fill="#9d5552" stroke="#e5a17d" stroke-width="4"/>

          <path d="M374 255q-38 4-48-21l40 11Z" fill="#b76f5e" stroke="#e0a77e" stroke-width="3"/>

          <!-- body and back feathers -->

          <path d="M391 277q-22-52 31-84 48-27 102-4 54 18 70 72-1 53-58 80-43 18-90 1-43-15-55-65Z" fill="url(#feather)" stroke="#d7e2ce" stroke-width="5"/>

          <path d="M406 228q-28 25-17 65-37-18-44-51 35 16 61-14Z" fill="#c9d6c8" stroke="#e9ecd6" stroke-width="4"/>

          <g class="wing"><path d="M438 256q-73-5-105-49 2 52 42 73-36-5-65-21 34 67 115 75 58 1 83-51Z" fill="#eef0dc" stroke="#a7beb4" stroke-width="5"/><path d="M355 259q52 40 106 35m-88-69q44 39 94 47" fill="none" stroke="#bed0bd" stroke-width="5" stroke-linecap="round"/><path d="M320 263q20 14 53 17m-34-61q24 28 59 36" stroke="#97aca7" stroke-width="3" fill="none"/></g>

          <!-- neck -->

          <path d="M534 283q29-22 27-69-4-44 17-64 24-17 41 2 12 18-3 38-18 30 1 60 5 30-22 50-26 18-61-17Z" fill="url(#feather)" stroke="#d9e6d3" stroke-width="5"/>

          <path d="M580 164q-13 30-2 60" fill="none" stroke="#b9cdc3" stroke-width="5" stroke-linecap="round"/>

          <!-- head and tiny crest -->

          <path d="M566 167q-4-38 30-51 33-10 56 14 17 23 3 50-16 27-51 26-32-4-38-39Z" fill="#fff6df" stroke="#dde5d1" stroke-width="5"/>

          <g class="crest" fill="none" stroke="#f4ebcf" stroke-width="7" stroke-linecap="round"><path d="M589 126q-12-20-6-35m17 30q-1-25 12-35m-1 38q13-20 30-23"/></g>

          <!-- goggles -->

          <path d="M578 156q34-18 78-1" fill="none" stroke="#724f4b" stroke-width="12"/>

          <circle cx="628" cy="156" r="21" fill="#6f5a52" stroke="#d8ab78" stroke-width="5"/>

          <circle cx="628" cy="156" r="15" fill="#8ebbc0" stroke="#e1ce9e" stroke-width="2"/>

          <circle cx="630" cy="155" r="7" fill="#192e38"/>

          <circle cx="625" cy="150" r="3" fill="#f9f8dc"/>

          <!-- long beak and hanging pouch -->

          <path d="M647 179q90 7 172 29-83 18-151 4-28-6-28-20Z" fill="url(#bill)" stroke="#f7ce95" stroke-width="4"/>

          <path d="M653 205q45 20 148 9-16 40-56 51-61 18-90-20-8-14-2-40Z" fill="url(#pouch)" stroke="#ecb184" stroke-width="5"/>

          <path d="M668 219q46 15 97 7" fill="none" stroke="#ffd0a0" stroke-width="3" opacity=".55"/>

          <path d="M655 181q75 7 154 26" fill="none" stroke="#ffe4b0" stroke-width="5" stroke-linecap="round"/>

          <circle cx="660" cy="187" r="3" fill="#895f53"/>

          <!-- one wing tip grips the reins -->

          <path d="M539 286q28 31 37 58 5 13-6 18-14 4-20-9l-28-35" fill="#f2efd9" stroke="#c1d4bf" stroke-width="4"/>

          <path d="M569 345q7 4 15-3" fill="none" stroke="#d4e1ca" stroke-width="4"/>

        </g>

      </g>



      <!-- foreground reeds and frame details -->

      <g fill="none" stroke="#0f2730" stroke-linecap="round"><path d="M38 750q6-86 28-126m-15 126q19-53 57-75m1022 75q11-82 30-121m-27 121q-20-44-54-69" stroke-width="8"/><path d="M0 731q72-35 138 19m922 0q76-41 140-28" stroke-width="18"/></g>

      <g fill="#19333a"><path d="M53 655q-24-33-5-46 21 10 18 42Zm43 47q-3-39 18-46 11 20-12 47Zm1057-44q-14-30-1-45 22 10 15 45Z"/></g>

      <path d="M28 28h55m-55 0v55m1144-55h-55m55 0v55M28 722h55m-55 0v-55m1144 55h-55m55 0v-55" fill="none" stroke="#dccfa8" stroke-width="2" opacity=".42"/>

    </svg>

    <div class="caption"><span>纯 SVG 绘制 · 无外部图片或依赖</span><span>点击按钮可暂停或放慢动画</span></div>

  </main>

  <script>

    const art = document.getElementById('art');

    const pause = document.getElementById('pause');

    const speed = document.getElementById('speed');

    pause.addEventListener('click', () => {

      const paused = art.classList.toggle('paused');

      pause.setAttribute('aria-pressed', String(paused));

      pause.textContent = paused ? '▶ 继续' : '⏸ 暂停';

    });

    speed.addEventListener('click', () => {

      const slow = art.classList.toggle('slow');

      speed.setAttribute('aria-pressed', String(slow));

      speed.textContent = slow ? '◷ 正常速度' : '◷ 慢动作';

      art.getAnimations({ subtree: true }).forEach(animation => { animation.playbackRate = slow ? 0.5 : 1; });

    });

  </script>

</body>

</html>