Sample code to generate scratched circles sketches using canvas-sketch

scratched-circles.js

import canvasSketch from "canvas-sketch";
import randomPalette from "../helpers/goodPalette";
import SimplexNoise from "../helpers/simplex";
import random from "../helpers/random";

// In inches
const width = 8,
  height = 8;

// Random inputs
const circlePrecision = Math.floor(random.range(300, 600)),
  precisionJitter = Math.floor(random.range(0, 3)),
  wildness = random.range(0.1, 2),
  circles = random.range(80, 200),
  startingRadius = random.range(0, width / 6),
  endRadius = random.range(width / 4, width / 2),
  variationStrength = random.range(0, width / 20),
  jitter = random.range(0, 1 / 64),
  dotSize = 1 / 128;

const sizeJitter = random.range(0, dotSize);
const noiseCycle = SimplexNoise.circularNoiseCycle(wildness, 1);
const { randomColor, pullRandomColor } = randomPalette();

// Sketch colors
const bg = pullRandomColor();
const color = randomColor();

const settings = {
  units: "in",
  dimensions: [width, height],
  pixelsPerInch: 300
};

const sketch = () => {
  return ({ context, width, height }) => {
    context.strokeStyle = color;
    context.fillStyle = bg;
    context.lineWidth = 1 / 64;
    context.fillRect(0, 0, width, height);

    context.fillStyle = color;

    for (let circle = 1; circle < circles; circle += 1) {
      const radius =
        (circle * (endRadius - startingRadius)) / circles + startingRadius;
      for (
        let i = 0;
        i < 1;
        i +=
          1 /
          (circlePrecision +
            (!precisionJitter
              ? 0
              : Math.floor(random.range(0, precisionJitter))))
      ) {
        context.beginPath();
        const variation =
          noiseCycle(i, circle / circles) * radius * variationStrength;
        const size = dotSize + random.range(-sizeJitter / 2, sizeJitter / 2);
        const xOffset = Math.sin(i * 2 * Math.PI) * (radius + variation);
        const yOffset = Math.cos(i * 2 * Math.PI) * (radius + variation);
        context.ellipse(
          width / 2 + xOffset + random.range(-jitter, jitter),
          height / 2 + yOffset + random.range(-jitter, jitter),
          size,
          size,
          0,
          0,
          Math.PI * 2
        );
        context.fill();
      }
    }
  };
};

canvasSketch(sketch, settings);