<svg class="canvas" viewBox="0 0 200 200"></svg>
<button>Regenerate</button>

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

body {
  height: 100vh;
  display: grid;
  place-items: center;
  background: hsl(0, 0%, 96%);
}

.canvas {
  width: 75vmin;
  height: 75vmin;
  background: hsl(0, 0%, 100%);
}

button {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background: #111;
  color: #fff;
  border: none;
  padding: 0.75em 2em;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

import { SVG } from "https://cdn.skypack.dev/@svgdotjs/svg.js";

// create a new svg.js instance
const svg = SVG(".canvas");

// regenerate button
const btn = document.querySelector("button");

// 200 x 200
const { width, height } = svg.viewbox();
// how many stripes should we paint?
const numStripes = 10;
// stripe width === viewBox width / the amount of stripes we would like to paint
const stripeWidth = width / numStripes;

// listen for clicks on the regenerate button
btn.addEventListener("click", () => {
  // re-paint the stripes
  generate();
});

function generate() {
  // store some simple browser default colors in an array
  const colors = ["red", "orange", "green", "blue", "pink", "yellow"];

  for (let i = 0; i < width; i += stripeWidth) {
    // pick a number between 0 and 5 (the length of the colors array)
    const diceRoll = Math.floor(Math.random() * colors.length);
    // pick out the color from the array using diceRoll as the index
    const color = colors[diceRoll];

    // draw a colored stripe on the canvas based on the “dice roll”
    svg.rect(stripeWidth, height).x(i).y(0).fill(color).stroke("#fff");
  }
}

generate();