dsh极简模式下的dsv4.1醍醐测试

开发调优
, ,
1

提示词：生成 html，内容是 svg 绘制鹈鹕骑自行车 2D 动画

image
image1920×1010 98.8 KB

源码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>鹈鹕骑自行车 · SVG 2D 动画</title>
<style>
  html, body { height: 100%; margin: 0; }
  body {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 24px; box-sizing: border-box;
    background: radial-gradient(circle at 50% -10%, #1d3149 0%, #0d1520 55%, #070a10 100%);
    font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #9fb3c8;
  }
  .stage { width: min(94vw, 920px); }
  svg {
    width: 100%; height: auto; display: block; border-radius: 20px;
    box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07) inset;
    cursor: pointer; user-select: none;
  }
  .hint { margin: 0; font-size: 13px; letter-spacing: .08em; opacity: .6; }
</style>
</head>
<body>

<div class="stage">
  <svg id="scene" viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg"
       role="img" aria-label="一只鹈鹕骑着自行车沿公路向前行驶的二维动画">
    <title>鹈鹕骑自行车</title>

    <defs>
      <!-- 天空 / 地面 / 车身配色 -->
      <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0"   stop-color="#8fd0f0"/>
        <stop offset="0.55" stop-color="#c8e9fa"/>
        <stop offset="1"   stop-color="#eaf7fb"/>
      </linearGradient>
      <radialGradient id="sunGlow">
        <stop offset="0"   stop-color="#fff4c2" stop-opacity="0.95"/>
        <stop offset="0.45" stop-color="#ffe9a0" stop-opacity="0.45"/>
        <stop offset="1"   stop-color="#ffe9a0" stop-opacity="0"/>
      </radialGradient>
      <linearGradient id="road" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#6c7482"/>
        <stop offset="1" stop-color="#474d59"/>
      </linearGradient>
      <linearGradient id="beakGrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stop-color="#ffc25c"/>
        <stop offset="1" stop-color="#e88b1e"/>
      </linearGradient>

      <!-- 云朵 -->
      <g id="cloud" fill="#ffffff">
        <ellipse cx="0" cy="0" rx="54" ry="22"/>
        <circle cx="-34" cy="-7" r="20"/>
        <circle cx="2" cy="-17" r="26"/>
        <circle cx="34" cy="-5" r="18"/>
      </g>

      <!-- 身体轮廓（用于腹部阴影裁剪） -->
      <clipPath id="bodyClip">
        <ellipse cx="330" cy="205" rx="86" ry="60" transform="rotate(-10 330 205)"/>
      </clipPath>

      <!-- 远处灌木 -->
      <g id="bush" fill="#63b177">
        <circle cx="-15" cy="-11" r="13"/>
        <circle cx="0"   cy="-17" r="17"/>
        <circle cx="16"  cy="-10" r="12"/>
      </g>

      <!-- 车轮（可旋转：辐条 + 气门嘴） -->
      <g id="spokes" stroke="#cdd7e3" stroke-width="3" stroke-linecap="round">
        <line x1="0" y1="0" x2="0" y2="-62"/>
        <line x1="0" y1="0" x2="0" y2="-62" transform="rotate(45)"/>
        <line x1="0" y1="0" x2="0" y2="-62" transform="rotate(90)"/>
        <line x1="0" y1="0" x2="0" y2="-62" transform="rotate(135)"/>
      </g>

      <!-- 近侧腿：蹬踏 IK 关键帧 -->
      <path id="legNear" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 360.0 246.0 L 437.1 288.5 L 446.0 370.0">
        <animate attributeName="d" dur="1.2s" repeatCount="indefinite"
          values="M 360.0 246.0 L 437.1 288.5 L 446.0 370.0;M 360.0 246.0 L 427.6 302.4 L 442.5 383.0;M 360.0 246.0 L 418.4 311.8 L 433.0 392.5;M 360.0 246.0 L 415.7 314.1 L 420.0 396.0;M 360.0 246.0 L 418.9 311.4 L 407.0 392.5;M 360.0 246.0 L 424.7 305.6 L 397.5 383.0;M 360.0 246.0 L 431.6 297.1 L 394.0 370.0;M 360.0 246.0 L 438.4 285.9 L 397.5 357.0;M 360.0 246.0 L 443.4 274.0 L 407.0 347.5;M 360.0 246.0 L 445.7 266.1 L 420.0 344.0;M 360.0 246.0 L 445.6 266.5 L 433.0 347.5;M 360.0 246.0 L 443.1 275.0 L 442.5 357.0;M 360.0 246.0 L 437.1 288.5 L 446.0 370.0"/>
      </path>

      <!-- 远侧腿：相位相差 180° -->
      <path id="legFar" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M 360.0 246.0 L 431.6 297.1 L 394.0 370.0">
        <animate attributeName="d" dur="1.2s" repeatCount="indefinite"
          values="M 360.0 246.0 L 431.6 297.1 L 394.0 370.0;M 360.0 246.0 L 438.4 285.9 L 397.5 357.0;M 360.0 246.0 L 443.4 274.0 L 407.0 347.5;M 360.0 246.0 L 445.7 266.1 L 420.0 344.0;M 360.0 246.0 L 445.6 266.5 L 433.0 347.5;M 360.0 246.0 L 443.1 275.0 L 442.5 357.0;M 360.0 246.0 L 437.1 288.5 L 446.0 370.0;M 360.0 246.0 L 427.6 302.4 L 442.5 383.0;M 360.0 246.0 L 418.4 311.8 L 433.0 392.5;M 360.0 246.0 L 415.7 314.1 L 420.0 396.0;M 360.0 246.0 L 418.9 311.4 L 407.0 392.5;M 360.0 246.0 L 424.7 305.6 L 397.5 383.0;M 360.0 246.0 L 431.6 297.1 L 394.0 370.0"/>
      </path>
    </defs>

    <!-- ================= 背景 ================= -->
    <rect width="900" height="500" fill="url(#sky)"/>

    <circle cx="762" cy="96" r="92" fill="url(#sunGlow)"/>
    <circle cx="762" cy="96" r="40" fill="#ffeaa7"/>

    <!-- 飘动的云 -->
    <g opacity="0.92">
      <animateTransform attributeName="transform" type="translate" from="0 0" to="-1140 0" dur="30s" repeatCount="indefinite"/>
      <use href="#cloud" transform="translate(100,86)"/>
      <use href="#cloud" transform="translate(480,56) scale(0.72)"/>
      <use href="#cloud" transform="translate(860,120) scale(1.15)"/>
      <use href="#cloud" transform="translate(1240,74) scale(0.85)"/>
    </g>

    <!-- 远山 -->
    <path d="M0,396 L0,344 C70,312 132,326 202,348 C272,370 320,314 400,330
             C470,344 512,320 582,332 C652,344 700,316 780,332 C842,344 872,336 900,342 L900,396 Z"
          fill="#8ed0a8"/>
    <path d="M0,396 L0,372 C82,350 152,370 232,380 C312,390 362,360 452,370
             C542,380 602,358 692,368 C772,376 842,362 900,370 L900,396 Z"
          fill="#6cb98a"/>

    <!-- 路面 -->
    <rect x="0" y="392" width="900" height="9" fill="#7cc47f"/>
    <rect x="0" y="400" width="900" height="100" fill="url(#road)"/>
    <rect x="0" y="400" width="900" height="4" fill="#8892a1" opacity="0.55"/>

    <!-- 路边灌木（向左滚动，速度与车轮一致） -->
    <g opacity="0.9">
      <animateTransform attributeName="transform" type="translate" from="0 0" to="-1320 0" dur="3.6s" repeatCount="indefinite"/>
      <use href="#bush" transform="translate(120,398)"/>
      <use href="#bush" transform="translate(560,398) scale(0.78)"/>
      <use href="#bush" transform="translate(1000,398) scale(1.12)"/>
      <use href="#bush" transform="translate(1440,398) scale(0.9)"/>
    </g>

    <!-- 路面虚线（周期 440px，与车轮周长一致，保证不打滑） -->
    <line x1="-40" y1="472" x2="940" y2="472" stroke="#eef2f7" stroke-opacity="0.8"
          stroke-width="7" stroke-dasharray="90 350" stroke-linecap="round">
      <animate attributeName="stroke-dashoffset" from="0" to="-440" dur="1.2s" repeatCount="indefinite"/>
    </line>

    <!-- 车的投影 -->
    <ellipse cx="430" cy="426" rx="215" ry="13" fill="#0b1018" opacity="0.22"/>

    <!-- ================= 远侧腿（在车架之后） ================= -->
    <use href="#legFar" stroke="#9d947f" stroke-width="20"/>
    <use href="#legFar" stroke="#d7cfba" stroke-width="14"/>

    <!-- ================= 车轮 ================= -->
    <!-- 后轮 -->
    <g>
      <circle cx="300" cy="350" r="70" fill="none" stroke="#24272d" stroke-width="11"/>
      <circle cx="300" cy="350" r="63" fill="none" stroke="#cbd6e2" stroke-width="4"/>
      <g transform="translate(300,350)">
        <g>
          <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.2s" repeatCount="indefinite"/>
          <use href="#spokes"/>
          <circle cx="0" cy="-58" r="4.5" fill="#ff6b6b"/>
        </g>
      </g>
      <circle cx="300" cy="350" r="9" fill="#3a4150"/>
      <circle cx="300" cy="350" r="4" fill="#8b97a8"/>
    </g>

    <!-- 前轮 -->
    <g>
      <circle cx="560" cy="350" r="70" fill="none" stroke="#24272d" stroke-width="11"/>
      <circle cx="560" cy="350" r="63" fill="none" stroke="#cbd6e2" stroke-width="4"/>
      <g transform="translate(560,350)">
        <g>
          <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="1.2s" repeatCount="indefinite"/>
          <use href="#spokes"/>
          <circle cx="0" cy="-58" r="4.5" fill="#ff6b6b"/>
        </g>
      </g>
      <circle cx="560" cy="350" r="9" fill="#3a4150"/>
      <circle cx="560" cy="350" r="4" fill="#8b97a8"/>
    </g>

    <!-- ================= 车架 ================= -->
    <g fill="none" stroke="#3b7dd8" stroke-linecap="round">
      <path d="M420,370 L392,252"            stroke-width="10"/> <!-- 座管 -->
      <path d="M392,252 L526,244"            stroke-width="9"/>  <!-- 上管 -->
      <path d="M420,370 L534,276"            stroke-width="10"/> <!-- 下管 -->
      <path d="M526,244 L534,276"            stroke-width="13"/> <!-- 头管 -->
      <path d="M420,370 L300,350"            stroke-width="8"/>  <!-- 后下叉 -->
      <path d="M392,252 L300,350"            stroke-width="8"/>  <!-- 后上叉 -->
      <path d="M534,276 L560,350"            stroke-width="8"/>  <!-- 前叉 -->
    </g>
    <path d="M526,244 L504,239" fill="none" stroke="#2f66b4" stroke-width="8" stroke-linecap="round"/>
    <path d="M506,239 L492,244" fill="none" stroke="#3a4150" stroke-width="11" stroke-linecap="round"/>
    <ellipse cx="500" cy="242" rx="11" ry="8" fill="#3a4150"/>

    <!-- 车座 -->
    <path d="M366,252 C374,240 408,238 418,248 C422,255 412,262 396,262 C378,262 368,260 366,252 Z"
          fill="#39404f"/>
    <path d="M372,250 C380,244 404,242 414,248" fill="none" stroke="#5b6577" stroke-width="3" stroke-linecap="round"/>

    <!-- 链条与齿盘 -->
    <circle cx="420" cy="370" r="22" fill="none" stroke="#b9c3d0" stroke-width="5"/>
    <circle cx="420" cy="370" r="17" fill="none" stroke="#b9c3d0" stroke-width="4" stroke-dasharray="3 5"/>
    <circle cx="300" cy="350" r="10" fill="none" stroke="#b9c3d0" stroke-width="4"/>
    <path d="M300,340 L420,348 A22,22 0 0 1 420,392 L300,360 A10,10 0 0 1 300,340 Z"
          fill="none" stroke="#8d99a8" stroke-width="4.5" stroke-dasharray="5 4"/>

    <!-- ================= 近侧腿 ================= -->
    <use href="#legNear" stroke="#b3aa96" stroke-width="21"/>
    <use href="#legNear" stroke="#f2ecdc" stroke-width="15"/>

    <!-- ================= 曲柄 / 踏板 / 脚掌 ================= -->
    <g>
      <animateTransform attributeName="transform" type="rotate" from="0 420 370" to="360 420 370" dur="1.2s" repeatCount="indefinite"/>

      <!-- 远侧 -->
      <line x1="420" y1="370" x2="394" y2="370" stroke="#8a94a3" stroke-width="8" stroke-linecap="round"/>
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 394 370" to="-360 394 370" dur="1.2s" repeatCount="indefinite"/>
        <rect x="381" y="365" width="26" height="9" rx="4" fill="#7d8796"/>
        <ellipse cx="394" cy="363" rx="12" ry="7.5" fill="#d98a2e"/>
      </g>

      <!-- 近侧 -->
      <line x1="420" y1="370" x2="446" y2="370" stroke="#c2ccd9" stroke-width="9" stroke-linecap="round"/>
      <g>
        <animateTransform attributeName="transform" type="rotate" from="0 446 370" to="-360 446 370" dur="1.2s" repeatCount="indefinite"/>
        <rect x="433" y="365" width="26" height="9" rx="4" fill="#aab4c2"/>
        <ellipse cx="446" cy="363" rx="13" ry="8" fill="#f2a03d"/>
      </g>
    </g>

    <!-- ================= 鹈鹕 ================= -->
    <g>
      <!-- 身体上下颠动 -->
      <animateTransform attributeName="transform" type="translate"
                        values="0 0; 0 -4; 0 0; 0 -4; 0 0" dur="1.2s" repeatCount="indefinite"/>

      <!-- 尾羽 -->
      <path d="M282,184 C248,178 214,196 192,228 C222,220 252,222 288,232 Z"
            fill="#e9e5d9" stroke="#c9c2b0" stroke-width="3" stroke-linejoin="round"/>
      <path d="M244,202 C228,210 214,220 202,230" fill="none" stroke="#d3ccba" stroke-width="2.5" stroke-linecap="round"/>

      <!-- 脖子：先画外描边，身体覆盖其根部，最后再补一层填充 -->
      <path d="M380,182 C394,128 418,104 452,98" fill="none"
            stroke="#c9c2b0" stroke-width="42" stroke-linecap="round"/>

      <!-- 身体 -->
      <ellipse cx="330" cy="205" rx="86" ry="60" fill="#f8f4e8"
               stroke="#c9c2b0" stroke-width="3" transform="rotate(-10 330 205)"/>
      <g clip-path="url(#bodyClip)">
        <ellipse cx="330" cy="250" rx="82" ry="48" fill="#e7e2d3"/>
      </g>

      <!-- 脖子填充（盖住身体轮廓在颈部的断口） -->
      <path d="M380,182 C394,128 418,104 452,98" fill="none"
            stroke="#f8f4e8" stroke-width="35" stroke-linecap="round"/>

      <!-- 靠内侧的翅膀（被脖子压住） -->
      <path d="M330,168 C362,178 402,204 432,232 C412,236 384,238 360,234 C338,230 320,214 316,196 Z"
            fill="#eeeade" stroke="#c9c2b0" stroke-width="2.5" stroke-linejoin="round"/>

      <!-- 头 -->
      <ellipse cx="470" cy="102" rx="33" ry="29" fill="#f8f4e8" stroke="#c9c2b0" stroke-width="3"/>
      <path d="M452,78 C442,58 456,44 474,50 C462,60 457,70 458,80 Z"
            fill="#f8f4e8" stroke="#c9c2b0" stroke-width="2.5" stroke-linejoin="round"/>

      <!-- 喉囊（随节奏轻微鼓动） -->
      <path fill="#f6b26b" stroke="#d9821f" stroke-width="2.5" stroke-linejoin="round"
            d="M488,102 C516,178 600,190 662,128 C600,116 540,108 488,102 Z">
        <animate attributeName="d" dur="1.2s" repeatCount="indefinite"
          values="M488,102 C516,178 600,190 662,128 C600,116 540,108 488,102 Z;M488,102 C516,188 600,192 662,128 C600,116 540,108 488,102 Z;M488,102 C516,178 600,190 662,128 C600,116 540,108 488,102 Z"/>
      </path>

      <!-- 上喙 -->
      <path d="M492,84 L668,116 L662,128 L488,102 Z"
            fill="url(#beakGrad)" stroke="#d9821f" stroke-width="2.5" stroke-linejoin="round"/>
      <path d="M496,96 L652,121" fill="none" stroke="#d9821f" stroke-width="2" opacity="0.75"/>
      <ellipse cx="512" cy="94" rx="4.5" ry="3" fill="#d9821f" opacity="0.8"/>

      <!-- 眼睛 -->
      <circle cx="484" cy="92" r="6" fill="#2b2f36"/>
      <circle cx="486" cy="90" r="2" fill="#ffffff"/>

      <!-- 近侧翅膀（扶车把） -->
      <g>
        <animateTransform attributeName="transform" type="rotate"
          values="0 352 166; -2.5 352 166; 0 352 166; 2 352 166; 0 352 166"
          dur="1.2s" repeatCount="indefinite"/>
        <path d="M352,162 C392,148 452,172 502,226 C508,233 510,241 502,248
                 C462,230 412,220 372,214 C356,211 344,200 344,186 Z"
              fill="#fbf8ef" stroke="#c9c2b0" stroke-width="3" stroke-linejoin="round"/>
        <path d="M372,196 C400,206 430,216 452,232" fill="none" stroke="#dcd5c3" stroke-width="2.5" stroke-linecap="round"/>
        <path d="M366,182 C398,192 424,204 444,222" fill="none" stroke="#dcd5c3" stroke-width="2.5" stroke-linecap="round"/>
      </g>
    </g>
  </svg>
</div>

<p class="hint">🪶 点击画面可暂停 / 继续</p>

<script>
  const svg = document.getElementById('scene');
  let paused = false;
  svg.addEventListener('click', () => {
    paused = !paused;
    paused ? svg.pauseAnimations() : svg.unpauseAnimations();
  });
</script>
</body>
</html>
2 个赞
2

这个代码发的有点让人眼花了喔

3

4.1flash的鹈鹕骑车效果确实不错，我测的比这个还要好一点，而且长上下文场景比glm5.3 flash好不少，但即便明天降完还是太贵了，再降低30%就好了。

4

这，求改个Markdown的代码块吧
比如

<svg/>

点击那两个出来时候没忍住笑了下

5

改了改了改了

1 个赞