Dash circle animation with gradient

Animation • Generative Art Codes • Paper.js
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Paper.js</title>
<link rel="stylesheet" href="./../PaperJSEngine/style.css" />
<script type="text/javascript" src="./../PaperJSEngine/paper-full.min.js"></script>
<script type="text/paperscript" canvas="canvas">

var group = new Group()

var path = new Path.Circle({
    radius: 55,
    strokeColor: 'white',
    strokeWidth: 45,
    position: view.center,
    closed: false,
    strokeCap: 'round',
    parent: group
})

var dash = path.clone()
dash.strokeColor = 'white'
dash.closed = 'true'
dash.position = view.center
dash.dashArray = [10, 120]
dash.sendToBack()


function onFrame(event){

    path.rotate(Math.sin(event.count * 0.005) * 1.5, view.center)
    dash.rotate(Math.sin(event.count * -0.005) * 1.5, view.center)

    path.strokeColor.hue += 1
    dash.strokeColor.hue += 1

}

var overlay = new Path.Rectangle({
    size: view.bounds,
    fillColor: 'black',
    position: view.center,
    blendMode: 'color-dodge'
})

var topLeft = view.center - [80, 80]
var bottomRight = view.center + [80, 80]

var gradient = new Path.Rectangle({
    topLeft: topLeft,
    bottomRight: bottomRight,
    fillColor: {
        gradient: {
            stops: ['yellow', 'red', 'blue']
        },
        origin: topLeft,
        destination: bottomRight
    },
    blendMode: 'multiply'
})

gradient.onFrame = function(event){
    this.rotate(1)
}

project.activeLayer.scale(3)

</script>
</head>
<body>
<canvas hidpi="on" id="canvas" resize style="background: black;"></canvas>
</body>
</html>