SVG - Circle Animation

by japaneselanguagefriend

HTML

<div class="shape-container">
        <svg version="1.1" id="text-outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="123px" height="53.5px" viewBox="0 0 123 53.5" enable-background="new 0 0 123 53.5" xml:space="preserve">
    <path class="path" fill="none" stroke="#FED5AE" stroke-width="2" stroke-miterlimit="10" d="M109.83,19.559c1.188,1.03,1.87,2.161,1.977,3.38
        c0.667,7.634-21.539,15.809-49.6,18.259c-28.06,2.45-51.347-1.752-52.014-9.386s21.54-15.809,49.6-18.259
        c10.139-0.885,19.654-0.901,27.705-0.201"/>
    </svg>
</div>

CSS

.shape-container svg {
    width: 512px;
    height: 212px;
}

.shape-container svg:hover {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

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