GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

css 그래프 만들기 SVG로 9종 — 라이브러리 없이

· Godrich · 9종 · 11분 읽기

대시보드 UI바닐라 JSSCSSReact호버대시보드리포트

css 그래프는 숫자를 눈에 보이는 선·막대·면으로 바꾸는 가장 가벼운 방법입니다. 여기 아홉 가지는 선·막대·도넛·레이더·히트맵·스파크라인·누적 영역·트리맵·게이지를 라이브러리 없이 SVG 좌표 계산과 CSS 애니메이션만으로 그린 것이라, 파일을 붙여 넣으면 그려지는 등장 동작과

펜처럼 그려지는 선 그래프01 chart-draw-line-path 밑변에서 자라는 세로 막대 그래프02 chart-draw-bar-column 한 조각씩 차오르는 도넛 그래프03 chart-draw-donut-arc 중심에서 펼쳐지는 레이더 차트04 chart-draw-radar-polygon 칸이 순서대로 물드는 히트맵05 chart-draw-heatmap-grid 카드 안에 사는 스파크라인06 chart-draw-sparkline-dot 아래에서 채워지는 누적 영역 그래프07 chart-draw-area-stack 큰 것부터 자리 잡는 트리맵08 chart-draw-treemap-squarify 숫자를 넣으면 바늘이 도는 반원 게이지09 chart-draw-gauge-needle

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개를 늘어놓은 기준은 css 그래프 만들기가 그림을 완성하는 순서입니다. 먼저 선을 긋는 셋 — x·y 계산으로 path 를 잇고(01), 막대가 밑변에서 자라며(02), 원호 조각이 차례로 차오릅니다(03). 다음은 면을 채우는 셋 — 중심에서 폴리곤이 펼쳐지고(04), 격자 칸이 농도로 물들며(05), 누적 영역이 아래부터 쌓입니다(07). 마지막 셋은 자리를 나누고 값을 가리키는 쪽 — 카드 안의 짧은 추이(06), 면적대로 분할된 트리맵(08), 값 하나를 각도로 바꾸는 게이지(09)입니다. 무대 색은 잉크 셋·종이 셋·노랑 둘·주황 하나로 돌려 격자 아홉 칸의 밝기가 한쪽으로 쏠리지 않게 맞췄습니다. 그린 그래프를 마우스로 다루는 쪽은 대시보드 차트 인터랙션 9종에, 원형 링 하나로 수치를 세는 쪽은 원형 프로그레스바 스탯 링 9종에 있습니다. 같은 좌표 계산이 1초마다 새 값을 받아 다시 그려야 하는 자리로 가면 실시간 시세판 UI가 그 갱신을 맡습니다.

01펜처럼 그려지는 선 그래프

무엇이 보이나

12개월 방문 수를 scaleX·scaleY 두 함수로 viewBox 좌표로 바꿔 path 하나로 잇고, pathLength=100 을 붙인 뒤 stroke-dashoffset 을 100 에서 0 으로 내려 왼쪽에서 끝까지 긋습니다. 꺾이는 점마다 인접 점의 중점을 잇고 실제 점은 제어점으로 쓰는 부드러운 선이라 꺾임이 살면서 물결지지 않습니다.

펜처럼 그려지는 선 그래프
새 창에서 열기

01 · 펜처럼 그려지는 선 그래프 — 측정 누적면적 25.276% · 움직인 프레임 18/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

stroke-dashoffsetpathLengthpointermove

코드에서 볼 곳

펜이 끝까지 그어가는 루프에서 누적면적 25.276%, 움직인 프레임 18/23 을 기록했고, 월간 트래픽 리포트 상단 요약과 어드민 대시보드 첫 카드에 씁니다.

// 스케일 함수 — 데이터 값 → viewBox 좌표. 이 두 함수가 그래프의 전부다
function scaleX(i) { return PAD_L + (PAD_R - PAD_L) * i / (DATA.length - 1); }
function scaleY(v) { return BASE - (BASE - TOP) * v / MAX_Y; }

// 인접 점의 중점을 잇고 실제 점은 제어점으로 쓰는 부드러운 선 — 꺾임이 살면서 물결지지 않는다
function buildPath() {
  var pts = DATA.map(function (v, i) { return [scaleX(i), scaleY(v)]; });
  var d = 'M' + pts[0][0] + ',' + pts[0][1];
  for (var i = 1; i < pts.length - 1; i++) {
    var mx = (pts[i][0] + pts[i + 1][0]) / 2, my = (pts[i][1] + pts[i + 1][1]) / 2;
    d += ' Q' + pts[i][0] + ',' + pts[i][1] + ' ' + mx + ',' + my;
  }
  var last = pts[pts.length - 1];
  d += ' L' + last[0] + ',' + last[1];
  return d;
}

02밑변에서 자라는 세로 막대 그래프

css 막대 그래프 애니메이션은 어디서 시작하나

주간 매출을 막대 하나씩 셀 하나로 묶어 --d 지연으로 순서대로 세우고, transform: scaleY 를 transform-origin: 50% 100% 와 함께 써 밑변 축에서 위로 자라게 합니다 — baseline 에 닿는 아래쪽이 원점이어야 커지는 게 아니라 늘어나 보입니다. 값 라벨은 반값과 최종값 두 장을 컷으로 갈아 끼우고, 최고 막대(토요일)만 계열색 블루로 강조합니다.

밑변에서 자라는 세로 막대 그래프
새 창에서 열기

02 · 밑변에서 자라는 세로 막대 그래프 — 측정 누적면적 14.688% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

transform-originscaleYanimation-delay

코드 읽는 법

루프에서 누적면적 14.742%, 강도 166.4 를 기록했고, 주간 매출 요약 카드처럼 이번 주 최고치를 강조하는 자리에 씁니다.

// 데이터 값 → viewBox 좌표. 막대 그래프의 핵심은 이 두 함수다
function scaleY(v) { return BASE - (BASE - TOP) * v / MAX_Y; }
function band() { return (PAD_R - PAD_L) / DATA.length; }          // 막대 하나가 차지하는 폭
function centerX(i) { return PAD_L + band() * (i + .5); }          // 막대 중심 = 라벨 위치

// SVG 자식을 만드는 헬퍼 — 속성만 채워 부모에 붙인다
function el(name, attrs, parent) {
  var n = document.createElementNS(SVGNS, name);
  for (var k in attrs) { n.setAttribute(k, attrs[k]); }
  parent.appendChild(n);
  return n;
}

// 막대의 scaleY 는 밑변 축에 붙은 채 위로 자란다 — baseline 에 닿는 아래쪽이 원점이므로
// transform-origin bottom 이 정당하다. transform-box: fill-box 로 rect 자체를 기준 박스로
.cb__bar { transform-box: fill-box; transform-origin: 50% 100%; }

03한 조각씩 차오르는 도넛 그래프

어떤 움직임인가

유입 채널 비중을 12시에서 시작해 시계 방향으로 각도를 쓰며 원호 A 명령 네 개로 계산하고, 조각마다 pathLength=100 을 붙여 stroke-dashoffset 이 원호 길이와 무관하게 100 에서 0 으로 내려가게 합니다. 조각 사이 2px 간격은 path 를 각도만큼 줄여 그렸으므로 크림 배경이 자연스러운 분할선이 됩니다.

한 조각씩 차오르는 도넛 그래프
새 창에서 열기

03 · 한 조각씩 차오르는 도넛 그래프 — 측정 누적면적 7.771% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

stroke-dasharraystroke-dashoffsetanimation-delay

어디를 바꾸면 되나

이어지는 붓질이 2초 루프를 채워 누적면적 7.767%, 강도 169.0 을 기록했고, 유입 채널 비중 카드처럼 구성 비율을 한눈에 보는 자리에 씁니다.

// 시작·끝 각도(라디안)로 원호 path 한 조각 — M 으로 붓을 대고 A 로 호를 긋는다
function arcPath(a0, a1) {
  var x0 = (CX + R * Math.cos(a0)).toFixed(2), y0 = (CY + R * Math.sin(a0)).toFixed(2);
  var x1 = (CX + R * Math.cos(a1)).toFixed(2), y1 = (CY + R * Math.sin(a1)).toFixed(2);
  var large = (a1 - a0) > Math.PI ? 1 : 0;   // 180도 넘는 호에만 큰 호 플래그
  return 'M' + x0 + ',' + y0 + ' A' + R + ',' + R + ' 0 ' + large + ' 1 ' + x1 + ',' + y1;
}

04중심에서 펼쳐지는 레이더 차트

무엇이 보이나

여섯 축 점수를 pos(i, r) 삼각함수 좌표로 놓아 눈금 육각 격자와 데이터 폴리곤이 같은 함수에서 나오게 합니다. 폴리곤은 transform: scale 로 중심에서 펼쳐지는데, SVG 요소의 CSS transform 기준 상자는 기본 viewBox 원점이라 transform-box: fill-box 와 transform-origin: center 를 함께 써야 폴리곤 한가운데서 커집니다.

중심에서 펼쳐지는 레이더 차트
새 창에서 열기

04 · 중심에서 펼쳐지는 레이더 차트 — 측정 누적면적 5.192% · 움직인 프레임 19/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pointstransform-originscale

코드에서 볼 곳

폴리곤 확대 뒤 꼭짓점의 점 여섯이 순서대로 팝하는 루프에서 누적면적 5.192%, 움직인 프레임 19/23 을 기록했고, 설문 응답 비교와 기능 만족도 카드에 씁니다.

// i번째 축의 좌표 — 위꼭짓점(i=0)에서 시작해 시계 방향 60도 간격.
// r 에 점수 비율을 곱하면 데이터 위치, 눈금 반지름을 그대로 넣으면 격자 꼭짓점이 된다
function pos(i, r) {
  var rad = (i * 60 - 90) * Math.PI / 180;
  return [CX + r * Math.cos(rad), CY + r * Math.sin(rad)];
}
// 반지름 r 육각형의 points 문자열 — 눈금 격자와 데이터 폴리곤이 같은 함수에서 나온다
function ringPts(r) {
  var s = '';
  for (var i = 0; i < N; i++) { var p = pos(i, r); s += (i ? ' ' : '') + p[0].toFixed(1) + ',' + p[1].toFixed(1); }
  return s;
}

05칸이 순서대로 물드는 히트맵

화면에서 일어나는 일

요일×시간대 밀도 42칸을 한 가지 색으로 고정하고 fill-opacity 만 0.12 + 0.88 × v / 100 농도 함수로 움직입니다. 칸마다 animation-delay 를 28ms 간격으로 달아 좌에서 우로, 한 줄이 끝나면 다음 줄로 순서대로 물들게 하는데, 지연이 걸린 루프에는 animation-fill-mode: backwards 가 필수라 첫 프레임에 완성 상태가 번쩍 지나가지 않습니다.

칸이 순서대로 물드는 히트맵
새 창에서 열기

05 · 칸이 순서대로 물드는 히트맵 — 측정 누적면적 29.057% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

animation-delayanimation-fill-modefill

코드 읽는 법

42칸이 전부 물드는 루프에서 누적면적 29.057%, 움직인 프레임 22/23 을 기록했고, 방문 시간대 밀도 패널과 활동 리포트에 씁니다.

// 농도 함수 — 이 데모의 주제. 색은 한 가지로 고정하고 투명도만 값에 비례해 움직인다
function fillOpacity(v) { return 0.12 + 0.88 * v / 100; }

// 칸마다 --d 지연으로 좌에서 우로 순서대로 나타난다.
// 낱개 속성 + animation-fill-mode: backwards — animation 단축은 delay 를 0 으로 리셋하고,
// fill-mode 가 없으면 지연 구간에 완성 상태가 첫 프레임에 번쩍 지나간다
.ch.is-demo .ch__cell {
  animation-name: chCell;
  animation-duration: $duration;
  animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-delay: var(--d);
  animation-fill-mode: backwards;
}

06카드 안에 사는 스파크라인

어떤 움직임인가

14일 추이를 카드 폭에 맞는 짧은 path 로 줄이고, 종가 점이 라인과 같은 계열색으로 마침표를 찍습니다. 큰 숫자 두 장(반값·최종값)을 같은 grid 칸에 겹쳐 steps(1, end) 컷으로 갈아 끼우므로 숫자가 바뀌어도 자리가 흔들리지 않습니다.

카드 안에 사는 스파크라인
새 창에서 열기

06 · 카드 안에 사는 스파크라인 — 측정 누적면적 3.914% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pathLengthstroke-dasharrayr

어디를 바꾸면 되나

라인 드로잉·점 팝·숫자 컷 교체가 이어지는 루프에서 강도 128.8 을 기록했고, KPI 카드 안의 미니 추이처럼 목록 행의 보조 지표에 씁니다.

function buildPath() {
  return DATA.map(function (v, i) {
    return (i ? 'L' : 'M') + scaleX(i).toFixed(1) + ',' + scaleY(v).toFixed(1);
  }).join(' ');
}
line.setAttribute('d', buildPath());

// 종가 점 — 상승 추세라 라인과 같은 계열색. 팝은 점 중심에서 커진다
.cs__dot { fill: $chart-1; transform-box: fill-box; transform-origin: center; }

07아래에서 채워지는 누적 영역 그래프

무엇이 보이나

세 계열 점유율을 매월 100 이 되게 더해 누적 경계선 네 개(바닥·데스크톱 위·모바일 위·천장)를 잡고, 각 레이어 path 가 위 경계를 좌에서 우로 걷고 아래 경계를 거꾸로 돌아 면적을 닫습니다. 미리보기는 같은 path 에 clip-path: inset 와이프를 얹어 아래 레이어부터 차례로 채워 올립니다.

아래에서 채워지는 누적 영역 그래프
새 창에서 열기

07 · 아래에서 채워지는 누적 영역 그래프 — 측정 누적면적 33.087% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

clip-pathopacitytransform-origin

코드에서 볼 곳

세 층이 순서대로 차오르는 루프에서 누적면적 33.087%, 강도 160.0 을 기록했고, 기기·브라우저 점유율 추이 패널에 씁니다.

// k번째 레이어 path — 위 경계를 좌에서 우로 걷고 아래 경계를 거꾸로 돌아와 면적을 닫는다
function layerPath(k) {
  var d = '';
  for (var i = 0; i < MON.length; i++) d += (i ? ' L' : 'M') + xAt(i).toFixed(1) + ',' + yAt(B[k + 1][i]).toFixed(1);
  for (var j = MON.length - 1; j >= 0; j--) d += ' L' + xAt(j).toFixed(1) + ',' + yAt(B[k][j]).toFixed(1);
  return d + ' Z';
}

08큰 것부터 자리 잡는 트리맵

화면에서 일어나는 일

카테고리 매출을 값 내림차순으로 정렬해 남은 영역을 절반 무게에 가장 가까운 지점으로 이진 분할하고, 종횡비가 1 에 가까워지는 방향으로 재귀하는 간이 squarify 로 배치합니다. 라벨은 면적이 충분한 칸에만 새기고 작은 칸은 호버 툴팁과 스크린리더 표가 값을 갖습니다.

큰 것부터 자리 잡는 트리맵
새 창에서 열기

08 · 큰 것부터 자리 잡는 트리맵 — 측정 누적면적 53.984% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

fill-opacitypointermoveviewBox

코드 읽는 법

큰 칸부터 순차 등장하는 루프에서 누적면적 53.981% 를 기록했고, 카테고리 매출 구성 패널과 포트폴리오 구성 뷰에 씁니다.

// 간이 squarified 이진 분할 — 값 내림차순 목록을 남은 영역에서 절반 무게에 가장 가까운 지점으로 나누고
// 종횡비가 1 에 가까워지는 방향(가로/세로)으로 재귀한다. 완전한 squarify 는 아니지만 정사각 비율이 잘 나온다
function split(items, x, y, w, h, out) {
  if (!items.length) { return; }
  if (items.length === 1) { out.push({ item: items[0], x: x, y: y, w: w, h: h }); return; }
  var total = 0;
  for (var k = 0; k < items.length; k++) { total += items[k].v; }
  var half = total / 2, acc = 0, i = 0;
  while (i < items.length - 1 && Math.abs(acc + items[i].v - half) < Math.abs(acc - half)) { acc += items[i].v; i++; }
  var ratio = acc / total;
  if (w >= h) {
    split(items.slice(0, i), x, y, w * ratio, h, out);
    split(items.slice(i), x + w * ratio, y, w * (1 - ratio), h, out);
  } else {
    split(items.slice(0, i), x, y, w, h * ratio, out);
    split(items.slice(i), x, y + h * ratio, w, h * (1 - ratio), out);
  }
}

09숫자를 넣으면 바늘이 도는 반원 게이지

어떤 움직임인가

목표 달성률을 입력하면 값% 가 곧 stroke-dashoffset(100-값)이 되어 반원 호가 차고, 바늘은 rotate(각도) 로 그 값의 각도만큼 돕니다. SVG 요소의 CSS transform-origin 은 viewBox 좌표계를 기준하므로 게이지 중심(220px 126px)을 직접 지정합니다.

숫자를 넣으면 바늘이 도는 반원 게이지
새 창에서 열기

09 · 숫자를 넣으면 바늘이 도는 반원 게이지 — 측정 누적면적 7.21% · 움직인 프레임 13/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

rotatestroke-dasharraytransform-origin

어디를 바꾸면 되나

0 에서 68 로 바늘이 돌며 차오르는 루프에서 강도 141.5 를 기록했고, 목표 달성률 표시와 할당량 진행 카드에 씁니다.

// 값 → 바늘 회전각(도). 바늘 기본 모양이 12시라 0% 에서 -90(왼쪽 끝), 100% 에서 +90(오른쪽 끝)
function angleFor(v) { return v * 1.8 - 90; }
// 값 → 반원 위의 수학 각도(도). 0% 가 180(왼쪽), 100% 가 0(오른쪽) — 회전각과 다른 값이라는 점이 함정
function degreeFor(v) { return 180 - v * 1.8; }
// 수학 각도 → viewBox 좌표. SVG 는 y 가 아래로 자라므로 sin 을 **빼야** 위쪽 반원이 나온다
function pointAt(deg, radius) {
  var rad = deg * Math.PI / 180;
  return [CX + radius * Math.cos(rad), CY - radius * Math.sin(rad)];
}

어디서 깨지는가 — 함정

첫 번째 함정은 각도의 두 규약을 한 식에 섞는 것입니다. SVG 의 y 축은 아래로 자라므로 수학 각도로 좌표를 잡을 때는 sin 을 빼야 위쪽 반원이 나오는데, 이 편의 09 에서 처음에는 CSS 회전각의 감각으로 CY + radius * Math.sin(rad) 를 썼다가 반원이 통째로 아래로 뒤집혔습니다. 구간 60~80% 의 중심각 54도에서 반지름 88 이면 잘못된 y 는 197.2 — viewBox 높이 176 을 21.2 나 넘겨 호버 툴팁의 당김줄이 밑변 아래로 가라앉았고, sin 을 빼는 한 줄로 54.8 로 되돌아왔습니다(근거: run/289/_수리전실측.json). 바늘의 CSS rotate 는 시계 방향, 수학 각도는 반시계 방향이라 두 값은 애초에 다른 숫자라는 점도 함께 적어 둡니다. 두 번째는 절대 배치 툴팁을 카드 위에 띄우는 것 — 07 에서 한 줄에 계열 셋을 늘어놓은 툴팁이 폰 폭에서 화면 밖으로 37px 나 나갔고, 그래프 안쪽에 두고 세로로 쌓아야 320px 안에 들어옵니다. 세 번째는 되감기 장면이 대표 이미지를 잡아먹는 것 — 루프 끝에 그래프를 지우는 순간의 변화 면적이 등장보다 크면 poster 가 빈 카드가 되므로, 완성 상태를 96% 까지 유지하고 되돌림은 98% 로 미뤄 샘플 밖으로 내보냅니다.

함정 증상 고침
sin 부호를 CSS 감각으로 반원이 아래로 뒤집힘 y 축이 아래로 자라므로 CY - r*sin(rad)
툴팁을 카드 위에 절대 배치 폰 폭에서 화면 37px 넘침 그래프 안쪽 + 세로 스택
루프 끝 되감기 poster 가 빈 카드로 뽑힘 완성 96% 유지·복귀 98%

그려 놓은 path 를 사람이 화면에서 직접 고쳐 쓰게 하려면 코드 에디터 만들기의 편집 부품이 그 자리를 받습니다. 그래프 아홉 개의 압축 비밀번호는 s6hc9dw3 입니다. 풀면 항목마다 브라우저에 바로 여는 vanilla 판과 컴포넌트로 붙이는 React 판이 짝으로 들어 있습니다.

접근성

그래프는 색만으로 값을 말하면 안 되므로 아홉 개 전부 role="img" 와 값이 요약된 aria-label 을 붙였고, 스크린리더용 데이터 표를 fixed 로 화면 밖에 두어 소리로는 전체 수치를 읽게 합니다. 눈금·범례·툴팁이 문자로 값을 다시 말하는 것도 같은 이유입니다. prefers-reduced-motion 에서는 미리보기 루프를 끄고 그래프가 다 그려진 최종 상태로 점프합니다 — 게이지(09)는 바늘이 68% 각도에 선 채로 멈춥니다.

FAQ

왜 Chart.js 대신 SVG 로 직접 그리나요?

빌드 결과물이 스크립트 없는 정적 파일이 되기 때문입니다. SVG 좌표 계산은 서버나 번들러 없이 브라우저에서 열리는 파일 하나로 끝나고, 애니메이션도 CSS 만으로 돕니다. 축 스케일 자동 계산이나 툴팁 정렬 같은 편의는 직접 구현해야 하지만, 아홉 개 모두 그 분량이 스케일 함수 두 개 안팎입니다(MDN SVG path 문서).

stroke-dashoffset 애니메이션은 성능에 무겁지 않나요?

한 번에 몇 개 안 되는 path 라면 잴 만합니다. 이 편의 루프는 12fps 로 24장을 뽑아 측정했는데 연속 프레임 사이 변화가 가장 큰 트리맵(08)도 캔버스의 23.879% 를 넘지 않았고, 히트맵(05)의 42칸 지연도 22/23 프레임 안에서 고르게 분산됩니다 — 누적 영역(07)의 33.087% 는 루프 전체의 누적면적이지 한 프레임의 값이 아닙니다. 다만 top·width 처럼 레이아웃을 다시 계산하는 속성과 섞으면 이야기가 달라지니, 그림을 움직일 때는 path 의 stroke 와 transform 만 씁니다.

반응형에서 css 원형 그래프 크기는 어떻게 맞추나요?

viewBox 하나로 끝납니다. 좌표는 항목마다 정한 viewBox(폭 전체를 쓰는 그래프는 440) 단위로 계산하고 CSS 에서 width: 100%; height: auto 만 주면 컨테이너 폭을 따라 늘어납니다. 좁은 화면에서 라벨이 겹칠 때만 미디어쿼리로 글자 크기를 줄이거나 홀수 달처럼 건너뛰어 표시합니다 — 이 편의 320px 검증에서 아홉 개 전부 넘침 없이 들어갔습니다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.