A Pen by naoyashiga.

Circles-moving-on-star-path..markdown

Circles moving on star path.

using Paper.js

A Pen by naoyashiga on CodePen.

License.

index.html

<script type="text/javascript" src="http://jsrun.it/assets/1/X/K/K/1XKKp"></script>
<script type="text/paperscript" canvas="myCanvas">
function Ball(point,speed){
    this.path = new Path.Circle({
        center:point,
        radius:5,
        fillColor:"white"
    });
    this.speed = speed;
}

function Star(){
    this.center = view.center;
    this.points = 5;
    this.radius1 = 50;
    this.radius2 = 100;
    this.path = new Path.Star(this.center, this.points, this.radius1, this.radius2);
    this.path.strokeColor = 'black';
    this.path.strokeWidth = 25;
    this.path.rotate(36);
}

var balls = [],
    stars = [],
    numBalls = 10,
    numStars = 3;

for(var i = 0;i < numStars;i++){
    stars.push(new Star());
    stars[i].path.scale(i + 1);
    for(var j = 0;j < numBalls;j++){
        balls.push(new Ball(stars[i].path.getPointAt(0),0.1 * (j + 1)));
    }
}

function onFrame(event){
    for(var i = 0;i < numStars;i++){
        for(var j = 0;j < numBalls;j++){
            offset = stars[i].path.length * (event.count * balls[i * numBalls + j].speed  % 100) / 100;
        
            point = stars[i].path.getPointAt(offset);
        
            balls[i * numBalls + j].path.position = point;
        }
    }
}
</script>
<canvas id="myCanvas" resize></canvas>

style.css

body {
  background: #fff;
}