SVG/CSS keyframes : 글자 테두리 애니메이션

 

SVG는 CSS 와 JS적용이 가능한 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이다.

SVG와 CSS Animation을 활용하여 글자 테두리가 그려지며 글씨 색이 채워지는 애니메이션을 만들어보았다.

 

 

[HTML]

<svg>
	<text text-anchor="middle" x="50%" y="60%">HELLO</text>
</svg>

 svg 태그 안에 text태그를 사용하면 글씨를 그려줄 수 있다.

text의 text-anchor는 요소를 정렬하는 데 사용되며 start | middle | end 의 값을 줄 수 있고

나는 중간에 정렬을 하고자 middle을 사용했다.

x축,  y축으로 세부 위치를 조절해주었다.

 

 

 

[CSS]

svg {
  width: 250px;
  height: 100px;
  font-size: 50px;
  font-weight: 800;
  background:#eee;
}
svg text {
  fill: #fff;
  stroke: #d81b0d;
  stroke-dasharray: 326px;
  stroke-width: 2px;
  stroke-dashoffset: 0%;
  animation: stroke-offset 3s infinite linear;
  animation-delay: -1;
}

@keyframes stroke-offset{
  0% { stroke:#d81b0d; stroke-width: 3px; stroke-dashoffset: 326px; } 
  70% { fill: transparent; } 
  98% { stroke:#d81b0d; stroke-width: 2px; } 
  100% { fill: #d81b0d; stroke-dashoffset: 0px; }
}

svg는 크기를 필수로 지정해주어야 하는데

html에서 지정해 줄 수도 있지만, 단위나 수정을 고려하여 CSS로 스타일링해주었다.

 

SVG 스타일

fill: 폰트 색상  
 stroke: 테두리(점선) 색상
 stroke-dasharray: 테두리(점선)의 길이 (길이에 따라 테두리 애니메이션 느낌이 달라짐)
 stroke-width: 테두리(점선) 굵기

stroke-dashoffset: 시작 시점

 

keyframes을 사용하여 stroke-offset이라는 animation을 만들어 적용해주었다.

stroke-dashoffset을 활용하여 선 시작점이 0%에서 100%이 반복되며 그려지는 원리이다.

 

 

[적용 화면]

See the Pen by noocgs (@noocgs) on CodePen.