Back to HyperFrames Templates
Dual Area Chart
Two series draw on together over a grid, each with a glowing leading dot
Description
A comparison chart: two lines draw across a faint grid with soft gradient areas beneath and a bright dot riding each leading edge, under a small legend. Both series are normalised inline SVG paths driven by SMIL, so the two lines, their fills and their dots stay perfectly in sync — a clean, seamless loop with no chart library and no JS.
Replace the `d` of each `#lineA`/`#lineB` path with your own points (keep `pathLength="1000"`), relabel the legend and recolour from `:root`. Ideal for this-year-vs-last, plan-vs-actual or A/B beats.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Data
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.