Самый простой способ сделать сложный div с волнами - PullRequest
Новая
       31

Самый простой способ сделать сложный div с волнами

0 голосов
/ 29 мая 2019

Я хотел бы создать div со сложными волнами, я сталкиваюсь с множеством уроков, и я много чего пробовал, но не могу этого сделать.Как лучше всего создавать волны, а фон вращается и останавливается на волне?Какой самый лучший / самый простой способ, я слышал о SVG, но не умел с этим.Это сложно реализовать?Я хотел бы нарисовать кривые и изменить фон соответственно, как на этой теме WordPress: https://www.elegantthemes.com/blog/theme-releases/shape-dividers

Я хотел бы сделать это: http://www.zupimages.net/viewer.php?id=19/22/jr0r.png

Я должен научиться SVG?или используйте иллюстратор, слишком сложный непосредственно в css, если у меня есть несколько волн.Существует ли такое программное обеспечение, как иллюстратор, чтобы сделать это бесплатно с svg?

, а затем сделать остальную часть моего стиля с начальной загрузкой 4 и т. Д.?... спасибо

Ответы [ 2 ]

0 голосов
/ 29 мая 2019

Я пробовал это раньше, просто используя изображение в качестве границы. Вы можете создать изображение с волнистой рамкой и играть с прозрачностью, чтобы получить нужный эффект.

0 голосов
/ 29 мая 2019

Обычно вы можете сделать это, используя шум Перлина.Однако вы можете сделать это также, установив количество точек с последовательными x и случайными y на холсте svg и соединяя точки с Безье.

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>
...