애니메이션 다이어그램 데모

두 예제로 정적 아키텍처를 흐르는 트래픽과 제어 가능한 Pod 확장 시나리오를 보여 줍니다. 반복되는 SVG 움직임과 JavaScript/CSS 상태 전환을 비교합니다.

실행 예제

필터링 가능한 범례가 있는 VPC 트래픽 흐름새 탭에서 열기 ↗

워크플로 예시: Create SVG traffic paths with SMIL animation and a legend filter.

확장·축소 제어 기능이 있는 EKS Pod 확장새 탭에서 열기 ↗

워크플로 예시: Create an EKS pod-scaling state machine with JavaScript and CSS.

확인할 사항

시작·초기화 기능을 실행하고 트래픽, 복제본, 레이블과 범례의 변화를 확인합니다. 반복되는 흐름에는 SMIL을, 인터랙티브 확장·배포·장애 조치에는 상태 머신을 사용합니다. 이 고정 예제는 두 방식의 차이를 보여 줍니다. 새 다이어그램에는 현재 기준 토큰을 사용합니다.

삽입된 HTML, 다운로드 가능한 소스와 스크린샷은 변경하지 않는 예제 결과물입니다. 원래 언어를 유지하며, 이 가이드에서는 예제를 이해하는 방법을 설명합니다.

스크린샷