Original studyCharts & data
Weekly rhythm
Seven staggered bars make a simple dataset feel alive.
Create a self-contained SVG motion graphic in a single HTML file. ART DIRECTION Create a seven-column weekly activity chart on cobalt (#2139c8). Use relative values .28, .46, .37, .64, .57, .85, 1. Label the bars M T W T F S S. Animate height from a shared baseline with staggered sine phases and cubic ease-out. Use periwinkle bars and one lime final bar. Headline: Small steps. Real progress. Mark the data as illustrative. TECHNICAL RULES - Use a 960 × 600 viewBox (8:5). Scale responsively without cropping. - The loop lasts exactly 6 seconds. Use deterministic, time-based drawing with requestAnimationFrame; do not accumulate frame deltas. - Keep all shapes and text inside the safe area. Use system sans-serif fonts and no external assets, libraries, or network requests. - Use a static representative frame when prefers-reduced-motion is enabled, and include a visible play/pause control. - Pause when the document is hidden. - Return the complete HTML, CSS, and JavaScript, with no omitted sections. DELIVERY Make the text, colors, and example data easy to edit. Explain which values to change. The supplied reference is an original implementation, not proof that any model reproduces this prompt exactly.
An English starting prompt written for this study. The downloadable source is the exact reference implementation.
