SVG 텍스트 애니메이션

SVG

SVG는 Scalable Vector Graphics라는 뜻인데, 번역하자면 확장가능한 벡터 그래픽이다. 픽셀을 이용하여 그림을 그리는 png jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. 그러다보니 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식입니다.

---

HTML

<svg viewBox="0 0 1320 300">
    <text x="50%" y="50%" dy="40px" text-anchor="middle">마이쮸체</text>
  </svg>

---

CSS

@font-face {
    font-family: 'CrownMychew';
    font-weight: normal;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.ttf') format("truetype");
    font-display: swap;
}
body {
	background-color: #e3f2fd;
}
svg {
	font-family: 'CrownMychew';
	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;
	}
}

See the Pen TextAnimation by 이유나 (@fkdldhs8484) on CodePen.