0

My objective is to draw an animated starry sky :

Starry sky

I can't figure out how to create several svg elements inside an arc path.

The best i can do is to create my arc, randomize position of hundred points, and keep only those which are in the path area.

Here is a codepen example to illustrate this.

var s = SVG('scene').size('100%', 500);

var arc = s.path('M700,401 A100,100 0 0,1 800,301 L800,201 A200,200 0 0,0 
600,401 L700,401 Z');

arc.attr({
  fill: '#fff',
  stroke: '#fff',
  strokeWidth: 1
});

var c, x, y;

  for (var count = 0; count < 100; count++) {

    x = Math.random() * window.innerWidth / 2;
    y = Math.random() * window.innerHeight;

    if(arc.inside(x, y)) {

      c = s.circle(10).fill('#0f6').move(x, y);

    }
    else {

      c = s.circle(10).fill('#DDCA7E').move(x, y);

    }
}

What would be the right way to create these points strictly inside a complex shape ?

Thanks for your advices

Lbh
  • 67
  • 1
  • 7
  • the `inside` method does not check if a point is in a shap but in the **bounding box** of a shape. Thats a difference. Beside that, this is an x, y problem. What you are searching for is to get points in an arc segment which is a normal maths question. However, you need to convert your arc to the center based notation first. A solution for that is here: https://stackoverflow.com/questions/9017100/calculate-center-of-svg-arc – Fuzzyma Jun 29 '18 at 07:38
  • @Fuzzyma Thanks for this clever answer. I will investigate on this. – Lbh Jun 29 '18 at 08:24

0 Answers0