html-grahnska.se/main.js

function getRandomChar() {
  var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01234567890";
  var randomChar = chars.charAt((Math.floor(Math.random() * chars.length)));
  return randomChar;
}

function renderLogo(logoId, name, horizontalPadding, verticalPadding, logoUrl="#") {
  var logoDiv = document.getElementById(logoId);

  var paddingLength = ((horizontalPadding * 2 + name.length) * verticalPadding) + horizontalPadding;
  console.log(paddingLength);

  var currentText = logoDiv.innerText;
  var currentLength = logoDiv.textContent.replace(/\n/g, "").length;
    

  setTimeout(function() {
    if (currentLength < paddingLength * 2 + name.length) {
      if (currentLength > 0 && currentLength % (horizontalPadding * 2 + name.length) == 0) {
        logoDiv.innerHTML += "<br>";
      }

      if (currentLength == paddingLength) {

        var textSpan = document.createElement("a");
        textSpan.href= logoUrl;

        logoDiv.appendChild(textSpan);

      }

      if (currentLength < paddingLength || currentLength >= paddingLength + name.length) {
        logoDiv.innerHTML += getRandomChar();
      } else {
        var logoLength = currentLength - paddingLength;
        var textSpan = logoDiv.querySelector("a");
        textSpan.textContent += name.charAt(logoLength);
      }
      renderLogo(logoId, name, horizontalPadding, verticalPadding, logoUrl);
    }
  }, 80)
}

function initLogo(targetId, name, padX=4, padY=2, logoUrl="#") {
  var target = document.getElementById(targetId);

  var str = "";
  var str2 = "";
  for (i=0; i < (name.length + (padX * 2)); i++) {
    str += "x";
  }

  for (i=0; i < (padY * 2) + 1; i++ ){
    str2 += str + "<br>";
  }

  var tmpSpan = document.createElement("span");
  tmpSpan.classList.add("hidden");
  tmpSpan.innerHTML = str2;

  target.appendChild(tmpSpan);

  var logoWidth = tmpSpan.offsetWidth;
  var logoHeight = tmpSpan.offsetHeight;

  target.removeChild(tmpSpan);

  target.style.width = (logoWidth + 1) + "px";
  target.style.marginLeft = ((logoWidth / 2) * -1) + "px";
  target.style.height = (logoHeight + 1) + "px";
  target.style.marginTop = ((logoHeight / 2) * -1) + "px";

  renderLogo(targetId, name, padX, padY, logoUrl);
}