How to curve svg group of points

Question

So I am creating svg group of circles and need to curve them on user input. But I can't calculate right position. User can curve 3..n circles (i have all position of every circle). Example in image

https://i.stack.imgur.com/1YiV2.png

any idea how to calculate the curve and move circle to right position?

@Ghost ye but user input the intensity of curve. Its easy to calculate on 3 point -> first and last point doesnt move at all but the middle change Y position by intensity for example: i have 3 circles -> [{x: 10, y: 10}, {x: 30,: y: 10}, {x: 50, y:10}] after curve to intensity 1 the position change to -> [{x: 10, y: 10}, {x: 30,: y: 5}, {x: 50, y:10}] but i dont know how to calculate if i have line of 10 circles for example — user2932933, Jun 28 '20 at 22:46

score 1 · Accepted Answer · answered Jun 28 '20 at 23:16

I did the curve thing on HTML through js for you. It may not be the most efficient but here's the code:

var imgs = document.querySelectorAll("img");
let intensity = 24;
let reduction = intensity / (imgs.length-1);
for (let i = 0; i < imgs.length; i++) {
  imgs[i].style.left = i * 32 + "px"; // Use this for horizontal gap
  imgs[i].style.top = ((intensity) * (i)) + "px";
  intensity -= reduction;
}

img {
  width: 32px;
  height: 32px;
  position: absolute;
}

<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>
<img src="https://www.freepngimg.com/thumb/shape/29779-8-circle-file.png"/>

score 1 · Answer 2 · answered Jun 29 '20 at 05:44

One possible solution is putting the dots on a path:

In the next example I'm drawing an arc. The radius of the arc in this case is 100. The d attribute for the path is:

d="M-80,0A100,100 0 0 1 80,0"

The dots on the arc are the doted stroke. In order to know the value of the stroke-dasharray used I'm using javascript: you have strokes very small (.1) followed by gaps of 1/5 of the total length of the path. 1/5 is for 5 dots. Also I'm using a stroke-dashoffset of 1/10 of the total length of the path i.e one half of the gap used for stroke-dasharray

let length = thePath.getTotalLength()
thePath.setAttribute("stroke-dasharray", `.1,${length/5}`)
thePath.setAttribute("stroke-dashoffset", length/10)

svg{border:solid; }

<svg width="200" viewBox="-100 -100 200 200">
<path id="thePath" d="M-80,0A100,100 0 0 1 80,0" fill="none" stroke="black" stroke-linecap="round" stroke-width="30"/>    
</svg>

In order to put the dots on a straight line I'm changing the path to a arc with a very big radius: 1000 in this case

d="M-80,0A1000,1000 0 0 1 80,0"

let length = thePath.getTotalLength()
thePath.setAttribute("stroke-dasharray", `.1,${length/5}`)
thePath.setAttribute("stroke-dashoffset", length/10)

svg{border:solid; }

<svg width="200" viewBox="-100 -100 200 200">
<path id="thePath" d="M-80,0A1000,1000 0 0 1 80,0" fill="none" stroke="black" stroke-linecap="round" stroke-width="30"/>    
</svg>

"In order to put the dots on a straight line I'm changing the path to a arc with a very big radius" why not a line? `H80` seems perfect for the job... And for the curve, why an arc for which it's hard to get the start and end points? A simple bezier curve should do far better for OP's case, whatever it is exactly. — Kaiido, Jun 29 '20 at 07:08
@Kaiido I supposed that the OP may want to animate from one to another so I wanted to keep the same commands. A simple bezier curve would be a nice alternative solution. Mine is just a "possible solution" — enxaneta, Jun 29 '20 at 08:24

How to curve svg group of points

2 Answers2