canvas

<script type="text/javascript">
  const canvas = document.getElementsByTagName('canvas')[0];

  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = '#ecf0f1';

    const coordinates = [[200, 130], [250, 150], [270, 200], [250, 250], [200, 270], [150, 250], [130, 200], [150, 150]];
    for (const coordinate of coordinates) {
      ctx.beginPath();
      ctx.arc(coordinate[0], coordinate[1], 60, 0, Math.PI * 2, true);
      ctx.fill();
    }

    ctx.globalAlpha = 0.1;

    ctx.fillStyle = '#ffbe76';
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, Math.PI * 2, true);
    ctx.fill();

    ctx.globalAlpha = 0.3;

    // Big circle
    ctx.fillStyle = '#9b59b6';
    for (let i = 0; i < 7; i++) {
      ctx.beginPath();
      ctx.arc(200, 200, 10 + 10 * i, 0, Math.PI * 2, true);
      ctx.fill();
    }

    const colors = ['#3498db', '#34495e', '#e67e22', '#3742fa', '#e74c3c', '#8e44ad', '#f39c12', '#27ae60'];
    for (let j = 0; j < colors.length; j++) {
      for (let i = 0; i < 4; i++) {
        ctx.fillStyle = colors[j];
        ctx.beginPath();
        ctx.arc(coordinates[j][0], coordinates[j][1], 10 + 10 * i, 0, Math.PI * 2, true);
        ctx.fill();
      }
    }
  }
</script>