ISO Enter key rendering

by nickcoutsos

HTML

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
<div class="test" id="test4"></div>
<div class="test" id="test5"></div>

CSS

body {
  background: black;
}

.test {
  display: inline-block;
  width: 150px;
  height: 200px;
  background: royalblue;
  margin: 10px;
}
.test:hover {
  background-color: steelblue;
  cursor: pointer;
}

#test1 {
  clip-path:
    polygon(
      0 0,
      100% 0,
      100% 100%,
      16% 100%,
      16% 50%,
      0 50%
    );
}

#test2 {
  clip-path: path('M 7 0 L 143 0 A 7 7 0 0 1 150 7 L 150 193 A 7 7 0 0 1 143 200 L 23 200 A 7 7 0 1 16 193 L 23 107 L 7 107 A 7 7 0 0 1 0 100 L 0 7 A 7 7 0 0 1 7 0');
  /* clip-path: path('M 0 0, L 93% 0, A 7% 7% 0 0 1 100% 7%, L 100% 93%, A 7% 7% 0 0 1 93% 100%, L 16% 100%'); */
}

JavaScript

const base = 70
const padding = 5
const u_ = 1.5
const h_ = 2

const w = u_ * base - padding
const h = h_ * base - padding
const r = 4

const x2 = 0.25 * base
const y2 = 1 * base - padding

function lineTo (x, y) {
	return `L ${x} ${y}`
}
function cornerTo (x, y) {
  return `A ${r} ${r} 0 0 1 ${x} ${y}`
}
/* 
function to (x, y, r = 0) {
  if (!r) {
    return `L ${x} ${y}`
  }
  
  return [
    `L ${x - r} `
  ]
} */

const directives = [
  `M ${r} 0`,
  lineTo(w - r, 0),
  cornerTo(w, r),
  lineTo(w, h - r),
  cornerTo(w - r, h),
  lineTo(x2 + r, h),
  cornerTo(x2, h - r),
	lineTo(x2, y2),
  lineTo(r, y2),
  cornerTo(0, y2 - r),
  lineTo(0, r),
  cornerTo(r, 0)
]

const test3 = document.querySelector('#test3')
const test4 = document.querySelector('#test4')
const test5 = document.querySelector('#test5')
const path = `path('${directives.join(' ')}')`

test3.style.clipPath = path
//console.log(directives.join('\n'))
//console.log(test3.style.clipPath, test3, path)

const points = [
	[0, 0],
  [w, 0],
  [w, h],
  [x2, h],
  [x2, y2],
  [0, y2]
]

//test4.style.clipPath = `polygon(${points.map(([x, y]) => `${x}px ${y}px`).join(',')})`

//console.log(	points.map(([x, y]) => `L ${x} ${y}`).join(' '))

const path2 = points.flatMap(function ([x, y], i, arr) {
  const [x0, y0] = arr.at(i - 1)
  const [x2, y2] = arr.at(i + 1) || arr[0]
  const [dx, dy] = [x - x0, y - y0]
  const [d2x, d2y] = [x2 - x, y2 - y]
  const cross = dx*d2y - d2x*dy
  
  console.log(i, [Math.sign(dx), Math.sign(dy)], [Math.sign(d2x), Math.sign(d2y)])
  
  const a = `L ${x - Math.sign(dx)*r} ${y - Math.sign(dy)*r}`
  const b = `A ${r} ${r} 0 0 ${cross > 0 ? 1 : 0} ${x + Math.sign(d2x)*r} ${y + Math.sign(d2y)*r}`
  
  return [a, b]
})

const path3 = points.flatMap(function ([x, y], i, arr) {
  const f = 12 / base

  const [x0, y0] = arr.at(i - 1)
  const [x2, y2] = arr.at(i + 1) || arr[0]
  const [dx, dy] = [x - x0, y - y0]
  const [d2x, d2y] = [x2 - x, y2 - y]
  const cross = dx*d2y - d2x*dy
  
 ...