JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<svg width="1179" height="900" viewBox="0 0 1179 900" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1179 18.0791C1136.71 5.32496 1089.47 9.3118 1048.18 32.9488C1006.6 56.7442 979.181 95.6943 968.852 138.821L968.823 138.939L968.792 139.057C958.851 176.502 941.706 239.44 882.732 277.617L882.518 277.756L866.336 287.099L866.065 287.234C803.191 318.628 740.256 301.552 702.928 291.088L702.813 291.056L702.7 291.021C660.242 278.024 612.725 281.929 571.212 305.689L571.201 305.696C529.663 329.402 502.244 368.343 491.945 411.521L491.915 411.644L491.883 411.766C481.942 449.211 464.797 512.149 405.823 550.326L405.609 550.465L389.427 559.808L389.156 559.943C326.281 591.337 263.395 574.227 226.03 563.8L225.91 563.766L225.791 563.73C183.331 550.732 135.869 554.607 94.303 578.398L94.3017 578.399C14.4197 624.105 -13.2776 725.854 32.3921 805.674C78.0663 885.502 179.848 913.25 259.666 867.582C301.237 843.788 328.624 804.859 339.186 761.843L339.208 761.752L339.233 761.661C349.173 724.217 366.341 661.192 425.371 622.983L425.584 622.844L441.597 613.599L441.864 613.466C504.714 582.009 567.733 599.203 605.043 609.57L605.164 609.603L605.284 609.64C647.719 622.587 695.183 618.71 736.694 594.951C778.218 571.185 805.664 532.289 815.961 489.12L815.992 488.991L816.026 488.863C826.017 451.406 843.131 388.405 902.161 350.196L902.375 350.057L918.388 340.812L918.655 340.679C981.504 309.222 1044.52 326.417 1081.83 336.783L1081.95 336.816L1082.07 336.853C1113.12 346.327 1146.87 346.793 1179 337.053V347.476C1145.8 356.915 1111.12 356.17 1079.16 346.418C1041.67 336.003 982.185 320.064 923.13 349.621L907.595 358.591C852.13 394.492 835.726 453.807 825.689 491.44C814.775 537.192 785.672 578.44 741.661 603.63C697.651 628.82 647.32 632.92 602.366 619.205C564.88 608.789 505.394 592.851 446.34 622.408L430.804 631.377C375.339 667.279 358.88 726.625 348.898 764.227C337.716 809.767 308.699 851.039 264.634 876.261C180.017 924.676 72.1267 895.257 23.7124 810.64C-24.7019 726.024 4.66311 618.166 89.3355...

SCSS

svg {
  #mask path {
    stroke-dasharray: 7608.6240234375;
    stroke-dashoffset: 7608.6240234375;
    animation: dash 5s linear forwards;
  }
}

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

JavaScript

const total = document.querySelector('svg path');
console.log(total.getTotalLength())