LEE SEONGSOO - Logo Animation

by sungsoonz

HTML

<!-- <canvas id="canvas" width="100" height="100"></canvas> -->
<nav>
  <svg id="logo" width="122" height="122" viewBox="0 0 122 122" fill="none">
    <rect width="121.776" height="121.809" fill="#101625" />
    <g id="third-row">
      <path id="3-1-o" fill-rule="evenodd" clip-rule="evenodd" d="M21.5715 63.8446L17.5381 59.8113L16.5029 60.8465L15.4507 59.7943L14.3986 60.8465L13.3294 59.7773L9.29608 63.8107L10.3652 64.8798L9.31305 65.932L10.3652 66.9842L9.31305 68.0364L12.4526 71.1759L11.4004 72.2281L12.4526 73.2803L10.1899 75.543L9.13769 74.4908L8.10248 75.526L5.83974 73.2633L6.87495 72.2281L5.83974 71.1929L7.94409 69.0885L5.98116 67.1256L3 70.1068L4.06915 71.1759L3.01697 72.2281L4.06915 73.2803L3 74.3494L7.03334 78.3827L8.10248 77.3136L9.13769 78.3488L10.1899 77.2966L11.242 78.3488L15.2754 74.3155L14.2232 73.2633L15.2754 72.2111L14.2402 71.1759L15.2923 70.1237L12.1358 66.9672L13.171 65.932L12.1358 64.8968L14.3986 62.6341L15.4338 63.6693L16.4859 62.6171L18.7487 64.8798L17.6965 65.932L18.7487 66.9842L16.6443 69.0885L18.5733 71.0175L21.5715 68.0194L20.5193 66.9672L21.5715 65.915L20.5363 64.8798L21.5715 63.8446Z" fill="white" />
      <path id="3-3-o" fill-rule="evenodd" clip-rule="evenodd" d="M60.9982 104.271L56.9649 100.238L55.9297 101.273L54.8775 100.221L53.8253 101.273L52.7562 100.204L42.4268 110.533L43.4959 111.602L42.4437 112.654L43.4959 113.707L42.4268 114.776L46.4601 118.809L47.5292 117.74L48.5644 118.775L49.6166 117.723L50.6688 118.775L60.9982 108.446L59.946 107.393L60.9982 106.341L59.963 105.306L60.9982 104.271ZM54.8605 104.096L55.9127 103.043L58.1754 105.306L57.1233 106.358L58.1754 107.41L49.6166 115.969L48.5644 114.917L47.5292 115.952L45.2665 113.69L46.3017 112.654L45.2665 111.619L53.8253 103.06L54.8605 104.096Z" fill="white" />
      <path id="3-2-o" fill-rule="evenodd" clip-rule="evenodd" d="M41.5715 84.0673L37.5381 80.0339L36.5029 81.0691L35.4507 80.017L34.3986 81.0691L33.3294 80L23 90.3294L24.0691 91.3986L23.017 92.4507L24.0691 93.5029L23...

CSS

/* @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap'); */

html, body {
  padding: 0;
  margin: 0;
}

canvas {
  background: black;
}

nav {
 background: #fff;
 position: fixed;
 top: 0;
 left: 0;
 width: 200px;
 height: 100vh;
 display: grid;
 
}
section#hero {
   height: 100vh;
   background: #101625;
}
section#about {
   height: 100vh;
   background: #CFFF45;
}

JavaScript

/* const logo = document. getElementById('logo'); */
/* const letters = ["L","E","E","S","E","O","N","G","S","O","O"]; */
/* console.log(letters); */

/* const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const ratio = window.devicePixelRatio;

canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;
canvas.style.width = `${canvas.width / ratio}px`;
canvas.style.height = `${canvas.height / ratio}px`;
ctx.scale(ratio, ratio);

ctx.font = '120px';
ctx.rotate((15*Math.PI)/180);
ctx.fillStyle = 'white';

ctx.fillText("L", 50, 70);
ctx.fillText("E", 80, 70);
ctx.fillText("E", 110, 70);

  
letters.forEach((letter, index) => {
  ctx.fillText(letter, 20*index, 20*index )
})

ctx.setTransform(1, 0, 0, 1, 0, 0);
 */