GLM-5.1 在「SVG 路径手写签名动画」的评测结果

这是该 AI 模型在此测试用例上的详细评测结果。

基本信息

  • 模型名称：GLM-5.1
  • 用例名称：SVG 路径手写签名动画
  • 测试类型：网页生成
  • 评测维度：SVG 矢量动画

系统提示词（System Prompt）

这是给 AI 模型的背景设定和角色指令：

你是一名前端开发工程师，擅长 SVG 动画技术。 代码要求： 1. 生成完整的单页 HTML 应用 2. CSS 和 JavaScript 内联在 HTML 文件中 3. 代码结构清晰，有适当注释

用户提示词（User Prompt）

这是用户给 AI 模型的具体任务要求：

使用 SVG 实现一个手写文字动画效果。 功能要求： 1. 在页面中展示一个 SVG 文字或签名路径（可以是英文单词，如「Hello」） 2. 利用 SVG 的 stroke-dasharray 和 stroke-dashoffset 属性，实现文字被逐笔描绘出来的动画效果 3. 页面加载后自动播放动画 4. 提供一个「重播」按钮，点击后可以重新播放动画

任务要求

AI 模型需要满足以下要求：

  1. 页面包含 SVG 路径文字或签名，视觉上清晰可辨
  2. 使用 stroke-dasharray 和 stroke-dashoffset 实现描边动画
  3. 页面加载后自动播放手写动画
  4. 提供「重播」按钮且功能正常
  5. 动画流畅，无明显卡顿

评测结果

综合得分

该模型在此用例的得分为：88.0 分（满分 100 分），已通过

基础难度评测结果

  • 得分：88.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html SVG 手写文字动画 /* ==================== 设计令牌 ==================== */ :root { --bg: #0b0b12; --fg: #e6ddd2; --muted: #5a5248; --accent: #c49a6c; --accent-light: #e6d5c3; --accent-dark: #8b6b4a; --border: rgba(196, 154, 108, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--fg); font-family: 'Noto Sans SC', sans-serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; position: relative; } /* ==================== 背景氛围层 ==================== */ /* 多层径向渐变营造深度感 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(196, 154, 108, 0.04), transparent), radial-gradient(ellipse 60% 80% at 20% 80%, rgba(139, 107, 74, 0.03), transparent), radial-gradient(ellipse 50% 50% at 80% 20%, rgba(196, 154, 108, 0.02), transparent); pointer-events: none; z-index: 0; } /* 浮动光晕球体 */ .bg-orb { position: fixed; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; animation: orbFloat 20s ease-in-out infinite; } .bg-orb-1 { width: 400px; height: 400px; background: rgba(196, 154, 108, 0.08); top: -100px; right: -50px; } .bg-orb-2 { width: 350px; height: 350px; background: rgba(139, 107, 74, 0.06); bottom: -80px; left: -60px; animation-delay: -10s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(20px, -15px); } 66% { transform: translate(-15px, 10px); } } /* 鼠标跟随柔光 */ .cursor-light { position: fixed; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 154, 108, 0.05), transparent 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: left 0.15s ease-out, top 0.15s ease-out; will-change: left, top; } /* ==================== 主容器 ==================== */ .main { position: relative; z-index: 1; text-align: center; padding: 20px; } /* SVG 动画区域 */ .svg-area { width:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【CLAUDE】该实现整体质量较高，正确运用了 stroke-dasharray/stroke-dashoffset 核心技术，视觉设计精美，交互功能完整。代码结构清晰，注释详尽，具备良好的工程实践（响应式、无障碍考虑）。主要不足在于对 text 元素使用固定的 dasharray 值而非动态计算路径长度，在技术严谨性上略有欠缺，但实际效果在主流浏览器中应能正常呈现。整体而言是一个超出基本要求的高质量实现。 【GEMINI】这是一份极其优秀的代码实现。模型不仅完美完成了所有功能要求（SVG 路径动画、自动播放、重播功能），还在视觉表现力上做了大量加分项，如分层动画设计（先描边后填充）、SVG 高斯模糊滤镜、背景氛围渲染以及响应式适配。代码结构清晰，注释详尽，展示了深厚的前端开发功底。 【KIMI】整体而言，该实现在动画效果和交互功能上表现良好，视觉呈现质量也较高。代码结构清晰，注释适当，符合题目要求。

进阶难度评测结果

  • 得分：91.6 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 手写签名动画 :root { --bg: #08080e; --card: #0e0e18; --accent: #c9a84c; --accent-dim: #8b6914; --accent-light: #e8d48b; --text: #ddd5c4; --text-muted: #6a6358; --border: #1e1e2c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: 'Noto Serif SC', Georgia, serif; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow-x: hidden; } /* 背景层 */ .bg-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .bg-glow { position: absolute; border-radius: 50%; filter: blur(130px); animation: breathe 8s ease-in-out infinite; } .bg-glow-1 { width: 500px; height: 500px; top: -180px; left: -120px; background: rgba(201,168,76,0.07); } .bg-glow-2 { width: 420px; height: 420px; bottom: -120px; right: -80px; background: rgba(139,105,20,0.05); animation-delay: 4s; } .bg-glow-3 { width: 260px; height: 260px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(201,168,76,0.03); animation-delay: 2s; } @keyframes breathe { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .bg-glow-3 { @keyframes breathe { 0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)} } } /* 背景粒子画布 */ #bgCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 20px; width: 100%; max-width: 860px; } /* 标题区 */ .header { text-align: center; opacity: 0; animation: fadeUp 0.8s ease 0.2s forwards; } .header h1 { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 300; letter-spacing: 10px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; } .header .sub { font-size: 11px; color: rgba(106,99,88,0.5); letter-spacing: 4px; } @keyframes fadeUp { from { opacity:...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一个非常优秀且专业的实现。模型不仅精准完成了所有功能要求，还在代码质量、用户体验和视觉美学上展现了极高的水平。通过 JS 动态生成 CSS 关键帧和动画属性，解决了 SVG 路径长度不一导致的时序难题，整体方案非常成熟。 【KIMI】整体而言，代码实现了题目要求的多笔画顺序动画、动画时长与路径长度成比例、播放/暂停控制、速度调节以及装饰性下划线效果，技术实现质量高，交互功能完整，视觉效果出色，达到了优秀的水平。但在交互细节上还有优化空间，如速度调节按钮状态的持久化。

困难难度评测结果

  • 得分：91.0 分
  • 通过状态：已通过

模型生成产物

以下是该模型针对此任务的实际生成内容：

```html 墨韵 · 手写签名动画系统 :root{ --bg:#0b0b12;--card:#12121c;--card2:#181826;--accent:#c8956c;--accent-l:#e0b890; --fg:#e8e0d8;--muted:#6a6260;--border:#252538;--paper:#f4efe5;--ink:#1a1a2e; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Noto Serif SC',serif;background:var(--bg);color:var(--fg);min-height:100vh;overflow-x:hidden} .bg-deco{position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(ellipse at 15% 40%,rgba(200,149,108,.06) 0%,transparent 55%), radial-gradient(ellipse at 85% 25%,rgba(200,149,108,.03) 0%,transparent 45%), radial-gradient(ellipse at 50% 90%,rgba(80,60,40,.04) 0%,transparent 50%)} .wrap{max-width:1060px;margin:0 auto;padding:2rem 1.5rem;position:relative;z-index:1} /* 标题 */ .hdr{text-align:center;margin-bottom:2rem} .hdr h1{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:300;letter-spacing:.18em;color:var(--accent-l);line-height:1.2} .hdr .sub{color:var(--muted);font-size:.78rem;letter-spacing:.35em;margin-top:.4rem} /* 画布区 */ .canvas-wrap{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.8rem;margin-bottom:1.2rem;position:relative;overflow:hidden} .canvas-wrap::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.25} .svg-box{width:100%;aspect-ratio:2.6/1;border-radius:10px;overflow:hidden;position:relative;background:var(--paper); box-shadow:inset 0 2px 20px rgba(0,0,0,.08),0 0 0 1px rgba(200,149,108,.08);transition:opacity .35s ease} .svg-box svg{width:100%;height:100%;display:block} .paper-grain{position:absolute;inset:0;opacity:.035;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")} /* 签名标签 */...

AI 评审点评

以下是 AI 评审对该模型输出的点评：

【GEMINI】这是一个极其优秀的实现，完全符合并部分超越了任务要求。模型不仅在技术层面深入应用了 WAAPI 和 Web Audio API，还在艺术表现力和交互细节（如音频动态增益、三层笔触叠加、键盘快捷键）上展现了极高的专业水准。代码结构健壮，是一个可以直接投入使用的专业级单页应用示例。 【KIMI】整体而言，该实现在动画效果、交互功能、视觉呈现和代码质量方面均表现出色，特别是在动画实现和交互功能的完整性上表现突出。虽然视觉呈现和代码质量略有不足，但总体上达到了高标准的专业级手写签名动画系统的要求。

相关链接

您可以通过以下链接查看更多相关内容：

加载中...
100%