<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动态烟雾背景效果</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        overflow: hidden;
        position: relative;
      }

      .smoke {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to right,
          rgb(255, 0, 0),
          rgba(255, 202, 202, 0.2)
        );
        opacity: 0.3;
        clip-path: polygon(
          7.58091% 80.5133%,
          7.93936% 56.976%,
          18.586% 70.5741%,
          26.5314% 75.8783%,
          85.3794% 102.477%,
          71.0122% 62.9531%,
          69.4123% 10.7274%,
          48.5338% 50.7188%,
          7.92287% 51.0833%,
          76.7842% 51.1539%,
          85.9364% 53.9778%,
          56.9491% 60.7743%,
          -5.4889% 8.58339%,
          49.2546% -6.24799%,
          58.0319% 20.1128%,
          34.3308% -1.87421%
        );
        transition: clip-path 3s ease-in-out;
      }
    </style>
  </head>
  <body style="filter: blur(64px)">
    <div class="smoke" id="smokeLayer"></div>

    <script>
      const smokeLayer = document.getElementById("smokeLayer");

      function randomClipPath() {
        // 生成随机的 clip-path 数值
        const randomPoints = [];
        for (let i = 0; i < 16; i++) {
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          randomPoints.push(`${x}% ${y}%`);
        }
        smokeLayer.style.clipPath = `polygon(${randomPoints.join(", ")})`;
      }

      // 每隔一段时间更新 clip-path
      setInterval(randomClipPath, 3000); // 每2秒更新一次
    </script>
  </body>
</html>