使用Svg.js在路径内创建元素

Question

我的目标是画出动感的星空：

我不知道如何在弧形路径内创建几个svg元素。

我能做的最好的事情就是创建我的弧线，将百个点的位置随机化，并仅保留那些在路径区域中的点。

这里是codepen example来说明这一点。

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);

    }
}

严格在复杂形状内创建这些点的正确方法是什么？

感谢您的建议