Scrambled Icon

a-scrambled-icon.markdown

Scrambled Icon

"Scrambling" an SVG icon by replacing its first moveto event in each of its path's data attributes with randomized coordinates and reversed letter casing (switches between absolute and relative positioning). Then unscrambling the icon back to its original form when the icon is clicked. Utilizes anime.js..

A Pen by Code_Nit_Whit on CodePen.

License.

index.html

<div class="flex-container">
  <svg id="html-icon" class="icon-top icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" alt="HTML Icon">
    <path class="path1" fill="#E65100" d="M41,5H7l3,34l14,4l14-4L41,5L41,5z" />
    <path class="path2" fill="#FF6D00" d="M24 8L24 39.9 35.2 36.7 37.7 8z" />
    <path class="path3" fill="#FFF" d="M24,25v-4h8.6l-0.7,11.5L24,35.1v-4.2l4.1-1.4l0.3-4.5H24z M32.9,17l0.3-4H24v4H32.9z" />
    <path class="path4" fill="#EEE" d="M24,30.9v4.2l-7.9-2.6L15.7,27h4l0.2,2.5L24,30.9z M19.1,17H24v-4h-9.1l0.7,12H24v-4h-4.6L19.1,17z" />
  </svg>

  <button id="restart">Reset</button>
</div>

script.js

const icon = document.getElementById("html-icon");
let isScrambled = false;

function scrambleIcon() {
  isScrambled = true;
  const paths = icon.querySelectorAll("path");
  const originalDValues = [];

  // Get initial path d values (without logging)
  paths.forEach((path) => {
    if (path.getAttribute("d")) {
      originalDValues.push(path.getAttribute("d"));
      path.setAttribute("transform", "translate(0, 0)");
    }
  });

  // Scramble paths
  paths.forEach((path) => {
    const randomX = Math.random() * 50 - 25;
    const randomY = Math.random() * 50 - 25;
    const randomCoordinates = randomX + "," + randomY;

    if (path.getAttribute("d")) {
      const pathDValue = path.getAttribute("d");
      const regexPattern = /^([Mm]\s*)([^A-Za-z].*?)(?=[A-Za-z])/;
      const match = pathDValue.match(regexPattern);

      if (match) {
        const coordinatesString =
          match[0][0].toUpperCase() === match[0][0]
            ? match[0][0].toLowerCase() + randomCoordinates
            : match[0][0].toUpperCase() + randomCoordinates;

        const newDValue = pathDValue.replace(regexPattern, coordinatesString);
        path.setAttribute("d", newDValue);
      }
    }
  });

  // Reassemble on hover
  icon.addEventListener("click", () => {
    paths.forEach((path, i) => {
      if (path.getAttribute("d")) {
        anime({
          targets: path,
          d: originalDValues[i],
          duration: 500,
          easing: "easeOutElastic"
        });
      }
      isScrambled = false;
    });
  });
}

const restartBtn = document.querySelector("#restart");
restartBtn.addEventListener("click", () => {
  if (!isScrambled) {
    scrambleIcon();
  }
});

scrambleIcon();

scripts

<script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>

style.css

body {
  background-color: black;
}

#html-icon {
  width: 100%;
  max-width: 100vw;
  height: auto;
  max-height: 80vh;
  margin: auto 0;
}

.flex-container {
  width: 100%;
  max-width: 100vw;
  height: auto;
  max-height: 100vh;
}

#restart {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background-color: #121211;
  border: 2px solid grey;
  border-radius: 6px;
  padding: 1rem;
  width: 200px;
  margin: 15px auto;
}