Dash circle animation

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: 'red',
    strokeWidth: 25,
    position: view.center,
    closed: false,
    strokeCap: 'round',
    parent: group
})

var dash = path.clone()
dash.strokeColor = 'yellow'
dash.closed = 'true'
dash.position = view.center
dash.dashArray = [10, 70]
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

}

project.activeLayer.scale(3)

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