One Pi Harness, four models: how does each draw Lin Yueji (林悦己)?

You’re an artist and frontend animation engineer.

请根据下方的“人物特征描述”，创作一幅具有辨识度的手绘人物肖像，并把完整作品制作成一个可以直接运行的单文件 HTML。

目标是让观众看到这幅人物肖像从空白画布开始，被画笔一笔一笔画出来，最后形成完整人物形象。

【交付形式】
1. 输出一个完整、自包含的 index.html到桌面上
2. HTML 必须双击即可运行。
3. 使用 SVG 绘制人物，不使用外部图片、外部字体、外部 JavaScript 库或网络资源。
4. 不要把人物制作成静态图片，也不要使用预先完成的图片进行遮罩揭示。
5. 人物的主要轮廓、五官、头发、眼镜、服装和阴影都要由独立的 SVG path 组成。
6. 页面中只允许出现一名人物。
7. 除一个简单的 Replay 按钮外，不添加文字、标题、介绍、边框、面板、装饰或其他 UI。

【画面规格】
- 使用 900 × 1200 的 SVG viewBox。
- 画面为竖版人物半身肖像。
- 背景使用纯净、略带暖色的白色纸张。
- 人物位于画面中央，腿以上占据主要空间。
- 最终风格为干净、有控制力的编辑插画与人物速写结合。
- 使用深色铅笔线条、少量暖黄色肤色
- 保留手绘线条的轻微不规则感。
- 不要追求照片级皮肤纹理，重点表现人物脸型、骨骼、眉眼、眼镜等特征。

【绘制动画】
1. 页面加载后，先展示空白画布约 800 毫秒。
2. 按照真实画人物的顺序逐笔完成：
- 头部外轮廓
- 耳朵与下颌
- 发际线和头发
- 眉毛
- 眼镜框
- 眼睛
- 鼻梁与鼻翼
- 嘴唇
- 颧骨、脸颊和下巴结构线
- 脖子
- 肩膀和上衣外轮廓
- 面部与服装的少量颜色和阴影
1. 每一笔都必须使用 SVG stroke-dasharray 和 stroke-dashoffset 从无到有地绘制。
2. 使用 JavaScript 的 getTotalLength() 与 getPointAtLength() 控制动画。
3. 使用 requestAnimationFrame 驱动绘制过程。
4. 一个可见的手绘铅笔或画笔光标必须始终跟随当前路径的绘制端点。
5. 画笔尖端要与正在出现的线条精确重合。
6. 画笔在不同路径之间移动时，应有短暂、自然的移动过程。
7. 填色和阴影应在相关轮廓完成后逐渐出现。
8. 整个绘制过程控制在 12–16 秒。
9. 完成后隐藏画笔，只保留最终肖像和 Replay 按钮。
10. 点击 Replay 后，所有路径、颜色和阴影立即清空，重新显示空白画布，再完整播放一次。
11. 禁止只对整幅成品做淡入、擦除、裁切或统一遮罩动画。

【人物特征描述】
【最重要的面部锚点】
按以下优先级保持人物辨识度：
（这两个补充gpt说的）

【必须避免】
- 露齿大笑或夸张表情。
- 过度美化、磨皮、网红脸。
- 卡通化大头、Q 版比例或夸张漫画表情。
- 用 CSS div、emoji、文字字符或几何图标拼成人脸。
- 添加其他人物、讲台、话筒、背景建筑或装饰。
- 画笔与线条不同步。
- Replay 后无法完全清空画面。

【验收标准】
- 首屏必须是空白画布。
- 肖像确实由一笔一笔的 SVG 路径形成。
- 绘制过程中始终能看到画笔。
- 画笔尖端与路径末端同步。
- 最终人物能清楚读出【最重要的面部锚点】
- 页面响应式缩放时，人物、路径和画笔保持对齐。
- Replay 可以无限重复播放。
- 浏览器控制台没有错误。

请直接完成并输出可运行的 HTML 代码，不要只提供设计说明或伪代码。