JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="animated-signature">
  <svg viewBox="0 0 125 80" height="80">
    <g>
      <path
        class="path1"
        d="M5.43198 6.76539C4.82128 6.15469 6.14119 7.53452 6.2301 7.6522C7.4217 9.22932 7.94802 11.5097 8.6023 13.3499C10.1728 17.7669 10.6317 22.8543 10.0212 27.4944C9.53767 31.1691 8.96667 34.3575 6.2301 37.0941C4.84982 38.4743 2.34751 39.741 1.92911 36.9167C1.41715 33.461 4.24656 28.7845 6.47397 26.3416C9.74474 22.7543 14.1911 21.0558 18.8005 20.1339C22.5895 19.3762 26.1031 18.7665 28.8879 15.8551C31.0651 13.5789 30.8562 9.33827 30.4842 6.45501C30.2358 4.52989 29.8372 3.20161 27.9789 2.37572C25.6258 1.32989 25.468 6.08759 25.4072 7.60786C24.9351 19.4116 27.879 31.6527 25.0747 43.3017C24.6917 44.8925 23.4757 51.6997 20.5963 49.6201C16.9564 46.9913 20.1897 41.8698 22.0152 39.2889C24.5998 35.6348 28.2808 32.3919 31.77 29.6006C33.132 28.511 36.7183 26.0223 38.5541 25.9203C40.3846 25.8186 41.5504 27.6895 42.1456 29.135C44.0197 33.6864 43.7416 37.8145 39.9508 41.1955C37.5039 43.3779 34.3471 41.2151 34.6521 38.2026C35.0435 34.3378 37.0632 30.7084 40.239 28.4034C42.9505 26.4353 48.092 23.31 49.9051 27.7605C51.2276 31.0065 51.0792 36.9083 50.0382 40.1979C49.9759 40.3946 48.7098 43.1949 48.5306 42.7918C47.7866 41.1177 48.3539 39.1349 48.841 37.4931C49.4636 35.3948 53.7898 22.0785 57.709 27.1175C59.5642 29.5027 59.3053 32.6497 59.3053 35.4978C59.3053 36.9852 59.3177 38.4027 58.9062 39.8431C58.6096 40.8813 58.6011 37.8464 58.6845 37.4931C59.7489 32.9851 62.3469 24.7975 68.8827 27.3392C71.8065 28.4762 71.459 30.8357 71.8757 33.5025C72.3331 36.4302 72.4045 39.825 70.4568 42.2597C67.9746 45.3624 62.9224 47.9045 63.7836 41.9715C64.2047 39.0709 65.5336 36.1853 67.8851 34.345C70.7363 32.1135 71.8259 34.9942 72.2526 37.737C73.1018 43.1962 72.7812 49.5572 72.3856 55.0518C72.0191 60.1419 70.6054 64.6963 68.0846 69.1076C66.8089 71.3401 65.3461 73.8681 62.4977 74.1846C59.2214...

CSS

body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  width: 300px;
  height: 300px;
}

.animated-signature path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  fill: transparent;
  animation: drawSignature 12s linear infinite both;
  stroke-width: 2.5px;
  stroke: black;
}

@keyframes drawSignature {
  0% {
    stroke-dashoffset: 2400;
  }
  15% {
    fill: transparent;
  }
  35%,
  75% {
    stroke-dashoffset: 0;
  }
  90%,
  to {
    stroke-dashoffset: 2400;
    fill: transparent;
  }
}