JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<canvas id="canvas"></canvas>

JavaScript

const square = 200
canvas.height = canvas.width = square
const ctx = canvas.getContext('2d')
const size = Math.floor(square / 10) // 20
const radSize = Math.floor(size / 2) // 10

for (let i = 0; i < 6; i++) {
  for (let x = 0; x <= i; x++) {
    ctx.beginPath()
    ctx.arc(i * size + radSize, x * size + radSize, radSize, 0, 2 * Math.PI)
    ctx.stroke()
  }
}