svg结合wtc-math生成春天的背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：svg结合wtc-math生成春天的背景效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>

document, body {
  margin: 0;
  min-height: 100vh;
}

body {
  align-items: center;
  background: #F6FFFA;
  display: flex;
  font-family: "Montserrat", sans-serif;
  justify-content: center;
}

#container {
  align-items: center;
  display: flex;
  flex-direction: column;
}

#container > :first-child {
  cursor: pointer;
}

button {
  bottom: 30px;
  max-width: 200px;
  margin-top: 10px;
  position: fixed;
}
</style>



</head>

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

  
      <script type="module">
import { SVG } from 'https://cdn.skypack.dev/@svgdotjs/svg.js'
import { Vec2, Vec3 } from 'https://cdn.skypack.dev/wtc-math';
console.clear();

const config = {
  drawingType: 2,
  dimensions: new Vec2(window.innerWidth-20, window.innerHeight-20),
  r: 50,
  k: 32,
};
const vars = {
  drawing: null
}
let resizeTimeout;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(() => {
    document.querySelector('#container .drawing').innerHTML = '';
    config.dimensions = new Vec2(window.innerWidth-20, window.innerHeight-20);
    vars.drawing = new Drawing(config.drawingType).addTo('#container .drawing').size(config.dimensions);
    setup();
  }, 200);
})
const setup = () => {
  vars.drawing.clear();
  config.r = floatRandomBetween(40, 120);
  vars.bluenoise = new BlueNoise({
    size: config.dimensions.addNew(new Vec2(config.r*2, config.r*2)),
    offset: new Vec2(config.r*-1, config.r*-1),
    r: config.r,
    k: config.k
  });
  draw();
};

const drawStar = (pos, initialA = 0, ir = 10, spokes = 7, dims = new Vec2(4, 10)) => {
  for(let i = 0; i < spokes; i++) {
    const a = initialA + Math.PI * 2 / spokes * i;
    const oa = a - Math.PI * .5;
    const ip = new Vec2( Math.cos(a) * ir + pos.x, Math.sin(a) * ir + pos.y );
    const u = ip.addNew( new Vec2( Math.cos(oa) * (dims.x * .5), Math.sin(oa) * (dims.x * .5) ) );
    const v = u.addNew( new Vec2( Math.cos(a) * dims.y, Math.sin(a) * dims.y ) );
    const x = v.addNew( new Vec2( Math.cos(oa) * (dims.x * -1), Math.sin(oa) * (dims.x * -1) ) );
    const y = ip.addNew( new Vec2( Math.cos(oa) * (dims.x * -.5), Math.sin(oa) * (dims.x * -.5) ) );
    
    vars.drawing.polygon( [u,v,x,y,u] );
  }
}
const drawCurl = (pos, initialA = 0, ir = 20, points = 3, width = 5, revolutions = 3) => {
  const pointsDown = [];
  const pointsUp = [];
  const maxRev = (ir / width) - 1. / points;
  revolutions = Math.min(revolutions, maxRev);
  for(let i = 0; i < points*revolutions; i++) {
    const a = initialA + Math.PI * 2 / points * i;
    const oa = a - Math.PI * .5;
    const ip = new Vec2( Math.cos(a) * ir + pos.x, Math.sin(a) * ir + pos.y );
    const u = ip.addNew( new Vec2( Math.cos(a) * (width * .5), Math.sin(a) * (width * .5) ) );
    const v = ip.addNew( new Vec2( Math.cos(a) * (width * -.5), Math.sin(a) * (width * -.5) ) );
    pointsDown.push(u);
    pointsUp.push(v);
    ir -= width / points;
  }
  vars.drawing.polyline( pointsDown.concat(pointsUp.reverse()).concat(pointsDown[0]) );
}
const draw = () => {
  vars.drawing.rect(new Vec2(0,0), config.dimensions);
  
  while(vars.bluenoise.active.length > 0) {
    vars.bluenoise.step();
  }
  vars.drawing.stroke = '#000000FF';
  vars.drawing.lineWidth = 2;
  vars.bluenoise.news.forEach((n) => {
    const f = config.r/80;
    const annulus = new Vec2(floatRandomBetween(6*f, 12*f), floatRandomBetween(5*f,10*f));
    vars.drawing.stroke = '#'+getColour(Math.random());
    
    const which = Math.random();
    if(which < .89) {
      drawStar(
        n.addNew(vars.bluenoise.offset),                              // position
        Math.random() * Math.PI,                                      // initial angle
        annulus.x,                                                    // internal size
        Math.floor(floatRandomBetween(3, 12)),                        // number of spokes
        new Vec2(floatRandomBetween(2*f,4*f), annulus.y)              // spoke size
      );
      vars.drawing.circle(n.addNew(vars.bluenoise.offset), annulus.x*.25);
    } else if(which < .9) {
      drawCurl(
        n.addNew(vars.bluenoise.offset),                              // position,
        Math.random() * Math.PI,                                      // initial angle
        annulus.x * 1.5,                                                // internal size
        20,                                                           // number of points
        floatRandomBetween(3*f,7*f),                                  // width of stroke
        Math.floor(floatRandomBetween(1,6))                           // The number of revolutions
        );
    } else {
      drawCurl(
        n.addNew(vars.bluenoise.offset),                              // position,
        Math.random() * Math.PI,                                      // initial angle
        annulus.x * 1.5,                                              // internal size
        Math.floor(floatRandomBetween(3, 3)),                         // number of points
        floatRandomBetween(3*f,7*f),                                  // width of stroke
        Math.floor(floatRandomBetween(3,6))                           // The number of revolutions
        );
    }
    
  });
  
  const triangles = Delaunator.fr.........完整代码请登录后点击上方下载按钮下载查看