canvas-sketch + canvas-sketch-util = penplot lines

rings.js

const canvasSketch = require('canvas-sketch');
const { renderPaths, createPath, pathsToPolylines } = require('canvas-sketch-util/penplot');
const { clipPolylinesToBox } = require('canvas-sketch-util/geometry');
const Random = require('canvas-sketch-util/random');

const settings = {
  dimensions: [ 12, 12 ],
  orientation: 'landscape',
  pixelsPerInch: 300,
  scaleToView: true,
  units: 'cm'
};

const sketch = ({ width, height, units }) => {
  // Holds all our 'path' objects
  // which could be from createPath, or SVGPath string, or polylines
  const paths = [];

  // Draw random arcs
  const count = 2000;
  for (let i = 0; i < count; i++) {
    // skip some randomly
    if (Random.gaussian() > 0) continue;

    // setup arc properties randomly
    const angle = Random.gaussian(0, Math.PI / 2);
    const arcLength = Math.abs(Random.gaussian(0, Math.PI / 2));
    const r = ((i + 1) / count) * Math.min(width, height) / 1;

    // draw the arc
    const p = createPath();
    p.arc(width / 2, height / 2, r, angle, angle + arcLength);
    paths.push(p);
  }

  // Convert the paths into polylines so we can apply line-clipping
  // When converting, pass the 'units' to get a nice default curve resolution
  let lines = pathsToPolylines(paths, { units });

  // Clip to bounds
  const margin = 1.5;
  const box = [ margin, margin, width - margin, height - margin ];
  lines = clipPolylinesToBox(lines, box);

  // The 'penplot' util includes a utility to render
  // and export both PNG and SVG files
  return props => renderPaths(lines, props);
};

canvasSketch(sketch, settings);