<div class="site-container">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="200" height="200" id="drawable-illustration">
    <path d="M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2" />
    <path d="M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
  </svg>
  <p>Reload to draw again</p>
</div>
:root {
  --illustration-body-bg-color: #4b6584;
  --illustration-body-color: #d1d8e0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font: 1em/160% sans-serif;
  margin: 0;
  background-color: var(--illustration-body-bg-color);
  color: var(--illustration-body-color);
}

svg {
  fill: currentColor;
  max-width: 100%;
  vertical-align: baseline;
}

.site-container {
  padding: 2em;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

#drawable-illustration path:not([fill="none"]) {
  fill: transparent;
  stroke-width: 0.25;
  stroke: currentColor;
  animation: draw 2s forwards;
}

#drawable-illustration path:nth-child(1) {
  stroke-dasharray: 61.9942626953125;
  stroke-dashoffset: 61.9942626953125;
}

#drawable-illustration path:nth-child(2) {
  stroke-dasharray: 18.852230072021484;
  stroke-dashoffset: 18.852230072021484;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
let icon = document.querySelector("#drawable-illustration");

if (icon) {
  let paths = icon.querySelectorAll("path");
  if (paths.length) {
    for ([index, path] of paths.entries()) {
      let pathLength = path.getTotalLength();
      console.log(`Path #${index + 1}: ${pathLength}`);
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.