VwrqmXR

index.html

<main class="container">
  <section class="content">
     <canvas class="canvas" id="canvas" resize></canvas>
  </section>
</main>

script.js

// point, URDL
const state = [
  [[0, 0], 0b0100],
  [[1, 0], 0b0111],
  [[2, 0], 0b0011],
  [[2, 1], 0b1001],
  [[1, 1], 0b1110],
  [[1, 2], 0b1000]
] 

const gridSize = 100
const padding = 10

with (paper) {
  paper.setup(document.getElementById("canvas"));
   
  const rectangles = []
  
  for (s of state) {
    const up =    (s[1] >> 3) & 0b1 === 1
    const down =  (s[1] >> 1) & 0b1 === 1
    const left =  (s[1] >> 0) & 0b1 === 1
    const right = (s[1] >> 2) & 0b1 === 1
    const px = s[0][0] * gridSize + (!left ? padding : 0) 
    const py = s[0][1] * gridSize + (!up ? padding : 0) 
    const width = gridSize - (!left ? padding : 0) - (!right ? padding : 0)
    const height = gridSize - (!up ? padding : 0) - (!down ? padding : 0)
    
    const r = new Path.Rectangle({
      point: [px, py],
      size: [width, height]
    })
    rectangles.push(r)
    
    
  }
  
  
  
  let r = rectangles[0]
  for (let i = 1; i < rectangles.length; i++){
    r = r.unite(rectangles[i])
  }
  
  r.fillColor = { hue: 195, saturation: 0.53, lightness: 0.79 }
  r.strokeColor = { hue: 195, saturation: 0.53, lightness: 0.39 }
  r.strokeWidth = 4
  
  const r1 = new Path.Rectangle({
    point: [10, 10],
    size: [80, 80]
  })
    
  const r2 = new Path.Rectangle({
    point: [110, 10],
    size: [80, 80]
  })

  const r3 = new Path.Rectangle({
    point: [110, 110],
    size: [80, 80]
  })

  const r12 = new Path.Rectangle({
    point: [90, 10],
    size: [20, 80]
  })
  
  const r23 = new Path.Rectangle({
    point: [110, 90],
    size: [80, 20]
  })

  // const g = r1.unite(r2).unite(r12).unite(r3).unite(r23)

  /*
  g.position = view.center
  g.fillColor = 'lightblue'
  g.strokeColor = 'black'
  g.strokeWidth = 4
  */
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.3/paper-full.min.js"></script>

style.scss

$black: #000000;
$white: #ffffff;

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  padding: 0 2px;
  color: $white;
  
  &:hover {
    color: $black;
    background: $white;
  }
}

.signature {
  display: inline-block;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.content {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: $white;
}

.footer {
  display: flex;
  flex-direction: row;
  
  padding: 15px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.66px;
  color: $white;
  background: $black;
  
  &__body {
    flex: 1;
  }
  
  &__nav {
    padding-left: 40px;
    align-self: center;
  }
  
  &__text {
    margin: 0;
  }
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background: black;
}

vwrqmxr.markdown

VwrqmXR

A Pen by Mafalda Falcão Ferreira on CodePen.

License.