​

SVG path definitions: 

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

​

Path2D interface:

https://developer.mozilla.org/en-US/docs/Web/API/Path2D

​

p5's drawingContext:

https://p5js.org/es/reference/#/p5/drawingContext

*/

​

let majorCW; //major clockwise

let majorCCW; //major counterclockwise

let minorCW; //minor clockwise

let minorCCW; //minor counterclockwise

​

function setup() {

  createCanvas(400, 400);

  majorCW = new Path2D("M 190 190 A 50 100 45 1 1 215,215");

  majorCCW = new Path2D("M 190 190 A 50 100 45 1 0 215,215");

  minorCW = new Path2D("M 190 190 A 50 100 45 0 1 215,215");

  minorCCW = new Path2D("M 190 190 A 50 100 45 0 0 215,215");

}

​

function draw() {

  background(220);

  drawingContext.lineWidth = 2;

  drawingContext.strokeStyle = "#ED225D";

  drawingContext.stroke(majorCW);

  drawingContext.strokeStyle = "#333333";

  drawingContext.stroke(majorCCW);

  drawingContext.strokeStyle = "#2D7BB6";

  drawingContext.stroke(minorCW);

  drawingContext.strokeStyle = "#fff";

  drawingContext.stroke(minorCCW);

}