SVG로 만든 hero 모션그래픽 연습 — 별과 정칠각형

배경

Heptone에 있을 때 회사 홈페이지 hero 영역에 들어갈 모션그래픽이 필요했다. 영상 파일을 얹는 대신 코드로 직접 그리면 가볍고, 어떤 해상도에서도 선명하고, 파라미터만 바꿔 변주할 수 있다. 그 감각을 잡기 위해 만든 두 개의 연습이다.

첫 번째 실험 — 손으로 찍은 별

먼저 가장 원시적인 방법으로 시작했다. 별의 꼭짓점 10개 좌표를 손으로 계산해 path로 외곽선을 그리고, 그 경로를 따라 점 5개가 돌게 했다.

Star — animateMotion 연습새 탭에서 열기 ↗

움직임은 자바스크립트 없이 SMIL의 animateMotion 하나로 해결된다. 같은 경로를 참조하는 점들에 begin만 1.4초씩 어긋나게 주면, 다섯 개의 점이 일정한 간격을 유지하며 행렬처럼 따라 돈다.

<circle r="7" fill="#000000">
  <animateMotion dur="7s" repeatCount="indefinite" rotate="auto" begin="1.4s">
    <mpath href="#starPath"/>
  </animateMotion>
</circle>

경로 = 애니메이션 트랙: mpath가 도형의 path를 그대로 참조하므로, 외곽선과 움직임의 궤적이 어긋날 일이 없다
시차(stagger): dur을 점 개수로 나눈 값(7s ÷ 5 = 1.4s)을 begin에 곱해주면 균등 간격이 나온다

다만 좌표를 손으로 찍는 방식은 꼭짓점 하나만 옮겨도 path와 circle 열 개를 같이 고쳐야 했다. 이 불편이 다음 실험의 출발점이 됐다.

두 번째 실험 — 코드가 그리는 정칠각형

Heptone이라는 이름에 맞춰 이번엔 7각형이다. 좌표를 손으로 찍는 대신, 자바스크립트로 반지름과 각도에서 꼭짓점을 계산해 모든 요소를 생성했다.

Heptagon — 생성 기하 + 잔상 연습새 탭에서 열기 ↗

const points = [];
const R = 360;
for (let i = 0; i < 7; i++) {
  const angle = (2 * Math.PI / 7) * i - Math.PI / 2;
  points.push([R * Math.cos(angle), R * Math.sin(angle)]);
}

기하를 코드로 만들자 손으로는 엄두가 안 나던 것들이 몇 줄로 풀렸다.

헵타그램: 꼭짓점을 2칸씩, 3칸씩 건너뛰며 이으면 별 모양 경로(heptagram)가 나온다. (i * 3) % 7 한 줄이 전부다
완전 그래프: 이중 루프로 7개 꼭짓점 사이의 모든 대각선(21개)을 잇는 보조선을 깔았다
잔상(trail): 같은 경로를 도는 원을 5개 겹치고, begin을 0.015초씩 밀면서 opacity를 0.5 → 0.1로 줄이면 혜성 꼬리 같은 잔상이 된다
글로우: feGaussianBlur를 원본과 feMerge로 합치는 필터 하나로 네온 느낌을 냈다
textPath: 외곽보다 조금 큰 7각형 경로를 하나 더 만들어 "HEPTONE •" 반복 텍스트를 흘렸다

// 3칸씩 건너뛰면 7/3 헵타그램이 그려진다
for (let i = 0; i < 8; i++) {
  const [x, y] = points[(i * 3) % 7];
  innerPathData += `${x},${y} `;
}

배운 것

두 실험의 차이는 결국 좌표를 누가 소유하는가였다. 별은 마크업이 좌표를 소유해서 수정이 곧 노동이었고, 칠각형은 코드가 좌표를 소유해서 R이나 변의 수 같은 파라미터가 곧 디자인 도구가 됐다. hero 모션그래픽처럼 변주와 튜닝을 반복해야 하는 작업이라면, 기하는 처음부터 코드로 생성하는 쪽이 맞다.

움직임 자체는 두 실험 모두 animateMotion이 담당했다. 선언형 애니메이션은 프레임 계산 없이 경로·주기·시차만 지정하면 되고, 그 단순함 덕에 "무엇을 움직일까"보다 "어떤 기하를 만들까"에 시간을 쓸 수 있었다.

원본 저장소: heptagon · star-dot