A CodePen by George Norris. Josef Albers

index.slim

.frame
.action: a.button Click

script.coffee

canvas = document.createElement('canvas')
w = canvas.width = 500
h = canvas.height = 500
$(".frame").html canvas
ctx = canvas.getContext('2d')
ctx.beginPath()

rand = (min, max) -> Math.round(Math.random() * (max-min)) + min

  
generate_colors = ->
  [hue,  hue_steps] = [rand(1, 360), rand(20, 35)]
  [l, l_steps] = [rand(40, 60), rand(0, 25)]
  [sat, sat_steps] = [rand(35, 55), rand(0, 30)]
  colors = []
  
  for color, i in [1, 2, 3]
    hue_seq = hue+(-hue_steps*i)+1
    l_seq = l+(-l_steps*i)+1
    sat_seq = sat+(sat_steps*i)+1
    colors.push "hsl(#{hue_seq}, #{sat_seq}%, #{l_seq}%)"
    
  colors
 
 
 
        
draw_rects = ->
  colors = generate_colors()
  for square, i in [1, 2, 3, 4]
    ctx.fillStyle = colors[i]
    ctx.fillRect(50*i, 75*i, w-50*i*2, h-100*i)
    
    
draw_rects()
$('.button').click -> draw_rects()

style.sass

@import "compass"
body
  background: darken(#fff, 10%)
  padding: 0 0 80px
    
canvas
  +box-shadow(rgba(#000, 0.45) 0 1px 2px 0)
  +transition(background 1s)
  margin: 50px auto
  display: block
  

.action
  text-align: center

.button
  +background(linear-gradient(to bottom, #f1f1f1 50%, #e5e5e5 50%, #e5e5e5 60%))
  padding: 9px 13px
  border: 1px solid rgba(0,0,0,0.25)
  font-family: 'courier new', courier, monaco
  cursor: pointer
  &:hover
    border-color: rgba(0,0,0,0.33)
  &:active
    +background(linear-gradient(to bottom, #e7e7e7 50%, #d6d6d6 50%, #d6d6d6 60%))