CHT-010
Line chart that draws itself
- The line draws in from the left, with the current value riding its end.
Draw the monthly values as a line chart. The line draws in from the left over 2 seconds and the area below fills with a gradient of the same colour. Attach the current value at the end of the line as a speech bubble, and show the growth since the first month large in the top left.
[paste your table here]
The first row is the header. Put CSS and JavaScript in a single HTML file and draw with canvas or SVG, without external libraries. Dark background, crisp numbers and text, and no overlapping text even at phone width. If prefers-reduced-motion is on, show the finished chart without motion.월별 값을 선 그래프로 그려 주세요. 선은 2초 동안 왼쪽부터 그어지고, 아래는 같은 색 그라데이션으로 채워요. 선 끝에는 지금 값을 말풍선으로 붙이고, 왼쪽 위에 첫 달 대비 증가율을 크게 보여 주세요.
[여기에 표 붙여넣기]
첫 줄은 머리글이에요. HTML 파일 하나에 CSS와 JavaScript를 넣고, 외부 라이브러리 없이 canvas나 SVG로 그려 주세요. 어두운 배경에 숫자와 글자는 또렷하게, 휴대폰 폭에서도 글자가 겹치지 않게 해 주세요. prefers-reduced-motion이 켜져 있으면 움직임 없이 다 그려진 차트를 보여 주세요.Blanks
How to use
- Borrow (copy) the prompt.
- Replace the [brackets] with your own content. Type in the fields below and it updates at once.
- Paste it into a new Claude chat and open the HTML file it returns in a browser.
Process
- A scene from the guide "Animated data charts with Claude".
- The preview is drawn on this site to show the scene this prompt makes.







