用波浪制作复杂 div 的最简单方法

Question

我想创建具有复杂波形的 div，我遇到了很多教程，我尝试了很多东西，但我做不到。什么是制造波浪的最佳方式，背景在波浪处四处走动并停止？什么是最好/最简单的方法，我听说过 SVG，但没有这方面的技能。实现起来复杂吗？我希望我可以像在这个 WordPress 主题上一样绘制曲线并相应地更改背景： https://www.elegantthemes.com/blog/theme-releases/shape-dividers

我希望我能做到： http://www.zupimages.net/viewer.php?id=19/22/jr0r.png

我必须学习 SVG 吗？或者使用illustrator，如果我有几个wave，直接在CSS中太复杂了。有没有像插画师这样的软件可以免费使用 SVG 做到这一点？

然后用 bootstrap 4 等做我的其余风格？ ...谢谢你

Answer 1

我之前尝试过，只是使用图像作为边框。您可以创建带有波浪形边框的图像并使用透明度来获得所需的效果。

Answer 2

通常您可以使用 Perlin 噪声来执行此操作。但是，您也可以通过在 svg 画布上设置多个具有连续 x 和随机 y 的点，并将这些点与贝塞尔曲线连接起来。

let w = 1000;
let h = 300;
svg.setAttributeNS(null,"viewBox",`0 0 ${w} ${h}`)
let n = 18; //number of points
let points = [];// the points array used to draw the curve

// add points to the points array
for(let x=0; x <= w; x+= w/n){
  let y = h - Math.random()*h;
  points.push({x:x,y:y})
}


// a function to connect all the points in the points array with beziers
function  connect(points) {    
   let d = "";// the d attribute for the path
   // move to the first point of the array
   d+= `M${points[0].x}, ${points[0].y}`;
    //build the path
    for (var i = 1; i < points.length - 2; i++) {
      var cp = {};
      cp.x = (points[i].x + points[i + 1].x) / 2;
      cp.y = (points[i].y + points[i + 1].y) / 2;
      
      d+=`Q${points[i].x},${points[i].y} ${cp.x},${cp.y}`
    }
    //the last curve
    let index = points.length-2
   d+=`Q${points[index].x},${points[index].y} ${points[index + 1].x},${points[index + 1].y}`;
   //close the path
   d+=`V${h}H0z`
    return d;
  }
//set the attribute `d` for the wave
wave.setAttributeNS(null,"d",connect(points))

svg{border:1px solid}

<svg id="svg" >
  <path id="wave" />
</svg>