grok4.7 free号鹈鹕测试(在harness PTC上测试的)
算法还是太吃操作了
2026-09-22 01:01
1
harness PTC模式：
html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鹈鹕骑自行车</title>
<style>
html, body {
margin: 0;
min-height: 100%;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background:
radial-gradient(circle at 50% 0%, #1d5578 0%, #0e2838 68%);
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}
svg {
width: min(96vw, 1080px);
height: auto;
display: block;
border-radius: 18px;
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
}
.blink {
transform-box: fill-box;
transform-origin: center;
animation: blink 4.8s infinite;
}
@keyframes blink {
0%, 88%, 100% { transform: scaleY(1); }
93%, 96% { transform: scaleY(0.12); }
}
#fish {
transform-box: fill-box;
transform-origin: center;
animation: wiggle 0.7s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-7deg); }
50% { transform: rotate(8deg); }
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 1000 560" width="1000" height="560"
role="img" aria-label="一只白鹈鹕在湖边小路上骑自行车">
<title>鹈鹕骑自行车</title>
<desc>白鹈鹕坐在红色自行车上，沿着湖岸向前骑行。车轮滚动，双腿踩动踏板，喙囊轻轻晃动。</desc>
<defs>
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#7ec8ee"/>
<stop offset="0.58" stop-color="#d7f3fc"/>
<stop offset="1" stop-color="#e9f8f1"/>
</linearGradient>
<linearGradient id="lake" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#8fd4e6"/>
<stop offset="1" stop-color="#2d86ae"/>
</linearGradient>
<radialGradient id="sun-fill" cx="0.38" cy="0.36" r="0.65">
<stop offset="0" stop-color="#fff8e4"/>
<stop offset="1" stop-color="#ffc94a"/>
</radialGradient>
<linearGradient id="road" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#9aa6b4"/>
<stop offset="0.16" stop-color="#73808e"/>
<stop offset="1" stop-color="#596270"/>
</linearGradient>
<pattern id="lane" patternUnits="userSpaceOnUse" width="150" height="16">
<rect x="0" y="4" width="68" height="8" rx="4" fill="#f6e7b2"/>
</pattern>
<pattern id="waves" patternUnits="userSpaceOnUse" width="90" height="22">
<path d="M0,12 Q22,4 45,12 T90,12" fill="none" stroke="rgba(255,255,255,0.55)" stroke-width="2"/>
</pattern>
<g id="frame-lines" fill="none" stroke-linecap="round">
<line x1="408" y1="380" x2="528" y2="372"/>
<line x1="408" y1="380" x2="500" y2="312"/>
<line x1="528" y1="372" x2="500" y2="312"/>
<line x1="528" y1="372" x2="644" y2="310"/>
<line x1="500" y1="312" x2="644" y2="310"/>
<line x1="636" y1="318" x2="700" y2="380"/>
<line x1="652" y1="318" x2="716" y2="380"/>
</g>
<g id="cloud-set">
<g fill="#ffffff">
<g transform="translate(90 78)">
<ellipse cx="0" cy="18" rx="52" ry="18" fill="#e7f1f8"/>
<ellipse cx="0" cy="16" rx="50" ry="16"/>
<ellipse cx="-26" cy="12" rx="24" ry="16"/>
<ellipse cx="22" cy="8" rx="28" ry="18"/>
</g>
<g transform="translate(480 118)">
<ellipse cx="0" cy="16" rx="62" ry="20" fill="#e7f1f8"/>
<ellipse cx="0" cy="14" rx="60" ry="18"/>
<ellipse cx="-30" cy="8" rx="26" ry="16"/>
<ellipse cx="28" cy="6" rx="30" ry="18"/>
</g>
<g transform="translate(900 70)">
<ellipse cx="0" cy="18" rx="46" ry="16" fill="#e7f1f8"/>
<ellipse cx="0" cy="16" rx="44" ry="14"/>
<ellipse cx="-20" cy="10" rx="20" ry="14"/>
<ellipse cx="18" cy="8" rx="24" ry="16"/>
</g>
</g>
</g>
<g id="tree-set">
<g transform="translate(120 0)">
<rect x="-7" y="268" width="14" height="58" rx="4" fill="#6b4423"/>
<circle cx="0" cy="250" r="30" fill="#2f7a3a"/>
<circle cx="-18" cy="266" r="20" fill="#3e9448"/>
<circle cx="18" cy="262" r="22" fill="#67b85a"/>
</g>
<g transform="translate(430 0)">
<rect x="-6" y="286" width="12" height="42" rx="3" fill="#6b4423"/>
<circle cx="0" cy="274" r="24" fill="#348544"/>
<circle cx="-14" cy="286" r="16" fill="#59a84e"/>
<circle cx="16" cy="284" r="17" fill="#7dcc68"/>
</g>
<g transform="translate(760 0)">
<rect x="-8" y="262" width="16" height="66" rx="4" fill="#5c3a1e"/>
<circle cx="-4" cy="246" r="34" fill="#2c7438"/>
<circle cx="20" cy="262" r="22" fill="#4ea354"/>
<circle cx="-22" cy="268" r="18" fill="#76c45e"/>
</g>
</g>
<g id="lily-set">
<g transform="translate(200 352)">
<ellipse rx="20" ry="8" fill="#2f8a48" stroke="#1e3348" stroke-width="2"/>
<ellipse cx="-6" cy="-1" rx="6" ry="3" fill="#3eaa5c"/>
<circle cy="-6" r="5" fill="#f7c1d8"/>
<circle cy="-6" r="2" fill="#ffe082"/>
</g>
<g transform="translate(620 368)">
<ellipse rx="15" ry="6" fill="#277a40" stroke="#1e3348" stroke-width="2"/>
<circle cx="4" cy="-5" r="4" fill="#fff"/>
<circle cx="4" cy="-5" r="1.6" fill="#f2b43a"/>
</g>
</g>
<g id="reed-set">
<g transform="translate(70 0)" stroke-linecap="round" fill="none">
<path d="M0,432 C-8,392 -4,360 -16,332" stroke="#2f7d45" stroke-width="3"/>
<path d="M2,432 C10,396 8,366 18,338" stroke="#49a356" stroke-width="3"/>
<ellipse cx="-16" cy="326" rx="4" ry="11" fill="#6b4524" stroke="#1e3348" stroke-width="1.5"/>
<ellipse cx="18" cy="332" rx="3.5" ry="9" fill="#8a5a32" stroke="#1e3348" stroke-width="1.5"/>
</g>
<g transform="translate(300 0)" stroke-linecap="round" fill="none">
<path d="M0,428 C-6,390 2,362 -8,340" stroke="#2c7540" stroke-width="2.5"/>
<path d="M2,428 C12,394 6,368 16,346" stroke="#3f9450" stroke-width="2.5"/>
<ellipse cx="-8" cy="334" rx="3.5" ry="9" fill="#70482a" stroke="#1e3348" stroke-width="1.4"/>
</g>
<g transform="translate(560 0)" stroke-linecap="round" fill="none">
<path d="M0,434 C-10,390 -2,358 -18,328" stroke="#26743c" stroke-width="3"/>
<path d="M4,434 C14,392 10,360 22,336" stroke="#52a85c" stroke-width="3"/>
<ellipse cx="-18" cy="322" rx="4.2" ry="12" fill="#623f20" stroke="#1e3348" stroke-width="1.5"/>
<ellipse cx="22" cy="330" rx="3.4" ry="8" fill="#7a5130" stroke="#1e3348" stroke-width="1.5"/>
</g>
<g transform="translate(820 0)" stroke-linecap="round" fill="none">
<path d="M0,430 C-4,396 4,370 -6,348" stroke="#338448" stroke-width="2.5"/>
<path d="M2,430 C8,398 6,372 14,350" stroke="#46a055" stroke-width="2.5"/>
<ellipse cx="14" cy="344" rx="3.2" ry="8" fill="#7b522e" stroke="#1e3348" stroke-width="1.4"/>
</g>
</g>
<g id="flower-set">
<g transform="translate(150 0)">
<path d="M0,430 L2,404" stroke="#2e7d32" stroke-width="2"/>
<circle cx="2" cy="400" r="6" fill="#ff8fab"/>
<circle cx="2" cy="400" r="2.3" fill="#ffe082"/>
</g>
<g transform="translate(390 0)">
<path d="M0,428 L-2,406" stroke="#2e7d32" stroke-width="2"/>
<circle cx="-2" cy="402" r="5" fill="#ffe082"/>
<circle cx="-2" cy="402" r="2" fill="#fff"/>
</g>
<g transform="translate(690 0)">
<path d="M0,432 L4,406" stroke="#2e7d32" stroke-width="2"/>
<circle cx="4" cy="402" r="6" fill="#c9a0ff"/>
<circle cx="4" cy="402" r="2.2" fill="#fff3c4"/>
</g>
<g transform="translate(910 0)">
<path d="M0,426 L0,408" stroke="#2e7d32" stroke-width="2"/>
<circle cy="404" r="5" fill="#ffd0dc"/>
<circle cy="404" r="2" fill="#ffb703"/>
</g>
</g>
</defs>
<rect width="1000" height="560" fill="url(#sky)"/>
<g id="sun-rays"></g>
<circle cx="148" cy="96" r="40" fill="url(#sun-fill)"/>
<circle cx="136" cy="86" r="12" fill="#fff" opacity="0.45"/>
<g>
<animateTransform attributeName="transform" type="translate" from="1080 124" to="-140 96" dur="32s" repeatCount="indefinite"/>
<path d="M0,0 L12,-8 L24,0" fill="none" stroke="#4e738c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34,8 L44,0 L56,8" fill="none" stroke="#4e738c" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="cloud-layer">
<use href="#cloud-set" xlink:href="#cloud-set"/>
<use href="#cloud-set" xlink:href="#cloud-set" transform="translate(1200 0)"/>
</g>
<path d="M0,318 C140,250 240,286 360,248 C500,204 590,276 730,242 C850,214 930,268 1000,240 L1000,336 L0,336 Z" fill="#c6e7b4"/>
<path d="M0,308 C160,274 280,304 430,270 C590,234 690,292 840,262 C930,246 970,270 1000,258 L1000,340 L0,340 Z" fill="#a6d894"/>
<g id="tree-layer">
<use href="#tree-set" xlink:href="#tree-set"/>
<use href="#tree-set" xlink:href="#tree-set" transform="translate(1000 0)"/>
</g>
<rect x="0" y="318" width="1000" height="92" fill="url(#lake)"/>
<rect x="0" y="334" width="1000" height="22" fill="url(#waves)"/>
<rect x="0" y="356" width="1000" height="18" fill="url(#waves)" opacity="0.7"/>
<g>
<circle cx="250" cy="360" r="5" fill="none" stroke="#ffffff" stroke-width="1.6" opacity="0.0">
<animate attributeName="r" values="3;16" dur="3.2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.55;0" dur="3.2s" repeatCount="indefinite"/>
</circle>
<circle cx="640" cy="372" r="4" fill="none" stroke="#ffffff" stroke-width="1.6" opacity="0.0">
<animate attributeName="r" values="3;14" dur="3.8s" begin="1.2s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.45;0" dur="3.8s" begin="1.2s" repeatCount="indefinite"/>
</circle>
</g>
<g id="lily-layer">
<use href="#lily-set" xlink:href="#lily-set"/>
<use href="#lily-set" xlink:href="#lily-set" transform="translate(1000 0)"/>
</g>
<path d="M0,392 C180,368 340,408 520,382 C700,356 860,400 1000,376 L1000,440 L0,440 Z" fill="#63b45a"/>
<path d="M0,412 C200,398 380,424 560,408 C760,390 880,418 1000,404 L1000,440 L0,440 Z" fill="#4f9d48"/>
<g id="reed-layer">
<use href="#reed-set" xlink:href="#reed-set"/>
<use href="#reed-set" xlink:href="#reed-set" transform="translate(1000 0)"/>
</g>
<g id="flower-layer">
<use href="#flower-set" xlink:href="#flower-set"/>
<use href="#flower-set" xlink:href="#flower-set" transform="translate(1000 0)"/>
</g>
<rect x="0" y="434" width="1000" height="126" fill="url(#road)"/>
<rect x="0" y="434" width="1000" height="10" fill="#b7c0ca"/>
<rect x="0" y="468" width="1000" height="16" fill="url(#lane)"/>
<ellipse cx="560" cy="446" rx="176" ry="12" fill="rgba(18,36,48,0.16)"/>
<g fill="#d9d3c8">
<circle cx="392" cy="430" r="4" opacity="0.45">
<animate attributeName="cx" values="398;352" dur="0.7s" repeatCount="indefinite"/>
<animate attributeName="cy" values="430;422" dur="0.7s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;0" dur="0.7s" repeatCount="indefinite"/>
<animate attributeName="r" values="3;6" dur="0.7s" repeatCount="indefinite"/>
</circle>
<circle cx="400" cy="432" r="3" opacity="0.3">
<animate attributeName="cx" values="404;348" dur="0.9s" begin="0.35s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.35;0" dur="0.9s" begin="0.35s" repeatCount="indefinite"/>
</circle>
</g>
<g id="leg-far-draw" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path id="leg-far-out" stroke="#1e3348" stroke-width="16"/>
<path id="leg-far" stroke="#f3c98a" stroke-width="10"/>
</g>
<circle id="knee-far" r="6.5" fill="#f3c98a" stroke="#1e3348" stroke-width="2"/>
<g id="pedal-far">
<rect x="-12" y="-3" width="24" height="7" rx="2" fill="#2c3544" stroke="#1e3348" stroke-width="1.5"/>
<rect x="-8" y="-1" width="16" height="2" fill="#9aa3b2"/>
</g>
<g id="foot-far">
<path d="M-2,-1 L18,-3 L24,3 L14,7 L4,6 L-4,9 L-12,4 Z" fill="#f3c98a" stroke="#1e3348" stroke-width="2" stroke-linejoin="round"/>
<path d="M6,6 L5,12 M12,5 L13,12 M18,3 L23,9" fill="none" stroke="#1e3348" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="rear-wheel">
<circle cx="408" cy="380" r="54" fill="#243140"/>
<circle cx="408" cy="380" r="45" fill="none" stroke="#f4f0e6" stroke-width="8"/>
<g id="rear-spin">
<circle cx="408" cy="380" r="13" fill="none" stroke="#1e3348" stroke-width="5" stroke-dasharray="2.2 1.6"/>
</g>
<circle cx="408" cy="380" r="7" fill="#d5d8de" stroke="#1e3348" stroke-width="2"/>
</g>
<g id="front-wheel">
<circle cx="708" cy="380" r="54" fill="#243140"/>
<circle cx="708" cy="380" r="45" fill="none" stroke="#f4f0e6" stroke-width="8"/>
<g id="front-spin">
<circle cx="708" cy="380" r="11" fill="none" stroke="#1e3348" stroke-width="4" stroke-dasharray="2 1.5"/>
</g>
<circle cx="708" cy="380" r="7" fill="#d5d8de" stroke="#1e3348" stroke-width="2"/>
</g>
<path d="M362,358 Q408,304 454,358" fill="none" stroke="#1e3348" stroke-width="8" stroke-linecap="round"/>
<path d="M362,358 Q408,304 454,358" fill="none" stroke="#b9c0c8" stroke-width="4" stroke-linecap="round"/>
<path d="M662,358 Q708,304 754,358" fill="none" stroke="#1e3348" stroke-width="8" stroke-linecap="round"/>
<path d="M662,358 Q708,304 754,358" fill="none" stroke="#b9c0c8" stroke-width="4" stroke-linecap="round"/>
<use href="#frame-lines" xlink:href="#frame-lines" stroke="#1e3348" stroke-width="16"/>
<use href="#frame-lines" xlink:href="#frame-lines" stroke="#e23d3d" stroke-width="9"/>
<path id="chain" d="M420,360 C470,352 496,354 514,356 M418,392 C468,400 498,392 516,388"
fill="none" stroke="#2a3038" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="4 3"/>
<g id="crank">
<circle cx="528" cy="372" r="16" fill="none" stroke="#1e3348" stroke-width="6" stroke-dasharray="2.5 2"/>
<line x1="504" y1="372" x2="552" y2="372" stroke="#1e3348" stroke-width="6" stroke-linecap="round"/>
<circle cx="528" cy="372" r="5.5" fill="#d5d8de" stroke="#1e3348" stroke-width="2"/>
</g>
<path d="M456,314 Q500,296 548,316 Q512,332 468,328 Z" fill="#6b3f2a" stroke="#1e3348" stroke-width="3" stroke-linejoin="round"/>
<path d="M644,310 L670,270" fill="none" stroke="#1e3348" stroke-width="12" stroke-linecap="round"/>
<path d="M644,310 L670,270" fill="none" stroke="#e23d3d" stroke-width="6" stroke-linecap="round"/>
<path d="M648,270 Q690,250 728,274" fill="none" stroke="#1e3348" stroke-width="12" stroke-linecap="round"/>
<path d="M648,270 Q690,250 728,274" fill="none" stroke="#3d4654" stroke-width="6" stroke-linecap="round"/>
<circle cx="726" cy="276" r="8" fill="#2c3544" stroke="#1e3348" stroke-width="2"/>
<g>
<animateTransform attributeName="transform" type="rotate"
values="0 676 262; 0 676 262; -18 676 262; 12 676 262; -6 676 262; 0 676 262"
keyTimes="0;0.72;0.8;0.86;0.92;1" dur="3.6s" repeatCount="indefinite"/>
<circle cx="676" cy="262" r="8" fill="#f4d35e" stroke="#1e3348" stroke-width="2.5"/>
<circle cx="676" cy="262" r="3" fill="#fff6cc"/>
</g>
<circle cx="662" cy="300" r="11" fill="#fff4cc" stroke="#1e3348" stroke-width="3"/>
<circle cx="662" cy="300" r="5" fill="#fff"/>
<path d="M650,300 H640" stroke="#1e3348" stroke-width="3" stroke-linecap="round"/>
<g>
<path d="M700,286 Q742,276 778,296 L768,326 Q742,338 708,320 Z" fill="#e0a15a" stroke="#1e3348" stroke-width="3" stroke-linejoin="round"/>
<path d="M718,290 L724,322 M742,286 L744,328 M762,292 L756,322" fill="none" stroke="#8a5a28" stroke-width="2"/>
<g id="fish">
<polygon points="736,306 724,296 724,316" fill="#ff8c42" stroke="#1e3348" stroke-width="2" stroke-linejoin="round"/>
<ellipse cx="748" cy="306" rx="16" ry="8" fill="#ff8c42" stroke="#1e3348" stroke-width="2"/>
<circle cx="756" cy="304" r="1.7" fill="#1e3348"/>
<path d="M740,306 H756" stroke="#ffe8d2" stroke-width="1.4"/>
</g>
</g>
<g id="leg-near-draw" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path id="leg-near-out" stroke="#1e3348" stroke-width="17"/>
<path id="leg-near" stroke="#e8922f" stroke-width="11"/>
</g>
<circle id="knee-near" r="7" fill="#e8922f" stroke="#1e3348" stroke-width="2"/>
<g id="pedal-near">
<rect x="-12" y="-3" width="24" height="7" rx="2" fill="#2c3544" stroke="#1e3348" stroke-width="1.5"/>
<rect x="-8" y="-1" width="16" height="2" fill="#d5dbe3"/>
</g>
<g id="foot-near">
<path d="M-2,-1 L18,-3 L24,3 L14,7 L4,6 L-4,9 L-12,4 Z" fill="#e8922f" stroke="#1e3348" stroke-width="2" stroke-linejoin="round"/>
<path d="M6,6 L5,12 M12,5 L13,12 M18,3 L23,9" fill="none" stroke="#1e3348" stroke-width="2" stroke-linecap="round"/>
</g>
<g id="bird">
<g fill="#fffaf3" stroke="#1e3348" stroke-width="3" stroke-linejoin="round">
<path d="M-62,2 L-128,-12 L-70,14 Z"/>
<path d="M-58,14 L-136,16 L-64,30 Z"/>
<path d="M-54,28 L-120,46 L-50,42 Z"/>
</g>
<path d="M-96,-6 L-122,-10 L-100,2 Z" fill="#243140" stroke="#1e3348" stroke-width="2"/>
<path d="M-100,18 L-130,16 L-104,28 Z" fill="#243140" stroke="#1e3348" stroke-width="2"/>
<path d="M-8,-6 C-24,20 -84,32 -114,8 C-100,-10 -72,-26 -46,-26 C-28,-30 -14,-18 -8,-6 Z" fill="#f4eee4" stroke="#1e3348" stroke-width="3"/>
<path d="M-86,0 L-116,4 L-92,14 Z" fill="#243140" stroke="#1e3348" stroke-width="2"/>
<ellipse cx="0" cy="4" rx="76" ry="47" fill="#fffaf3" stroke="#1e3348" stroke-width="3"/>
<ellipse cx="20" cy="18" rx="38" ry="22" fill="#ffffff" opacity="0.7"/>
<g id="wing-near">
<path d="M30,0 C82,-36 156,-32 214,4 C230,16 220,36 198,30 C150,18 100,24 52,20 C28,14 12,12 30,0 Z" fill="#fffaf3" stroke="#1e3348" stroke-width="3" stroke-linejoin="round"/>
<path d="M78,-6 C120,-4 160,2 198,12" fill="none" stroke="#eadfce" stroke-width="2"/>
<path d="M70,8 C124,10 166,14 194,22" fill="none" stroke="#eadfce" stroke-width="2"/>
<path d="M186,8 L216,0 L198,18 Z" fill="#243140" stroke="#1e3348" stroke-width="2" stroke-linejoin="round"/>
<path d="M192,20 L222,18 L200,32 Z" fill="#243140" stroke="#1e3348" stroke-width="2" stroke-linejoin="round"/>
</g>
<g id="neck">
<path d="M34,-8 C52,-36 74,-78 102,-100" fill="none" stroke="#1e3348" stroke-width="38" stroke-linecap="round"/>
<path d="M34,-8 C52,-36 74,-78 102,-100" fill="none" stroke="#fffaf3" stroke-width="30" stroke-linecap="round"/>
<ellipse cx="124" cy="-112" rx="32" ry="27" fill="#fffaf3" stroke="#1e3348" stroke-width="3"/>
<ellipse cx="108" cy="-102" rx="8" ry="4.5" fill="#f8c4b8" opacity="0.9"/>
<g id="pouch-wrap">
<path d="M146,-104 C196,-98 240,-112 270,-116 C252,-30 188,-16 146,-82 Z" fill="#ef7d57" stroke="#1e3348" stroke-width="3" stroke-linejoin="round"/>
<path d="M162,-96 C206,-58 236,-70 258,-108 C230,-46 196,-40 164,-78 Z" fill="#f7b199" opacity="0.95"/>
<path d="M168,-96 Q210,-62 252,-108" fill="none" stroke="#d86a48" stroke-width="2"/>
</g>
<path d="M142,-118 C196,-142 252,-136 286,-120 L274,-104 C226,-112 186,-104 146,-100 Z" fill="#f6a34a" stroke="#1e3348" stroke-width="3" stroke-linejoin="round"/>
<ellipse cx="178" cy="-140" rx="9" ry="14" fill="#f6a34a" stroke="#1e3348" stroke-width="3"/>
<path d="M168,-122 L190,-128" fill="none" stroke="#c47d2a" stroke-width="2" stroke-linecap="round"/>
<g class="blink">
<circle cx="136" cy="-118" r="11" fill="none" stroke="#f6a34a" stroke-width="3"/>
<ellipse cx="136" cy="-118" rx="6.4" ry="7.2" fill="#1e3348"/>
<ellipse cx="138.2" cy="-121" rx="2.2" ry="2.2" fill="#ffffff"/>
</g>
<path d="M124,-132 Q136,-140 148,-132" fill="none" stroke="#1e3348" stroke-width="2.4" stroke-linecap="round"/>
</g>
</g>
<text x="36" y="54" fill="#1d4e6e" font-size="34" font-weight="700"
font-family="Segoe UI, Microsoft YaHei, sans-serif">鹈鹕骑行</text>
<text x="38" y="80" fill="#3d6d88" font-size="15"
font-family="Segoe UI, Microsoft YaHei, sans-serif">湖边的早晨 · 一只白鹈鹕在骑自行车</text>
</svg>
<script>
(function () {
var ns = "http://www.w3.org/2000/svg";
var rear = { x: 408, y: 380 };
var front = { x: 708, y: 380 };
var bb = { x: 528, y: 372 };
var crankR = 24;
var wheelR = 54;
var birdX = 502;
var birdY = 258;
var l1 = 52;
var l2 = 50;
var rearSpin = document.getElementById("rear-spin");
var frontSpin = document.getElementById("front-spin");
var crank = document.getElementById("crank");
var bird = document.getElementById("bird");
var neck = document.getElementById("neck");
var wing = document.getElementById("wing-near");
var pouch = document.getElementById("pouch-wrap");
var chain = document.getElementById("chain");
var lane = document.getElementById("lane");
var waves = document.getElementById("waves");
var sunRays = document.getElementById("sun-rays");
var cloudLayer = document.getElementById("cloud-layer");
var treeLayer = document.getElementById("tree-layer");
var reedLayer = document.getElementById("reed-layer");
var flowerLayer = document.getElementById("flower-layer");
var lilyLayer = document.getElementById("lily-layer");
var legFarOut = document.getElementById("leg-far-out");
var legFar = document.getElementById("leg-far");
var legNearOut = document.getElementById("leg-near-out");
var legNear = document.getElementById("leg-near");
var kneeFar = document.getElementById("knee-far");
var kneeNear = document.getElementById("knee-near");
var pedalFar = document.getElementById("pedal-far");
var pedalNear = document.getElementById("pedal-near");
var footFar = document.getElementById("foot-far");
var footNear = document.getElementById("foot-near");
function addSpokes(group, cx, cy) {
var i, a, line;
for (i = 0; i < 10; i++) {
a = (Math.PI * 2 * i) / 10;
line = document.createElementNS(ns, "line");
line.setAttribute("x1", (cx + Math.cos(a) * 10).toFixed(1));
line.setAttribute("y1", (cy + Math.sin(a) * 10).toFixed(1));
line.setAttribute("x2", (cx + Math.cos(a) * 40).toFixed(1));
line.setAttribute("y2", (cy + Math.sin(a) * 40).toFixed(1));
line.setAttribute("stroke", "#5d6973");
line.setAttribute("stroke-width", "2");
line.setAttribute("stroke-linecap", "round");
group.appendChild(line);
}
}
function addRays(group, cx, cy) {
var i, a, line;
for (i = 0; i < 12; i++) {
a = (Math.PI * 2 * i) / 12;
line = document.createElementNS(ns, "line");
line.setAttribute("x1", (cx + Math.cos(a) * 48).toFixed(1));
line.setAttribute("y1", (cy + Math.sin(a) * 48).toFixed(1));
line.setAttribute("x2", (cx + Math.cos(a) * 70).toFixed(1));
line.setAttribute("y2", (cy + Math.sin(a) * 70).toFixed(1));
line.setAttribute("stroke", "#ffd56a");
line.setAttribute("stroke-width", "4");
line.setAttribute("stroke-linecap", "round");
group.appendChild(line);
}
}
addSpokes(rearSpin, rear.x, rear.y);
addSpokes(frontSpin, front.x, front.y);
addRays(sunRays, 148, 96);
function kneeOf(hip, foot) {
var dx = foot.x - hip.x;
var dy = foot.y - hip.y;
var dist = Math.hypot(dx, dy) || 0.001;
var max = l1 + l2 - 0.01;
var min = Math.abs(l1 - l2) + 0.01;
var d = Math.max(min, Math.min(max, dist));
var base = Math.atan2(dy, dx);
var cosA = (l1 * l1 + d * d - l2 * l2) / (2 * l1 * d);
if (cosA > 1) cosA = 1;
if (cosA < -1) cosA = -1;
var ang = Math.acos(cosA);
var kA = {
x: hip.x + Math.cos(base + ang) * l1,
y: hip.y + Math.sin(base + ang) * l1
};
var kB = {
x: hip.x + Math.cos(base - ang) * l1,
y: hip.y + Math.sin(base - ang) * l1
};
function score(k) { return -k.y + k.x * 0.55; }
return score(kA) >= score(kB) ? kA : kB;
}
function setLeg(outline, color, kneeDot, hip, foot) {
var knee = kneeOf(hip, foot);
var d = "M " + hip.x.toFixed(1) + " " + hip.y.toFixed(1) +
" L " + knee.x.toFixed(1) + " " + knee.y.toFixed(1) +
" L " + foot.x.toFixed(1) + " " + foot.y.toFixed(1);
outline.setAttribute("d", d);
color.setAttribute("d", d);
kneeDot.setAttribute("cx", knee.x.toFixed(1));
kneeDot.setAttribute("cy", knee.y.toFixed(1));
}
function pedalPoint(angle) {
return {
x: bb.x + Math.cos(angle) * crankR,
y: bb.y + Math.sin(angle) * crankR
};
}
function moveLayer(layer, distance, period) {
var s = distance % period;
if (s < 0) s += period;
layer.setAttribute("transform", "translate(" + (-s) + " 0)");
}
var angleWheel = 0.4;
var angleCrank = -0.75;
var scroll = 0;
var last = 0;
function pose(now) {
var bob = Math.sin(angleCrank * 2) * 3.4;
var nearHip = { x: 520, y: 312 + bob };
var farHip = { x: 506, y: 306 + bob };
var nearFoot = pedalPoint(angleCrank);
var farFoot = pedalPoint(angleCrank + Math.PI);
var wheelDeg = angleWheel * 180 / Math.PI;
var crankDeg = angleCrank * 180 / Math.PI;
rearSpin.setAttribute("transform", "rotate(" + wheelDeg.toFixed(2) + " " + rear.x + " " + rear.y + ")");
frontSpin.setAttribute("transform", "rotate(" + wheelDeg.toFixed(2) + " " + front.x + " " + front.y + ")");
crank.setAttribute("transform", "rotate(" + crankDeg.toFixed(2) + " " + bb.x + " " + bb.y + ")");
pedalNear.setAttribute("transform", "translate(" + nearFoot.x.toFixed(1) + " " + (nearFoot.y + 8).toFixed(1) + ")");
pedalFar.setAttribute("transform", "translate(" + farFoot.x.toFixed(1) + " " + (farFoot.y + 8).toFixed(1) + ")");
footNear.setAttribute("transform", "translate(" + nearFoot.x.toFixed(1) + " " + nearFoot.y.toFixed(1) + ")");
footFar.setAttribute("transform", "translate(" + farFoot.x.toFixed(1) + " " + farFoot.y.toFixed(1) + ")");
setLeg(legNearOut, legNear, kneeNear, nearHip, nearFoot);
setLeg(legFarOut, legFar, kneeFar, farHip, farFoot);
bird.setAttribute("transform", "translate(" + birdX + " " + (birdY + bob).toFixed(2) + ")");
neck.setAttribute("transform", "rotate(" + (Math.sin(angleCrank) * 3.2).toFixed(2) + " 42 -12)");
wing.setAttribute("transform", "rotate(" + (Math.sin(angleCrank * 2) * 2.1).toFixed(2) + " 36 6)");
var pouchScale = 1 + Math.sin(now / 260) * 0.045;
pouch.setAttribute("transform",
"translate(190,-70) scale(1," + pouchScale.toFixed(3) + ") translate(-190,70)");
chain.style.strokeDashoffset = String(-(scroll * 0.45));
lane.setAttribute("patternTransform", "translate(" + (-(scroll % 150)) + " 0)");
waves.setAttribute("patternTransform", "translate(" + (-(scroll * 0.18 % 90)) + " 0)");
sunRays.setAttribute("transform", "rotate(" + ((now / 90) % 360).toFixed(2) + " 148 96)");
moveLayer(cloudLayer, scroll * 0.08, 1200);
moveLayer(treeLayer, scroll * 0.22, 1000);
moveLayer(lilyLayer, scroll * 0.12, 1000);
moveLayer(reedLayer, scroll * 0.72, 1000);
moveLayer(flowerLayer, scroll * 0.86, 1000);
}
pose(0);
var reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) return;
function loop(now) {
if (!last) last = now;
var dt = (now - last) / 1000;
last = now;
if (dt > 0.05) dt = 0.05;
var roadSpeed = 130;
scroll += roadSpeed * dt;
angleWheel += (roadSpeed / wheelR) * dt;
angleCrank += 5.1 * dt;
pose(now);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
最新回复 (1)
-
exboy 09-22 06:511楼
* 帖子来源Linux.do
附近帖子
- ↑冬天想在家吃火锅，求切肉机推荐
- ↑【开源】DatI —— 面向 Agent 的数据库语义网关，智能问数与轻应用构建新方案
- ↑没有人注意到mimo的价格和速度吗
- ↑opencode宣布免费用mimo2.6-flash
- ↑MIMO V2.6 Pro蒸馏的模型居然是...不打自招
- 📍 grok4.7 free号鹈鹕测试(在harness PTC上测试的)
- ↓MiMo-V2.6系列正式发布 新国产斩杀线出现
- ↓2.5刀的6sol会是真的吗
- ↓关于你想知道的mimo2.6的全部（Flash/Pro（UltraSpeed））
- ↓大肥鱼说日文什么情况？？？？
- ↓【新斩杀线】Mimo-v2.6 Pro 同Sol性能，API价格≈gpt pro20x优惠价格