js+svg实现三角图案背景效果代码-html代码-BFW代码库

js+svg实现三角图案背景效果代码

代码语言：html

所属分类：背景

代码描述：js+svg实现三角图案背景效果代码

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


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

<head>

  <meta charset="UTF-8">
  


  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #353535;
}

#container {
  width: 1100px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  transform: scale(1.5);
}

svg {
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

svg.rotated {
  transform: rotate(180deg);
  filter: drop-shadow( 4px 1px 2px hsla(0, 0%, 0%, 0.2));
}

path {
  fill:#000000;
  fill-opacity: 1;
}

svg:hover {
  filter: brightness(1.3);
}
</style>


</head>

<body >
  <div id="container"></div>

  
      <script  >
const width = 100;
const height = 62;
const size = 1050;
const CONTAINER = document.getElementById("container");
let ROW_COUNTER = 0;
const FINAL_COLORS = ["FFE285", "FFE99C", "FFE285", "FFD95C", "FFE285", "FFE99C", "FFE285", "FFE99C"];
const TOP_COLORS = ["B5E48C","D9ED92","FFC400", "FFCF33", 'FFE99C', "FFD95C", "FFE285", "FFE285"]
const MIDDLE_COLORS = ["52B69A", "76C893", "99D98C", "FFE285", "B5E48C", "D9ED92", "FFE99C", "EEBA0B"];
const BASE_COLORS = ["184E77", "1E6091", "1A75.........完整代码请登录后点击上方下载按钮下载查看