Circle patterns inspired by Pavlovpulus

by PhilQ

HTML

<canvas id="canvas" width="150" height="150"></canvas>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%;
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222222;
}
canvas {
  background: #fff;
}

JavaScript

let canvas, context;

const settings = {
  width: 500,
  height: 500,
  gridSize: 20,
  padding: 20,
};

const dots = {
  main_1: {
    minR: 1,
    maxR: 8,
    lineWidth: 3,
    color: '#00598a', // dark skyblue
    alpha: 0.6,
    getP: (x, y) => {
      return getGradientValue(
        x,
        y,
        0 * settings.width,
        0 * settings.height,
        1 * Math.min(0.5 * settings.width, 0.5 * settings.height),
        false
      );
    },
  },
  main_2: {
    minR: 3,
    maxR: 10,
    lineWidth: 3,
    color: '#fccee8', // pink
    alpha: 0.5,
    getP: (x, y) => {
      return getGradientValue(
        x,
        y,
        0 * settings.width,
        0.8 * settings.height,
        1 * Math.min(0.5 * settings.width, 0.5 * settings.height),
        false
      );
    },
  },
  sub_1: {
    minR: 0,
    maxR: 10,
    lineWidth: 3,
    color: '#f54a00', // orange
    alpha: 0.5,
    getP: (x, y) => {
      return getGradientValue(
        x,
        y,
        0.75 * settings.width,
        0 * settings.height,
        Math.min(0.5 * settings.width, 0.5 * settings.height),
        false
      );
    },
  },
  sub_2: {
    minR: 1,
    maxR: 5,
    lineWidth: 3,
    color: '#00a6f4', // skyblue
    alpha: 0.5,
    getP: (x, y) => {
      return getGradientValue(
        x,
        y,
        0.75 * settings.width,
        0.8 * settings.height,
        0.7 * Math.min(0.5 * settings.width, 0.5 * settings.height),
        false
      );
    },
  },
};

function getGradientValue(x, y, rx, ry, r, inv = false) {
  const d = Math.min(1,
    Math.max(0,
      Math.sqrt(
        Math.pow(rx - x, 2) +
        Math.pow(ry - y, 2)
      ) / r
    )
  );
  return inv ? d: 1 - d;
}

document.addEventListener('DOMContentLoaded', () => {
  canvas = document.getElementById('canvas');
  canvas.width = settings.width;
  canvas.height = settings.height;

  context =...