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

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

代码语言：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]) );
}.........完整代码请登录后点击上方下载按钮下载查看