Как можно нарисовать кривую линию от точки А в точку Б?

Question

[Unknown]

Привет!
Хочу нарисовать кривую линию от одного кружка к другому. Как можно реализовать это?

Comments

[longclaps]

Можно реализовать прямо, но ты же хочешь криво?
Криво тоже можно.

Answer 1

[AngReload]

Это кривые безье, генерируй их и вставляй в SVG таким кодом:

function makePath(x1, y1, x2, y2) {
  const weight = 0.3;
  const dx = (x2 - x1) * weight;
  const c1 = x1 + dx;
  const c2 = x2 - dx;
  return `<path d="M${x1},${y1} C${c1},${y1} ${c2},${y2} ${x2},${y2}" stroke="black" fill="transparent"/>`;
}

x1, y1 - начальная точка
x2, y2 - конечная точка
weight - жёсткость

Comments

[Unknown]

Спасибо, попробую

[AngReload]

Unknown, добавил jsfiddle

[Nikita-Fast]

AngReload, жесть ...

[AngReload]

Nikita-Fast, жесть?

Answer 2

[Nikita-Fast]

Comments

[Unknown]

Спасибо)
Интересно как вы написали это. Какой-то генератор?

[Nikita-Fast]

Unknown, inkscape

[Unknown]

Nikita-Fast, ааа

[Nikita-Fast]

Unknown, на javascript не умею ...

Answer 3

[Полина]

Если кружочки будут статичными, лучше не париться и сделать пнг.
А если динамичные, т.е. их положение/количество будет меняться, то примерно так jsfiddle.net/5g9z7t0o/2
Только будут не ломаные кривые, а безье, но принцип тот же.

Comments

[Nikita-Fast]

не похоже вроде бы - вот так надо : https://codepen.io/topicstarter/pen/dqxMZJ

[Unknown]

Спасибо)
Я понимаю что проще всего png, но на данный момент ищу более универсальное решение

[Полина]

Nikita-Fast, насчет самих линий вы правы, я в примере показала, как можно генерировать свг с помощью js в зависимости от расположения других блоков.

[Nikita-Fast]

Полина, ааа ...тогда да , like от меня

[AngReload]

Unknown, Nikita-Fast,
поменял угловатые на кривые — jsfiddle.net/5g9z7t0o/4

[Nikita-Fast]

AngReload, там же всё равно по другому хотя не хило сделано