SVG 텍스트 애니메이션

SVG 텍스트 애니메이션

SVG 텍스트에 stroke효과와 애니메이션 효과를 입혀서 예쁘게 만들어보겠습니다.

---

01. HTML

{
    <svg viewBox="0 0 1320 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">kimdaewonn</text>
  </svg>
}

02. CSS

{
    @font-face {
        font-family: 'Tmon';
        font-weight: normal;
        font-style: normal;
        src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot');
        src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot?#iefix') format('embedded-opentype'),
             url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff2') format('woff2'),
             url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.woff') format('woff'),
             url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.ttf') format("truetype");
        font-display: swap;
    } 
    body {
        background-color: #e3f2fd;
    }
    svg {
        font-family: 'Tmon';
        font-size: 140px;
        position: absolute;
        width: 100%;
        height: 100%;
        text-transform: uppercase;
        animation: stroke 5s 1 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;
        }
    }
}

03. 결과물

See the Pen Untitled by kimdaewonn (@kimdaewonn) on CodePen.