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

Question

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

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

我必须学习 SVG 吗？还是用illustrator，太复杂了直接在CSS如果我有好几波。有像插画师这样免费使用 SVG 的软件吗？

然后用 bootstrap 4 等完成我的其余风格？ ...谢谢

Answer 1

通常你可以使用 Perlin 噪音来做到这一点。但是，您也可以通过在 svg canvas 上设置一些具有连续 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>

Answer 2

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

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

Easiest way to make complex div with waves

html

css

svg

adobe-illustrator