Самый простой способ сделать сложный div с волнами
Я хотел бы создать 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
Обычно это можно сделать с помощью шума Перлина. Однако вы также можете сделать это, установив несколько точек с последовательными 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>Здравствуйте, этот скрипт волшебный, у меня бы такое никогда не получилось. Просто большая проблема. Форма кривой меняется каждый раз при перезагрузке страницы. Что делать, если я хочу сделать статическую кривую? Спасибо
В этом случае вы жестко задаете значения для точек. В качестве альтернативы, если вы видите кривую, которая вам нравится, вы можете открыть инспектор, скопировать элемент svg и использовать его в своем html.
Я пробовал это раньше, просто используя изображение в качестве границы. Вы можете создать изображение с волнистой рамкой и поиграть с прозрачностью, чтобы получить нужный эффект.
SVG бесплатно? Инкскейп. Сначала Google, затем StackOverflow.