[SVG] JavaScript, CSS를 활용한 Path 기반 텍스트 애니메이션

👩‍💻/Web

[SVG] JavaScript, CSS를 활용한 Path 기반 텍스트 애니메이션

한나 2021. 1. 30. 02:23

위처럼 텍스트의 path를 따서 애니메이션 효과를 주는 예제를 만들어봤다.

프로토타이핑 툴로 잘 사용하고 있는 figma로 기본이 되는 SVG를 만들고, 간단한 자바스크립트와 CSS로 애니메이션을 만들었다.

SVG 태그 생성

figma로 아무 draft나 열어서 캔버스를 만든 다음, T 아이콘을 눌러 텍스트를 생성한다. figma에서 한글은 받침을 타이핑할 때 문제가 있어서, 한국어 텍스트로 SVG 소스를 준비해야 한다면, 포토샵 등 다른 도구를 사용하는 것이 낫다.

이렇게 아무 텍스트 박스가 생성되고, 현재는 Path를 따지 않았으므로 파란색 테투리가 텍스트 박스 전체에 걸쳐 있는 것을 볼 수 있다.

여기서 우클릭 -> outline stroke를 눌러주고,

이 상태에서 오른쪽의 Design 패널의 Stroke 나 Fill 에 여러 설정값을 주어 디자인한다. 나는 Fill은 삭제해주고, Stroke의 width를 7로, 바탕 색을 흰색으로 바꿔주었다.

설정을 마치고 나면, code editor에 불러와 붙여넣어주면 아래처럼 <svg> 태그 안에 <mask> .. <rect> .. <path> 순으로 잘 소스가 복사된 것을 알 수 있다. 물론 어떤 형태를 만드느냐에 따라 태그는 상이할 수 있다.

SVG Path Animation 만들기

body {
  margin: 0;
  padding: 0;
  background-color: #e7dcc2;
}

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

하얀색 글자를 바탕으로 하고 있으므로, 위처럼 기본 CSS를 작성해주고, 이제 getTotalLength()를 이용해 각 Path의 전체 길이를 가지고 올 차례이다.

우선 전체적인 HTML 형태는 아래와 같다.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>한글 텍스트 애니메이션</title>
	<link rel="stylesheet" href="hangeul_text.css">
	</head>
	<body>
	<svg id="logo" width="357" height="422" viewBox="0 0 357 422" fill="none" xmlns="http://www.w3.org/2000/svg">
	<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0.199951" y="0.399994" width="357" height="422"
	fill="black">
	<rect fill="white" x="0.199951" y="0.399994" width="357" height="422" />
	<path
	d="M111 27.4H66.2V5.39999H49.8V27.4H5.19995V40.6H111V27.4ZM30.8 83.8C30.8 71.4 41.8 63.4 58 63.4C74.2 63.4 85.3999 71.4 85.3999 83.8C85.3999 96.4 74.2 104.4 58 104.4C41.8 104.4 30.8 96.4 30.8 83.8ZM101 83.8C101 63.8 83.4 50.6 58 50.6C32.6 50.6 15.2 63.8 15.2 83.8C15.2 104 32.6 117.2 58 117.2C83.4 117.2 101 104 101 83.8ZM48.5999 129.4H32.2V180.8H151.8V167.4H48.5999V129.4ZM143.8 64.6V5.39999H127.4V140H143.8V78.4H170.2V64.6H143.8Z" />
	<path
	d="M224.584 148.6H330.984V103.4H207.784V116.4H314.584V136.2H208.384V182.6H335.384V169.6H224.584V148.6ZM326.384 72.2C330.384 52 330.384 36.6 330.384 24.4V13H209.384V26.2H314.184C314.184 38 313.984 52.4 309.984 72.2H188.584V85.4H351.384V72.2H326.384Z" />
	<path
	d="M111 261.4H66.2V239.4H49.8V261.4H5.19995V274.6H111V261.4ZM30.8 317.8C30.8 305.4 41.8 297.4 58 297.4C74.2 297.4 85.3999 305.4 85.3999 317.8C85.3999 330.4 74.2 338.4 58 338.4C41.8 338.4 30.8 330.4 30.8 317.8ZM101 317.8C101 297.8 83.4 284.6 58 284.6C32.6 284.6 15.2 297.8 15.2 317.8C15.2 338 32.6 351.2 58 351.2C83.4 351.2 101 338 101 317.8ZM48.5999 363.4H32.2V414.8H151.8V401.4H48.5999V363.4ZM143.8 298.6V239.4H127.4V374H143.8V312.4H170.2V298.6H143.8Z" />
	<path
	d="M224.584 382.6H330.984V337.4H207.784V350.4H314.584V370.2H208.384V416.6H335.384V403.6H224.584V382.6ZM326.384 306.2C330.384 286 330.384 270.6 330.384 258.4V247H209.384V260.2H314.184C314.184 272 313.984 286.4 309.984 306.2H188.584V319.4H351.384V306.2H326.384Z" />
	</mask>
	<path class="myPath"
	d="M111 27.4H66.2V5.39999H49.8V27.4H5.19995V40.6H111V27.4ZM30.8 83.8C30.8 71.4 41.8 63.4 58 63.4C74.2 63.4 85.3999 71.4 85.3999 83.8C85.3999 96.4 74.2 104.4 58 104.4C41.8 104.4 30.8 96.4 30.8 83.8ZM101 83.8C101 63.8 83.4 50.6 58 50.6C32.6 50.6 15.2 63.8 15.2 83.8C15.2 104 32.6 117.2 58 117.2C83.4 117.2 101 104 101 83.8ZM48.5999 129.4H32.2V180.8H151.8V167.4H48.5999V129.4ZM143.8 64.6V5.39999H127.4V140H143.8V78.4H170.2V64.6H143.8Z"
	stroke="white" stroke-width="10" mask="url(#path-1-outside-1)" />
	<path class="myPath"
	d="M224.584 148.6H330.984V103.4H207.784V116.4H314.584V136.2H208.384V182.6H335.384V169.6H224.584V148.6ZM326.384 72.2C330.384 52 330.384 36.6 330.384 24.4V13H209.384V26.2H314.184C314.184 38 313.984 52.4 309.984 72.2H188.584V85.4H351.384V72.2H326.384Z"
	stroke="white" stroke-width="10" mask="url(#path-1-outside-1)" />
	<path class="myPath"
	d="M111 261.4H66.2V239.4H49.8V261.4H5.19995V274.6H111V261.4ZM30.8 317.8C30.8 305.4 41.8 297.4 58 297.4C74.2 297.4 85.3999 305.4 85.3999 317.8C85.3999 330.4 74.2 338.4 58 338.4C41.8 338.4 30.8 330.4 30.8 317.8ZM101 317.8C101 297.8 83.4 284.6 58 284.6C32.6 284.6 15.2 297.8 15.2 317.8C15.2 338 32.6 351.2 58 351.2C83.4 351.2 101 338 101 317.8ZM48.5999 363.4H32.2V414.8H151.8V401.4H48.5999V363.4ZM143.8 298.6V239.4H127.4V374H143.8V312.4H170.2V298.6H143.8Z"
	stroke="white" stroke-width="10" mask="url(#path-1-outside-1)" />
	<path class="myPath"
	d="M224.584 382.6H330.984V337.4H207.784V350.4H314.584V370.2H208.384V416.6H335.384V403.6H224.584V382.6ZM326.384 306.2C330.384 286 330.384 270.6 330.384 258.4V247H209.384V260.2H314.184C314.184 272 313.984 286.4 309.984 306.2H188.584V319.4H351.384V306.2H326.384Z"
	stroke="white" stroke-width="10" mask="url(#path-1-outside-1)" />
	</svg>
	<script src="hangeul_text.js"></script>
	</body>
	</html>

view raw hanguel_text_anime.js hosted with ❤ by GitHub

구조를 보면 <svg> 안에 <mask>, <rect>, <path> 순인데, 애니메이션을 동작시킬 path는 <mask> 태그가 끝나고 난 다음의 총 4개의 <path> 태그이다. 어떤 텍스트를 사용하느냐에 따라 이 <path> 태그의 수는 달라진다.

각각의 path 태그에는 myPath라는 클래스를 써주었고, <svg>에는 logo 아이디를 부여했다.

const logo = document.querySelectorAll("#logo .myPath");

for(let i = 0; i < logo.length; i++) {
    console.log(`${i+1}번째 path의 총 길이 ${logo[i].getTotalLength()}`);
}

float someElement.getTotalLength();

path의 총 길이를 확인하기 위해 querySelectorAll로 전체 node를 가지고 왔다. for문을 돌려 i번째 노드의 전체 path 길이를 가지고 오는 getTotalLength() 메소드를 쓴다. 개발자 도구를 열어보면 아래처럼 전체 길이가 반환되어 온다.

다시 CSS 파일로 돌아와, 각각의 글자에 어떻게 stroke 변화를 줄 수 있는지 알아보기 위해 nth-child 또는 nth-of-type을 써 #logo 아래의 .myPath를 하나 하나 선택해준다.

nth-of-type()과 nth-child() 비교

/* nth-of-type을 쓸 경우 */

#logo .myPath:nth-of-type(1) {
}

#logo path:nth-of-type(2) {
}

#logo .myPath:nth-of-type(3) {
}

#logo .myPath:nth-of-type(4) {
}

/* nth-child를 쓸 경우 */

#logo path:nth-child(2) {
}
#logo path:nth-child(3) {
}
#logo path:nth-child(4) {
}
#logo path:nth-child(5) {
}

현재 html 태그의 <svg> 내부를 보면 <mask> 태그 그리고 4개의 <path> 태그로 구성되어 있다. nth-child는 서로 동등한 위치의 태그들 내에서의 순서를 짚기 때문에, #logo의 path의 nth-child()를 쓸 경우 mask 태그를 센 다음 2번째에 등장하므로 숫자가 2부터 시작하게 된다.

nth-of-type을 쓸 경우에는 같은 종류의 타입 내에서 요소의 순서를 카운트 하기 때문에, .myPath라는 클래스를 기준으로 묶든, path를 기준으로 묶든 #logo 하위의 4개의 <path>만을 생각해 계산하면 된다.

stroke-dasharray, stroke-dashoffset

#logo path:nth-of-type(1) { stroke-dasharray: 50px; }

위 태그를 적용했을 때는 왼쪽의 모습과 같다.

어떤 element에든 적용가능한 속성이지만, 실제로 효과를 볼 수 있는 태그는 아래 열 두 개로 제한적이다.

dash라는 이름이 들어가는 그대로, 점선을 만들어주는 속성이다. 이 속성과 같이 stroke-dashoffset 속성이 쓰이는데, 이 속성은 어디에서부터 시작할지를 정해준다.

Animation

원하는 애니메이션은 글자가 전혀 없다가 서서히 path가 그려지는 형태로, 최종적으로는 전체가 다 보이도록 할 것이다. stroke-dasharray가 해당 요소의 전체 길이와 동일하다면, 점선은 하나도 없는 상태이다. 만일 offset도 동일하게 같은 값이라면

이렇게 사라져 있는 형태가 될 것이다. keyframe 애니메이션을 통해 stroke-dashoffset을 0으로 주도록 해본다.

그리고 각 path에

animation: line-anime 5s ease-out forwards; 를 한 줄 추가한다.

순서대로 키프레임의 이름, 애니메이션 소요 시간, 애니메이션 timing function, animation-fill-mode 이다. forwards는 애니메이션이 키프레임에 100%에 도달했을 때 마지막 키프레임을 유지한다.

마지막으로 path를 그리는 애니메이션이 종료되면 전체 글자를 하얀색으로 그리는 애니메이션을 넣고 종료하고자 할 때는, <svg> 태그와 <mask> 태그에 동시에 애니메이션을 적용해야 제대로 동작했다. #path-1-outside-1은 <mask> 태그에 자동으로 설정되어 있던 id 값이다.

#logo,
#path-1-outside-1 {
  animation: fill-out 1s ease-out forwards 2s;
}

@keyframes fill-out {
  from {
    fill: transparent;
  }
  to {
    fill: white;
  }
}

개인적으로는 예시로 사용한 한자의 경우가 더 애니메이션 움직임이 다양해서 적합해 보인다.

다음에는 JavaScript가 아닌 SCSS로만 애니메이션을 구현하는 방법도 찾아두면 좋을 것 같다.

눌러서 전체 Code 보기 👀

'👩‍💻 > Web' 카테고리의 다른 글

SOP(Same-Origin-Policy), CORS(Cross-Origin-Resource-Sharing) (0)	2021.05.10

현재글[SVG] JavaScript, CSS를 활용한 Path 기반 텍스트 애니메이션

프론트엔드 개발자의 Today I Learnt

CRA, 파이썬, github, todolist, vue.js, programmers, 루비, 프로그래머스, Frontend, ESLint, javascript, git, React, CSS, Typescript, 프론트엔드, 리액트, coding test, vue, techBlog,

Today :
Yesterday :

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Under the Sign of Saturn