svg stroke animation

svg path animation steps

1. Use the getTotalLength() method to get the total length of the path.
2. Set the spacing and offset of each dashed line of stroke to the total length.
3. Use animation to set the offset to the initial value 0.
stroke-dasharray: each dashed line. offset distance
stroke-dashoffset:offset

HTML

<div class="icon-box">
      <svg t="1642748502659" class="icon" viewBox="0 0 1498 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2199" width="200" height="200"><path d="M160.938086 526.799053 90.530611 714.26775l-90.054725 0 71.227187-185.014784-13.919642-115.42999 90.874428 0L160.938086 526.799053zM323.034522 313.131725l199.756731 0-74.495693 401.136026L330.40162 714.26775l66.314035-63.037747 44.207616-293.892506L296.839861 357.337498l-13.919642 20.466074 12.28019 0L283.739955 397.450035l120.34279 0-9.821082 45.845094L334.495017 443.29513l-8.186778 49.11872 67.953454 0-12.280218 44.205773L317.306844 536.619622l-20.466995 106.423808 17.188172 0 15.558963-82.679091 45.027363 0-12.280218 85.957734L304.20695 688.069018 150.29217 688.069018 172.398592 558.725222l49.120759 0-14.734131 84.318413 13.914478 0 18.832691-106.423808-68.773156 0 7.372186-44.205773 69.587742 0 7.367066-43.386163L243.625677 466.220339 177.311657 466.220339l33.566925-55.670886L177.311657 410.549453l13.914522-22.100378-89.235023 0-26.194637-105.609318 94.962708 0 22.106419 102.330573L255.086182 280.385946l86.781031 0L323.034522 313.131725zM628.404941 500.60032 523.610963 500.60032 671.792947 280.385946l101.515212 0L628.404941 500.60032zM900.203418 533.346202 833.07479 284.479078l104.788906 0 65.494323 248.867021L900.20345 533.346099 900.203418 533.346202zM876.462797 540.71296l51.574784 171.915469-81.048229 0-11.460506-33.560371-26.199757 33.560371-282.444365 0 7.372186-45.025485 194.023936-242.314854L832.255113 425.28809 648.871936 665.14903l182.563442 0-34.386534-124.43607L876.462773 540.71296 876.462797 540.71296zM1039.378944 643.863245l30.293197-170.276147-30.293182 0 99.88096-191.561933 94.148122 0-90.054758 167.822234 21.286686 0-34.386534 194.015744L1039.378935 643.863142 1039.378944 643.863245zM1382.404506 453.121024l-4.908032 22.919987 98.241536 0.819712-3.278848 48.299008-105.608609 0-36.020838 189.927629-376.592487 0-9.00649-46.664806 302.091646 0 25.380045-143.262822-69.587742 0 7.367066-49.11872 72.04685 0 8.186778-46.659686 85.141606-88.416768L1225.221187 340.964557 1239.955354 292.665549l257.064283 0-6.547354 42.571571L1382.404506 453.121024zM1382.404506 453.121024" p-id="2200"></path></svg>
</div>

js

let logo = document.querySelectorAll('.icon path')
    // getTotalLength()反回用户代理对路径总长度
    console.log(logo[0].getTotalLength())

css

.icon-box{
    width: 500px;
    height: 600px;
    background-color: pink;
    .icon {
      fill: yellowgreen; //填充的颜色
      
    }
    path{
      stroke-width: 10; //线宽
      stroke: #000; //线色
      stroke-dasharray: 11229; //每段虚线的间距
      stroke-dashoffset: 11229; //偏移量
      
    }
    
  }
  .icon-box:hover path{
    animation: identifier 3s ease forwards 600ms;
  }

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

Text stroke animation, pure css version

html

<svg id="text-box" width="300px" height="200px">
      <text x="5%" y="55%">LVAL</text>
</svg>

css

#text-box {
    background-color: #ccc;
    text {
      font-size: 36px;
      font-weight: 900;
      stroke-width: 2px;
      stroke: aqua;
      fill: transparent;
      letter-spacing: 6px;
      stroke-dasharray: 100%;
      stroke-dashoffset: 100%;
      animation: identifier 3s ease forwards 600ms;
    }
  }
@keyframes identifier {
  to {
    stroke-dashoffset: 0;
  }
}

Effect

Insert image description here