그동안 인터넷에서 손글씨 애니메이션에서 dasgarray랑 dashoffset 봐도 어쩌라는겨 싶었는데 강의 결제하길 잘했어요 >.<
패스랑 로고를 반대로 마스킹해도 결과는 같아서 함 올려봐요
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 561.64 310">
<defs>
<style>
.cls-1 {
fill: #323232;
}
.cls-2 {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 25px;
animation: dash 8s ease-in-out infinite;
}
@keyframes dash {
0%{stroke-dashoffset:attr(data-dash);}
100%{stroke-dashoffset:0;}
}
</style>
<mask id="mask-path">
<path class="cls-2" d="M200.5,296.5s-6-20-34-21c0,0-27-1-30,21,0,0-6,23,32,24,0,0,31,1,27,26,0,0,1,24-29,24,0,0-26,3-34-27l82-65,87-3-44-27v131l48-131,21,20v69s5,31,31,31c0,0,24-1,29-30,0,0,6-66,0-80l48-18,7,21-22,100s59,25,69-38c0,0,3-28-15-39l-43-17,97-15v140l20-124,27-28-1,48s-27,41,13,74c0,0,25,16,44-13,0,0,11-47-24-68h-48l-463,92,4,138,35,14,3-124,36,51,37-53v114l13-137,20,24v93l-3-122,74,11,5,19h-68l-1,44h64l-87,30v19h69l17,26,49-118,45,111-96-23,3-18,86-1v-88l35-5-5,21s-10,51,6,76c0,0,26,26,95,22,0,0,79-2,90-37l-17-4s8-45-45-21l-22,71,23,8s24-98,40-111" transform="translate(-83 -228)"/>
</mask>
</defs>
<!-- ===================== -->
<g id="logo" mask="url(#mask-path)">
<path class="cls-1" d="M206.39,354c-6.69,23.32-43.69,31.4-64.84,19.74a35.15,35.15,0,0,1-14.62-15.86c-2.33-4.66-1.4-12.75,5.13-14.3,4.36-.94,10.73-.16,13.22,5.13,2.18,4.35,6.84,8.08,11.66,10.42,13.68,4.66,29.39-2.49,29.39-14.46,0-9.8-5.91-12.6-14.77-14.78-9.8-2-20.68-1.24-30.17-5.44-19-7.93-19.9-34.83-6.22-47.89,6.69-5.91,16-8.24,27.21-8.71,12.44-.46,26.13,2.49,33.43,8.71,5.29,4.2,12.44,14.77,4.51,19.59-6.53,4.2-12-2.49-16.32-5.6-5.6-4.19-14.93-5.44-22.08-4.66-9,1.09-16.33,5.91-15.55,15.24.46,6.68,7.62,8.86,13.68,9.64,9.18,1.24,18.82,1.09,27.68,4.51,9,3.57,15.86,9.64,18.5,18C208.25,339.26,208.25,348.44,206.39,354Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M301.55,277.53a26.92,26.92,0,0,1-.31,3.73,7.5,7.5,0,0,1-2,3.27,11.32,11.32,0,0,1-3.42,1.4,32.21,32.21,0,0,1-4.51.93,41,41,0,0,1-4.51.16h-7.93c-3.73.15-7.31.15-10.88.15.31,12.75-.16,28.3-.16,62.51V361.5a10.71,10.71,0,0,0,.16,2.33,13.83,13.83,0,0,1-.16,2.49c-.15.93-.31,2-.46,3.26a11.24,11.24,0,0,1-.63,3c-.46.46-.62.78-.62.93l-.46.93a7.79,7.79,0,0,1-3,3,11.4,11.4,0,0,1-7.62.78,7.42,7.42,0,0,1-4-1.4,8.55,8.55,0,0,1-2-2.8,10.05,10.05,0,0,1-1.09-3.27,10.56,10.56,0,0,1-.47-2.95V287.8c-2.49,0-17.72-.16-20.52-.63a48.68,48.68,0,0,1-6.07-1.09,9.79,9.79,0,0,1-5.13-2.95,6.76,6.76,0,0,1-1.71-4.51,13.32,13.32,0,0,1,.31-3.57,5.69,5.69,0,0,1,2.49-3.11,15.15,15.15,0,0,1,4.51-2.18,19,19,0,0,1,4.66-.94c1.71-.15,3.27-.15,5.14-.15,7.3,0,13.52,0,20.68-.16,12-.15,23.94,0,35.76.31a21.6,21.6,0,0,1,7.62,1.56,9.69,9.69,0,0,1,4.66,2.95A6.31,6.31,0,0,1,301.55,277.53Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M395.63,347.66a71.27,71.27,0,0,1-5.75,13.06c-6.53,11.2-19.91,17.11-32.35,17.73a38.7,38.7,0,0,1-29.23-11c-12.44-12.13-14.3-27.52-14.15-44.63,0-8.08-.31-25,0-33.43.16-5.44-.46-13.06,3-18,3.88-5.28,14.3-5.13,18.34.31a10.11,10.11,0,0,1,1.56,5.29c.93,13.84,0,36.7,0,43.23,0,12.28.78,22.86,5.29,29.39,4,5.9,10.1,7.15,15.7,6.53a18.4,18.4,0,0,0,14.15-9.95,24.93,24.93,0,0,0,2.49-7.94c1.55-15.85,2.64-43.53,2-60.33,0,0,.78-10.41,11.66-10.26,8.71.16,10.58,9.49,10.58,9.49C401.23,297,400,333,395.63,347.66Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M493.34,346c-4.7,11-12.61,21.46-24.85,26.54-12.8,5.43-28,4.21-41.92,1.54-4.61-.78-9.64-1.82-13.77-3.92a8.52,8.52,0,0,1-3.69-2.63,6.17,6.17,0,0,1-1.32-3.19,12.51,12.51,0,0,1-.42-3.62,23.38,23.38,0,0,1,.34-2.79l20.55-86.38a15.66,15.66,0,0,1,1.2-3.71,10.76,10.76,0,0,1,1.73-3.27,5.61,5.61,0,0,1,2.28-2.17,8.83,8.83,0,0,1,3.91-1c1.28,0,2.5.92,4.19.52l25.12,6.61c26.48,6.94,36.2,35.3,32.75,57.18A96.17,96.17,0,0,1,493.34,346Zm-18.67-43.12c-3.33-10.22-16.24-15.05-28-18-1.21,5.78-2.47,11.08-3.91,17.13-1.88,7.22-3.53,14.18-5,20.53l-7.34,30.86c12.47,2.65,23.81,4.07,34.1-5.63C475.1,337.38,479.2,316.78,474.67,302.91Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M516.34,362.12l.15-12.28.16-22.86c.15-6.53.15-13.68.15-21.15s0-12.59.32-19.75v-.62c.15-2,.31-4.35.31-6.53a17.51,17.51,0,0,1,1.71-6.06,9.29,9.29,0,0,1,3.26-3.73,11.11,11.11,0,0,1,4.82-1.25,34.07,34.07,0,0,1,4.2.31,6.23,6.23,0,0,1,3.58,1.87,6,6,0,0,1,1.71,2.49,31.28,31.28,0,0,1,.93,3.57A34.57,34.57,0,0,1,538,280c0,1.4-.15,2.49-.15,3.73v2.65l-.94,80.7v1.55c0,.62-.15,1.56-.31,2.8s-.62,2.18-1.09,3.42a8,8,0,0,1-2.33,2.8,7.45,7.45,0,0,1-4,1.71,12.43,12.43,0,0,1-7.93-.78,7.47,7.47,0,0,1-2.65-3.11,1.33,1.33,0,0,1-.46-.93c-.16-.31-.47-.62-.62-.93a12.2,12.2,0,0,1-.63-3.42c-.15-.94-.31-2-.46-3.11a7.38,7.38,0,0,1,0-2.65Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M630,290.66c9.07,14.35,13.51,33.28,12.06,48.17a52.2,52.2,0,0,1-2.58,13.2,36,36,0,0,1-19.71,21.09c-12.5,5.69-28.11,5.34-40.5-2.64-15-9.69-22.53-30.05-24.56-46.45-1.93-15.16,2.37-37.91,18.16-47.74C598.06,260.44,618.07,271.64,630,290.66Zm-16.36,10.9c-7.06-12.22-17.28-18.1-31.09-7.87-8.13,6.08-8.85,19.07-7.5,28.95,1.35,10.67,5.45,24,13.78,30.69a20.5,20.5,0,0,0,21.05,2.91c5.39-2.35,8.89-7,10.57-13.7a31.31,31.31,0,0,0,1.21-8.18C622.18,324.42,619.24,311.37,613.62,301.56Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M218.83,499.43a7.75,7.75,0,0,1-2,2.8,6.94,6.94,0,0,1-4.05,1.71,10.65,10.65,0,0,1-7.93-.62c-5.75-3.58-5-10.89-5.13-16.33V474.86l-.15-23.79c0-6.69,0-6.06-.16-13.37a71.33,71.33,0,0,0-.15-7.93c-16.18,26.9-19.75,31.1-25.66,31.56-3.42.31-6.84-3.57-8.71-5.91a171.34,171.34,0,0,1-18-27.05c-.15.77-.31,66.08-.93,66.24,0,7-7,13.06-15.55,8.55-2.64-1.71-4-5.29-4.35-7.93-.16-2.8-.31-5.6-.31-8.4l.15-12.13.16-23.94V429.92q0-13.53.93-26.59a15.73,15.73,0,0,1,1.4-6.06,8.43,8.43,0,0,1,3.27-3.73,9.55,9.55,0,0,1,5-1.4,32.18,32.18,0,0,1,4.05.31c4.19.78,7,6.06,9.64,8.86,3.26,3.73,7.77,11.35,10.26,15.4,5.44,8.7,9.48,16.17,13.22,21.3a50.44,50.44,0,0,0,4.5-6.69c4.36-6.68,7.93-12.13,14.78-23.48,2.95-4.82,9.48-15.55,16.17-15.7a29.81,29.81,0,0,1,4,.31,6.42,6.42,0,0,1,3.58,1.71,8.23,8.23,0,0,1,1.86,2.64,28.5,28.5,0,0,1,.78,3.42,37.09,37.09,0,0,1,.31,3.89c0,11.51.31,23,.31,34.52,0,14,.16,29.54.16,43.54,0,2.95.31,6.37.15,9.64A25.46,25.46,0,0,1,218.83,499.43Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M254.28,411.57,254,436h6.22c8.4-.16,14.31-.16,22.39,0h.78c2.49,0,4.82.15,7.15.15a33.27,33.27,0,0,1,7,1.4,9.65,9.65,0,0,1,4.36,2.8,7.28,7.28,0,0,1,1.55,4.51,14,14,0,0,1-.31,3.58,4.79,4.79,0,0,1-2,3.11,5.42,5.42,0,0,1-3,1.55,24,24,0,0,1-4,.78,19.73,19.73,0,0,1-4.35.47h-7.31l-28.77.15L253.35,485l30.94.31h7.31a39.43,39.43,0,0,1,4.36.15c1.55.31,3,.47,4.19.78a11.58,11.58,0,0,1,3.11,1.71,6.81,6.81,0,0,1,2,3.27,12.07,12.07,0,0,1,.15,3.42,7,7,0,0,1-1.55,4.51,8.56,8.56,0,0,1-4.36,2.8,17.85,17.85,0,0,1-7.15,1.4c-2.33.15-4.82.15-7.15.31h-.94q-12.12.22-25.19,0c-8.08-.16-8.86-.16-15.39-.16a9.45,9.45,0,0,1-5.91-1.24,6.18,6.18,0,0,1-2.64-3,1.74,1.74,0,0,1-.47-.93c-.15-.31-.46-.62-.62-.93a12.18,12.18,0,0,1-.62-3.27c-.16-.93-.31-2-.47-3.11v-2.49c0-.77.16-1.71.16-2.48V473.93l.31-22.39V430.86c0-7.47.15-12.6.31-19.44v-.78c.15-2.17.31-4.2.31-6.22a16.17,16.17,0,0,1,1.71-6.06,7.61,7.61,0,0,1,3.27-3.73,8.65,8.65,0,0,1,4.82-1.4,7.19,7.19,0,0,1,1.86.15v-.15c7.47,0,7.93,0,16.48-.16,8.24-.15,15.4-.15,23.33,0h.62c2.33.16,4.82.16,7.15.31a20.56,20.56,0,0,1,6.84,1.4,8.92,8.92,0,0,1,4.36,2.65,7.6,7.6,0,0,1,1.4,4.35,11.69,11.69,0,0,1-.31,3.42,5.51,5.51,0,0,1-1.87,3.27,17.93,17.93,0,0,1-3,1.55,33.09,33.09,0,0,1-3.89.62,22.13,22.13,0,0,1-4.51.31h-7l-31.1.16Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M410.59,496.16a5.57,5.57,0,0,1-1.09,3.42,7.59,7.59,0,0,1-3.11,2.65,11.87,11.87,0,0,1-8.24,1.55,9.29,9.29,0,0,1-3.89-2c-.31-.31-.62-.47-.78-.78-.15-.15-.46-.62-.78-.77a18.41,18.41,0,0,1-2.17-3c-.47-.93-.93-1.86-1.56-2.95a7.91,7.91,0,0,1-1.08-2.34,13.92,13.92,0,0,1-.78-2.48l-3.27-7.62c-14.15,0-28.61.15-42.76,0l-3.26,7.62c-.32.77-.47,1.71-.78,2.48A15.34,15.34,0,0,1,336,494.3c-.62,1.09-1.09,2-1.71,2.95a11.47,11.47,0,0,1-2,3c-.31.15-.62.62-.78.77-.15.31-.46.47-.78.78a9.31,9.31,0,0,1-3.88,2,11.85,11.85,0,0,1-8.24-1.55,7.63,7.63,0,0,1-3.12-2.65,5.63,5.63,0,0,1-1.08-3.42,27,27,0,0,1,.31-3.73,14.51,14.51,0,0,1,.77-2.8,10.26,10.26,0,0,0,.47-1.4l32.34-79.61.94-2.49c.46-1.24,1.08-2.17,1.55-3.57a19.12,19.12,0,0,1,1.71-3.58,17.78,17.78,0,0,1,2.34-3.26,7.94,7.94,0,0,1,2.64-2,16,16,0,0,1,10.11,0,8,8,0,0,1,2.64,2,29.66,29.66,0,0,1,2.33,3.26,18.52,18.52,0,0,1,1.71,3.58c.47,1.4,1.09,2.33,1.56,3.57l.93,2.49L409,488.23a12.27,12.27,0,0,0,.47,1.4,15.27,15.27,0,0,1,.78,2.8A28.7,28.7,0,0,1,410.59,496.16Zm-37.17-41.82c-2.64-5.91-5.44-12.44-8.55-19.13-.78-1.87-1.71-3.89-2.49-5.75-.62,1.86-1.55,3.88-2.33,5.75-3.11,6.69-5.91,13.22-8.55,19.13l-2.8,6.84h27.52Z" transform="translate(-83 -228)"/>
<path class="cls-1" d="M619.29,461.07s-3.67-2.63-9.9.14c.11-6.75-1.32-12.6-4.39-17.45-7.66-12.11-22.19-13.05-22.62-13.07A30.43,30.43,0,0,0,558.93,438c-14.29,12.15-19.08,36.08-20.59,47.21-8,.49-66.8,3.36-91.08-16,0,0-13.33-9.67-8.09-48.82,0,0,5.55-26.31-5-27.51,0,0-12.65-1.54-15.52,13.1,0,0-8.84,50.09,8.47,74.59,0,0,17.25,29.35,111.64,25.67,0,0,59.92-2.29,77.73-24.93C616.47,481.31,628.28,467.13,619.29,461.07ZM589.46,442.2a17.88,17.88,0,0,1,7.7,6.62c2.94,4.69,3.62,11.24,2.14,19.28-4.43,2.85-12.76,7.38-25.55,11.13C576.92,466.93,582.52,449.85,589.46,442.2ZM565,445.09A21,21,0,0,1,579.45,440c-8.36,12.23-13.66,32-15.93,41.81-4.75,1-9.92,1.9-15.6,2.56C549.56,473.74,554,454.46,565,445.09Z" transform="translate(-83 -228)"/>
</g>
</svg>
<!-- dasharray는 스크립트로 알아낼 수 있음 -->
<script>
function make_dash_animation(domID){
const this_dom = document.querySelector(domID);
const total_length = Math.ceil(this_dom.getTotalLength());
console.log(total_length);
this_dom.setAttribute('stroke-dasharray',total_length);
this_dom.setAttribute('stroke-dashoffset',total_length);
this_dom.dataset.dash = total_length;
}//make_dash_animation
make_dash_animation('.cls-2');
</script>
