trianglify生成多彩三角形svg背景效果-html代码-BFW代码库

trianglify生成多彩三角形svg背景效果

代码语言：html

所属分类：背景

代码描述：trianglify生成多彩三角形svg背景效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
	 --stroke: hsla(0,0%,90%,.5);
	--stroke-width: .5;
}
html, body {
	background: white;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	cursor: pointer;
}

svg {
	transform-origin: 0% 0%;
}
path {
	stroke: var(--stroke);
	stroke-width:  var(--stroke-width);
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/trianglify.min.js"></script>
<script>
var svg, paths;
function generate() {
  doDestroy(() => {
    var pattern = Trianglify({
      width: window.innerWidth,
      height: window.innerHeight,
      cell_size: 40 });


    document.body.innerHTML = "";
    svg = document.body.appendChild(pattern.svg({ includeNamespace: true }));
    const stroke = randomColor(),
    strokeWidth = rnd(0, 1);
    document.documentElement.style.setProperty("--stroke", stroke);
    document.documentElement.style.setProperty("--stroke-width", strokeWidth);
  });
}

function randomColor() {
  return `hsla(${rnd(0, 360, 1)},${rn.........完整代码请登录后点击上方下载按钮下载查看