Code
var bg = new Path.Rectangle({
size: view.size,
fillColor: 'black'
})
var amount = 20
var strokeWidth = 10
var waveAmplitude = 30
var waveLength = 0.1
var animationSpeed = 0.05
var padding = 20
var colorWidth = -8
var array = []
var rootGroup = new Group()
function createPath(i){
var path = new Path.Line({
from: [0, 0],
to: [0, 60],
strokeColor: 'blue',
strokeWidth: strokeWidth,
strokeCap: 'round',
position: view.center,
applyMatrix: false,
dashArray: [20, 20],
// dashArray: [10, 40, 60, 20]
})
path.strokeColor.hue = 360 / amount * i
path.onFrame = function(event){
this.segments[0].point.y = Math.sin(animationSpeed * event.count + i * waveLength) * waveAmplitude
// this.segments[0].point.x = Math.cos(animationSpeed * event.count + i * waveLength) * waveAmplitude
}
return path
}
for (var i = 0; i < amount; i++){
var path = createPath(i)
array.push(path)
rootGroup.addChild(path)
path.rotate(360 / amount * i, view.center + [0, 100])
}