* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

svg {
  width: 75vmin;
  height: 75vmin;
  overflow: visible;
}
import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";
import {
  createVoronoiTessellation,
  random
} from "https://cdn.skypack.dev/@georgedoescode/generative-utils";

const width = 196;
const height = 196;

const svg = SVG().viewbox(0, 0, width, height);

svg.addTo("body");

const points = [...Array(1024)].map(() => {
  return {
    x: random(0, width),
    y: random(0, height)
  };
});

const tessellation = createVoronoiTessellation({
  // The width of our canvas/drawing space
  width,
  // The height of our canvas/drawing space
  height,
  // The generating points we just created
  points,
  // How much we should "even out" our cell dimensions
  relaxIterations: 6
});

const debug = false;

tessellation.cells.forEach((cell) => {
  if (debug) {
    svg.polygon(cell.points).fill("none").stroke("#1D1934");
  }

  svg
    .circle(cell.innerCircleRadius * 2)
    .cx(cell.centroid.x)
    .cy(cell.centroid.y)
    .fill(random(["#7257FA", "#FFD53D", "#1D1934", "#F25C54"]))
    // Reduce each circle's size a little, to give the pattern some room
    .scale(0.75);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.