JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg viewBox="0 0 2757 1658" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="lineMask">
  <path class="path" d="M3.5 131.5C893.5 -113 2688.1 -150.2 2746.5 1657" stroke="white" stroke-width="20" />
</mask>

<path d="M3.5 131.5C893.5 -113 2688.1 -150.2 2746.5 1657" stroke="black" stroke-width="10" stroke-dasharray="30 30" mask="url(#lineMask)"/>
</svg>

CSS

svg {
  width: 100%;
}
.path {
  /* stroke-dashoffset: 1000; */
  stroke-dasharray: 4000;
  animation: dash 5s linear;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 4000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}