JSFiddle - React, Tailwind, and code Playground

draw svg path with stroke-dashoffset

by schrodingers

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" width="451.9" height="454.2">
    <path d="M262.5 373.6q52.5-48.8 50.6-148.1h-41.7q0 23.4-2.8 44l27.7 42.2-28.1 18.8-10.4-15.5q-12.6 35.1-36.5 61.9-12.2-14.1-31.4-16 51.5-42.6 50.1-135.4h-52.9l.4 161.7q0 31.4 1.4 63.3-17.3-1.9-34.2 0 1.4-31.9 1.4-63.3V204.4l83.9.4v-50.1H125.7v-21.1h283.5q21.1 0 42.7-1-1.4 11.3 0 23-21.6-.9-42.7-.9h-65.1v50.1H428v203.5q0 45.9-73.6 45.9h-2.8q4.7-21.6-9.4-38 32.8 5.2 49.2.5 2.4-.5 2.8-1.9 3.8-6.1 2.9-16.8V225.5h-53q0 26.2-2.8 48.2h.4l46.4 67.1L360 360l-28.6-40.8q-11.7 38-36.5 68.4-13.2-13.5-32.4-14zm94.2-253.1q-16.8-1.5-34.2 0 1.4-23.95 1.4-47.86h-63.7q.5 23.44 1.4 46.86-16.9-1.9-33.8 0 1-23.89 1.4-46.86h-37.5q-21 0-42.6.94 1.4-11.72 0-22.97 21.6.94 42.6.94h37.5Q228.8 25.8 227.8 0q16.9 1.9 33.8 0-.9 25.8-1.4 51.55h63.7q0-25.75-1.4-51.55 17.4 1.9 34.2 0-1.4 25.8-1.4 51.55h46q21.5 0 42.6-.94-.9 11.25 0 22.97-21.1-.94-42.6-.94h-46q0 23.91 1.4 47.86zm-43.6 84.3v-50.1h-41.7v50.1zM89.6 181.4l14.5 9.8-40.3 177.7-16.9 80.6q-8-5.6-16.9-8.9-8.9-3.3-19.2-3.3 15.5-37.9 31.4-86.7 16.4-48.7 47.4-169.2zm-15-1.4l-22.5 23L0 139.2l22.5-23.4zm30-99.86L80.7 100.8Q68.5 82.96 55.3 66.55 42.2 49.68 28.2 34.21l21-24.41q15 16.4 28.6 34.25 14.1 17.34 26.8 36.09z"
    stroke="dodgerblue" stroke-width="4" fill="none" stroke-dashoffset="0">



    </path>
  </svg>
  <button id="animate">animate</button>
</div>

CSS

h1 {
  display: none;
}

body {
  display: flex;
  justify-content: center;
  /* align-content: center; */
  /* align-items: center; */
}

JavaScript

var path = document.querySelector('svg path');
var length = path.getTotalLength();

var draw = function() {
  // Clear any previous transition
  path.style.transition = path.style.WebkitTransition = 'none';
  // Set up the starting point
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  // Trigger a layout so styles are calculated & the browser
  // picks up the starting position before animating
  path.getBoundingClientRect();
  // Define our transition
  path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 5s ease-in-out';
  // Go!
  path.style.strokeDashoffset = '0';
};


var button1 = document.getElementById('animate');
button1.onclick = function() {
  draw();
}