JSFiddle - React, Tailwind, and code Playground

by andyjh07

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="110">
  <g fill="#FFF">
    <path class="path" d="M56.046 73.015a731.312 731.312 0 0 0-3.39-58.884c-.053-.555-2.191-1.765-2.294-1.237-3.214 16.82-3.31 34.014-5.889 50.923-1.205 7.926-2.979 15.802-5.806 23.312-2.403 6.384-5.512 13.898-10.957 18.305-6.647 5.377-15.167 2.44-20.163-3.689-4.303-5.27-6.183-12.535-4.773-19.218 1.523-7.238 6.7-13.09 11.857-18.072 5.959-5.746 12.602-10.695 19.422-15.34 7.405-5.052 14.962-9.93 22.774-14.32 3.913-2.197 7.898-4.26 11.973-6.129 2-.917 4.021-1.782 6.065-2.595 1.118-.443 2.243-.87 3.373-1.283.38-.136.758-.276 1.138-.405.331-.12.663-.23.994-.333.76.05.907-.066.436-.355.269.186 1.219.854 1.563.561.344-.292-.262-.8-.5-.967-2.98-2.057-6.66.28-9.62 1.473a134.726 134.726 0 0 0-11.946 5.523c-7.687 3.971-15.045 8.54-22.275 13.293-7.167 4.699-14.26 9.551-20.792 15.12-6.16 5.258-12.727 11.37-15.713 19.106-5.038 13.067 3.84 30.066 18.103 32.01 7.386.997 12.659-4.204 16.105-10.146 4.33-7.47 7.167-15.759 9.09-24.16 4.611-20.126 3.972-40.99 7.832-61.235l-2.297-1.236a728.472 728.472 0 0 1 3.39 58.885c0 .715 2.316 1.735 2.316 1.107l-.016-.014Z"/>
    <path class="path" d="M60.24 57.343a47.998 47.998 0 0 0 1.056 15.114c.09.386 2.562.542 2.648.196l3.535-15.62-2.648-.192c-.052 1.905.02 3.81.215 5.706.17 1.582.222 3.59 1.053 4.985 1.142 1.914 4.346 1.871 6.213 1.28 2.814-.891 5.297-3.437 7.213-5.587a29.008 29.008 0 0 0 5.105-8.122c.11-.26-2.317-.372-2.589-.253-3.641 1.626-6.72 4.46-8.361 8.14-.603 1.355-1.679 3.834-.636 5.213.801 1.057 2.648 1.097 3.86.957 1.728-.202 2.979-1.372 4.012-2.698a48.814 48.814 0 0 0 3.995-6.105A50.407 50.407 0 0 0 89.97 47.2a48.89 48.89 0 0 0 .964-16.108c-.043-.405-2.318-.465-2.59-.249-4.011 3.174-4.633 9.305-5.295 14.024a72.292 72.292 0 0 0-.47 18.036c.241 2.236.91 4.516 3.012 5.65a7.821 7.821 0 0 0 4.81.7c2.006-.348 3.174-2.133 4.12-3.795a18.049 18.049 0 0 0 2.298-8.125c.017-.352-2.413-.518-2.648-.196-1.178 1.661-2.648 4.137-.718 5.869 1.079.963 3.31 1.083...

SCSS

body {
	background-color: black;
}

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}