stroke-dashoffset로 그려지는 결과 체크마크

제작 과정

한 줄 요약

원과 표시(체크/엑스/점)에 stroke-dasharray=길이stroke-dashoffset=길이를 주고, keyframes로 offset을 0까지 줄여 선이 그려지는 효과를 만듭니다. 표시는 원보다 늦게 시작해 순차로 완성됩니다.

이럴 때 필요해요

결제 완료폼 제출 성공오류 같은 결과 화면에서 정적 아이콘보다 또렷한 피드백을 주고 싶을 때.

어떻게 동작하나

원은 둘레만큼 dash를 비워두고 offset을 0으로 줄여 한 바퀴 그립니다.
체크/엑스 path도 같은 방식으로, delay를 줘 원이 끝난 뒤 이어 그립니다.
재생은 key를 바꿔 remount 애니메이션을 처음부터 재시작.

놓치기 쉬운 것

dasharray 길이는 원이면 둘레(2r), path면 대략적인 길이로 충분(조금 길게 잡으면 안전).
회전 시작점을 맞추려면 원을 -90 돌려 12시부터 그려지게.
prefers-reduced-motion이면 애니메이션 없이 완성 상태로 즉시 표시.

이런 곳에 써요

결제/가입 완료 화면
토스트모달의 성공/실패 아이콘

import type { Metadata } from "next"; import { AnimatedCheckmarkDemo } from "./-components/AnimatedCheckmarkDemo"; export const metadata: Metadata = { title: "그려지는 체크마크 (데모)", description: "성공·실패·정보 아이콘이 SVG stroke-dashoffset 애니메이션으로 한 획씩 그려지는 결과 표시. 원이 돌며 그려지고 체크/엑스가 이어서 그려짐 — 색·재생 + CSS 복사, prefers-reduced-motion 즉시 표시.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-emerald-50/40"> <AnimatedCheckmarkDemo /> </main> ); }