     .attr("cy", 0)
     .attr("r", 2)
     .attr("transform", "translate(200, 200)")
-    .attr("fill", "white")
-
-  redrawCanvas L, scale
-
-
-redraw 50
+    .attr("fill", contrasting)
+
+
 
 $('#lightness-slider').on 'input', ->
-  redraw parseInt $('#lightness-slider').val()+  L = parseInt $('#lightness-slider').val()
+  redraw()
+  clearCanvas()
+  redrawCanvas()
+
+$('#lightness-slider').on 'change', ->
+  L = parseInt $('#lightness-slider').val()
+  redraw()
+  clearCanvas()
+  redrawCanvas()
+
+redraw()
+clearCanvas()
+redrawCanvas()


  scale = 190 / longest


  """
  for xi in [-40..40]
    for yi in [-40..40]
      x = xi * 5
      y = yi * 5
      try
        hex = $.husl._conv.rgb.hex $.husl._conv.xyz.rgb $.husl._conv.luv.xyz [L, x, y]
        svgContainer.append("rect")
          .attr("x", xi * 5)
          .attr("y", yi * 5)
          .attr("height", 5)
          .attr("width", 5)
          .attr("transform", "translate(200, 200)")
          .attr("fill", hex)
  """

  for name in cleanBounds
    [c, s] = bounds[name]
    lineGraph = svgContainer.append("line")

      .attr("transform", "translate(200, 200)")
      .attr("stroke", "white")
      .attr("stroke-width", 1)
  """

  contrasting = if L > 50 then '#1b1b1b' else '#ffffff'

  svgContainer.append("circle")
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", scale * minC)
    .attr("transform", "translate(200, 200)")
    .attr("stroke", contrasting)
    .attr("stroke-width", 2)
    .attr("fill", "none")

  svgContainer.append("circle")
