svg+js实现随机破碎效果代码-html代码-BFW代码库

svg+js实现随机破碎效果代码

代码语言：html

所属分类：其他

代码描述：svg+js实现随机破碎效果代码，点击可更换破碎效果。

代码标签： svg 破碎

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          width: 100vw; height: 100vh;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: #000;
          margin: 0;
          padding: 0;
          color: #999;
          font-family: sans-serif;
        }
        #controls {
          padding: 20px;
        }
        .row {
          margin-bottom: 10px;
          text-align: center;
        }
        .container {
          display: flex;
          flex-direction: column;
          filter: url(#goo);
        }
    </style>

</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="600" viewBox="0 0 600 600">
  <defs>
    <linearGradient id="grad" x1="0%" y1="100%" x2="10%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.2" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0.1" />
    </linearGradient>
  </defs>
  <rect x="0" y="0" width="600" height="600" fill="rgb(252,68,63)" />
  <!--  filter="url(#goo)" -->
  <g id="content">
  </g>
</svg>

    <div id="controls">
        <div class="row">
            <button id="exportpng">Export PNG</button> <button id="exportsvg">Export SVG</button>
        </div>
        <div class="row">
            <input type="checkbox" checked name="autoplay" id="autoplay" /> <label for="autoplay">Autoplay</label>
        </div>
    </div>


    <script>
        const ns = 'http://www.w3.org/2000/svg';
        
        const svg = document.querySelector('svg');
        const content = svg.getElementById('content');
        
        const element = (type, attrs) => {
          const el = document.createElementNS(ns, type);
          for (let key in attrs) {
            el.setAttribute(key, attrs[key]);
          }
          return el;
        };
        
        const rand = (a, b) =>
        Math.random() * (b - a) + a;
        
        const add = (a, b) => a.map((v, i) => v + b[i]);
        const scale = (a, k) => a.map(v => v * k);
        const sub = (a, b) => add(a, scale(b, -1));
        const dist = (a, b) => Math.hypot(...add(a, scale(b, -1)));
        const lerp = (a, b, t) => a.map((v, i) => v * (1 - t) + b[i] * t);
        
        const hslToRgb = (h, s, l) => {
          let r, g, b;
        
          if (s == 0) {
            r = g = b = l; // achromatic
          } else {
            const hue2rgb = (p, q, t) => {
              if (t < 0) t += 1;
              if (t > 1) t -= 1;
              if (t < 1 / 6) return p + (q - p) * 6 * t;
              if (t < 1 / 2) return q;
              if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
              return p;
            };
        
            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1 / 3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1 / 3);
          }
        
          return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
        };
        
        const d = (instructions) =>
        instructions.m.........完整代码请登录后点击上方下载按钮下载查看