Loading

Luuk

Converting letters into blocked characters. Inspired by https://dribbble.com/shots/1082794-Levi

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Luuk</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  
<h1>Luuk</h1>
  <script src='https://rawgit.com/bartveneman/Spanner.js/master/spanner.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
html,
body {
  height: 100%;
  overflow: hidden;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f1f1f1;
  white-space: nowrap;
  font-size: calc(4rem + 3vmax);
}
[class*='char'] {
  color: rgba(0,0,0,0);
  position: relative;
  height: 2ch;
  display: inline-block;
}
[class*='char']:not(:last-child) {
  margin-right: 0.2ch;
}
[class*='char']::before,
[class*='char']::after {
  content: '';
  border: 0.07ch solid #000;
  position: absolute;
}
[class*='char']::before {
  height: 2ch;
  background: #aaa;
}
.char-L {
  width: 1.5ch;
}
.char-L::before {
  width: 0.75ch;
  top: 0;
  left: 0;
}
.char-L::after {
  border-width: 0.05ch;
  width: 1.5ch;
  height: 0.75ch;
  bottom: 0;
  left: 0;
}
.char-U {
  width: 1.25ch;
}
.char-U::before {
  top: 0;
  right: 0;
  width: 0.5ch;
  height: 2ch;
}
.char-U::after {
  border-width: 0 0.05ch 0.05ch 0.05ch;
  width: 1.25ch;
  top: 0;
  left: 0;
  height: 2ch;
}
.char-K {
  width: 1.1ch;
  border-left: 0.05ch solid #000;
}
.char-K::before {
  transform: skew(30deg) translateX(-0.04ch);
  transform-origin: top left;
  width: 0.5ch;
  height: 1ch;
  left: 0;
  bottom: 0;
}
.char-K::after {
  height: 0.5em;
  border-width: 0 0.07ch 0 0;
  transform: skew(-37deg) translateX(-0.25ch);
  transform-origin: top right;
  position: absolute;
  top: 0;
  right: 0;
}
/* Downloaded from https://ahoj.co.uk/ */
console.clear()

spanner(document.querySelector('h1'))

const charMap = {
  76: 'L',
  117: 'U',
  107: 'K'
}

document.querySelectorAll('[class*="char"]').forEach(el => {
  const char = el.textContent.charCodeAt(0)
  el.classList.add(`char-${charMap[char]}`)
})

This awesome code is write by Bart Veneman, you can se more from this user in the personal repository