d3实现彩色三角跟随背景效果代码-html代码-BFW代码库

d3实现彩色三角跟随背景效果代码

代码语言：html

所属分类：背景

代码描述：d3实现彩色三角跟随背景效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  width: 100vw;
  height: 100vh;
}
</style>



</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.v3.js"></script>
      <script  >
var settings = {
  width: document.body.clientWidth,
  height: document.body.clientHeight,
  cellsize: Math.floor(Math.random() * Math.floor(150)) + 100,
  cellpadding: Math.floor(Math.random() * Math.floor(10)) + 5,
  bleed: Math.floor(Math.random() * Math.floor(200)) + 50,
  fillopacity: 1,
  strokeopacity: 1,
  x_gradient: ["#00FFFC", "#FC00FF", "#fffc00"],
  y_gradient: ["#fffc00", "#FC00FF", "#00FFFC"] };


settings.cellsX = Math.ceil(
(settings.width + settings.bleed * 2) / settings.cellsize);

settings.cellsY = Math.ceil(
(settings.height + settings.bleed * 2) / settings.cellsize);


// generate random data set to fill window and a bit beyond
var nodes = d3.range(settings.cellsX * settings.cellsY).map(function (d) {
  var col = d % settings.cellsX;
  var row = Math.floor(d / settings.cellsX);
  var x = Math.round(
  -settings.bleed +
  col * settings.cellsize +
  Math.random() * (settings.cellsize - settings.cellpadding * 2) +
  settings.cellpadding);

  var y = Math.round(
  -settings.bleed +
  row * settings.cellsize +
  Math.random() * (settings.cellsize - settings.cellpadding * 2) +
  settings.cellpadding);

  return [x, y];
});

var svg = d3.
select("body").
append("svg").
attr("id", "voronoi").
attr("width", settings.width).
attr("height", settings.height).
on("mousemove", function () {
  nodes[0] = d3.mouse(this);
  draw();
});

var voronoi = d3.geom.
voronoi().
clipExtent([
[settings.cellpadding, settings.cellpadding],
[
.........完整代码请登录后点击上方下载按钮下载查看