이 코드펜은 Sten Hougaard의 작업에서 영감을 받았습니다.

준비

다양한 애니메이션 구현을 위해 두 개의 컨테이너를 만들어 보겠습니다.

 
Animated text
  



 
Click on me!
  

Adobe Illustrator를 사용하여 svg를 만들었습니다. 주요 기능은 높이가 작고 너비가 크다는 것입니다.
svg가 헤더 요소의 하위 요소라는 점을 언급하는 것이 중요합니다. svg를 헤더 요소에 상대적으로 배치하기 때문입니다.

CSS

컨테이너를 가변박스로 변환하여 모든 것을 중앙에 우아하게 배치합니다.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline은 svg가 이에 의존하므로 요소의 너비를 콘텐츠로 줄이는 데 사용됩니다.

다음으로 헤더를 기준으로 svg의 위치를 ​​지정해야 합니다.

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

표준 방법을 사용하여 상대 요소를 상위 요소의 중앙에 배치합니다. svg를 텍스트에 맞게 조정하려면 min-width 및 min-height를 적용해야 합니다.

자바스크립트를 사용한 애니메이션 로직

자바스크립트에서 요소에 애니메이션을 적용하려면 멋진 애니메이션(키프레임, 옵션) 방법을 사용할 수 있습니다.

키프레임

반복할 속성을 제공하는 get DrawingParameters 함수를 분석해 보겠습니다.

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

먼저 svg 메소드 getTotalLength:
를 사용하여 경로가 실제로 얼마나 긴지 알아야 합니다.

const length = path.getTotalLength();

이제 계산된 길이를 사용하여 그림을 시뮬레이션해야 합니다. 시작점을 정의해 보겠습니다. 스트로크Dasharray:
속성이 필요합니다.

path.style.strokeDasharray = length;

여기서 이 속성은 하나의 대시(크기=길이)와 하나의 간격(크기=길이)을 교대로 사용하여 경로를 그리도록 지시합니다.

길이가 필요한 다음 속성은 Stroke-dashoffset:
입니다.

path.style.strokeDashoffset = length;

이 값은 대시 배열 계산이 길이 값으로 당겨진다는 것을 나타냅니다. 그리고 대시 배열을 '대시 길이 갭 길이 ​​대시 길이 갭 길이 ​​...'로 설정했기 때문에 시작 경로는 비어 있습니다(갭).

따라서 반복 가능한 속성을 배열로 정의합니다.

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

오프셋을 사용하여 이 속성에 도달해야 하는 상대 시간을 정의합니다. 매 iteration마다 딜레이를 흉내내도록 만들어졌습니다.

옵션

animate 메소드의 두 번째 인수는 옵션입니다:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

애니메이션을 무한 반복 및 10초 지속 시간으로 설정했습니다. 오프셋을 기억하시나요? "활성" 애니메이션은 1.5초 밖에 걸리지 않습니다.