html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/******************************************
  More pens at twitter @svg_js / @saulmurf
*******************************************/

const width = window.innerWidth
const height = window.innerHeight - 10

let canvas = SVG()
  .addTo('body')
  .size(width, height)
  .viewbox(0, 0, 1500, 1500)

// Make a bunch of circles
function circles (hex, type) {

  const color = new SVG.Color(hex).hsl()

  // Make a group
  let group = canvas.group()
  group.rect(240, 100)
    .x(-330)
    .fill(hex)

  group.text(hex)
     .attr('font-size', 50)
     .move( -320, 20 )

  // Add the circles
  for ( let i = 0; i < 20; i++ ) {
    let {h, s, l} = color

    if (type == 'l') {
      l = 5*i
    } else if (type == "s") {
      s = 5*i
    }

    let c = new SVG.Color(h, s, l, 'hsl')
    let circle = group.circle(100, 100)
      .x( 20 + 120 * i )
      .stroke({
        width: 20,
        color: 'white',
        opacity: 0.6
      })
      .fill( c )
  }
  return group
}


let baseColors = ['#A2CCB6', '#FCEEB5', '#EE786E']
for ( let [ i, c ] of baseColors.entries() ) {
  circles( c, 'l' ).translate( -400, (1 + i) * 180)
  circles( c, 's' ).translate( -400, (5 + i) * 180)
}

canvas.text('Luminescence')
  .move(550, 50)
  .font({size: 50})

canvas.text('Saturation')
  .move(550, 4*180+50)
  .font({size: 50})

canvas.text('HSL Colors')
  .font({size: 200})
  .move(-1300, 900)
  .rotate(-90, -1000, 1000)