SVG 애니메이션 예시

예시

HTML

HTML 소스입니다.

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

CSS

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;
	}
}