Code
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var amount = 12
var innerCircle = 200
var outerCircle = 200
var strokeWidth = 10
var animationSpeed = 0.01
var animationDistanceX = 200
var animationDistanceY = 200
var arrayInner = []
var arrayOuter = []
var array = []
function createPoints(amount, distanceFromCenter, arrayToFeed){
for (var i = 0; i < amount; i++){
var innerPoints = new Path.Circle({
radius: 2,
fillColor: 'yellow',
position: view.center + [distanceFromCenter, 0],
opacity: 0
})
innerPoints.rotate(360/amount * i, view.center)
arrayToFeed.push(innerPoints.position)
}
}
function createLine(){
for (var i = 0; i < amount; i++){
var path = new Path.Line({
from: arrayInner[i],
to: arrayOuter[i],
strokeColor: 'blue',
strokeWidth: strokeWidth,
strokeCap: 'round',
blendMode: 'screen'
})
path.rotate(360 / amount * i); // Orient stars
var distance = path.getPointAt(path.length/10)
path.insert(1, distance)
path.strokeColor.hue = 360 / amount * i
path.onFrame = function(event){
this.strokeColor.hue -= 1
this.segments[0].point.x = view.center.x + Math.sin(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY * 1.5
this.segments[0].point.y = view.center.y + Math.cos(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY * 1.5
this.segments[1].point.x = view.center.x + Math.sin(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY
this.segments[1].point.y = view.center.y + Math.cos(animationSpeed * event.count + i * animationDistanceX) * animationDistanceY
this.smooth()
}
array.push(path)
}
}
createPoints(amount, innerCircle, arrayInner)
createPoints(amount, outerCircle, arrayOuter)
createLine()