SVG Drawing - Complex shapes example

by PrismDan

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 809 125">
  <path class="letter" d="M47.6 91.53c-2.56-6.25-5.11-12.47-7.63-18.65-2.53-6.18-5.07-12.36-7.63-18.54-.6-1.43-1.38-3.45-2.32-6.05-.94-2.6-1.92-5.6-2.94-8.99-1.02-3.39-1.94-6.9-2.77-10.51.15 4.22.26 8.2.34 11.93.07 3.73.07 7.29 0 10.68v5.09c0 1.73-.02 3.45-.06 5.14-.04 1.7-.06 3.39-.06 5.09v5.14c0 2.03-.06 4-.17 5.88-.11 1.88-.25 3.32-.4 4.3 1.28-.15 2.84-.24 4.69-.28 1.85-.04 3.15-.06 3.9-.06v8.7H6.79v-7.46c1.73-.07 3.18-.3 4.35-.68 1.17-.38 2.07-1.24 2.71-2.6.64-1.36.96-3.54.96-6.56l.68-43.3c.07-2.03.15-3.99.23-5.88.07-1.88.15-3.32.23-4.3-1.21.08-2.71.13-4.52.17-1.81.04-3.13.1-3.96.17v-8.7h24.98l17.07 43.75c.68 1.73 1.43 3.75 2.26 6.05.83 2.3 1.62 4.52 2.37 6.67.75 2.15 1.32 3.86 1.7 5.14h.11c.98-2.64 1.88-5.2 2.71-7.69.83-2.49 1.7-4.9 2.6-7.23 2.94-7.84 5.86-15.64 8.76-23.4 2.9-7.76 5.82-15.52 8.76-23.29h26.11v7.46c-1.66.08-3.13.3-4.41.68-1.28.38-2.24 1.23-2.88 2.54-.64 1.32-.92 3.52-.85 6.61l1.7 43.3c.15 2.03.15 4 0 5.88s-.3 3.32-.45 4.3c1.28-.15 2.84-.24 4.69-.28 1.85-.04 3.15-.06 3.9-.06v8.7H75.18v-7.46c1.73-.07 3.22-.3 4.47-.68 1.24-.38 2.19-1.24 2.83-2.6.64-1.36.88-3.54.73-6.56l-.9-23.97c0-.9-.08-2.47-.23-4.69-.15-2.22-.28-4.67-.4-7.35-.11-2.67-.21-5.18-.28-7.52-.23.53-.45 1.04-.68 1.53-.23.49-.42 1-.57 1.53l-22.04 58.9H47.6z"/>
  <path class="letter" d="M146.51 90.4c-.15-1.05-.25-1.94-.28-2.66-.04-.72-.1-1.56-.17-2.54-2.56 2.56-5.28 4.37-8.14 5.43-2.86 1.05-5.77 1.58-8.7 1.58-4.82 0-8.59-1.43-11.3-4.3s-4.07-6.44-4.07-10.74c0-3.62.92-6.71 2.77-9.27 1.85-2.56 4.3-4.65 7.35-6.27 3.05-1.62 6.44-2.86 10.17-3.73 3.73-.87 7.48-1.37 11.25-1.53V50.5c0-1.96-.25-3.73-.73-5.31-.49-1.58-1.32-2.83-2.49-3.73-1.17-.9-2.81-1.32-4.92-1.24-1.43.08-2.83.38-4.18.9-1.36.53-2.53 1.28-3.5 2.26.6.68.98 1.41 1.13 2.2.15.79.23 1.49.23 2.09 0 1.51-.6 3.07-1.81 4.69-1.21 1.62-3.13 2.39-5.77 2.32-2.26-.07-4-.87-5.2-2.37-1.21-1.51-1.81-3.28-1.81-5.31 0-3.01 1.07-5.63 3.22-7.86 2.15-2.22 5.03-3.96 8.65-5.2 3.62-1.24...

CSS

:root {
  --animation-stagger: 200ms;
}

body {
  background-color: rgb(2, 62, 80);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  color: #fff;
}

svg {
  width: 800px;
  max-width: 90vw;
  height: auto;
  transform-origin: center;
}

.letter {
  fill: rgba(255, 255, 255, 0);
  stroke: #fff;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: var(--path-length, 0);
  stroke-dashoffset: var(--path-length, 0);
  animation: animate-path 8s infinite ease-in-out;
}

.letter:nth-child(1) {
  animation-delay: calc(var(--animation-stagger) * 1);
}

.letter:nth-child(2) {
  animation-delay: calc(var(--animation-stagger) * 2);
}

.letter:nth-child(3) {
  animation-delay: calc(var(--animation-stagger) * 3);
}

.letter:nth-child(4) {
  animation-delay: calc(var(--animation-stagger) * 4);
}

.letter:nth-child(5) {
  animation-delay: calc(var(--animation-stagger) * 5);
}

.letter:nth-child(6) {
  animation-delay: calc(var(--animation-stagger) * 6);
}

.letter:nth-child(7) {
  animation-delay: calc(var(--animation-stagger) * 7);
}

.letter:nth-child(8) {
  animation-delay: calc(var(--animation-stagger) * 8);
}

.letter:nth-child(9) {
  animation-delay: calc(var(--animation-stagger) * 9);
}

.letter:nth-child(10) {
  animation-delay: calc(var(--animation-stagger) * 10);
}

.letter:nth-child(11) {
  animation-delay: calc(var(--animation-stagger) * 11);
}

@keyframes animate-path {
  0%,
  10%,
  90%,
  100% {
    stroke-dashoffset: var(--path-length, 0);
  }
  
  40%,
  60% {
    stroke-dashoffset: 0;
  }
}

JavaScript

/* Set path length for each */
Array.prototype.forEach.call(document.querySelectorAll('path.letter'), (path) => {
	path.style.setProperty('--path-length', path.getTotalLength());
});