Gear face

let b, e
function setup() {
  let c = createCanvas(253, 260);
  c.style('border-radius', '10%')
  c.style('box-shadow', '0 0 3px #0006')
  c.style('margin', '10px auto')
  colorMode(HSL)
  mousePressed()
}

function mousePressed() {
  b = color(random(360), random(100), random(70, 100))
  e = color(random(360), random(60), random(90, 100))
}

function draw() {
  background(b);
  
  push()
  fill(e)
  translate(100, 100)
  rotate(PI * 2 / 150 * frameCount)
  scale(1 + 0.1 * sin(PI * 2 / 300 * frameCount))
  strokeWeight(1 / (1 + 0.1 * sin(PI * 2 / 300 * frameCount)))
  //noStroke()
  for (let i = 0; i < 15 * 2.5; i ++) {
    if (i == 15) {
      beginClip()
      rect(-1, -1, 22, 22)
      endClip()
    }
    rotate(-PI * 2 / 15)
    rect(0, 0, 20, 20)
  }
  pop()
  push()
  fill(e)
  translate(153, 100)
  rotate(-PI * 2 / 150 * (frameCount + 7))
  scale(1 + 0.1 * sin(-PI * 2 / 300 * frameCount))
  strokeWeight(1 / (1 + 0.1 * sin(-PI * 2 / 300 * frameCount)))
  //noStroke()
  for (let i = 0; i < 15 * 2.5; i ++) {
    if (i == 15) {
      beginClip()
      rect(-1, -1, 22, 22)
      endClip()
    }
    rotate(PI * 2 / 15)
    rect(0, 0, 20, 20)
  }
  pop()
  push()
  noFill()
  let r = 200 + 100 * sin(PI * 2 / 400 * frameCount)
  arc(126, 200-r, r*2, r*2, PI/2 - PI/3 * 100/r, PI/2 + PI/3 * 100/r)
  pop()
}