[CSS] 텍스트가 서서히 그려지는 SVG 애니메이션

SVG 텍스트 애니메이션

이번 포스팅에서는 텍스트가 서서히 그려지는 효과의 SVG 애니메이션을 만들어보도록 하겠습니다. <svg> 태그가 사용된 방법입니다.

HTML 소스

<svg viewBox="0 0 1320 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">코딩공책</text>
</svg>

CSS 소스

@font-face {
    font-family: 'Jalnan';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.woff') format('woff'),
        url('https://cdn.jsdelivr.net/gh/webfontworld/goodchoice/Jalnan.ttf') format("truetype");
    font-display: swap;
}

body {
  background-color: #FFEBEE;
}
svg {
  font-family: 'Jalnan';
  font-size: 140px;
  position: absolute;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  animation: stroke 5s infinite alternate;
  fill: rgba(72,138,204,1);
}
@keyframes stroke {
  0% {
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    fill: rgba(72,138,204,0);
    stroke: rgba(54,95,160,1);
    stroke-width: 2;
  }
  70% {
    fill: rgba(72,138,204,0);
    stroke: rgba(54,95,160,1);
  }
  80% {
    fill: rgba(72,138,204,0);
    stroke: rgba(54,95,160,1);
  }
  100% {
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    fill: rgba(72,138,204,1);
    stroke: rgba(54,95,160,0);
    stroke-width: 0;
  }
}

코드펜 결과