JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animated Star</title>
<script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
//Custom Path
function DoubleArc(point, r, w, as, ae) {
as = 2.0 / (100 / as); //Start of angle
ae = 2.0 / (100 / ae); //End of angle
var am = as + ((ae - as) / 2) //Middle of angle
var center = point.clone();
var start = new Point(center.x + r * Math.cos(as * Math.PI), center.y + r * Math.sin(as * Math.PI));
var through = new Point(center.x + r * Math.cos(am * Math.PI), center.y + r * Math.sin(am * Math.PI));
var to = new Point(center.x + r * Math.cos(ae * Math.PI), center.y + r * Math.sin(ae * Math.PI));
this.add(start);
this.arcTo(through, to);
var c = new Path.Circle(start, 10)
c.fillColor = "red";
var c = new Path.Circle(through, 10)
c.fillColor = "blue";
var c = new Path.Circle(to, 10)
c.fillColor = "green";
var toSmaller = new Point(center.x + (r - w) * Math.cos(ae * Math.PI), center.y + (r - w) * Math.sin(ae * Math.PI));
this.add(toSmaller);
var c = new Path.Circle(toSmaller, 10)
c.fillColor = "brown";
through = new Point(center.x + (r - w) * Math.cos(am * Math.PI), center.y + (r - w) * Math.sin(am * Math.PI));
to = new Point(center.x + (r - w) * Math.cos(as * Math.PI), center.y + (r - w) * Math.sin(as * Math.PI));
this.arcTo(through, to);
var c = new Path.Circle(through, 10)
c.fillColor = "white";
var c = new Path.Circle(to, 10)
...