• ZackWill

    图片

    图片```
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>鹈鹕骑车</title>
    <style>
    :root {
    --ink: #1e3a4c;
    --accent: #f4b23c;
    --hud-bg: rgba(23, 34, 44, .62);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
    overflow: hidden;
    background: #6fb6e2;
    font-family: "PingFang SC", "Noto Sans SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    color: var(--ink);
    }
    #scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    }
    .title {
    position: fixed;
    top: 22px;
    left: 26px;
    pointer-events: none;
    }
    .title h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: .06em;
    }
    .title p {
    margin: 6px 0 0;
    font-size: 13px;
    opacity: .75;
    }
    .hud {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    background: var(--hud-bg);
    color: #fff;
    font-size: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    }
    .hud button {
    font: inherit;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    padding: 6px 16px;
    min-width: 68px;
    cursor: pointer;
    }
    .hud button:hover { background: rgba(255, 255, 255, .12); }
    .hud label { opacity: .9; }
    .hud input[type="range"] {
    width: 130px;
    accent-color: var(--accent);
    }
    .hud :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    }
    @media (max-width: 600px) {
    .title h1 { font-size: 20px; }
    .title p { display: none; }
    .hud input[type="range"] { width: 90px; }
    }
    </style>
    </head>
    <body>

    <svg id="scene" viewBox="0 0 1200 675" preserveAspectRatio="xMidYMid slice"
    xmlns="http://www.w3.org/2000/svg&quot; role="img"
    aria-label="一只鹈鹕在海边公路上骑自行车的二维动画">
    <defs>
    <linearGradient id="skyGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#6fb6e2"/>
    <stop offset="1" stop-color="#e3f3fb"/>
    </linearGradient>
    <linearGradient id="seaGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#2b7ea6"/>
    <stop offset="1" stop-color="#5eb0d4"/>
    </linearGradient>
    <radialGradient id="sunGlow">
    <stop offset="0" stop-color="#fff6c8" stop-opacity=".95"/>
    <stop offset="1" stop-color="#fff6c8" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="featherGrad" x1="0" y1="0" x2=".35" y2="1">
    <stop offset="0" stop-color="#fdfcf8"/>
    <stop offset="1" stop-color="#e1dccf"/>
    </linearGradient>
    <linearGradient id="pouchGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#f4a066"/>
    <stop offset="1" stop-color="#e2814a"/>
    </linearGradient>

    <g id="cloud" fill="#fff" opacity=".96">
    <ellipse cx="0" cy="8" rx="36" ry="14"/>
    <circle cx="-14" cy="0" r="16"/>
    <circle cx="6" cy="-9" r="21"/>
    <circle cx="27" cy="2" r="15"/>
    </g>

    <g id="palm">
    <path d="M0,0 C6,-50 4,-110 16,-165" stroke="#9c7350" stroke-width="10" stroke-linecap="round" fill="none"/>
    <path d="M0,0 C6,-50 4,-110 16,-165" stroke="#b58a62" stroke-width="4" stroke-linecap="round" fill="none" stroke-dasharray="3 9"/>
    <g fill="none" stroke-linecap="round" stroke-width="9">
    <path d="M16,-165 C-10,-175 -40,-165 -58,-140" stroke="#2f7a4d"/>
    <path d="M16,-165 C-5,-190 -30,-198 -52,-190" stroke="#3d8a5a"/>
    <path d="M16,-165 C20,-195 8,-215 -8,-225" stroke="#3d8a5a"/>
    <path d="M16,-165 C40,-190 60,-195 84,-185" stroke="#45995f"/>
    <path d="M16,-165 C42,-172 68,-160 80,-138" stroke="#2f7a4d"/>
    <path d="M16,-165 C30,-150 44,-132 46,-110" stroke="#2c6f46"/>
    <path d="M16,-165 C0,-148 -14,-130 -18,-108" stroke="#2c6f46"/>
    </g>
    <circle cx="10" cy="-160" r="6" fill="#6b4a2b"/>
    <circle cx="22" cy="-156" r="6" fill="#7a5533"/>
    </g>

    <g id="tuft" fill="none" stroke="#8fa25c" stroke-width="2.2" stroke-linecap="round">
    <path d="M0,0 C-3,-8 -9,-14 -12,-20"/>
    <path d="M0,0 C-1,-9 -3,-16 -5,-24"/>
    <path d="M0,0 C1,-9 4,-16 5,-23"/>
    <path d="M0,0 C3,-8 8,-13 12,-18"/>
    <path d="M0,0 C5,-5 10,-8 16,-9"/>
    </g>

    <g id="umbrella">
    <path d="M0,0 L0,-70" stroke="#6b4a2b" stroke-width="3" stroke-linecap="round"/>
    <path d="M-42,-70 A42,42 0 0 1 42,-70 Z" fill="#e75f4d"/>
    <path d="M0,-70 L-42,-70 A42,42 0 0 1 -34,-94.7 Z" fill="#fbe9dc"/>
    <path d="M0,-70 L13,-109.9 A42,42 0 0 1 34,-94.7 Z" fill="#fbe9dc"/>
    </g>

    <g id="boat">
    <path d="M-14,0 L14,0 L10,5 L-10,5 Z" fill="#3f4650"/>
    <path d="M0,-1 L0,-24 L12,-1 Z" fill="#fff"/>
    <path d="M-2,-1 L-2,-17 L-9,-1 Z" fill="#f2f2f2"/>
    </g>

    <g id="lighthouse">
    <ellipse cx="0" cy="0" rx="42" ry="7" fill="#6e6a60"/>
    <path d="M-30,0 C-26,-6 -10,-9 0,-9 C10,-9 26,-6 30,0 Z" fill="#7d786c"/>
    <path d="M-9,-6 L-6,-58 L6,-58 L9,-6 Z" fill="#f4efe3"/>
    <path d="M-8.2,-20 L8.2,-20 L7.7,-30 L-7.7,-30 Z" fill="#c8453b"/>
    <path d="M-7,-40 L7,-40 L6.6,-48 L-6.6,-48 Z" fill="#c8453b"/>
    <rect x="-7" y="-66" width="14" height="8" fill="#2f3a44"/>
    <rect x="-5" y="-64" width="10" height="5" fill="#ffe27a"/>
    <path d="M-8,-66 L0,-74 L8,-66 Z" fill="#c8453b"/>
    </g>
    </defs>

    <!-- ===== sky ===== -->
    <rect width="1200" height="372" fill="url(#skyGrad)"/>
    <circle cx="1010" cy="96" r="95" fill="url(#sunGlow)"/>
    <circle cx="1010" cy="96" r="40" fill="#fff1a8"/>

    <g id="L_clouds">
    <g id="cloudsTile">
    <use href="#cloud" transform="translate(140 110) scale(1.1)"/>
    <use href="#cloud" transform="translate(520 70) scale(.8)"/>
    <use href="#cloud" transform="translate(860 150) scale(1.3)"/>
    <use href="#cloud" transform="translate(1110 62) scale(.7)"/>
    </g>
    <use href="#cloudsTile" x="-1200"/>
    <use href="#cloudsTile" x="1200"/>
    </g>

    <g id="L_gulls" fill="none" stroke="#3c4a55" stroke-width="2.5" stroke-linecap="round">
    <g id="gullsTile">
    <path transform="translate(260 140)">
    <animate attributeName="d" dur=".7s" repeatCount="indefinite"
    values="M-14,4 Q-7,-6 0,0 Q7,-6 14,4; M-14,-6 Q-7,2 0,0 Q7,2 14,-6; M-14,4 Q-7,-6 0,0 Q7,-6 14,4"/>
    </path>
    <path transform="translate(320 168) scale(.75)">
    <animate attributeName="d" dur=".8s" begin="-.3s" repeatCount="indefinite"
    values="M-14,4 Q-7,-6 0,0 Q7,-6 14,4; M-14,-6 Q-7,2 0,0 Q7,2 14,-6; M-14,4 Q-7,-6 0,0 Q7,-6 14,4"/>
    </path>
    <path transform="translate(760 108) scale(.9)">
    <animate attributeName="d" dur=".75s" begin="-.5s" repeatCount="indefinite"
    values="M-14,4 Q-7,-6 0,0 Q7,-6 14,4; M-14,-6 Q-7,2 0,0 Q7,2 14,-6; M-14,4 Q-7,-6 0,0 Q7,-6 14,4"/>
    </path>
    </g>
    <use href="#gullsTile" x="-1200"/>
    <use href="#gullsTile" x="1200"/>
    </g>

    <!-- ===== sea ===== -->
    <rect y="372" width="1200" height="70" fill="url(#seaGrad)"/>
    <rect y="371" width="1200" height="2" fill="#bfe3f0" opacity=".8"/>

    <g id="L_boats">
    <g id="boatsTile">
    <use href="#boat" transform="translate(200 372) scale(.8)"/>
    <use href="#boat" transform="translate(690 372)"/>
    </g>
    <use href="#boatsTile" x="-1200"/>
    <use href="#boatsTile" x="1200"/>
    </g>

    <g id="L_light">
    <g id="lightTile">
    <use href="#lighthouse" transform="translate(960 378) scale(.9)"/>
    </g>
    <use href="#lightTile" x="-1200"/>
    <use href="#lightTile" x="1200"/>
    </g>

    <g id="L_waves" fill="none" stroke="#d7eef7" stroke-width="2" stroke-linecap="round" opacity=".75">
    <g id="wavesTile">
    <path d="M0,392 H1200" stroke-dasharray="40 80"/>
    <path d="M0,409 H1200" stroke-dasharray="60 90" stroke-dashoffset="35"/>
    <path d="M0,426 H1200" stroke-dasharray="30 70" stroke-dashoffset="60"/>
    </g>
    <use href="#wavesTile" x="-1200"/>
    <use href="#wavesTile" x="1200"/>
    </g>

    <!-- ===== sand ===== -->
    <rect y="440" width="1200" height="80" fill="#eedcae"/>
    <rect y="440" width="1200" height="9" fill="#d9c48f" opacity=".75"/>
    <rect y="440" width="1200" height="2" fill="#fff" opacity=".85"/>

    <g id="L_sand">
    <g id="sandTile">
    <use href="#palm" transform="translate(150 517) scale(1.05)"/>
    <use href="#palm" transform="translate(640 517) scale(.8)"/>
    <use href="#palm" transform="translate(1000 517) scale(1.15)"/>
    <use href="#umbrella" transform="translate(830 517) scale(.75)"/>
    <use href="#tuft" transform="translate(300 515) scale(1.2)"/>
    <use href="#tuft" transform="translate(470 517) scale(1.1)"/>
    <use href="#tuft" transform="translate(900 516) scale(1.3)"/>
    <use href="#tuft" transform="translate(1140 515) scale(1.1)"/>
    </g>
    <use href="#sandTile" x="-1200"/>
    <use href="#sandTile" x="1200"/>
    </g>

    <!-- ===== road ===== -->
    <rect y="518" width="1200" height="92" fill="#57616c"/>
    <rect y="523" width="1200" height="3" fill="#e9e3cf" opacity=".9"/>
    <rect y="601" width="1200" height="3" fill="#e9e3cf" opacity=".9"/>

    <g id="L_road">
    <g id="roadTile">
    <path d="M0,582 H1200" stroke="#eee7d0" stroke-width="4" stroke-dasharray="60 60" fill="none"/>
    <g id="specks" fill="#6c7683"></g>
    </g>
    <use href="#roadTile" x="-1200"/>
    <use href="#roadTile" x="1200"/>
    </g>

    <!-- ===== rider ===== -->
    <g id="rider" transform="translate(20 0)">
    <ellipse cx="560" cy="566" rx="200" ry="6" fill="#000" opacity=".16"/>

    <!-- far leg (behind everything) -->
    <path id="farThigh" fill="none" stroke="#d9d3c6" stroke-width="22" stroke-linecap="round"/>
    <path id="farShin" fill="none" stroke="#c97a2a" stroke-width="9" stroke-linecap="round"/>
    <line id="farCrank" x1="528" y1="505" x2="528" y2="535" stroke="#33363a" stroke-width="6" stroke-linecap="round"/>
    <g id="farPedal"><rect x="-11" y="-2.5" width="22" height="5" rx="1.5" fill="#1e2023"/></g>
    <g id="farFoot"><path d="M-11,-9 C-5,-13 6,-13 13,-9 L23,-3 L20,-2 L-9,-2 L-14,-5 Z" fill="#c97a2a"/></g>

    <!-- wheels -->
    <g transform="translate(450 498)">
    <circle r="56" fill="none" stroke="#2d2f33" stroke-width="12"/>
    <circle r="48" fill="none" stroke="#d8dbdf" stroke-width="4"/>
    <g id="spokesR" stroke="#cfd3d8" stroke-width="1.6"></g>
    <circle r="8" fill="#8a8f96"/>
    </g>
    <g transform="translate(670 498)">
    <circle r="56" fill="none" stroke="#2d2f33" stroke-width="12"/>
    <circle r="48" fill="none" stroke="#d8dbdf" stroke-width="4"/>
    <g id="spokesF" stroke="#cfd3d8" stroke-width="1.6"></g>
    <circle r="8" fill="#8a8f96"/>
    <circle r="3" fill="#3a3d42"/>
    </g>

    <!-- frame -->
    <g fill="none" stroke="#cf4a3c" stroke-width="7" stroke-linecap="round" stroke-linejoin="round">
    <path d="M528,505 L498,402"/>
    <path d="M498,408 L648,418"/>
    <path d="M528,505 L660,452"/>
    <path d="M648,410 L664,458"/>
    <path d="M664,458 Q666,480 670,498"/>
    <path d="M528,505 L450,498"/>
    <path d="M498,404 L450,498"/>
    </g>
    <g fill="none" stroke="#8a8f96" stroke-width="5" stroke-linecap="round">
    <path d="M498,402 L495,378"/>
    <path d="M648,410 L651,393"/>
    <path d="M634,393 L676,393"/>
    </g>
    <path d="M634,393 L649,393" stroke="#3a2a22" stroke-width="7.5" stroke-linecap="round" fill="none"/>
    <path d="M466,372 C472,365 500,363 524,367 L522,377 C502,383 482,383 468,380 Z" fill="#5c3d2e"/>

    <!-- basket with fish -->
    <g>
    <g transform="translate(700 396) rotate(-18)">
    <ellipse rx="17" ry="7" fill="#a4bccb"/>
    <path d="M14,0 L27,-10 L25,10 Z" fill="#7f99a9"/>
    <circle cx="-9" cy="-1.5" r="1.6" fill="#243038"/>
    </g>
    <path d="M672,396 L716,396 L712,428 L676,428 Z" fill="#cfa55f"/>
    <g stroke="#b98c46" stroke-width="1.5" fill="none">
    <path d="M673,404 H715 M674,412 H714 M675,420 H713"/>
    <path d="M684,396 L686,428 M694,396 L694,428 M704,396 L702,428"/>
    </g>
    <path d="M670,396 L718,396" stroke="#8f6a33" stroke-width="3.5" stroke-linecap="round"/>
    </g>

    <!-- drivetrain -->
    <circle cx="450" cy="498" r="9" fill="#6b6f76"/>
    <circle cx="450" cy="498" r="3" fill="#3a3d42"/>
    <path id="chain" d="M450,489 L528,484 A21,21 0 0 1 528,526 L450,507 A9,9 0 0 1 450,489 Z"
    fill="none" stroke="#3c3f44" stroke-width="3" stroke-dasharray="4 3"/>
    <g transform="translate(528 505)" fill="none" stroke="#6b6f76">
    <circle r="21" stroke-width="5"/>
    <path d="M0,0 L0,-19 M0,0 L18,-6 M0,0 L11,15 M0,0 L-11,15 M0,0 L-18,-6" stroke-width="3"/>
    </g>
    <line id="nearCrank" x1="528" y1="505" x2="528" y2="475" stroke="#4c4f54" stroke-width="6" stroke-linecap="round"/>
    <circle cx="528" cy="505" r="6" fill="#4c4f54"/>
    <g id="nearPedal"><rect x="-11" y="-2.5" width="22" height="5" rx="1.5" fill="#2f3237"/></g>

    <!-- pelican -->
    <g id="neckHead">
    <path d="M544,258 C556,230 552,196 574,172 C588,158 600,152 612,150"
    fill="none" stroke="url(#featherGrad)" stroke-width="30" stroke-linecap="round"/>
    <g fill="#fbfaf5" stroke="#d8d2c4" stroke-width="1.2" stroke-linejoin="round">
    <path d="M594,136 L572,122 L598,128 Z"/>
    <path d="M598,129 L580,110 L604,122 Z"/>
    <path d="M604,124 L594,100 L612,118 Z"/>
    </g>
    <circle cx="612" cy="150" r="27" fill="#fbfaf5"/>
    <g id="pouch">
    <path d="M622,164 C660,168 730,180 782,188 C760,198 700,234 640,204 C628,196 622,180 622,164 Z" fill="url(#pouchGrad)"/>
    </g>
    <path d="M628,138 C690,144 750,164 786,179 C794,183 792,192 784,189 C745,176 690,162 632,158 Z" fill="#f4b23c"/>
    <path d="M630,138 C690,144 750,164 786,179" fill="none" stroke="#d9822b" stroke-width="1.8" stroke-linecap="round"/>
    <g id="eye" transform="translate(622 142)">
    <circle r="7" fill="#f5d76e"/>
    <circle r="4.6" fill="#1d1d1d"/>
    <circle cx="1.6" cy="-1.6" r="1.5" fill="#fff"/>
    </g>
    </g>

    <path id="nearThigh" fill="none" stroke="#f3efe6" stroke-width="22" stroke-linecap="round"/>

    <g id="body">
    <g id="tail">
    <path d="M448,326 L406,298 L412,316 L392,316 L408,330 L394,340 L418,344 L448,350 Z"
    fill="#f3efe6" stroke="#d8d2c4" stroke-width="1.2" stroke-linejoin="round"/>
    </g>
    <path d="M556,234 C590,254 596,312 566,350 C548,372 500,376 466,364 C436,354 418,322 428,284 C438,244 480,214 520,218 C536,220 548,226 556,234 Z"
    fill="url(#featherGrad)"/>
    <path d="M536,224 C500,222 462,238 440,272 C458,250 492,236 536,238 Z" fill="#e6e1d4" opacity=".9"/>
    </g>

    <path id="nearShin" fill="none" stroke="#f09a3c" stroke-width="9" stroke-linecap="round"/>
    <g id="nearFoot"><path d="M-11,-9 C-5,-13 6,-13 13,-9 L23,-3 L20,-2 L-9,-2 L-14,-5 Z" fill="#f09a3c"/></g>

    <g id="wing">
    <path d="M546,252 C580,256 608,296 628,344 C638,364 648,380 650,392 C651,400 642,404 636,400 Q616,390 612,368 Q593,359 590,338 Q571,333 566,314 Q548,314 540,298 L530,290 C526,278 532,262 546,252 Z"
    fill="#fbfaf5"/>
    <path d="M626,374 C636,384 646,392 650,398 C647,404 638,404 632,398 C624,390 618,382 612,374 Z" fill="#2b2b2b"/>
    </g>
    </g>

    <!-- ===== foreground verge ===== -->
    <rect y="610" width="1200" height="65" fill="#e5cf9c"/>
    <rect y="610" width="1200" height="3" fill="#cdb480"/>
    <g id="L_fore">
    <g id="foreTile">
    <use href="#tuft" transform="translate(90 660) scale(1.7)" stroke="#6f8a4a"/>
    <use href="#tuft" transform="translate(380 655) scale(1.5)" stroke="#6f8a4a"/>
    <use href="#tuft" transform="translate(700 662) scale(1.8)" stroke="#6f8a4a"/>
    <use href="#tuft" transform="translate(1010 656) scale(1.4)" stroke="#6f8a4a"/>
    <g fill="#cdb480">
    <ellipse cx="220" cy="640" rx="6" ry="3.5"/>
    <ellipse cx="540" cy="632" rx="4" ry="2.5"/>
    <ellipse cx="860" cy="645" rx="7" ry="4"/>
    <ellipse cx="1130" cy="636" rx="5" ry="3"/>
    </g>
    </g>
    <use href="#foreTile" x="-1200"/>
    <use href="#foreTile" x="1200"/>
    </g>
    </svg>

    <header class="title">
    <h1>鹈鹕骑车</h1>
    <p>空格键暂停,滑块调节踩踏速度</p>
    </header>

    <div class="hud">
    <button id="toggle" type="button">暂停</button>
    <label for="speed">踩踏速度</label>
    <input id="speed" type="range" min="0.2" max="1.4" step="0.05" value="0.65">
    </div>

    <script>
    (() => {
    const NS = 'http://www.w3.org/2000/svg&#039;;
    const W = 1200;
    const $ = id => document.getElementById(id);
    const TAU = Math.PI * 2;

    // ---- bike & rider geometry (rider-local coordinates) ----
    const G = {
    bb: { x: 528, y: 505 }, crank: 28,
    rWheel: 62, rRing: 21, rCog: 9,
    hip: { x: 496, y: 368 }, L1: 72, L2: 88,
    ankle: { x: -5, y: -10 },
    };
    const GEAR = G.rRing / G.rCog;

    // spokes
    for (const id of ['spokesR', 'spokesF']) {
    const g = $(id);
    for (let i = 0; i < 14; i++) {
    const l = document.createElementNS(NS, 'line');
    l.setAttribute('y1', '-9'); l.setAttribute('y2', '-47');
    l.setAttribute('transform', rotate(${i * 360 / 14}));
    g.appendChild(l);
    }
    }

    // asphalt specks (deterministic pseudo-random)
    {
    const g = $('specks');
    let s = 7;
    const rnd = () => (s = (s * 16807) % 2147483647) / 2147483647;
    for (let i = 0; i < 26; i++) {
    const c = document.createElementNS(NS, 'circle');
    c.setAttribute('cx', (rnd() * W).toFixed(1));
    c.setAttribute('cy', (528 + rnd() * 70).toFixed(1));
    c.setAttribute('r', (0.8 + rnd() * 1.2).toFixed(2));
    g.appendChild(c);
    }
    }

    const layers = [
    ['L_clouds', .04], ['L_gulls', .1], ['L_boats', .07], ['L_light', .12],
    ['L_waves', .2], ['L_sand', .55], ['L_road', 1], ['L_fore', 1.25],
    ].map(([id, k]) => ({ el: $(id), k }));

    const E = {};
    for (const id of ['spokesR', 'spokesF', 'chain', 'nearCrank', 'farCrank', 'nearPedal', 'farPedal',
    'nearFoot', 'farFoot', 'nearThigh', 'farThigh', 'nearShin', 'farShin',
    'neckHead', 'body', 'tail', 'pouch', 'eye', 'rider']) E[id] = $(id);

    // two-bone IK: returns knee position, knee bends forward (+x)
    function knee(hip, target, L1, L2) {
    const dx = target.x - hip.x, dy = target.y - hip.y;
    const d = Math.min((L1 + L2) * .985, Math.max(Math.abs(L1 - L2) + 2, Math.hypot(dx, dy)));
    const a = Math.acos((L1 L1 + d d - L2 L2) / (2 L1 * d));
    const ang = Math.atan2(dy, dx) - a;
    return { x: hip.x + L1 Math.cos(ang), y: hip.y + L1 Math.sin(ang) };
    }

    function setLeg(side, hip, pedal) {
    const ankle = { x: pedal.x + G.ankle.x, y: pedal.y + G.ankle.y };
    const k = knee(hip, ankle, G.L1, G.L2);
    E[side + 'Thigh'].setAttribute('d', M${hip.x},${hip.y} L${k.x.toFixed(2)},${k.y.toFixed(2)});
    E[side + 'Shin'].setAttribute('d', M${k.x.toFixed(2)},${k.y.toFixed(2)} L${ankle.x.toFixed(2)},${ankle.y.toFixed(2)});
    E[side + 'Foot'].setAttribute('transform', translate(${pedal.x.toFixed(2)} ${pedal.y.toFixed(2)}));
    E[side + 'Pedal'].setAttribute('transform', translate(${pedal.x.toFixed(2)} ${pedal.y.toFixed(2)}));
    E[side + 'Crank'].setAttribute('x2', pedal.x.toFixed(2));
    E[side + 'Crank'].setAttribute('y2', pedal.y.toFixed(2));
    }

    // ---- state ----
    let theta = 0; // crank angle (rad), increases clockwise = forward
    let clock = 0; // animated seconds (stops while paused)
    let cadence = parseFloat($('speed').value); // crank rev/s
    let nextBlink = 2.2;
    const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
    let paused = reduceMotion;

    function render() {
    const thW = theta * GEAR; // wheel angle
    const dist = thW * G.rWheel; // ground distance travelled

    for (const l of layers) {
    const off = ((dist * l.k) % W + W) % W;
    l.el.setAttribute('transform', translate(${(-off).toFixed(2)} 0));
    }

    const degW = ((thW * 180 / Math.PI) % 360).toFixed(2);
    E.spokesR.setAttribute('transform', rotate(${degW}));
    E.spokesF.setAttribute('transform', rotate(${degW}));
    E.chain.setAttribute('stroke-dashoffset', (-(theta * G.rRing) % 7).toFixed(2));

    const bob = 1.5 Math.sin(2 theta);
    const hbob = 1.4 Math.sin(2 theta - .7);
    E.rider.setAttribute('transform', translate(20 ${(0.8 * Math.sin(2 * theta + .3)).toFixed(2)}));
    E.body.setAttribute('transform', translate(0 ${bob.toFixed(2)}));
    E.neckHead.setAttribute('transform', translate(0 ${hbob.toFixed(2)}));
    E.tail.setAttribute('transform', rotate(${(2.5 * Math.sin(2 * theta + 1)).toFixed(2)} 448 340));
    E.pouch.setAttribute('transform', rotate(${(1.6 * Math.sin(2 * theta + .9)).toFixed(2)} 622 166));

    const hip = { x: G.hip.x, y: G.hip.y + bob };
    const near = { x: G.bb.x + G.crank Math.cos(theta), y: G.bb.y + G.crank Math.sin(theta) };
    const far = { x: G.bb.x - G.crank Math.cos(theta), y: G.bb.y - G.crank Math.sin(theta) };
    setLeg('near', hip, near);
    setLeg('far', hip, far);

    // blink
    let k = 1;
    if (clock > nextBlink) {
    const p = (clock - nextBlink) / .16;
    if (p < 1) k = 1 - .92 Math.sin(Math.PI p);
    else nextBlink = clock + 2.4 + Math.random() * 3;
    }
    E.eye.setAttribute('transform', translate(622 142) scale(1 ${k.toFixed(3)}));
    }

    let last = null;
    function frame(now) {
    if (last === null) last = now;
    const dt = Math.min(.05, (now - last) / 1000);
    last = now;
    if (!paused) {
    theta += TAU cadence dt;
    clock += dt;
    }
    render();
    requestAnimationFrame(frame);
    }

    // ---- controls ----
    const svg = $('scene');
    const btn = $('toggle');
    function applyPaused() {
    btn.textContent = paused ? '继续' : '暂停';
    btn.setAttribute('aria-pressed', String(paused));
    paused ? svg.pauseAnimations() : svg.unpauseAnimations();
    }
    btn.addEventListener('click', () => { paused = !paused; applyPaused(); });
    addEventListener('keydown', e => {
    if (e.code === 'Space' && e.target.tagName !== 'INPUT') { e.preventDefault(); paused = !paused; applyPaused(); }
    });
    $('speed').addEventListener('input', e => { cadence = parseFloat(e.target.value); });

    // landscape: fill the viewport and crop the edges; portrait: show the whole
    // rider in a narrower window anchored to the bottom (the page background
    // continues the top of the sky gradient).
    function fitViewport() {
    const portrait = innerWidth / innerHeight < 1.2;
    svg.setAttribute('viewBox', portrait ? '320 0 560 675' : '0 0 1200 675');
    svg.setAttribute('preserveAspectRatio', portrait ? 'xMidYMax meet' : 'xMidYMid slice');
    }
    addEventListener('resize', fitViewport);
    fitViewport();

    applyPaused();
    render();
    requestAnimationFrame(frame);

    // small hook for tinkering from the console
    window.pelican = { setTheta: v => { theta = v; render(); }, setCadence: v => { cadence = v; } };
    })();
    </script>
    </body>
    </html>

    主楼
  • Shern_Hung

    看来这个东西已经进训练集了,以后测试没什么用了

    #1
  • ZackWill

    是的,以他的知识库已经能意识到这是一个测试题了

    #2
  • IssunmiHaichi

    已经没用了这个提示词,被特化了说是,针对测试集来训练。。。

    细看效果还是挺好的,该有的都有。。。

    #3
  • event

    可以说在众多鹈鹕中测试名列前茅,感觉不赖

    #4
  • ZackWill

    效果是不错,但你很难说这是不是做了特化训练的 ^-^ 也没法去证明

    #5
  • ZackWill

    是这样的,抛开其他因素单看做的怎么样还是很不错的

    #6
  • helloergou

    这鸟模型到底能干啥 我写的项目动不动就给我切 4.8 去了。

    #7
  • Featux

    为啥现在测试大模型都用这个鹈鹕骑自行车?

    #8
  • undercat

    换成其他场景的svg什么的试试,比如舞台上小狗撒尿啥的,反正重点就是测试svg生成的咋样,细节方面等等

    #9

发表回复

登录后回复