ANIMATION | SVG 텍스트 애니메이션 만들기

---

SVG ANIMATION

SVG 텍스트 애니메이션 만들기

---

svg

<svg viewBox="0 0 1200 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">Gyupp</text>
</svg>

@font-face {
    font-family: 'Tmon';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/tmon/Tmon.eot');
         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 10 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;
    }
}